Initial commit

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

diff --git a/assets/main/sass/layout/_intro.scss b/assets/main/sass/layout/_intro.scss
new file mode 100644 (file)
index 0000000..3b2c6d2
--- /dev/null
+++ b/assets/main/sass/layout/_intro.scss
@@ -0,0 +1,115 @@
+///\r
+/// Massively 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
+\r
+/* Intro */\r
+\r
+       #intro {\r
+               @include color-typography(invert);\r
+               @include color-button(invert);\r
+               @include padding(_size(padding) * 4, _size(padding) * 2);\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('transition', (\r
+                       'opacity 1s ease',\r
+                       'transform 1s ease'\r
+               ));\r
+               position: relative;\r
+               cursor: default;\r
+               text-align: center;\r
+               z-index: 1;\r
+               min-height: 100vh;\r
+\r
+               h1 {\r
+                       font-size: 5rem;\r
+                       line-height: 1;\r
+               }\r
+\r
+               p {\r
+                       font-size: 1.25rem;\r
+                       font-style: italic;\r
+                       margin-top: -0.25rem;\r
+                       text-align: center;\r
+               }\r
+\r
+               & + #header {\r
+                       margin-top: -20rem;\r
+\r
+                       .logo {\r
+                               @include vendor('transform', 'translateY(2rem)');\r
+                               opacity: 0;\r
+                               visibility: hidden;\r
+                       }\r
+               }\r
+\r
+               &.hidden {\r
+                       @include vendor('pointer-events', 'none');\r
+                       @include vendor('transform', 'translateY(2rem)');\r
+                       @include vendor('transition', (\r
+                               'opacity 0.5s ease',\r
+                               'transform 0.5s ease',\r
+                               'visibility 0.5s'\r
+                       ));\r
+                       opacity: 0;\r
+                       visibility: hidden;\r
+\r
+                       & + #header {\r
+                               .logo {\r
+                                       @include vendor('transform', 'translateY(0)');\r
+                                       opacity: 1;\r
+                                       visibility: visible;\r
+                               }\r
+                       }\r
+               }\r
+\r
+               body.is-preload & {\r
+                       @include vendor('transform', 'translateY(2rem)');\r
+                       opacity: 0;\r
+\r
+                       &:not(.hidden) {\r
+                               & + #header + #nav {\r
+                                       @include vendor('transform', 'translateY(4rem)');\r
+                                       opacity: 0;\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('<=medium') {\r
+                       @include padding(_size(padding) * 2, _size(padding) * 2);\r
+                       min-height: 90vh;\r
+\r
+                       p {\r
+                               br {\r
+                                       display: none;\r
+                               }\r
+                       }\r
+\r
+                       & + #header {\r
+                               margin-top: -14rem;\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('<=small') {\r
+                       @include padding(_size(padding) * 1.5, _size(padding) * 1);\r
+                       min-height: 80vh;\r
+\r
+                       h1 {\r
+                               font-size: 3.25rem;\r
+                               line-height: 1.1;\r
+                               margin-bottom: _size(element-margin) * 0.5;\r
+                       }\r
+\r
+                       p {\r
+                               font-size: 1rem;\r
+                               margin-top: 0rem;\r
+                       }\r
+\r
+                       .actions {\r
+                               display: none;\r
+                       }\r
+               }\r
+       }
\ No newline at end of file