Completed core module
Just a quick build, some things need to be tweaked and cleaned up.
This commit is contained in:
Angelos Chalaris
parent
a2492b007b
commit
2e79f5f6ae
4 changed files with 115 additions and 18 deletions
43
dist/mini-default.css
vendored
43
dist/mini-default.css
vendored
|
|
@ -22,6 +22,8 @@
|
|||
--universal-margin: 0.5rem;
|
||||
--universal-padding: 0.5rem;
|
||||
--universal-border-radius: 0.125rem;
|
||||
--a-link-color: #0277bd;
|
||||
--a-visited-color: #01579b;
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
@ -180,3 +182,44 @@ pre {
|
|||
border: 0.0625rem solid var(--secondary-border-color);
|
||||
border-left: 0.25rem solid var(--pre-color);
|
||||
}
|
||||
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
small, sup, sub {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: var(--a-link-color);
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: var(--a-visited-color);
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: 0.75em;
|
||||
color: var(--secondary-fore-color);
|
||||
}
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
|
|
@ -1 +1 @@
|
|||
:root{--fore-color:#212121;--secondary-fore-color:#424242;--back-color:#f8f8f8;--secondary-back-color:#e6e6e6;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#acacac;--secondary-border-color:#c9c9c9;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem}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(--universal-margin)) var(--universal-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))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color)}
|
||||
:root{--fore-color:#212121;--secondary-fore-color:#424242;--back-color:#f8f8f8;--secondary-back-color:#e6e6e6;--blockquote-color:#f57c00;--pre-color:#1565c0;--border-color:#acacac;--secondary-border-color:#c9c9c9;--heading-ratio:1.19;--universal-margin:.5rem;--universal-padding:.5rem;--universal-border-radius:.125rem;--a-link-color:#0277bd;--a-visited-color:#01579b}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(--universal-margin)) var(--universal-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))}p{margin:var(--universal-margin)}ol,ul{margin:var(--universal-margin);padding-left:calc(2 * var(--universal-margin))}b,strong{font-weight:700}hr{box-sizing:content-box;border:0;line-height:1.25em;margin:var(--universal-margin);height:.0625rem;background:linear-gradient(to right, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent)}blockquote{display:block;position:relative;font-style:italic;color:var(--secondary-fore-color);margin:var(--universal-margin);padding:calc(3 * var(--universal-padding));border:.0625rem solid var(--secondary-border-color);border-left:.375rem solid var(--blockquote-color);border-radius:0 var(--universal-border-radius) var(--universal-border-radius) 0}blockquote:before{position:absolute;top:calc(0rem - var(--universal-padding));left:0;font-family:sans-serif;font-size:3rem;font-weight:700;content:"\201c";color:var(--blockquote-color)}blockquote[cite]:after{font-style:normal;font-size:.75em;font-weight:700;content:"\a— " attr(cite);white-space:pre}code,kbd,pre,samp{font-family:Menlo, Consolas, monospace}code{background:var(--secondary-back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}kbd{background:var(--fore-color);color:var(--back-color);border-radius:var(--universal-border-radius);padding:calc(var(--universal-padding) / 4) calc(var(--universal-padding) / 2)}pre{overflow:auto;background:var(--secondary-back-color);padding:calc(1.5 * var(--universal-padding));margin:var(--universal-margin);border:.0625rem solid var(--secondary-border-color);border-left:.25rem solid var(--pre-color)}sup,sub{line-height:0;position:relative;vertical-align:baseline}small,sup,sub{font-size:.75em}sup{top:-.5em}sub{bottom:-.25em}a{text-decoration:underline;opacity:1;transition:opacity 0.3s}a:link{color:var(--a-link-color)}a:visited{color:var(--a-visited-color)}a:hover,a:focus{opacity:0.75}figcaption{font-size:.75em;color:var(--secondary-fore-color)}
|
||||
|
|
|
|||
|
|
@ -42,3 +42,10 @@
|
|||
- `pre` element styling now has a sidebar by default and uses a CSS variable for this.
|
||||
- `samp` element styling removed (at least for now).
|
||||
- Tested and debugged code up to this point.
|
||||
|
||||
## 20171019
|
||||
|
||||
- Added styling for `small, sub, sup`. Their `font-size` is now tied to one variable for consistency.
|
||||
- Styled links, quite simplified but should be easier to work with for now.
|
||||
- Added styling for `figcaption`, tied color and size to `small`'s size for consistency.
|
||||
- The revamped `core` module seems to be about `200bytes` heavier than the old one, but certain things will probably be optimized over time.
|
||||
|
|
|
|||
|
|
@ -27,24 +27,31 @@ $universal-padding: 0.5rem !default; // Universal padding for the mos
|
|||
$universal-border-radius: 0.125rem !default; // Universal border-radius for most elements
|
||||
$small-font-size: 0.75em !default; // Font sizing for <small> elements
|
||||
$heading-font-weight: 500 !default; // Font weight for headings
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$blockquote-quotation-size: 3rem; // Font size for the quotation of <blockquote>
|
||||
$blockquote-cite-size: 0.75em; // Font size for the [cite] of <blockquote>
|
||||
$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
|
||||
$bold-font-weight: 700 !default; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.25em !default; // <hr> line height
|
||||
$blockquote-quotation-size: 3rem !default; // Font size for the quotation of <blockquote>
|
||||
$blockquote-cite-size: 0.75em !default; // Font size for the [cite] of <blockquote>
|
||||
$code-font-family: 'Menlo, Consolas, monospace' !default; // Font stack for code elements
|
||||
$small-element-font-size: 0.75em !default; // Font size for <small>, <sub>, <sup>
|
||||
$sup-top: -0.5em !default; // <sup> top
|
||||
$sub-bottom: -0.25em !default; // <sub> bottom
|
||||
$a-link-color: #0277bd !default; // Color for <a>:link
|
||||
$a-visited-color: #01579b !default; // Color for <a>:visited
|
||||
// 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';
|
||||
$secondary-back-color-var: '--secondary-back-color';
|
||||
$blockquote-color-var: '--blockquote-color';
|
||||
$pre-color-var: '--pre-color';
|
||||
$border-color-var: '--border-color';
|
||||
$secondary-border-color-var: '--secondary-border-color';
|
||||
$heading-ratio-var: '--heading-ratio';
|
||||
$universal-margin-var: '--universal-margin';
|
||||
$universal-padding-var: '--universal-padding';
|
||||
$universal-border-radius-var: '--universal-border-radius';
|
||||
$secondary-fore-color-var: '--secondary-fore-color' !default;
|
||||
$back-color-var: '--back-color' !default;
|
||||
$secondary-back-color-var: '--secondary-back-color' !default;
|
||||
$blockquote-color-var: '--blockquote-color' !default;
|
||||
$pre-color-var: '--pre-color' !default;
|
||||
$border-color-var: '--border-color' !default;
|
||||
$secondary-border-color-var: '--secondary-border-color' !default;
|
||||
$heading-ratio-var: '--heading-ratio' !default;
|
||||
$universal-margin-var: '--universal-margin' !default;
|
||||
$universal-padding-var: '--universal-padding' !default;
|
||||
$universal-border-radius-var: '--universal-border-radius' !default;
|
||||
$a-link-color-var: '--a-link-color' !default;
|
||||
$a-visited-color-var: '--a-visited-color' !default;
|
||||
/* Core module CSS variable definitions */
|
||||
:root {
|
||||
#{$fore-color-var}: $fore-color;
|
||||
|
|
@ -59,6 +66,8 @@ $universal-border-radius-var: '--universal-border-radius';
|
|||
#{$universal-margin-var}: $universal-margin;
|
||||
#{$universal-padding-var}: $universal-padding;
|
||||
#{$universal-border-radius-var}: $universal-border-radius;
|
||||
#{$a-link-color-var} : $a-link-color;
|
||||
#{$a-visited-color-var} : $a-visited-color;
|
||||
}
|
||||
html {
|
||||
font-size: $base-root-font-size; // Set root's font sizing.
|
||||
|
|
@ -205,7 +214,7 @@ blockquote { // Doesn't have a back color yet, as well as no shadow...
|
|||
}
|
||||
}
|
||||
|
||||
code, kbd, pre, samp{
|
||||
code, kbd, pre, samp {
|
||||
font-family: #{$code-font-family}; // Display fix should be applied manually!
|
||||
}
|
||||
|
||||
|
|
@ -232,3 +241,41 @@ pre { // Fore color is the default, as well as no shadow...
|
|||
border: $__1px solid var(#{$secondary-border-color-var});
|
||||
border-left: 4*$__1px solid var(#{$pre-color-var});
|
||||
}
|
||||
|
||||
// Prevent elements from affecting the line height in all browsers.
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
small, sup, sub {
|
||||
font-size: $small-element-font-size;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: $sup-top;
|
||||
}
|
||||
sub {
|
||||
bottom: $sub-bottom;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s;
|
||||
&:link{
|
||||
color: var(#{$a-link-color-var});
|
||||
}
|
||||
&:visited {
|
||||
color: var(#{$a-visited-color-var});
|
||||
}
|
||||
&:hover, &:focus {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
figcaption {
|
||||
font-size: $small-element-font-size;
|
||||
color: var(#{$secondary-fore-color-var});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue