Style header

2023-08-10 21:13:24 +03:00 · 2017-02-26 12:27:25 -08:00 · 2017-02-26 12:27:25 -08:00 · 1e30c63b1a
commit 1e30c63b1a
parent 30dcf87cbe
3 changed files with 130 additions and 5 deletions
--- a/_includes/header.html
+++ b/_includes/header.html
@ -1,6 +1,12 @@
-<header>
-  <h1>Feather</h1>
-  <p>Simply beautiful open source icons</p>
-  <a href="#">Download</a>
-  <a href="#">Tweet</a>
+<header class="section header">
+  <div class="container header-container">
+    <div>
+      <h1 class="title">Feather</h1>
+      <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>
--- a/index.html
+++ b/index.html
@ -6,6 +6,7 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Feather</title>
+  <link href="https://fonts.googleapis.com/css?family=Rubik:300,400" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
--- a/style.scss
+++ b/style.scss
@ -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;
+    }
+  }
+}