diff --git a/dist/mini-default.css b/dist/mini-default.css
index 09df859..4af3725 100644
--- a/dist/mini-default.css
+++ b/dist/mini-default.css
@@ -7,9 +7,13 @@
/*
Browsers resets and base typography.
*/
+/* Core module CSS variable definitions */
:root {
--fore-color: #212121;
+ --secondary-fore-color: #424242;
--back-color: #f8f8f8;
+ --heading-ratio: 1.19;
+ --side-margin: 0.5rem;
}
html {
@@ -53,3 +57,39 @@ img {
max-width: 100%;
height: auto;
}
+
+h1, h2, h3, h4, h5, h6 {
+ line-height: 1.2;
+ margin: calc(1.5 * var(--side-margin)) var(--side-margin);
+ font-weight: 500;
+}
+
+h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
+ color: var(--secondary-fore-color);
+ display: block;
+ margin-top: -0.25rem;
+}
+
+h1 {
+ font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
+}
+
+h2 {
+ font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
+}
+
+h3 {
+ font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
+}
+
+h4 {
+ font-size: calc(1rem * var(--heading-ratio));
+}
+
+h5 {
+ font-size: 1rem;
+}
+
+h6 {
+ font-size: calc(1rem / var(--heading-ratio));
+}
diff --git a/dist/mini-default.min.css b/dist/mini-default.min.css
index f3c9646..13f06fe 100644
--- a/dist/mini-default.min.css
+++ b/dist/mini-default.min.css
@@ -1 +1 @@
-:root{--fore-color:#212121;--back-color:#f8f8f8}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}
+:root{--fore-color:#212121;--secondary-fore-color:#424242;--back-color:#f8f8f8;--heading-ratio:1.19;--side-margin:.5rem}html{font-size:16px}html,*{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, sans-serif;line-height:1.5;-webkit-text-size-adjust:100%}*{font-size:1rem}body{margin:0;color:var(--fore-color);background:var(--back-color)}details{display:block}summary{display:list-item}abbr[title]{border-bottom:none;text-decoration:underline dotted}input{overflow:visible}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{line-height:1.2;margin:calc(1.5 * var(--side-margin)) var(--side-margin);font-weight:500}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:var(--secondary-fore-color);display:block;margin-top:-.25rem}h1{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h2{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio))}h3{font-size:calc(1rem * var(--heading-ratio) * var(--heading-ratio))}h4{font-size:calc(1rem * var(--heading-ratio))}h5{font-size:1rem}h6{font-size:calc(1rem / var(--heading-ratio))}
diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md
index 6bc1b29..0b6244d 100644
--- a/docs/v3/DEVLOG.md
+++ b/docs/v3/DEVLOG.md
@@ -25,3 +25,8 @@
- Built up the heading elements (`h1` - `h6`), using CSS variables (`--heading-ratio` for universal heading ratio scaling).
- Added `--secondary-fore-color` for things like `small` in `h1`, which is set to `#424242`. Avoided using the term `--fore-color-lighter` as it could cause ambiguity in reverse-color-palette flavors.
- `small` elements in headings are now by defauly displayed in blocks. I haven't seen many use cases for the old style and the codebase could use the cleanup, so there's that.
+
+## 20171018
+
+- Added universal margin variable `--universal-margin` for an easy way to align content and elements.
+- Converted all hardcoded CSS variable names to SCSS variables that are then converted into the final variables. This will allow for an extra layer of customization and help alleviate conflict problems (also allows for code minification in tiny flavor files that require variables names with simpler names).
diff --git a/src/mini/_core.scss b/src/mini/_core.scss
index 674efa3..01ba990 100644
--- a/src/mini/_core.scss
+++ b/src/mini/_core.scss
@@ -17,18 +17,26 @@ $heading-line-height: 1.2 !default; // Line height for headings
$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings
$subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
-
+$universal-margin: 0.5rem !default; // Universal margin for the most elements
$small-font-size: 0.75em !default; // Font sizing for <small> elements
// TODO: universalize
$heading-margin: 0.75rem 0.5rem !default; // Margin for headers, use universal
$heading-font-weight: 500 !default; // Font weight for headings
+
+// CSS variable name definitions [exercise caution if modifying these]
+$fore-color-var: '--fore-color';
+$secondary-fore-color-var: '--secondary-fore-color';
+$back-color-var: '--back-color';
+$heading-ratio-var: '--heading-ratio';
+$universal-margin-var: '--universal-margin';
/* Core module CSS variable definitions */
:root {
- --fore-color: $fore-color;
- --secondary-fore-color: $secondary-fore-color;
- --back-color: $back-color;
- --heading-ratio: $heading-ratio;
+ #{$fore-color-var}: $fore-color;
+ #{$secondary-fore-color-var}: $secondary-fore-color;
+ #{$back-color-var}: $back-color;
+ #{$heading-ratio-var}: $heading-ratio;
+ #{$side-margin-var}: $side-margin;
}
html {
font-size: $base-root-font-size; // Set root's font sizing.
@@ -56,8 +64,8 @@ html {
body {
margin: $_body-margin;
- color: var(--fore-color);
- background: var(--back-color);
+ color: var(#{$fore-color-var});
+ background: var(#{$back-color-var});
}
// Correct display for Edge & Firefox.
@@ -89,10 +97,10 @@ img {
h1, h2, h3, h4, h5, h6 {
line-height: $heading-line-height;
- margin: $heading-margin;
+ margin: calc(1.5 * var(#{$universal-margin-var})) var(#{$universal-margin-var});
font-weight: $heading-font-weight;
small {
- color: var(--secondary-fore-color);
+ color: var(#{$secondary-fore-color-var});
display: block;
@if $subheading-top-margin != 0 {
margin-top: $subheading-top-margin;
@@ -104,20 +112,20 @@ h1, h2, h3, h4, h5, h6 {
}
h1 {
- font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
+ font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h2 {
- font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio) * var(--heading-ratio));
+ font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h3 {
- font-size: calc(1rem * var(--heading-ratio) * var(--heading-ratio));
+ font-size: calc(1rem * var(#{$heading-ratio-var}) * var(#{$heading-ratio-var}));
}
h4 {
- font-size: calc(1rem * var(--heading-ratio));
+ font-size: calc(1rem * var(#{$heading-ratio-var}));
}
h5 {
font-size: 1rem;
}
h6 {
- font-size: calc(1rem / var(--heading-ratio));
+ font-size: calc(1rem / var(#{$heading-ratio-var}));
}