Initial commit

[editorial.git] / assets / main / sass / components / _section.scss

diff --git a/assets/main/sass/components/_section.scss b/assets/main/sass/components/_section.scss
new file mode 100644 (file)
index 0000000..0f5d96d
--- /dev/null
+++ b/assets/main/sass/components/_section.scss
@@ -0,0 +1,112 @@
+///\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
+/* Section/Article */\r
+\r
+       section, article {\r
+               &.special {\r
+                       text-align: center;\r
+               }\r
+       }\r
+\r
+       header {\r
+               cursor: default;\r
+\r
+               > .date {\r
+                       display: block;\r
+                       font-size: 0.8rem;\r
+                       height: 1;\r
+                       margin: 0 0 (_size(element-margin) * 0.5) 0;\r
+                       position: relative;\r
+               }\r
+\r
+               > p {\r
+                       font-style: italic;\r
+               }\r
+\r
+               > h1 + p {\r
+                       font-size: 1.1rem;\r
+                       margin-top: -0.5rem;\r
+                       line-height: 2;\r
+               }\r
+\r
+               > h2 + p {\r
+                       font-size: 1rem;\r
+                       margin-top: -0.75rem;\r
+               }\r
+\r
+               > h3 + p {\r
+                       font-size: 0.9rem;\r
+                       margin-top: -0.75rem;\r
+               }\r
+\r
+               > h4 + p {\r
+                       font-size: 0.8rem;\r
+                       margin-top: -0.75rem;\r
+               }\r
+\r
+               &.major {\r
+                       margin: 0 0 (_size(element-margin) * 2) 0;\r
+                       text-align: center;\r
+\r
+                       > :last-child {\r
+                               margin-bottom: 0;\r
+                       }\r
+\r
+                       > p {\r
+                               margin-top: 0;\r
+                               text-align: center;\r
+                       }\r
+\r
+                       > .date {\r
+                               font-size: 1rem;\r
+                               margin: 0 0 (_size(element-margin) * 2) 0;\r
+\r
+                               &:before, &:after {\r
+                                       content: '';\r
+                                       display: block;\r
+                                       position: absolute;\r
+                                       top: 50%;\r
+                                       width: calc(50% - 6rem);\r
+                                       border-top: solid 2px;\r
+                               }\r
+\r
+                               &:before {\r
+                                       left: 0;\r
+                               }\r
+\r
+                               &:after {\r
+                                       right: 0;\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('<=medium') {\r
+                       br {\r
+                               display: none;\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('<=small') {\r
+                       &.major {\r
+                               margin: 0 0 _size(element-margin) 0;\r
+                       }\r
+               }\r
+       }\r
+\r
+       @mixin color-section($p: null) {\r
+               header {\r
+                       &.major {\r
+                               .date {\r
+                                       &:before, &:after {\r
+                                               border-top-color: _palette($p, border);\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+       }\r
+\r
+       @include color-section;
\ No newline at end of file