sass refactoring

7 files changed, 280 insertions, 258 deletions

diff --git a/static/css/style.css b/static/css/style.css
index 3d89e5e..e91623f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -425,6 +425,32 @@ img {
     -ms-interpolation-mode: bicubic;
 }
 
+body {
+    -webkit-animation: bugfix infinite 1s;
+}
+
+@-webkit-keyframes bugfix {
+    from {
+        padding: 0;
+    }
+    to {
+        padding: 0;
+    }
+}
+
+.visua11y-hidden {
+    border: 0;
+    clip: rect(1px 1px 1px 1px);
+    /* for Internet Explorer */
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    padding: 0;
+    position: absolute;
+    overflow: hidden;
+}
+
 a {
     color: #C44741;
 }
@@ -463,70 +489,6 @@ code {
     padding: .5em 1.5em;
 }
 
-.visua11y-hidden {
-    border: 0;
-    clip: rect(1px 1px 1px 1px);
-    /* for Internet Explorer */
-    clip: rect(1px, 1px, 1px, 1px);
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    padding: 0;
-    position: absolute;
-    overflow: hidden;
-}
-
-body {
-    -webkit-animation: bugfix infinite 1s;
-}
-
-@-webkit-keyframes bugfix {
-    from {
-        padding: 0;
-    }
-    to {
-        padding: 0;
-    }
-}
-
-.menu input[type=checkbox] {
-    position: absolute;
-    top: -9999px;
-    left: -9999px;
-}
-
-.menu label {
-    cursor: pointer;
-    user-select: none;
-    color: #C44741;
-    line-height: 1;
-    text-transform: uppercase;
-    position: absolute;
-    top: 1.5em;
-    right: 1.5em;
-}
-
-.menu label:hover {
-    color: #77201C;
-}
-
-.menu label:before {
-    color: #FFFFFF;
-    content: "\2261";
-    display: inline-block;
-    font-size: 1.5em;
-    font-weight: bold;
-    margin-right: .25em;
-}
-
-.menu .menu__items {
-    display: none;
-}
-
-.menu input:checked ~ .menu__items {
-    display: block;
-}
-
 html {
     background-color: #FFFFFF;
 }
@@ -665,6 +627,102 @@ html {
     margin-right: 0.5em;
 }
 
