added dark theme option. It ìs selected automagically based on system choiche of...
[theme-danix.xyz.git] / assets / sass / components / _section.scss
CommitLineData
748286b5 1///\r
2/// Forty by HTML5 UP\r
3/// html5up.net | @ajlkn\r
4/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
5///\r
6\r
7/* Section/Article */\r
8\r
9 section, article {\r
10 &.special {\r
11 text-align: center;\r
12 }\r
13 }\r
14\r
15 header {\r
16 &.major {\r
17 width: -moz-max-content;\r
18 width: -webkit-max-content;\r
19 width: -ms-max-content;\r
20 width: max-content;\r
21 margin-bottom: _size(element-margin);\r
22\r
23 > :first-child {\r
24 margin-bottom: 0;\r
25 width: calc(100% + 0.5em);\r
26\r
27 &:after {\r
28 content: '';\r
cb4379e1 29 background-color: _palette_light(fg-bold);\r
748286b5 30 display: block;\r
31 height: 2px;\r
32 margin: 0.325em 0 0.5em 0;\r
33 width: 100%;\r
cb4379e1 34 @media screen and (prefers-color-scheme: dark) {\r
35 background-color: _palette_dark(fg-bold);\r
36 }\r
748286b5 37 }\r
38 }\r
39\r
40 > p {\r
41 font-size: 0.7em;\r
42 font-weight: _font(weight-bold);\r
43 letter-spacing: _font(letter-spacing-alt);\r
44 margin-bottom: 0;\r
45 text-transform: uppercase;\r
46 }\r
47\r
48 body.is-ie & {\r
49 > :first-child {\r
50 &:after {\r
51 max-width: 9em;\r
52 }\r
53 }\r
54\r
55 > h1 {\r
56 &:after {\r
57 max-width: 100% !important;\r
58 }\r
59 }\r
60 }\r
61 }\r
62\r
63 @include breakpoint('<=small') {\r
64 &.major {\r
65 > p {\r
66 br {\r
67 display: none;\r
68 }\r
69 }\r
70 }\r
71 }\r
72 }