Initial port

[editorial.git] / assets / main / sass / layout / _header.scss

diff --git a/assets/main/sass/layout/_header.scss b/assets/main/sass/layout/_header.scss
index d58c162271e3119c2f861632a4d32d5dccced1ca..3e7a05cdb11ce44370ad580a831b46a00010e94a 100644 (file)
--- a/assets/main/sass/layout/_header.scss
+++ b/assets/main/sass/layout/_header.scss
@@ -1,5 +1,5 @@
 ///\r
-/// Massively by HTML5 UP\r
+/// Editorial by HTML5 UP\r
 /// html5up.net | @ajlkn\r
 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
 ///\r
@@ -7,57 +7,45 @@
 /* Header */\r
 \r
        #header {\r
-               @include color-typography(invert);\r
-               @include vendor('align-items', 'center');\r
                @include vendor('display', 'flex');\r
-               @include vendor('flex-direction', 'column');\r
-               @include vendor('justify-content', 'flex-end');\r
-               @include vendor('pointer-events', 'none');\r
-               @include vendor('user-select', 'none');\r
-               height: 20rem;\r
-               padding-bottom: (_size(padding) * 4);\r
+               border-bottom: solid 5px _palette(accent);\r
+               padding: 6em 0 1em 0;\r
                position: relative;\r
-               text-align: center;\r
-               z-index: 2;\r
+\r
+               > * {\r
+                       @include vendor('flex', '1');\r
+                       margin-bottom: 0;\r
+               }\r
 \r
                .logo {\r
-                       @include vendor('transition', (\r
-                               'border-color #{_duration(transition)} ease-in-out',\r
-                               'color #{_duration(transition)} ease-in-out',\r
-                               'opacity 0.5s ease',\r
-                               'transform 0.5s ease',\r
-                               'visibility 0.5s'\r
-                       ));\r
-                       @include vendor('pointer-events', 'auto');\r
-                       border-style: solid;\r
-                       border-color: _palette(invert, border);\r
-                       border-width: 5px !important;\r
+                       border-bottom: 0;\r
+                       color: inherit;\r
                        font-family: _font(family-heading);\r
-                       font-size: 2.25rem;\r
-                       font-weight: _font(weight-heading);\r
-                       letter-spacing: 0.075em;\r
-                       line-height: 1;\r
-                       padding: 1rem 1.75rem;\r
-                       text-transform: uppercase;\r
-                       visibility: visible;\r
-\r
-                       &:hover {\r
-                               border-color: _palette(invert, accent) !important;\r
-                               color: _palette(invert, accent) !important;\r
-                       }\r
+                       font-size: 1.125em;\r
                }\r
 \r
-               @include breakpoint('<=medium') {\r
-                       height: 14rem;\r
-                       padding-bottom: (_size(padding) * 2);\r
+               .icons {\r
+                       text-align: right;\r
+               }\r
+\r
+               @include breakpoint('<=xlarge') {\r
+                       padding-top: 5em;\r
                }\r
 \r
                @include breakpoint('<=small') {\r
-                       padding-bottom: (_size(padding) * 1.5);\r
+                       padding-top: 6.5em;\r
 \r
                        .logo {\r
-                               font-size: 1.75rem;\r
-                               border-width: 3px !important;\r
+                               font-size: 1.25em;\r
+                               margin: 0;\r
+                       }\r
+\r
+                       .icons {\r
+                               height: (6.25em / 1.25);\r
+                               line-height: (6.25em / 1.25);\r
+                               position: absolute;\r
+                               right: (-0.625em / 1.25);\r
+                               top: 0;\r
                        }\r
                }\r
        }
\ No newline at end of file