mirror/feather
1
0
Fork 0
mirror of https://github.com/feathericons/feather.git synced 2023-08-10 21:13:24 +03:00
Code Issues Projects Releases Wiki Activity

Style header

Browse Source
This commit is contained in:
Cole Bemis 2017-02-26 12:27:25 -08:00
parent 30dcf87cbe
commit 1e30c63b1a
3 changed files with 130 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
_includes/header.html
View File

@ -1,6 +1,12 @@
<header> <header class="section header">
<h1>Feather</h1> <div class="container header-container">
<p>Simply beautiful open source icons</p> <div>
<a href="#">Download</a> <h1 class="title">Feather</h1>
<a href="#">Tweet</a> <p class="description">Simply beautiful open source icons</p>
</div>
<div class="header-button-group">
<a class="button button-primary" href="#">Download</a>
<a class="button button-secondary" href="#">Tweet</a>
</div>
</div>
</header> </header>

1
index.html
View File

@ -6,6 +6,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Feather</title> <title>Feather</title>
<link href="https://fonts.googleapis.com/css?family=Rubik:300,400" rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
</head> </head>
<body> <body>

118
style.scss
View File

@ -1,2 +1,120 @@
--- ---
--- ---
/* Variables */
$color-primary: black;
$color-secondary: white;
$border-radius: 0.375rem;
/* Mixins */
@mixin for-tablet-up {
@media (min-width: 640px) {
@content;
}
}
/* General */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
margin: 0;
font-family: "Rubik", sans-serif;
-webkit-font-smoothing: antialiased;
}
a {
text-decoration: none;
color: currentColor;
}
.section {
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 90%;
max-width: 64rem;
}
.button {
display: inline-block;
padding: 1rem 1.5rem;
border-radius: $border-radius;
border: 1px solid transparent;
}
.button-primary {
color: $color-secondary;
background-color: $color-primary;
}
.button-secondary {
border-color: $color-primary;
}
/* Header */
.header {
padding: 4rem 0;
border-bottom: 1px solid $color-primary;
text-align: center;
@include for-tablet-up {
text-align: left;
}
}
.header-container {
display: flex;
flex-direction: column;
justify-content: space-between;
@include for-tablet-up {
flex-direction: row;
align-items: center;
}
}
.title {
margin: 0 0 0.5rem;
font-size: 2rem;
font-weight: 300;
}
.description {
margin: 0;
}
.header-button-group {
display: flex;
flex-direction: column;
margin-top: 4rem;
@include for-tablet-up {
flex-direction: row-reverse;
margin-top: 0;
.button {
margin-left: 1rem;
}
}
.button + .button {
margin-top: 1rem;
@include for-tablet-up {
margin-top: 0;
}
}
}