+@media screen and (min-width: 60em) {
+    .header-wrapper {
+        background-color: #E5E1D1;
+        display: table;
+        padding: .5em 1.5em;
+        width: 100%;
+    }
+    .header-wrapper .headline {
+        padding: 0;
+    }
+    .header-wrapper .headline,
+    .header-wrapper .menu {
+        display: table-cell;
+        vertical-align: middle;
+    }
+    .header-wrapper .headline {
+        text-align: left;
+    }
+    .header-wrapper .menu {
+        text-align: right;
+    }
+}
+
+.menu input[type=checkbox] {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+}
+
+.menu label {
+    cursor: pointer;
+    user-select: none;
+    color: #C44741;
+    line-height: 1;
+    text-transform: uppercase;
+    position: absolute;
+    top: 1.5em;
+    right: 1.5em;
+}
+
+.menu label:hover {
+    color: #77201C;
+}
+
+.menu label:before {
+    color: #FFFFFF;
+    content: "\2261";
+    display: inline-block;
+    font-size: 1.5em;
+    font-weight: bold;
+    margin-right: .25em;
+}
+
+.menu .menu__items {
+    display: none;
+}
+
+.menu input:checked ~ .menu__items {
+    display: block;
+}
+
+@media screen and (min-width: 60em) {
+    .menu label {
+        display: none;
+    }
+    .menu .menu__items {
+        display: block;
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+    }
+    .menu .menu__items li {
+        display: inline-block;
+    }
+    .menu .menu__items li + li {
+        margin-left: .5em;
+    }
+    .menu .menu__items li + li::before {
+        color: #FFFFFF;
+        content: "|";
+        display: inline-block;
+        margin-right: 0.5em;
+    }
+    .menu .menu__items a {
+        background-color: transparent;
+        color: #C44741;
+        display: inline;
+        padding: 0;
+        text-decoration: none;
+    }
+    .menu .menu__items a:hover {
+        background-color: transparent;
+        color: #77201C;
+    }
+}
+
 html {
     color: #2C343B;
     font-size: 1em;
@@ -738,58 +796,6 @@ h2, h4, h6 {
     h6 {
         font-size: 1em;
     }
-    .header-wrapper {
-        background-color: #E5E1D1;
-        display: table;
-        padding: .5em 1.5em;
-        width: 100%;
-    }
-    .header-wrapper .headline {
-        padding: 0;
-    }
-    .header-wrapper .headline,
-    .header-wrapper .menu {
-        display: table-cell;
-        vertical-align: middle;
-    }
-    .header-wrapper .headline {
-        text-align: left;
-    }
-    .header-wrapper .menu {
-        text-align: right;
-    }
-    .menu label {
-        display: none;
-    }
-    .menu .menu__items {
-        display: block;
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-    }
-    .menu .menu__items li {
-        display: inline-block;
-    }
-    .menu .menu__items li + li {
-        margin-left: .5em;
-    }
-    .menu .menu__items li + li::before {
-        color: #FFFFFF;
-        content: "|";
-        display: inline-block;
-        margin-right: 0.5em;
-    }
-    .menu .menu__items a {
-        background-color: transparent;
-        color: #C44741;
-        display: inline;
-        padding: 0;
-        text-decoration: none;
-    }
-    .menu .menu__items a:hover {
-        background-color: transparent;
-        color: #77201C;
-    }
 }
 
 /*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/static/sass/core.scss b/static/sass/core.scss
index 6030ee9..2c88091 100644
--- a/static/sass/core.scss
+++ b/static/sass/core.scss
@@ -6,6 +6,7 @@
         "vendor/normalize",
         "custom/global",
         "custom/layout",
-        "custom/typography",
-        "custom/breakpoints"
+        "custom/navigation",
+        "custom/typography"
+        // "custom/breakpoints"
 ;
\ No newline at end of file
diff --git a/static/sass/custom/breakpoints.scss b/static/sass/custom/breakpoints.scss
index 05f05a4..0a6bfa3 100644
--- a/static/sass/custom/breakpoints.scss
+++ b/static/sass/custom/breakpoints.scss
@@ -4,86 +4,10 @@
 
 // Medium breakpoint
 @media screen and (min-width: 40em) {
-    h1 { font-size: $fontSize * 3; }
-    h2 { font-size: $fontSize * 2.5; }
-    h3 { font-size: $fontSize * 2; }
-    h4 { font-size: $fontSize * 1.75; }
-    h5 { font-size: $fontSize * 1.25; }
-    h6 { font-size: $fontSize * 1; }
 
 }
 
 // Desktop breakpoint
 @media screen and (min-width: 60em) {
-    h1 { font-size: $fontSize * 4.5; }
-    h2 { font-size: $fontSize * 3; }
-    h3 { font-size: $fontSize * 2.5; }
-    h4 { font-size: $fontSize * 2; }
-    h5 { font-size: $fontSize * 1.5; }
-    h6 { font-size: $fontSize * 1; }
 
-    // header
-    .header-wrapper {
-        background-color: $neutral;
-        display: table;
-        padding: .5em 1.5em;
-        width: 100%;
-        .headline {
-            padding: 0;
-        }
-
-        .headline,
-        .menu {
-            display: table-cell;
-            vertical-align: middle;
-        }
-
-        .headline {
-            text-align: left;
-        }
-
-        .menu {
-            text-align: right;
-        }
-    }
-
-    // Menu
-    .menu {
-
-        label {
-            display: none;
-        }
-
-        .menu__items {
-            display: block;
-            list-style-type: none;
-            margin: 0;
-            padding: 0;
-
-            li {
-                display: inline-block;
-            }
-
-            li + li {
-                margin-left: .5em;
-            }
-
-            li + li::before {
-                @include  _separator-before($white, "|");
-            }
-
-            a {
-                background-color: transparent;
-                color: $contrast;
-                display: inline;
-                padding: 0;
-                text-decoration: none;
-            }
-
-            a:hover {
-                background-color: transparent;
-                color: $shadow;
-            }
-        }
-    }
 }
diff --git a/static/sass/custom/global.scss b/static/sass/custom/global.scss
index 5abb292..1067e07 100644
--- a/static/sass/custom/global.scss
+++ b/static/sass/custom/global.scss
@@ -13,7 +13,27 @@
 
 img { -ms-interpolation-mode: bicubic; }
 
+// Fix for Android
+body {
+    -webkit-animation: bugfix infinite 1s;
+}
+
+@-webkit-keyframes bugfix {
+    from { padding: 0; }
+    to { padding: 0; }
+}
+
+// Helpers
 
+.visua11y-hidden {
+    border: 0;
+    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
+    clip: rect(1px, 1px, 1px, 1px);
+    height: 1px; width: 1px;
+    margin: -1px; padding: 0;
+    position: absolute;
+    overflow: hidden;
+}
 
 // Links
 
@@ -42,66 +62,3 @@ code {
     padding: .5em 1.5em;
 
 }
-
-// Helpers
-
-.visua11y-hidden {
-    border: 0;
-    clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
-    clip: rect(1px, 1px, 1px, 1px);
-    height: 1px; width: 1px;
-    margin: -1px; padding: 0;
-    position: absolute;
-    overflow: hidden;
-}
-
-// Nav
-// Fix for Android
-body {
-    -webkit-animation: bugfix infinite 1s;
-}
-
-@-webkit-keyframes bugfix {
-    from { padding: 0; }
-    to { padding: 0; }
-}
-
-.menu {
-    input[type=checkbox] {
-        position: absolute;
-        top: -9999px;
-        left: -9999px;
-    }
-
-    label {
-        cursor: pointer;
-        user-select: none;
-
-        color: $contrast;
-        line-height: 1;
-        text-transform: uppercase;
-        position: absolute;
-        top: 1.5em; right: 1.5em;
-    }
-
-    label:hover {
-        color: $shadow;
-    }
-
-    label:before {
-        color: $white;
-        content: "\2261";
-        display: inline-block;
-        font-size: $fontSize * 1.5;
-        font-weight: bold;
-        margin-right: .25em;
-    }
-
-    .menu__items {
-        display: none;
-    }
-
-    input:checked ~ .menu__items {
-        display: block;
-    }
-}
diff --git a/static/sass/custom/layout.scss b/static/sass/custom/layout.scss
index 113b61c..23859ab 100644
--- a/static/sass/custom/layout.scss
+++ b/static/sass/custom/layout.scss
@@ -13,6 +13,7 @@ html {
         background-color: $neutral;
         padding: .5em 1.5em;
     }
+
     a {
         text-decoration: none;
     }
@@ -34,7 +35,6 @@ html {
 
     a:hover {
         background-color: $shadow;
-
     }
 }
 
@@ -132,4 +132,33 @@ html {
     .pagination__prev + .pagination__next::before {
         @include  _separator-before($neutral, "|");
     }
+}
+
+// Desktop breakpoint
+@media screen and (min-width: 60em) {
+    // header
+    .header-wrapper {
+        background-color: $neutral;
+        display: table;
+        padding: .5em 1.5em;
+        width: 100%;
+        
+        .headline {
+            padding: 0;
+        }
+
+        .headline,
+        .menu {
+            display: table-cell;
+            vertical-align: middle;
+        }
+
+        .headline {
+            text-align: left;
+        }
+
+        .menu {
+            text-align: right;
+        }
+    }
 }
\ No newline at end of file
diff --git a/static/sass/custom/navigation.scss b/static/sass/custom/navigation.scss
new file mode 100644
index 0000000..b37bf5d
--- /dev/null
+++ b/static/sass/custom/navigation.scss
@@ -0,0 +1,85 @@
+////
+/// Navigation
+////
+
+.menu {
+    input[type=checkbox] {
+        position: absolute;
+        top: -9999px;
+        left: -9999px;
+    }
+
+    label {
+        // a like
+        cursor: pointer;
+        user-select: none;
+        // Custom
+        color: $contrast;
+        line-height: 1;
+        text-transform: uppercase;
+        position: absolute;
+        top: 1.5em; right: 1.5em;
+    }
+
+    label:hover {
+        color: $shadow;
+    }
+
+    label:before {
+        color: $white;
+        content: "\2261";
+        display: inline-block;
+        font-size: $fontSize * 1.5;
+        font-weight: bold;
+        margin-right: .25em;
+    }
+
+    .menu__items {
+        display: none;
+    }
+
+    input:checked ~ .menu__items {
+        display: block;
+    }
+}
+
+// Desktop breakpoint
+@media screen and (min-width: 60em) {
+    .menu {
+        label {
+            display: none;
+        }
+
+        .menu__items {
+            display: block;
+            list-style-type: none;
+            margin: 0;
+            padding: 0;
+
+            li {
+                display: inline-block;
+            }
+
+            li + li {
+                margin-left: .5em;
+            }
+
+            li + li::before {
+                @include  _separator-before($white, "|");
+            }
+
+            a {
+                background-color: transparent;
+                color: $contrast;
+                display: inline;
+                padding: 0;
+                text-decoration: none;
+            }
+
+            a:hover {
+                background-color: transparent;
+                color: $shadow;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/static/sass/custom/typography.scss b/static/sass/custom/typography.scss
index fe3d908..9d7df41 100644
--- a/static/sass/custom/typography.scss
+++ b/static/sass/custom/typography.scss
@@ -34,3 +34,23 @@ h2, h4, h6 {
     line-height: $baseline - .3;
     color: $light;
 }
+
+// Medium breakpoint
+@media screen and (min-width: 40em) {
+    h1 { font-size: $fontSize * 3; }
+    h2 { font-size: $fontSize * 2.5; }
+    h3 { font-size: $fontSize * 2; }
+    h4 { font-size: $fontSize * 1.75; }
+    h5 { font-size: $fontSize * 1.25; }
+    h6 { font-size: $fontSize * 1; }
+}
+
+// Desktop breakpoint
+@media screen and (min-width: 60em) {
+    h1 { font-size: $fontSize * 4.5; }
+    h2 { font-size: $fontSize * 3; }
+    h3 { font-size: $fontSize * 2.5; }
+    h4 { font-size: $fontSize * 2; }
+    h5 { font-size: $fontSize * 1.5; }
+    h6 { font-size: $fontSize * 1; }
+}