From 7117f4e0c49f086c3dbec09a8b39f153625bef09 Mon Sep 17 00:00:00 2001 From: Mark Moser Date: Tue, 22 Aug 2017 18:56:58 -0500 Subject: [PATCH] layout changes --- site/assets/scss/components/_fifty.scss | 3 +- site/assets/scss/components/_hero.scss | 17 +---- site/assets/scss/elements/_layout.scss | 66 ++++------------ site/assets/scss/elements/_typography.scss | 1 - site/pages/styleguide.hbs | 89 +++++++++++----------- 5 files changed, 66 insertions(+), 110 deletions(-) diff --git a/site/assets/scss/components/_fifty.scss b/site/assets/scss/components/_fifty.scss index 63f16e8..7561b1d 100644 --- a/site/assets/scss/components/_fifty.scss +++ b/site/assets/scss/components/_fifty.scss @@ -1,13 +1,14 @@ .fifty { display: flex; flex-wrap: wrap; + align-items: center; > * { flex: 1 1 auto; margin: $gutter 0; } - @media screen and (min-width: 768px) { + @media screen and (min-width: 650px) { flex-wrap: nowrap; > * { diff --git a/site/assets/scss/components/_hero.scss b/site/assets/scss/components/_hero.scss index 1f12909..99c7bf2 100644 --- a/site/assets/scss/components/_hero.scss +++ b/site/assets/scss/components/_hero.scss @@ -4,18 +4,15 @@ align-content: center; align-items: center; justify-content: center; - margin: 0 0 ($gutter * 2); background-repeat: no-repeat; background-position: center center; background-size: cover; - padding: 0; height: 250px; h1 { flex: 1 1 auto; background-color: rgba($blue, 0.75); padding: $gutter; - width: auto; text-align: center; color: $copy-light; } @@ -42,20 +39,10 @@ } } -@media screen and (min-width: 426px) { +@media screen and (min-width: 900px) { .hero { h1 { - flex: 0 0 auto; - width: 425px; - } - } -} - -@media screen and (min-width: 768px) { - .hero { - h1 { - width: calc(100% * 0.809); - max-width: 860px; + padding: $gutter calc((100% - 850px) / 2); text-align: inherit; } } diff --git a/site/assets/scss/elements/_layout.scss b/site/assets/scss/elements/_layout.scss index 8366380..c95e9e5 100644 --- a/site/assets/scss/elements/_layout.scss +++ b/site/assets/scss/elements/_layout.scss @@ -2,70 +2,36 @@ body { min-width: 300px; } -header { +header, +main { margin: 0; padding: 0; } +section { + margin-bottom: $gutter; + padding: $gutter; + + &:nth-of-type(even) { + background-color: $light-grey; + } +} + footer { margin: 0; padding: 0 $gutter; } -main { - margin: 0 $gutter; - padding: 0; -} +@media screen and (min-width: 900px) { -section { - margin: ($gutter * 2) 0; - - &:nth-of-type(even) { - margin-right: -$gutter; - margin-left: -$gutter; - background-color: $light-grey; - padding: $gutter; - } -} - -@media screen and (min-width: 426px) { - main { - margin: 0 auto; - width: 100%; - } - - footer, section { - padding: $gutter calc((100% - 425px) / 2); - - &:nth-of-type(even) { - padding: $gutter calc(((100% - 425px) / 2) + #{$gutter}); - } - } -} - -@media screen and (min-width: 768px) { - footer, - main { - width: calc(100% * 0.809); - max-width: 860px; + padding: ($gutter * 2) calc((100% - 850px) / 2); + width: 850px; } footer { - margin: 0 auto; - padding: 0; - } - - section { - margin: ($gutter * 4) 0; - padding: $gutter 0; - width: auto; - - &:nth-of-type(even) { - margin-right: calc(-100% * 0.809 / 2); - margin-left: calc(-100% * 0.809 / 2); - padding: ($gutter * 2) calc(100% * 0.809 / 2); - } + padding: 0 calc((100% - 850px) / 2); + width: 850px; } } diff --git a/site/assets/scss/elements/_typography.scss b/site/assets/scss/elements/_typography.scss index 54dc332..244c9f5 100644 --- a/site/assets/scss/elements/_typography.scss +++ b/site/assets/scss/elements/_typography.scss @@ -10,7 +10,6 @@ h1 { @include font-roboto; margin: 0 0 ($gutter / 2); padding: 8px 0; - width: 100%; font-size: 40px; font-weight: 300; } diff --git a/site/pages/styleguide.hbs b/site/pages/styleguide.hbs index a66a486..d8a9d09 100644 --- a/site/pages/styleguide.hbs +++ b/site/pages/styleguide.hbs @@ -6,53 +6,56 @@ theme: orange --- -

Looking at styling for an h1

-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

-

Looking at styling for an h2

-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

-

Looking at styling for an h3

-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

- -

Looking at styling for an h4

-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

-
Looking at styling for an h5
-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

-
Looking at styling for an h6
-

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+
-Do a Thing! -Do another thing +

Looking at styling for an h1

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+

Looking at styling for an h2

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+

Looking at styling for an h3

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+ +

Looking at styling for an h4

+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+
Looking at styling for an h5
+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

+
Looking at styling for an h6
+

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui. Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

-

Colors

+ Do a Thing! + Do another thing -
-
-
-
-
-
-
-
-
-
-
-
-
+

Colors

+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-

Code Samples

- - function thing1(thing2) { - var thing3 = 'some default value'; - return thing2 + thing3; - } - +

Code Samples

+ + function thing1(thing2) { + var thing3 = 'some default value'; + return thing2 + thing3; + } + +