source: css/mini/_core.scss@ 5c9a606

Last change on this file since 5c9a606 was 5c9a606, checked in by w96k <w96k.ru@…>, on May 5, 2019 at 2:16:42 AM

Delete Hugo; Add basic haunt blog
  • Property mode set to 100644
File size: 11.2 KB
Line 
1/*
2 Browsers resets and base typography.
3*/
4@function rempx ($size) { @return 1px/$size;} // Keep this, the generator breaks otherwise
5// TODO: Add fluid type and test thoroughly
6$base-root-font-size: 16px !default; // Root font sizing for all elements (`px` only)
7$_apply-defaults-to-all: true !default; // [Hidden] Apply defaults to all elements? (boolean)
8$__1px: rempx($base-root-font-size) * 1rem !default; // [Calculated] Calculated rem value of `1px`
9$base-font-family: '-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Ubuntu, \"Helvetica Neue\", Helvetica, sans-serif' !default; // Font stack for all elements
10$base-line-height: 1.5 !default; // Line height for most elements
11$base-font-size: 1rem !default; // Font sizing for all elements
12$_body-margin: 0 !default; // [Hidden] Margin for body
13$fore-color: #111 !default; // Text & foreground color
14$secondary-fore-color: #444 !default; // Secondary text & foreground color
15$back-color: #f8f8f8 !default; // Background color
16$secondary-back-color: #f0f0f0 !default; // Secondary background color
17$blockquote-color: #f57c00 !default; // <blockquote> sidebar and quotation color
18$pre-color: #1565c0 !default; // <pre> sidebar color
19$border-color: #aaa !default; // Border color
20$secondary-border-color: #ddd !default; // Secondary border color
21$heading-line-height: 1.2 !default; // Line height for headings
22$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
23$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings
24$subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
25$universal-margin: 0.5rem !default; // Universal margin for the most elements
26$universal-padding: 0.5rem !default; // Universal padding for the most elements
27$universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
28$universal-box-shadow: none !default; // Universal box-shadow for most elements
29$small-font-size: 0.75em !default; // Font sizing for <small> elements
30$heading-font-weight: 500 !default; // Font weight for headings
31$bold-font-weight: 700 !default; // Font weight for <b> and <strong>
32$horizontal-rule-line-height: 1.25em !default; // <hr> line height
33$blockquote-quotation-size: 3rem !default; // Font size for the quotation of <blockquote>
34$blockquote-cite-size: 0.75em !default; // Font size for the [cite] of <blockquote>
35$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
36$code-font-size: 0.85em !default; // Font size for <code>, <kbd>
37$small-element-font-size: 0.75em !default; // Font size for <small>, <sub>, <sup>
38$sup-top: -0.5em !default; // <sup> top
39$sub-bottom: -0.25em !default; // <sub> bottom
40$a-link-color: #0277bd !default; // Color for <a>:link
41$a-visited-color: #01579b !default; // Color for <a>:visited
42// CSS variable name definitions [exercise caution if modifying these]
43$fore-color-var: '--fore-color' !default;
44$secondary-fore-color-var: '--secondary-fore-color' !default;
45$back-color-var: '--back-color' !default;
46$secondary-back-color-var: '--secondary-back-color' !default;
47$blockquote-color-var: '--blockquote-color' !default;
48$pre-color-var: '--pre-color' !default;
49$border-color-var: '--border-color' !default;
50$secondary-border-color-var: '--secondary-border-color' !default;
51$heading-ratio-var: '--heading-ratio' !default;
52$universal-margin-var: '--universal-margin' !default;
53$universal-padding-var: '--universal-padding' !default;
54$universal-border-radius-var: '--universal-border-radius' !default;
55$universal-box-shadow-var: '--universal-box-shadow' !default;
56$a-link-color-var: '--a-link-color' !default;
57$a-visited-color-var: '--a-visited-color' !default;
58/* Core module CSS variable definitions */
59:root {
60 #{$fore-color-var}: $fore-color;
61 #{$secondary-fore-color-var}: $secondary-fore-color;
62 #{$back-color-var}: $back-color;
63 #{$secondary-back-color-var}: $secondary-back-color;
64 #{$blockquote-color-var}: $blockquote-color;
65 #{$pre-color-var}: $pre-color;
66 #{$border-color-var}: $border-color;
67 #{$secondary-border-color-var}: $secondary-border-color;
68 #{$heading-ratio-var}: $heading-ratio;
69 #{$universal-margin-var}: $universal-margin;
70 #{$universal-padding-var}: $universal-padding;
71 #{$universal-border-radius-var}: $universal-border-radius;
72 #{$a-link-color-var} : $a-link-color;
73 #{$a-visited-color-var} : $a-visited-color;
74 @if $universal-box-shadow != none {
75 #{$universal-box-shadow-var}: $universal-box-shadow;
76 }
77}
78html {
79 font-size: $base-root-font-size; // Set root's font sizing.
80}
81a, b, del, em, i, ins, q, span, strong, u {
82 font-size: 1em; // Fix for elements inside headings not displaying properly.
83}
84
85@if $_apply-defaults-to-all {
86 html, * {
87 font-family: #{$base-font-family};
88 line-height: $base-line-height;
89 // Prevent adjustments of font size after orientation changes in mobile.
90 -webkit-text-size-adjust: 100%;
91 }
92 * {
93 font-size: $base-font-size;
94 }
95}
96@else {
97 html {
98 font-family: #{$base-font-family};
99 line-height: $base-line-height;
100 // Prevent adjustments of font size after orientation changes in mobile.
101 -webkit-text-size-adjust: 100%;
102 }
103}
104
105body {
106 margin: $_body-margin;
107 color: var(#{$fore-color-var});
108 background: var(#{$back-color-var});
109}
110
111// Correct display for Edge & Firefox.
112details {
113 display: block;
114}
115
116// Correct display in all browsers.
117summary {
118 display: list-item;
119}
120
121// Abbreviations
122abbr[title] {
123 border-bottom: none; // Remove bottom border in Firefox 39-.
124 text-decoration: underline dotted; // Opinionated style-fix for all browsers.
125}
126
127// Show overflow in Edge.
128input {
129 overflow: visible;
130}
131
132// Make images responsive by default.
133img {
134 max-width: 100%;
135 height: auto;
136}
137
138h1, h2, h3, h4, h5, h6 {
139 line-height: $heading-line-height;
140 margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
141 font-weight: $heading-font-weight;
142 small {
143 color: var(#{$secondary-fore-color-var});
144 display: block;
145 @if $subheading-top-margin != 0 {
146 margin-top: $subheading-top-margin;
147 }
148 @if $subheading-font-size != $small-font-size {
149 font-size: $subheading-font-size;
150 }
151 }
152}
153
154h1 {
155 font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
156}
157h2 {
158 font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
159}
160h3 {
161 font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
162}
163h4 {
164 font-size: calc(1rem * var(#{$heading-ratio-var}));
165}
166h5 {
167 font-size: 1rem;
168}
169h6 {
170 font-size: calc(1rem / var(#{$heading-ratio-var}));
171}
172
173p {
174 margin: var(#{$universal-margin-var});
175}
176
177ol, ul {
178 margin: var(#{$universal-margin-var});
179 padding-left: calc(2 * var(#{$universal-margin-var}));
180}
181
182b, strong {
183 font-weight: $bold-font-weight;
184}
185
186hr {
187 // Fixes and defaults for styling
188 box-sizing: content-box;
189 border: 0;
190 // Actual styling using variables
191 line-height: $horizontal-rule-line-height;
192 margin: var(#{$universal-margin-var});
193 height: $__1px;
194 background: linear-gradient(to right, transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent);
195}
196
197blockquote { // Doesn't have a back color by default, can be added manually.
198 display: block;
199 position: relative;
200 font-style: italic;
201 color: var(#{$secondary-fore-color-var});
202 margin: var(#{$universal-margin-var});
203 padding: calc(3 * var(#{$universal-padding-var}));
204 border: $__1px solid var(#{$secondary-border-color-var});
205 border-left: 6*$__1px solid var(#{$blockquote-color-var});
206 border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
207 @if $universal-box-shadow != none {
208 box-shadow: var(#{$universal-box-shadow-var});
209 }
210 &:before {
211 position: absolute;
212 top: calc(0rem - var(#{$universal-padding-var}));
213 left: 0;
214 font-family: sans-serif;
215 font-size: $blockquote-quotation-size;
216 font-weight: 700;
217 content: "\201c";
218 color: var(#{$blockquote-color-var});
219 }
220 &[cite]:after{
221 font-style: normal;
222 font-size: $blockquote-cite-size;
223 font-weight: 700;
224 content: "\a— " attr(cite);
225 white-space: pre;
226 }
227}
228
229code, kbd, pre, samp {
230 font-family: #{$code-font-family}; // Display fix should be applied manually!
231 font-size: $code-font-size;
232}
233
234code { // No border color by default and fore color is the default for text, can be altered manually.
235 background: var(#{$secondary-back-color-var});
236 border-radius: var(#{$universal-border-radius-var});
237 // This could be a bit counterintuitive and burden the codebase a bit, look into it again?
238 padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
239 @if $universal-box-shadow != none {
240 box-shadow: var(#{$universal-box-shadow-var});
241 }
242}
243
244kbd { // No border color by default, can be altered manually.
245 background: var(#{$fore-color-var});
246 color: var(#{$back-color-var});
247 border-radius: var(#{$universal-border-radius-var});
248 // This could be a bit counterintuitive and burden the codebase a bit, look into it again?
249 padding: calc(var(#{$universal-padding-var}) / 4) calc(var(#{$universal-padding-var}) / 2);
250 @if $universal-box-shadow != none {
251 box-shadow: var(#{$universal-box-shadow-var});
252 }
253}
254
255pre { // Fore color is the default, can be altered manually.
256 overflow: auto; // Responsiveness
257 background: var(#{$secondary-back-color-var});
258 padding: calc(1.5 * var(#{$universal-padding-var}));
259 margin: var(#{$universal-margin-var});
260 border: $__1px solid var(#{$secondary-border-color-var});
261 border-left: 4*$__1px solid var(#{$pre-color-var});
262 border-radius: 0 var(#{$universal-border-radius-var}) var(#{$universal-border-radius-var}) 0;
263 @if $universal-box-shadow != none {
264 box-shadow: var(#{$universal-box-shadow-var});
265 }
266}
267
268// Prevent elements from affecting the line height in all browsers.
269sup, sub, code, kbd {
270 line-height: 0;
271 position: relative;
272 vertical-align: baseline;
273}
274
275small, sup, sub, figcaption {
276 font-size: $small-element-font-size;
277}
278
279sup {
280 top: $sup-top;
281}
282sub {
283 bottom: $sub-bottom;
284}
285
286figure {
287 margin: var(#{$universal-margin-var});
288}
289figcaption {
290 color: var(#{$secondary-fore-color-var});
291}
292
293a {
294 text-decoration: none;
295 &:link{
296 color: var(#{$a-link-color-var});
297 }
298 &:visited {
299 color: var(#{$a-visited-color-var});
300 }
301 &:hover, &:focus {
302 text-decoration: underline;
303 }
304}
Note: See TracBrowser for help on using the repository browser.