diff options
Diffstat (limited to 'sass')
36 files changed, 458 insertions, 178 deletions
diff --git a/sass/abridge-blue.scss b/sass/abridge-blue.scss index 8d796a6..ea2ed2a 100644 --- a/sass/abridge-blue.scss +++ b/sass/abridge-blue.scss @@ -14,6 +14,7 @@ @import "variables"; //config -@import "skins/blueauto"; // Light Theme +@import "skins/blue-auto"; // Blue Automatic Dark/Light Theme based on browser/system preference +@import "skins/abridge_fonts.scss"; // Local Fonts @import "imports"; // html diff --git a/sass/abridge-bluelight.scss b/sass/abridge-bluelight.scss index c0203f0..6730b11 100644 --- a/sass/abridge-bluelight.scss +++ b/sass/abridge-bluelight.scss @@ -14,6 +14,7 @@ @import "variables"; //config -@import "skins/bluelight"; // Light Theme +@import "skins/blue-light"; // Blue Light Theme +@import "skins/abridge_fonts.scss"; // Local Fonts @import "imports"; // html diff --git a/sass/abridge-bluenight.scss b/sass/abridge-bluenight.scss index a54f53e..0b2f680 100644 --- a/sass/abridge-bluenight.scss +++ b/sass/abridge-bluenight.scss @@ -14,6 +14,7 @@ @import "variables"; //config -@import "skins/bluenight"; // Light Theme +@import "skins/blue-dark"; // Blue Dark Theme +@import "skins/abridge_fonts.scss"; // Local Fonts @import "imports"; // html diff --git a/sass/abridge-dark.scss b/sass/abridge-dark.scss index 279554d..961e7ac 100644 --- a/sass/abridge-dark.scss +++ b/sass/abridge-dark.scss @@ -14,6 +14,7 @@ @import "variables"; //config -@import "skins/dark"; // Dark Theme +@import "skins/abridge-dark"; // Dark Theme +@import "skins/abridge_fonts.scss"; // Local Fonts @import "imports"; // html diff --git a/sass/abridge-light.scss b/sass/abridge-light.scss index 6910018..49a065c 100644 --- a/sass/abridge-light.scss +++ b/sass/abridge-light.scss @@ -14,6 +14,7 @@ @import "variables"; //config -@import "skins/light"; // Light Theme +@import "skins/abridge-light"; // Light Theme +@import "skins/abridge_fonts.scss"; // Local Fonts @import "imports"; // html diff --git a/sass/abridge.scss b/sass/abridge.scss index 8cda9cf..8d3aa25 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -14,6 +14,7 @@ @import "variables"; //config -@import "skins/auto"; // Automatic Dark/Light Theme based on browser/system preference. +@import "skins/abridge-auto"; // Automatic Dark/Light Theme based on browser/system preference +@import "skins/abridge_fonts.scss"; // Local Fonts @import "imports"; // html diff --git a/sass/fonts/_Arimo.scss b/sass/fonts/_Arimo.scss new file mode 100644 index 0000000..8e72d3a --- /dev/null +++ b/sass/fonts/_Arimo.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'Arimo'; + src: local("Arimo"), url("/font/Arimo.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'Arimo'; + src: local("Arimo"), url("/font/Arimo-italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'Arimo'; + src: local("Arimo"), url("/font/Arimo-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_Bitter.scss b/sass/fonts/_Bitter.scss new file mode 100644 index 0000000..aacf2d9 --- /dev/null +++ b/sass/fonts/_Bitter.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'Bitter'; + src: local("Bitter"), url("/font/Bitter.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'Bitter'; + src: local("Bitter"), url("/font/Bitter-italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'Bitter'; + src: local("Bitter"), url("/font/Bitter-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_DroidSans.scss b/sass/fonts/_DroidSans.scss new file mode 100644 index 0000000..8e69a6e --- /dev/null +++ b/sass/fonts/_DroidSans.scss @@ -0,0 +1,11 @@ +@font-face { + font-family: 'DroidSans'; + src: local("DroidSans"), url("/font/DroidSans.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'DroidSans'; + src: local("DroidSans"), url("/font/DroidSans-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_FiraCode.scss b/sass/fonts/_FiraCode.scss new file mode 100644 index 0000000..8053db9 --- /dev/null +++ b/sass/fonts/_FiraCode.scss @@ -0,0 +1,5 @@ +@font-face { + font-family: 'Fira Code'; + src: local("Fira Code"), url("/font/FiraCode.woff2");//latin regular + font-display: swap; +} diff --git a/sass/fonts/_Jost.scss b/sass/fonts/_Jost.scss new file mode 100644 index 0000000..5d7ef0e --- /dev/null +++ b/sass/fonts/_Jost.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'Jost'; + src: local("Jost"), url("/font/Jost.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'Jost'; + src: local("Jost"), url("/font/Jost-italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'Jost'; + src: local("Jost"), url("/font/Jost-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_Lato.scss b/sass/fonts/_Lato.scss new file mode 100644 index 0000000..a1a6f27 --- /dev/null +++ b/sass/fonts/_Lato.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'Lato'; + src: local("Lato"), url("/font/Lato.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'Lato'; + src: local("Lato"), url("/font/Lato-italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'Lato'; + src: local("Lato"), url("/font/Lato-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_Montserrat.scss b/sass/fonts/_Montserrat.scss new file mode 100644 index 0000000..35f58ce --- /dev/null +++ b/sass/fonts/_Montserrat.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'Montserrat'; + src: local("Montserrat"), url("/font/Montserrat.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'Montserrat'; + src: local("Montserrat"), url("/font/Montserrat-italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'Montserrat'; + src: local("Montserrat"), url("/font/Montserrat-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_OpenSans.scss b/sass/fonts/_OpenSans.scss new file mode 100644 index 0000000..36efb36 --- /dev/null +++ b/sass/fonts/_OpenSans.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'OpenSans'; + src: local("OpenSans"), url("/font/OpenSans.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'OpenSans'; + src: local("OpenSans"), url("/font/OpenSans-italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'OpenSans'; + src: local("OpenSans"), url("/font/OpenSans-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_OpenSansCondensed.scss b/sass/fonts/_OpenSansCondensed.scss new file mode 100644 index 0000000..28b9cce --- /dev/null +++ b/sass/fonts/_OpenSansCondensed.scss @@ -0,0 +1,5 @@ +@font-face { + font-family: 'OpenSansCondensed'; + src: local("OpenSansCondensed"), url("/font/OpenSansCondensed.woff2");//latin regular + font-display: swap; +} diff --git a/sass/fonts/_PTSans.scss b/sass/fonts/_PTSans.scss new file mode 100644 index 0000000..5aa2a54 --- /dev/null +++ b/sass/fonts/_PTSans.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'PTSans'; + src: local("PTSans"), url("/font/PTSans.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'PTSans'; + src: local("PTSans"), url("/font/PTSans-italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'PTSans'; + src: local("PTSans"), url("/font/PTSans-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_PTSansNarrow.scss b/sass/fonts/_PTSansNarrow.scss new file mode 100644 index 0000000..a295eb2 --- /dev/null +++ b/sass/fonts/_PTSansNarrow.scss @@ -0,0 +1,11 @@ +@font-face { + font-family: 'PTSansNarrow'; + src: local("PTSansNarrow"), url("/font/PTSansNarrow.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'PTSansNarrow'; + src: local("PTSansNarrow"), url("/font/PTSansNarrow-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_Roboto.scss b/sass/fonts/_Roboto.scss new file mode 100644 index 0000000..3490e75 --- /dev/null +++ b/sass/fonts/_Roboto.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'Roboto'; + src: local("Roboto"), url("/font/Roboto.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'Roboto'; + src: local("Roboto"), url("/font/Roboto-italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'Roboto'; + src: local("Roboto"), url("/font/Roboto-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_RobotoCondensed.scss b/sass/fonts/_RobotoCondensed.scss new file mode 100644 index 0000000..d314d6b --- /dev/null +++ b/sass/fonts/_RobotoCondensed.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'RobotoCondensed'; + src: local("RobotoCondensed"), url("/font/RobotoCondensed.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'RobotoCondensed'; + src: local("RobotoCondensed"), url("/font/RobotoCondensed-italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'RobotoCondensed'; + src: local("RobotoCondensed"), url("/font/RobotoCondensed-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_RobotoSlab.scss b/sass/fonts/_RobotoSlab.scss new file mode 100644 index 0000000..0578e11 --- /dev/null +++ b/sass/fonts/_RobotoSlab.scss @@ -0,0 +1,11 @@ +@font-face { + font-family: 'RobotoSlab'; + src: local("RobotoSlab"), url("/font/RobotoSlab.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'RobotoSlab'; + src: local("RobotoSlab"), url("/font/RobotoSlab-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_SourceSansPro.scss b/sass/fonts/_SourceSansPro.scss new file mode 100644 index 0000000..64e156b --- /dev/null +++ b/sass/fonts/_SourceSansPro.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'SourceSansPro'; + src: local("SourceSansPro"), url("/font/SourceSansPro.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'SourceSansPro'; + src: local("SourceSansPro"), url("/font/SourceSansPro-italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'SourceSansPro'; + src: local("SourceSansPro"), url("/font/SourceSansPro-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/fonts/_Ubuntu.scss b/sass/fonts/_Ubuntu.scss new file mode 100644 index 0000000..ab3229f --- /dev/null +++ b/sass/fonts/_Ubuntu.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'Ubuntu'; + src: local("Ubuntu"), url("/font/Ubuntu.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'Ubuntu'; + src: local("Ubuntu"), url("/font/Ubuntu-italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'Ubuntu'; + src: local("Ubuntu"), url("/font/Ubuntu-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss index 19f421d..c203ed4 100644 --- a/sass/include/_nav.scss +++ b/sass/include/_nav.scss @@ -3,33 +3,33 @@ * https://github.com/raj457036/attriCSS */ .cnav { - color: var(--a3); + color: var(--a3);//pagination color current page } main nav { - margin-top: var(--s2); + margin-top: var(--s2);//pagination margin } main nav a, -main nav a:visited { +main nav a:visited {//pagination link styling font-weight: var(--fh); border: .1rem solid var(--f2); border-radius: var(--br); - padding: .3rem var(--s1); - margin: var(--s1); + padding: .1rem var(--s1); + margin: .1rem; } -main nav a:hover { +main nav a:hover {//makes border of pagination links hover color border-color: var(--a3); } -nav > div:first-of-type { +header > nav > div:first-of-type {//puts logo on left and menu/search on right margin-left: auto } nav > div { ul { - line-height: 0; + line-height: 2; margin-top: 0; padding-bottom: var(--s1); } display: block; - margin-left: var(--s1); + margin-left: var(--s1);//add some spacing between nav divs } nav { align-items: center; @@ -53,6 +53,7 @@ nav { text-align: left; } } +// breakpoint makes header responsive for mobile layouts @if map-get($breakpoints, "md") { @media (max-width: map-get($breakpoints, "md")) { header nav { @@ -62,7 +63,7 @@ nav { text-align: center } div { - margin: auto + margin: auto // keeps top menu/search centered in mobile view } } } diff --git a/sass/skins/_abridge-auto.scss b/sass/skins/_abridge-auto.scss new file mode 100644 index 0000000..07ed824 --- /dev/null +++ b/sass/skins/_abridge-auto.scss @@ -0,0 +1,41 @@ +:root { + // Regular Fonts used by default: + --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif; + //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004) + //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401) + + // Monospace Fonts used for code: + --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace; + // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/ + + // Colors + --f1: #555; //font color 1 + --f2: #333; //font color 2 + + --c1: #fff; //color 1 + --c2: #eee; //color 2 + --c3: #ddd; //color 3 + --c4: #777; //color 4 + + --a1: #c40; //accent color 1 link + --a2: #e60; //accent color 2 hover,focus + --a3: #e60; //accent color 3 h1-h2 hover,focus + + --cg: #483; //ins green + --cr: #d33; //del red +} +@media (prefers-color-scheme: dark) { + :root { + --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 + + --a1: #f90; //accent color 1 link + --a2: #fb0; //accent color 2 hover,focus + --a3: #fb0; //accent color 3 h1-h2 hover,focus + } +} diff --git a/sass/skins/_abridge-dark.scss b/sass/skins/_abridge-dark.scss new file mode 100644 index 0000000..39eb4a9 --- /dev/null +++ b/sass/skins/_abridge-dark.scss @@ -0,0 +1,26 @@ +:root { + // Regular Fonts used by default: + --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif; + //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004) + //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401) + + // Monospace Fonts used for code: + --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace; + // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/ + + // Colors + --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 + + --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/skins/_abridge-light.scss b/sass/skins/_abridge-light.scss new file mode 100644 index 0000000..a2192ff --- /dev/null +++ b/sass/skins/_abridge-light.scss @@ -0,0 +1,26 @@ +:root { + // Regular Fonts used by default: + --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif; + //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004) + //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401) + + // Monospace Fonts used for code: + --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace; + // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/ + + // Colors + --f1: #555; //font color 1 + --f2: #333; //font color 2 + + --c1: #fff; //color 1 + --c2: #eee; //color 2 + --c3: #ddd; //color 3 + --c4: #777; //color 4 + + --a1: #c40; //accent color 1 link + --a2: #e60; //accent color 2 hover,focus + --a3: #e60; //accent color 3 h1-h2 hover,focus + + --cg: #483; //ins green + --cr: #d33; //del red +} diff --git a/sass/skins/_abridge_fonts.scss b/sass/skins/_abridge_fonts.scss new file mode 100644 index 0000000..c079490 --- /dev/null +++ b/sass/skins/_abridge_fonts.scss @@ -0,0 +1,19 @@ +// ## Local Fonts ## +//@import "../fonts/Arimo"; +//@import "../fonts/Bitter"; +//@import "../fonts/DroidSans"; +//@import "../fonts/Jost"; +//@import "../fonts/Lato"; +//@import "../fonts/Montserrat"; +//@import "../fonts/OpenSans"; +//@import "../fonts/OpenSansCondensed"; +//@import "../fonts/PTSans"; +//@import "../fonts/PTSansNarrow"; +@import "../fonts/Roboto"; +//@import "../fonts/RobotoCondensed"; +//@import "../fonts/RobotoSlab"; +//@import "../fonts/SourceSansPro"; +//@import "../fonts/Ubuntu"; + +// ## Local Fonts Monospaced ## +//@import "../fonts/FiraCode"; diff --git a/sass/skins/_auto.scss b/sass/skins/_auto.scss deleted file mode 100644 index 7c6109a..0000000 --- a/sass/skins/_auto.scss +++ /dev/null @@ -1,37 +0,0 @@ -:root { - // Regular Fonts used by default: - --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; - // Monospace Fonts used for code: - --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; - - // Colors - --f1: #555; //font color 1 - --f2: #333; //font color 2 - - --c1: #fff; //color 1 - --c2: #eee; //color 2 - --c3: #ddd; //color 3 - --c4: #777; //color 4 - - --a1: #c40; //accent color 1 link - --a2: #e60; //accent color 2 hover,focus - --a3: #e60; //accent color 3 h1-h2 hover,focus - - --cg: #483; //ins green - --cr: #d33; //del red -} -@media (prefers-color-scheme: dark) { - :root { - --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 - - --a1: #f90; //accent color 1 link - --a2: #fb0; //accent color 2 hover,focus - --a3: #fb0; //accent color 3 h1-h2 hover,focus - } -} diff --git a/sass/skins/_blue-auto.scss b/sass/skins/_blue-auto.scss new file mode 100644 index 0000000..7879b06 --- /dev/null +++ b/sass/skins/_blue-auto.scss @@ -0,0 +1,41 @@ +:root { + // Regular Fonts used by default: + --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif; + //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004) + //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401) + + // Monospace Fonts used for code: + --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace; + // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/ + + // Colors + --f1: #111; //font color 1 + --f2: #222; //font color 2 + + --c1: #fafafa; //color 1 + --c2: #dbe7f5; //color 2 + --c3: #062671; //color 3 + --c4: #03143c; //color 4 + + --a1: #3b7ed0; //accent color 1 link + --a2: #004faf; //accent color 2 hover,focus + --a3: #004faf; //accent color 3 h1-h2 hover,focus + + --cg: #483; //ins green + --cr: #d33; //del red +} +@media (prefers-color-scheme: dark) { + :root { + --f1: #ccc; //font color 1 + --f2: #ddd; //font color 2 + + --c1: #111; //color 1 + --c2: #1a274a; //color 2 + --c3: #404d69; //color 3 + --c4: #2c3957; //color 4 + + --a1: #2f7ddb; //accent color 1 link + --a2: #4d9dff; //accent color 2 hover,focus + --a3: #4d9dff; //accent color 3 h1-h2 hover,focus + } +} diff --git a/sass/skins/_blue-dark.scss b/sass/skins/_blue-dark.scss new file mode 100644 index 0000000..1c29f55 --- /dev/null +++ b/sass/skins/_blue-dark.scss @@ -0,0 +1,26 @@ +:root { + // Regular Fonts used by default: + --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif; + //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004) + //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401) + + // Monospace Fonts used for code: + --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace; + // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/ + + // Colors + --f1: #ccc; //font color 1 + --f2: #ddd; //font color 2 + + --c1: #111; //color 1 + --c2: #1a274a; //color 2 + --c3: #404d69; //color 3 + --c4: #2c3957; //color 4 + + --a1: #2f7ddb; //accent color 1 link + --a2: #4d9dff; //accent color 2 hover,focus + --a3: #4d9dff; //accent color 3 h1-h2 hover,focus + + --cg: #483; //ins green + --cr: #d33; //del red +} diff --git a/sass/skins/_blue-light.scss b/sass/skins/_blue-light.scss new file mode 100644 index 0000000..ea87f7e --- /dev/null +++ b/sass/skins/_blue-light.scss @@ -0,0 +1,26 @@ +:root { + // Regular Fonts used by default: + --ff: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Noto Sans", Helvetica, Arial, sans-serif; + //GOOD CLS: DroidSans(0), Roboto(0.002), Lato(0.002), Arimo(0.002), Ubuntu(0.004) + //BAD CLS: PTSans(0.08), RobotoCondensed(0.074), SourceSansPro(0.075), PTSansNarrow(0.131), Montserrat(0.251), OpenSansCondensed(0.319), RobotoSlab(0.388), OpenSans(0.389), Jost(0.401) + + // Monospace Fonts used for code: + --fm: ui-monospace, Menlo, Monaco, Consolas, "SF Mono", "Cascadia Mono", "Segoe UI Mono", "DejaVu Sans Mono", "Liberation Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", Courier, monospace; + // https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/ + + // Colors + --f1: #111; //font color 1 + --f2: #222; //font color 2 + + --c1: #fafafa; //color 1 + --c2: #dbe7f5; //color 2 + --c3: #062671; //color 3 + --c4: #03143c; //color 4 + + --a1: #3b7ed0; //accent color 1 link + --a2: #004faf; //accent color 2 hover,focus + --a3: #004faf; //accent color 3 h1-h2 hover,focus + + --cg: #483; //ins green + --cr: #d33; //del red +} diff --git a/sass/skins/_blueauto.scss b/sass/skins/_blueauto.scss deleted file mode 100644 index 1c4a55a..0000000 --- a/sass/skins/_blueauto.scss +++ /dev/null @@ -1,37 +0,0 @@ -:root { - // Regular Fonts used by default: - --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; - // Monospace Fonts used for code: - --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; - - // Colors - --f1: #111; //font color 1 - --f2: #222; //font color 2 - - --c1: #fafafa; //color 1 - --c2: #dbe7f5; //color 2 - --c3: #062671; //color 3 - --c4: #03143c; //color 4 - - --a1: #3b7ed0; //accent color 1 link - --a2: #004faf; //accent color 2 hover,focus - --a3: #004faf; //accent color 3 h1-h2 hover,focus - - --cg: #483; //ins green - --cr: #d33; //del red -} -@media (prefers-color-scheme: dark) { - :root { - --f1: #ccc; //font color 1 - --f2: #ddd; //font color 2 - - --c1: #111; //color 1 - --c2: #1a274a; //color 2 - --c3: #404d69; //color 3 - --c4: #2c3957; //color 4 - - --a1: #2f7ddb; //accent color 1 link - --a2: #4d9dff; //accent color 2 hover,focus - --a3: #4d9dff; //accent color 3 h1-h2 hover,focus - } -} diff --git a/sass/skins/_bluelight.scss b/sass/skins/_bluelight.scss deleted file mode 100644 index a9b5315..0000000 --- a/sass/skins/_bluelight.scss +++ /dev/null @@ -1,22 +0,0 @@ -:root { - // Regular Fonts used by default: - --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; - // Monospace Fonts used for code: - --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; - - // Colors - --f1: #111; //font color 1 - --f2: #222; //font color 2 - - --c1: #fafafa; //color 1 - --c2: #dbe7f5; //color 2 - --c3: #062671; //color 3 - --c4: #03143c; //color 4 - - --a1: #3b7ed0; //accent color 1 link - --a2: #004faf; //accent color 2 hover,focus - --a3: #004faf; //accent color 3 h1-h2 hover,focus - - --cg: #483; //ins green - --cr: #d33; //del red -} diff --git a/sass/skins/_bluenight.scss b/sass/skins/_bluenight.scss deleted file mode 100644 index def62dd..0000000 --- a/sass/skins/_bluenight.scss +++ /dev/null @@ -1,22 +0,0 @@ -:root { - // Regular Fonts used by default: - --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; - // Monospace Fonts used for code: - --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; - - // Colors - --f1: #ccc; //font color 1 - --f2: #ddd; //font color 2 - - --c1: #111; //color 1 - --c2: #1a274a; //color 2 - --c3: #404d69; //color 3 - --c4: #2c3957; //color 4 - - --a1: #2f7ddb; //accent color 1 link - --a2: #4d9dff; //accent color 2 hover,focus - --a3: #4d9dff; //accent color 3 h1-h2 hover,focus - - --cg: #483; //ins green - --cr: #d33; //del red -} diff --git a/sass/skins/_dark.scss b/sass/skins/_dark.scss deleted file mode 100644 index 9c4519b..0000000 --- a/sass/skins/_dark.scss +++ /dev/null @@ -1,22 +0,0 @@ -:root { - // Regular Fonts used by default: - --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; - // Monospace Fonts used for code: - --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; - - // Colors - --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 - - --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/skins/_light.scss b/sass/skins/_light.scss deleted file mode 100644 index 0a51439..0000000 --- a/sass/skins/_light.scss +++ /dev/null @@ -1,22 +0,0 @@ -:root { - // Regular Fonts used by default: - --ff: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif; - // Monospace Fonts used for code: - --fm: Menlo, Consolas, "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace; - - // Colors - --f1: #555; //font color 1 - --f2: #333; //font color 2 - - --c1: #fff; //color 1 - --c2: #eee; //color 2 - --c3: #ddd; //color 3 - --c4: #777; //color 4 - - --a1: #c40; //accent color 1 link - --a2: #e60; //accent color 2 hover,focus - --a3: #e60; //accent color 3 h1-h2 hover,focus - - --cg: #483; //ins green - --cr: #d33; //del red -} |