beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Paragraphs, lists and hr elements

Browse source
This commit is contained in:
Angelos Chalaris 2017-10-18 14:38:55 +03:00
parent 03b6a1e351
commit bd45afb839
2 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
docs/v3/DEVLOG.md
View file

@ -30,3 +30,8 @@
- Added universal margin variable `--universal-margin` for an easy way to align content and elements. - 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). - 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.

35
src/mini/_core.scss
View file

@ -13,21 +13,21 @@ $_body-margin: 0 !default; // [Hidden] Margin for body
$fore-color: #212121 !default; // Text & foreground color $fore-color: #212121 !default; // Text & foreground color
$secondary-fore-color: #424242 !default; // Secondary text & foreground color $secondary-fore-color: #424242 !default; // Secondary text & foreground color
$back-color: #f8f8f8 !default; // Background color $back-color: #f8f8f8 !default; // Background color
$border-color: #acacac !default; // Border color
$heading-line-height: 1.2 !default; // Line height for headings $heading-line-height: 1.2 !default; // Line height for headings
$heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless) $heading-ratio: 1.19 !default; // Ratio for headings (strictly unitless)
$subheading-font-size: 0.75em !default; // Font sizing for <small> elements in headings $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 $subheading-top-margin: -0.25rem !default; // Top margin of <small> elements in headings
$universal-margin: 0.5rem !default; // Universal margin for the most elements $universal-margin: 0.5rem !default; // Universal margin for the most elements
$small-font-size: 0.75em !default; // Font sizing for <small> elements $small-font-size: 0.75em !default; // Font sizing for <small> elements
// TODO: universalize $heading-font-weight: 500 !default; // Font weight for headings
$heading-margin: 0.75rem 0.5rem !default; // Margin for headers, use universal $bold-font-weight: 700; // Font weight for <b> and <strong>
$heading-font-weight: 500 !default; // Font weight for headings $horizontal-rule-line-height: 1.25em; // <hr> line height
// CSS variable name definitions [exercise caution if modifying these] // CSS variable name definitions [exercise caution if modifying these]
$fore-color-var: '--fore-color'; $fore-color-var: '--fore-color';
$secondary-fore-color-var: '--secondary-fore-color'; $secondary-fore-color-var: '--secondary-fore-color';
$back-color-var: '--back-color'; $back-color-var: '--back-color';
$border-color-var: '--border-color';
$heading-ratio-var: '--heading-ratio'; $heading-ratio-var: '--heading-ratio';
$universal-margin-var: '--universal-margin'; $universal-margin-var: '--universal-margin';
/* Core module CSS variable definitions */ /* Core module CSS variable definitions */
@ -35,6 +35,7 @@ $universal-margin-var: '--universal-margin';
#{$fore-color-var}: $fore-color; #{$fore-color-var}: $fore-color;
#{$secondary-fore-color-var}: $secondary-fore-color; #{$secondary-fore-color-var}: $secondary-fore-color;
#{$back-color-var}: $back-color; #{$back-color-var}: $back-color;
#{$border-color-var}: $border-color;
#{$heading-ratio-var}: $heading-ratio; #{$heading-ratio-var}: $heading-ratio;
#{$side-margin-var}: $side-margin; #{$side-margin-var}: $side-margin;
} }
@ -129,3 +130,27 @@ h5 {
h6 { h6 {
font-size: calc(1rem / var(#{$heading-ratio-var})); 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);
}