From 1e30c63b1ae51934ee68f898aa7f28fdacfbdbfc Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Sun, 26 Feb 2017 12:27:25 -0800 Subject: [PATCH] Style header --- _includes/header.html | 16 ++++-- index.html | 1 + style.scss | 118 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 130 insertions(+), 5 deletions(-) diff --git a/_includes/header.html b/_includes/header.html index 15268c3..5b5400a 100644 --- a/_includes/header.html +++ b/_includes/header.html @@ -1,6 +1,12 @@ -
-

Feather

-

Simply beautiful open source icons

- Download - Tweet +
+
+
+

Feather

+

Simply beautiful open source icons

+
+
+ Download + Tweet +
+
diff --git a/index.html b/index.html index 27cbe38..82dbfd9 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,7 @@ Feather + diff --git a/style.scss b/style.scss index a845151..93a48ad 100644 --- 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; + } + } +}