From bd45afb839f76a36aa7f1b8a08f64f64fe30d5af Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Wed, 18 Oct 2017 14:38:55 +0300 Subject: [PATCH] Paragraphs, lists and hr elements --- docs/v3/DEVLOG.md | 5 +++++ src/mini/_core.scss | 35 ++++++++++++++++++++++++++++++----- 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/docs/v3/DEVLOG.md b/docs/v3/DEVLOG.md index 0b6244d..619a5f8 100644 --- a/docs/v3/DEVLOG.md +++ b/docs/v3/DEVLOG.md @@ -30,3 +30,8 @@ - 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). +- Added styling for `p`, `ol` and `ul`, used universal margin and applied its double to the `padding-left` of the lists, so that it is reasonably consistent. Hope this wasn't a mistake. +- Removed the `overflow: visible;` fix that was applied to `hr` for IE (legacy). +- The old *fancy style* of `hr` is now the default and only styling choice. Seems easier that way. Manual tweaking can resolve this for certain flavors. +- Added `--border-color` to use for universal border colors. +- Applied a new gradient style to `hr`, one that uses `transparent` and the `--border-color`. Hopefully, it works as expected. diff --git a/src/mini/_core.scss b/src/mini/_core.scss index 01ba990..275c606 100644 --- a/src/mini/_core.scss +++ b/src/mini/_core.scss @@ -13,21 +13,21 @@ $_body-margin: 0 !default; // [Hidden] Margin for body $fore-color: #212121 !default; // Text & foreground color $secondary-fore-color: #424242 !default; // Secondary text & foreground color $back-color: #f8f8f8 !default; // Background color +$border-color: #acacac !default; // Border color $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 elements in headings $subheading-top-margin: -0.25rem !default; // Top margin of elements in headings $universal-margin: 0.5rem !default; // Universal margin for the most elements $small-font-size: 0.75em !default; // Font sizing for elements -// TODO: universalize -$heading-margin: 0.75rem 0.5rem !default; // Margin for headers, use universal -$heading-font-weight: 500 !default; // Font weight for headings - - +$heading-font-weight: 500 !default; // Font weight for headings +$bold-font-weight: 700; // Font weight for and +$horizontal-rule-line-height: 1.25em; //
line height // 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'; +$border-color-var: '--border-color'; $heading-ratio-var: '--heading-ratio'; $universal-margin-var: '--universal-margin'; /* Core module CSS variable definitions */ @@ -35,6 +35,7 @@ $universal-margin-var: '--universal-margin'; #{$fore-color-var}: $fore-color; #{$secondary-fore-color-var}: $secondary-fore-color; #{$back-color-var}: $back-color; + #{$border-color-var}: $border-color; #{$heading-ratio-var}: $heading-ratio; #{$side-margin-var}: $side-margin; } @@ -129,3 +130,27 @@ h5 { h6 { font-size: calc(1rem / var(#{$heading-ratio-var})); } + +p { + margin: var(#{$universal-margin-var}); +} + +ol, ul { + margin: var(#{$universal-margin-var}); + padding-left: calc(2 * var(#{$universal-margin-var})); +} + +b, strong { + font-weight: $bold-font-weight; +} + +hr { + // Fixes and defaults for styling + box-sizing: content-box; + border: 0; + // Actual styling using variables + line-height: $horizontal-rule-line-height; + margin: var(#{$universal-margin-var}); + height: $_1px; + background: linear-gradient(transparent, var(#{$border-color-var}) 20%, var(#{$border-color-var}) 80%, transparent); +}