diff options
Diffstat (limited to 'sass')
| -rw-r--r-- | sass/abridge.scss | 6 | ||||
| -rw-r--r-- | sass/include/_button.scss | 40 | ||||
| -rw-r--r-- | sass/include/_code.scss | 26 | ||||
| -rw-r--r-- | sass/include/_embedded.scss | 16 | ||||
| -rw-r--r-- | sass/include/_form.scss | 36 | ||||
| -rw-r--r-- | sass/include/_nav.scss | 14 | ||||
| -rw-r--r-- | sass/include/_table.scss | 16 | ||||
| -rw-r--r-- | sass/include/_typography.scss | 51 | ||||
| -rw-r--r-- | sass/themes/_auto.scss | 23 | ||||
| -rw-r--r-- | sass/themes/_dark.scss | 19 | ||||
| -rw-r--r-- | sass/themes/_light.scss | 13 |
11 files changed, 132 insertions, 128 deletions
diff --git a/sass/abridge.scss b/sass/abridge.scss index 29dc988..d69bd5d 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -1,6 +1,6 @@ /* * Forked from Bamboo: https://github.com/rilwis/bamboo (MIT) - * which was forked from new.css (MIT) + * which was forked from new.css (MIT) * Supplemented code from Pico.css: https://github.com/picocss/pico (MIT) * Supplemented code from Basic.css: https://github.com/vladocar/Basic.css (MIT) * Supplemented code from AttriCSS: https://github.com/raj457036/attriCSS (MIT) @@ -8,8 +8,8 @@ * Tabler Icons: https://github.com/tabler/tabler-icons/find/master (MIT) * * Bamboo, New, Pico: based on Normalize.css & Sanitize.css - * Normalize: https://github.com/necolas/normalize.css (MIT) - * Sanitize: https://github.com/csstools/sanitize.css (CC0 1.0 Universal) + * Normalize: https://github.com/necolas/normalize.css (MIT) + * Sanitize: https://github.com/csstools/sanitize.css (CC0 1.0 Universal) */ // Config diff --git a/sass/include/_button.scss b/sass/include/_button.scss index 257e8c6..7152a0c 100644 --- a/sass/include/_button.scss +++ b/sass/include/_button.scss @@ -3,39 +3,39 @@ button, input, select, textarea { - margin: 0; - padding: .5rem .75rem; - max-width: 100%; - background: var(--c2); - border: 0; - border-radius: .25rem; - font: inherit; - line-height: 1.125; - color: var(--f1); + margin: 0; + padding: .5rem .75rem; + max-width: 100%; + background: var(--c2); + border: 0; + border-radius: .25rem; + font: inherit; + line-height: 1.125; + color: var(--f1); } button, [type="button" i], [type="submit" i], [type="reset" i] { - -webkit-appearance: button; - display: inline-block; - text-align: center; - white-space: nowrap; - background: var(--c2); - color: var(--f1); - border: 0; - cursor: pointer; - transition: opacity .25s; + -webkit-appearance: button; + display: inline-block; + text-align: center; + white-space: nowrap; + background: var(--c2); + color: var(--f1); + border: 0; + cursor: pointer; + transition: opacity .25s; } button:hover, [type="button" i]:hover, [type="submit" i]:hover, [type="reset" i]:hover { - opacity: .75; + opacity: .75; } button[disabled], [type="button" i][disabled], [type="submit" i][disabled], [type="reset" i][disabled] { - opacity: .5; + opacity: .5; } diff --git a/sass/include/_code.scss b/sass/include/_code.scss index bd72a32..fd9eb97 100644 --- a/sass/include/_code.scss +++ b/sass/include/_code.scss @@ -5,22 +5,22 @@ kbd, samp, tt, var { - border-radius: var(--br); - background: var(--c2); - font-family: var(--fm); - line-height: initial; - font-size: .8rem; - padding: .3rem .2rem; + border-radius: var(--br); + background: var(--c2); + font-family: var(--fm); + line-height: initial; + font-size: .8rem; + padding: .3rem .2rem; } pre { display: block; - overflow-x: auto; + overflow-x: auto; -ms-overflow-style: scrollbar; - white-space: pre; + white-space: pre; > code { - display: block; - background: transparent; - } + display: block; + background: transparent; + } } // kbd @@ -28,6 +28,6 @@ kbd { background-color: var(--f2); color: var(--c1); vertical-align: baseline; - font-size: 1rem; - padding: .2rem; + font-size: 1rem; + padding: .2rem; } diff --git a/sass/include/_embedded.scss b/sass/include/_embedded.scss index 48282f7..d2d6890 100644 --- a/sass/include/_embedded.scss +++ b/sass/include/_embedded.scss @@ -2,18 +2,18 @@ img, video, svg { - max-width: 100%; - height: auto; + max-width: 100%; + height: auto; } embed, iframe, object { - max-width: 100%; + max-width: 100%; } iframe { - border-style: none; - width: 100%; - height: 100%; - border: 0; - overflow: hidden; + border-style: none; + width: 100%; + height: 100%; + border: 0; + overflow: hidden; } diff --git a/sass/include/_form.scss b/sass/include/_form.scss index 5761c3f..3087ad6 100644 --- a/sass/include/_form.scss +++ b/sass/include/_form.scss @@ -1,36 +1,36 @@ // Form elements (non-button) fieldset { - padding: .5rem .75rem; - border: var(--bw) solid var(--c3); - border-radius: .25rem; + padding: .5rem .75rem; + border: var(--bw) solid var(--c3); + border-radius: .25rem; } legend { - padding: 0 .25rem; + padding: 0 .25rem; } label { - cursor: pointer; - display: block; - margin-bottom: .25rem; + cursor: pointer; + display: block; + margin-bottom: .25rem; } select, input:not([size]):not([type="button" i]):not([type="submit" i]):not([type="reset" i]):not([type="checkbox" i]):not([type="radio" i]) { - width: 100%; + width: 100%; } [type="color" i] { - min-height: 2.125rem; + min-height: 2.125rem; } select:not([multiple]):not([size]) { - padding-right: 1.5rem; - background-repeat: no-repeat; - background-position: right .5rem center; - -moz-appearance: none; - -webkit-appearance: none; - appearance: none; + padding-right: 1.5rem; + background-repeat: no-repeat; + background-position: right .5rem center; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; } textarea { - width: 100%; - resize: vertical; + width: 100%; + resize: vertical; } textarea:not([rows]) { - height: 8rem; + height: 8rem; } diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss index 9dd4dac..543d88c 100644 --- a/sass/include/_nav.scss +++ b/sass/include/_nav.scss @@ -4,11 +4,11 @@ */ main nav a, main nav a:visited { - font-weight: var(--fh); + font-weight: var(--fh); border: .1rem solid var(--f2); border-radius: var(--br); padding: .3rem var(--s1); - margin: var(--s1); + margin: var(--s1); } main nav a:hover { border-color: var(--a3); @@ -18,11 +18,11 @@ nav { display: flex; justify-content: space-between; div { - ul { - line-height: 0; - margin-top: 0; - padding-bottom: var(--s1); - } + ul { + line-height: 0; + margin-top: 0; + padding-bottom: var(--s1); + } display: block; margin-left: auto } diff --git a/sass/include/_table.scss b/sass/include/_table.scss index 7b9ddbf..e141b7e 100644 --- a/sass/include/_table.scss +++ b/sass/include/_table.scss @@ -1,21 +1,21 @@ // Table table { - border-collapse: collapse; - width: 100%; - text-indent: 0; /* Remove text indentation from table contents in Chrome, Edge, and Safari. */ + border-collapse: collapse; + width: 100%; + text-indent: 0; /* Remove text indentation from table contents in Chrome, Edge, and Safari. */ } table caption { - margin-bottom: .5rem; + margin-bottom: .5rem; } tr { - border-bottom: var(--bw) solid var(--c3); + border-bottom: var(--bw) solid var(--c3); } td, th { - padding: var(--s1); + padding: var(--s1); } th { - text-align: left; + text-align: left; } // Striped @@ -24,7 +24,7 @@ table { background-color: var(--c2); } thead tr { - border-top: var(--bw) solid var(--c3); + border-top: var(--bw) solid var(--c3); background-color: var(--c2); } } diff --git a/sass/include/_typography.scss b/sass/include/_typography.scss index f9f0caa..256dd90 100644 --- a/sass/include/_typography.scss +++ b/sass/include/_typography.scss @@ -6,44 +6,45 @@ h4, h5, h6 { padding-left: 0; - color: var(--f2); + color: var(--f2); margin-bottom: var(--s1); - margin-top: var(--s2); + margin-top: var(--s2); font-weight: var(--fh); font-size: var(--fs); + line-height: var(--lhh); } h1 { - font-size: 2rem; + font-size: 2rem; } h2 { - font-size: 1.75rem; + font-size: 1.75rem; } h3 { - font-size: 1.5rem; + font-size: 1.5rem; } h4 { - font-size: 1.25rem; + font-size: 1.25rem; } h5 { - font-size: 1.125rem; + font-size: 1.125rem; } header h1 { - margin-top: 0; + margin-top: 0; } a { - color: var(--a1); - text-decoration: none; + color: var(--a1); + text-decoration: none; } a:hover { color: var(--a2); - text-decoration: underline; + text-decoration: underline; } h1 a, h2 a, main nav a { color: var(--f2); text-decoration:none; &:hover { - color: var(--a3); - text-decoration: none; + color: var(--a3); + text-decoration: none; } } article { @@ -63,33 +64,33 @@ mark { background-color: var(--c4); color: var(--c1); vertical-align: baseline; - padding: .1rem .4rem; + padding: .1rem .4rem; } blockquote { - margin-left: 0; - padding: .5rem 0 .5rem 1.5rem; - border-left: .25rem solid var(--c3); + margin-left: 0; + padding: .5rem 0 .5rem 1.5rem; + border-left: .25rem solid var(--c3); } blockquote > :last-child { - margin-bottom: 0; + margin-bottom: 0; } small { - font-size: .875rem; + font-size: .875rem; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { - font-size: .75em; - line-height: 0; - position: relative; - vertical-align: baseline; + font-size: .75em; + line-height: 0; + position: relative; + vertical-align: baseline; } sub { - bottom: -.25em; + bottom: -.25em; } sup { - top: -.5em; + top: -.5em; } address, diff --git a/sass/themes/_auto.scss b/sass/themes/_auto.scss index 0997d76..012aa9b 100644 --- a/sass/themes/_auto.scss +++ b/sass/themes/_auto.scss @@ -3,22 +3,23 @@ --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; --lh: 1.5; //line-height + --lhh: 1.2; //line-height headers --fs: 1rem; //font-size --fw: 400; //font-weight --fh: 700; //font-weight h1-h6 // Colors - --f1: #555; //font color 1 bbb ccc - --f2: #333; //font color 2 fff eee + --f1: #555; //font color 1 bbb ccc + --f2: #333; //font color 2 fff eee - --c1: #fff; //color 1 111 + --c1: #fff; //color 1 111 --c2: #eee; //color 2 222 --c3: #ddd; //color 3 333 --c4: #777; //color 4 888 - --a1: #f90; //accent color 1 link - --a2: #fb0; //accent color 2 hover,focus - --a3: #fb0; //accent color 3 h1-h2 hover,focus + --a1: #f90; //accent color 1 link + --a2: #fb0; //accent color 2 hover,focus + --a3: #fb0; //accent color 3 h1-h2 hover,focus --cg: #483; //ins green --cr: #d33; //del red @@ -58,15 +59,15 @@ } } @media (prefers-color-scheme: dark) { - :root { - --f1: #ccc; //font color 1 - --f2: #ddd; //font color 2 + :root { + --f1: #ccc; //font color 1 + --f2: #ddd; //font color 2 - --c1: #111; //color 1 + --c1: #111; //color 1 --c2: #222; //color 2 --c3: #333; //color 3 --c4: #888; //color 4 - } + } } // Responsives spacings diff --git a/sass/themes/_dark.scss b/sass/themes/_dark.scss index d05c111..1fef7c3 100644 --- a/sass/themes/_dark.scss +++ b/sass/themes/_dark.scss @@ -3,22 +3,23 @@ --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; --lh: 1.5; //line-height + --lhh: 1.2; //line-height headers --fs: 1rem; //font-size --fw: 400; //font-weight --fh: 700; //font-weight h1-h6 // Colors - --f1: #ccc; //font color 1 - --f2: #ddd; //font color 2 + --f1: #ccc; //font color 1 + --f2: #ddd; //font color 2 - --c1: #111; //color 1 - --c2: #222; //color 2 - --c3: #333; //color 3 - --c4: #888; //color 4 + --c1: #111; //color 1 + --c2: #222; //color 2 + --c3: #333; //color 3 + --c4: #888; //color 4 - --a1: #f90; //accent color 1 link - --a2: #fb0; //accent color 2 hover,focus - --a3: #fb0; //accent color 3 h1-h2 hover,focus + --a1: #f90; //accent color 1 link + --a2: #fb0; //accent color 2 hover,focus + --a3: #fb0; //accent color 3 h1-h2 hover,focus --cg: #483; //ins green --cr: #d33; //del red diff --git a/sass/themes/_light.scss b/sass/themes/_light.scss index 2538391..127073c 100644 --- a/sass/themes/_light.scss +++ b/sass/themes/_light.scss @@ -3,22 +3,23 @@ --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; --lh: 1.5; //line-height + --lhh: 1.2; //line-height headers --fs: 1rem; //font-size --fw: 400; //font-weight --fh: 700; //font-weight h1-h6 // Colors - --f1: #555; //font color 1 bbb ccc - --f2: #333; //font color 2 fff eee + --f1: #555; //font color 1 bbb ccc + --f2: #333; //font color 2 fff eee - --c1: #fff; //color 1 111 + --c1: #fff; //color 1 111 --c2: #eee; //color 2 222 --c3: #ddd; //color 3 333 --c4: #777; //color 4 888 - --a1: #f90; //accent color 1 link - --a2: #fb0; //accent color 2 hover,focus - --a3: #fb0; //accent color 3 h1-h2 hover,focus + --a1: #f90; //accent color 1 link + --a2: #fb0; //accent color 2 hover,focus + --a3: #fb0; //accent color 3 h1-h2 hover,focus --cg: #483; //ins green --cr: #d33; //del red |
