diff options
Diffstat (limited to 'COPY-TO-ROOT-SASS')
| -rw-r--r-- | COPY-TO-ROOT-SASS/abridge.scss | 26 | ||||
| -rw-r--r-- | COPY-TO-ROOT-SASS/fonts/_Arimo.scss | 17 |
2 files changed, 39 insertions, 4 deletions
diff --git a/COPY-TO-ROOT-SASS/abridge.scss b/COPY-TO-ROOT-SASS/abridge.scss index 89689b4..5facb99 100644 --- a/COPY-TO-ROOT-SASS/abridge.scss +++ b/COPY-TO-ROOT-SASS/abridge.scss @@ -5,7 +5,7 @@ /// Enable a centered viewport for <header>, <main>, <footer> inside <body> /// Fluid layout until a defined size, then becomes centered viewport. //$enable-maxwidth: true, - $mw: 75%,// max-width + $mw: 70%,// max-width //$mb: 1200px,// value at which to switch from fluid layout to max-width $abridgeMode: "switcher",//valid values: switcher, auto, dark, light @@ -124,14 +124,23 @@ //$ha: 92%,// mark/highlight line /// These lines find the spot at which to insert your appended fonts. - //$findFont-Main: "Segoe UI", // ← append custom MAIN font(s) AFTER this - //$findFont-Code: "Segoe UI Mono",// ← append custom CODE font(s) AFTER this + //$findFont-Main: "Segoe UI", // ← APPEND custom MAIN font(s) AFTER this + //$findFont-Code: "Segoe UI Mono",// ← APPEND custom CODE font(s) AFTER this + + /// If you want to prepend the font list, then use null instead: + //$findFont-Main: null, // ← PREPEND custom MAIN font(s) + //$findFont-Code: null, // ← PREPEND custom CODE font(s) /// These lines specify the fonts to add. //$fontExt-Main: (ExampleFont1, "Example Font 2"),// MAIN font(s) to add //$fontExt-Code: (ExampleCode1, "Example Code 2"),// CODE font(s) to add - /// If prepending/appending fonts above, then no need to change them below + /// If relying on installed fonts alone, then the above is all you need, if the visiting system has the intended font installed then it will use it! + /// However, if you want to load the Font File resource to ensure it is loaded if they do not have it, then use @use at the VERY Bottom of this file. + /// For a Sans based system font stack, I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo + + /// If prepending/appending fonts above, then no need to change them with the 2 below lines. + /// The following 2 below lines give a way to hard code a font list if you prefer. //$font: Roboto system-ui -apple-system BlinkMacSystemFont "Segoe UI" Oxygen Ubuntu Cantarell "Fira Sans" "Droid Sans" "Helvetica Neue" "Noto Sans" Helvetica Arial sans-serif, //$font-mono: 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, @@ -179,3 +188,12 @@ //$grid: false,//Infinity Grid, column based layouts. //$syntax: true,//syntax highlighting for code blocks ); +/****************************************************************************** + * FONTS - Abridge by default uses the System Font Stack + * https://css-tricks.com/snippets/css/system-font-stack/ + * However if you need you can load a specific font below, + * make sure to have the relevant woff2 fonts in your static/fonts folder + * I measured the least Cumulative Layout Shift with: Roboto, Lato, Arimo + *****************************************************************************/ +//@use "fonts/Roboto"; +//@use "fonts/Arimo"; diff --git a/COPY-TO-ROOT-SASS/fonts/_Arimo.scss b/COPY-TO-ROOT-SASS/fonts/_Arimo.scss new file mode 100644 index 0000000..d3dc829 --- /dev/null +++ b/COPY-TO-ROOT-SASS/fonts/_Arimo.scss @@ -0,0 +1,17 @@ +@font-face { + font-family: 'Arimo'; + src: local("Arimo"), url("fonts/Arimo.woff2");//latin regular + font-display: swap; +} +@font-face { + font-family: 'Arimo'; + src: local("Arimo-Italic"), url("fonts/Arimo-Italic.woff2");//latin italic + font-style: italic; + font-display: swap; +} +@font-face { + font-family: 'Arimo'; + src: local("Arimo-Bold"), url("fonts/Arimo-Bold.woff2");//latin bold + font-weight: bold; + font-display: swap; +} |