Skip to content

Commit

Permalink
SVG CSS Icons, Load Fonts in Separate css file
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jieiku
Jieiku committed Jun 27, 2022
1 parent f29bffa commit c2e4ff9
Show file tree
Hide file tree
Showing 20 changed files with 86 additions and 50 deletions.
10 changes: 8 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -354,9 +354,15 @@ All pages extend to `base.html`, and you can customize them as need.

### Abridge.woff2 Icon Font

The Abridge.woff2 Icon Font is a subset of Font Awesome.
By default Abridge uses SVG icons directly in CSS, `abridge/sass/include/_icons.scss`, this very efficient and results in the least requests, additionally noscript does not block these resources.

This file can be overridden just like any other Zola theme file, by placing your own Abridge.woff2 in your sites root eg: `mysite/static/font/Abridge.woff2`
The Abridge.woff2 Icon Font is a subset of Font Awesome, it is still included but not used by default because noscript addon blocks loading of font resources.

If you still want to use font icons continue reading:

Abridge.woff2 Icon Font is a subset of Font Awesome, and can be loaded like any other font by uncommenting the font in the `abridge/sass/font.scss` and including the font.css file in your stylesheet array defined in config.toml: `stylesheets = [ "abridge-switcher.css", "font.css", "iconfont.css" ]`

Abridge.woff2 file can be overridden just like any other Zola theme file, by placing your own Abridge.woff2 in your sites root eg: `mysite/static/font/Abridge.woff2`

To create your own Icon Font with other/more icons you can use the repository here: https://github.com/Jieiku/fontsubset

Expand Down
18 changes: 10 additions & 8 deletions config.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,9 @@ js_bundle = "abridge-switcher.min.js"# Bundle JS File, comment out to disable (i
stylesheets = [ "abridge-switcher.css" ] # Orange Automatic Dark/Light Theme based on browser/system preference with switcher
#stylesheets = [ "abridge-blue-switcher.css" ] # Blue Automatic Night/Light Theme based on browser/system preference with switcher
#stylesheets = [ "abridge-blueshade-switcher.css" ] # BlueShade Automatic Night/Light Theme based on browser/system preference with switcher
#stylesheets = [ "abridge-switcher.css", "myfont.css" ] # include your own font icons!
#stylesheets = [ "abridge-switcher.css", "font.css" ] # include your own font!
#stylesheets = [ "abridge-switcher.css", "iconfont.css" ] # include your own font icons!
#stylesheets = [ "abridge-switcher.css", "font.css", "iconfont.css" ] # include your own font, and font icons!

########## No Switcher ##########
#js_bundle = "search.min.js"# Bundle JS File, comment out to disable (search only: no switcher/prestyle)
Expand Down Expand Up @@ -144,13 +146,13 @@ favicon180 = "apple-touch-icon.png" # apple-touch-icon.png
favicon32 = "favicon-32x32.png" # favicon-32x32.png
favicon16 = "favicon-16x16.png" # favicon-16x16.png

icon_search = "svgs i-search" # Search button in search box.
icon_adjust = "svgs i-adjust" # Theme Switcher button in top menu. (add class svgh to change colors on hover)
icon_top = "svgs i-up" # Back to Top Button.
icon_first = "svgs i-first" # Pagination First Page.
icon_prev = "svgs i-prev" # Pagination Previous Page.
icon_next = "svgs i-next" # Pagination Next Page.
icon_last = "svgs i-last" # Pagination Last Page.
icon_search = "svgs search" # Search button in search box.
icon_adjust = "svgs adjust" # Theme Switcher button in top menu. (add class svgh to change colors on hover)
icon_first = "svgs svgh angll" # Pagination First Page.
icon_prev = "svgs svgh angl" # Pagination Previous Page.
icon_next = "svgs svgh angr" # Pagination Next Page.
icon_last = "svgs svgh angrr" # Pagination Last Page.
icon_top = "svgs svgh angu" # Back to Top Button.

# Uncomment below line to load fontawesome, eg: <i class="fa-solid fa-heart"></i>
#fontawesome = "https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css"
Expand Down
10 changes: 8 additions & 2 deletions sass/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,14 @@ $icon-youtube: true !default;
$icon-researchgate: true !default;

$icon-x: true !default;// x symbol
$icon-search: false !default;
$icon-contrast: false !default;
$icon-search: true !default;//search
$icon-adjust: true !default;//theme switcher
$icon-angll: true !default;//first page
$icon-angl: true !default;//previous page
$icon-angr: true !default;//next page
$icon-angrr: true !default;//last page
$icon-angu: true !default;//back to top

$icon-ffolder: false !default;
$icon-folder: false !default;// categories folder
$icon-ftag: false !default;
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge-blue-dark.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge-blue-light.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge-blue-switcher.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge-blue.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge-blueshade-dark.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge-blueshade-light.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge-blueshade-switcher.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge-blueshade.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge-dark.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge-light.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge-switcher.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
4 changes: 2 additions & 2 deletions sass/abridge.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Abridge";
//@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
Expand Down
5 changes: 5 additions & 0 deletions sass/font.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
//@import "fonts/Abridge";
@import "fonts/Roboto";
//@import "fonts/Arimo";
//@import "fonts/Lato";
//@import "fonts/FiraCode"; // Monospaced
30 changes: 17 additions & 13 deletions sass/include/_icons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
check: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E",
chevron: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E",
clock: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E",
contrast: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C6 0 0 6 0 12s5 12 12 12 12-5 12-12S19 0 12 0Zm0 4c5 0 8 3 8 8s-3 8-8 8V4Z'/%3E%3C/svg%3E",
date: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cpath d='M16 2v4M8 2v4m-5 4h18'/%3E%3C/svg%3E",
docker: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M4 19.8S7 20 8 18m-4-7h3v3H4Zm3 0h3v3H7Zm3 0h3v3h-3ZM7 8h3v3H7Zm3 0h3v3h-3Zm0-3h3v3h-3Zm10 8c-1 0-1 0-1.4-1.9C18.5 10 17 10 17 12c0 1 0 2-3 2H1a9 9 0 0 0 3 6c3 2 5 2 9 1a10.8 10.8 90 0 0 5-4c1-2 1-1 3-2s1-2 0-2Z'/%3E%3C/svg%3E%0A",
element: "%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C5 0 0 6 0 12s6 12 12 12 12-6 12-12A12 12 0 0 0 12 0Zm-1 4c4 0 6 3 6 6 0 2-2 2-2 0s-2-4-4-4-2-2 0-2Zm-7 9c0-4 3-6 6-6 2 0 2 2 0 2s-4 2-4 4-2 2-2 0Zm9 7c-4 0-6-3-6-6 0-2 2-2 2 0s2.4 4 4 4c2 0 2 2 0 2Zm1-3c-2 0-2-2 0-2s4-2 4-4 2-2 2 0c0 4-3 6-6 6Z'/%3E%3C/svg%3E",
Expand All @@ -48,25 +47,37 @@
python: "%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='#{map-get($p, f)}' d='M17 6c0 4-1 5-6 5-4 0-5 1-5 6-4 0-5-1-5-6 0-3 1-4.5 4-4.5h7c0-.5 0-.5-1-.5H6c0-3 0-5 6-5 5 0 5 2 5 5ZM9 3C7.5 3 7.5 5 9 5s1.5-2 0-2Z'/%3E%3Cpath fill='#{map-get($p, s)}' d='M23 12c0 3-1 4.6-4 4.5h-7v.5h6c0 4 0 6-6 6-5 0-5-2-5-6s1-5 6-5c4 0 5-1 5-6 4 0 5 1 5 6Zm-8 7c-1.5 0-1.5 2 0 2s1.5-2 0-2Z' /%3E%3C/svg%3E",
researchgate: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M16 5c0 3.5.7 5 3 5s3.7-1.3 3.3-5h-3v1.3H21c0 1.9-.7 2.7-2 2.5-1.3 0-1.8-.7-1.8-3.2 0-2.4.4-3.3 1.5-3.4 1-.2 1.7.2 2.2 1.1L22 3c-.4-1.3-1.4-2-2.9-2C17.2 1 16 2 16 5ZM8 6.2l-6 .2v.9c1 .3 2 0 2 2.2v11C4 22 3 22 2 22.2v.8h6.6v-.8C7 22 6 22 6 20.5v-5.2h2a46 46 0 0 0 4 5.7 5 5 0 0 0 5 2v-1c-3 0-5-5-7-7 6-1 6-10-2-8.8ZM6 14V7.6C14 6 13 14 8 14Z'/%3E%3C/svg%3E",
rss: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16'/%3E%3Ccircle cx='5' cy='19' r='1'/%3E%3C/svg%3E",
search: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' stroke-linecap='round' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='9' cy='9' r='7'/%3E%3Cpath d='m21 21-7-7'/%3E%3C/svg%3E",
stack: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1M8 16h8m-7.7-3.4 8 .8M8.8 9.2l7.8 1.6m-6.5-5 7.6 2.4'/%3E%3C/svg%3E",
sun: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 1v2m0 18v2M4.2 4.2l1.4 1.4m12.8 12.8 1.4 1.4M1 12h2m18 0h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4'/%3E%3C/svg%3E",
tag: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m20.6 13.4-7.2 7.2a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8zM7 7h.01'/%3E%3C/svg%3E",
twitch: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7'/%3E%3C/svg%3E",
twitter: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M23 3a10.9 10.9 0 0 1-3.1 1.5 4.5 4.5 0 0 0-7.9 3v1A10.7 10.7 0 0 1 3 4s-4 9 5 13a11.6 11.6 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0 0-.8A7.7 7.7 0 0 0 23 3z'/%3E%3C/svg%3E",
x: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M21 3 3 21M3 3l18 18'/%3E%3C/svg%3E",
youtube: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m9.8 15 5.7-3.3-5.8-3.2V15Zm12.7-8.6a2.8 2.8 0 0 0-1.9-2C18.9 4 12 4 12 4s-6.9 0-8.6.5a2.8 2.8 0 0 0-2 2 29 29 0 0 0-.4 5.3 29 29 0 0 0 .5 5.3A2.8 2.8 0 0 0 3.4 19c1.7.5 8.6.5 8.6.5s6.9 0 8.6-.5a2.8 2.8 0 0 0 2-2 29 29 0 0 0 .4-5.3 29 29 0 0 0-.5-5.3z'/%3E%3C/svg%3E"
youtube: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m9.8 15 5.7-3.3-5.8-3.2V15Zm12.7-8.6a2.8 2.8 0 0 0-1.9-2C18.9 4 12 4 12 4s-6.9 0-8.6.5a2.8 2.8 0 0 0-2 2 29 29 0 0 0-.4 5.3 29 29 0 0 0 .5 5.3A2.8 2.8 0 0 0 3.4 19c1.7.5 8.6.5 8.6.5s6.9 0 8.6-.5a2.8 2.8 0 0 0 2-2 29 29 0 0 0 .4-5.3 29 29 0 0 0-.5-5.3z'/%3E%3C/svg%3E",
adjust: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C6 0 0 6 0 12s5 12 12 12 12-5 12-12S19 0 12 0Zm0 4c5 0 8 3 8 8s-3 8-8 8V4Z'/%3E%3C/svg%3E",
angl: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m16 4-8 8 8 8'/%3E%3C/svg%3E",
angll: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m11 4-8 8 8 8m9-16-8 8 8 8'/%3E%3C/svg%3E",
angr: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m8 4 8 8-8 8'/%3E%3C/svg%3E",
angrr: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m4 4 8 8-8 8m9-16 8 8-8 8'/%3E%3C/svg%3E",
angu: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Cpath d='m4 16 8-8 8 8'/%3E%3C/svg%3E",
search: "%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='#{map-get($p, s)}' stroke-width='#{map-get($p, sw)}' fill='#{map-get($p, f)}' viewBox='0 0 24 24'%3E%3Ccircle cx='9.5' cy='9.5' r='8'/%3E%3Cpath d='m23 23-9-9'/%3E%3C/svg%3E"
);
$icon: map-get($icons, $icon-name);
@return url("data:image/svg+xml,#{$icon}");
}
@if $enable-icons {
@if $icon-adjust {.adjust { -webkit-mask: icon(adjust, "none", 1, "%23000") ; background: var(--f2) }}//theme switcher
@if $icon-angl {.angl { -webkit-mask: icon(angl, "%23000", 3, "none") ; background: var(--f2) }}//angle left
@if $icon-angll {.angll { -webkit-mask: icon(angll, "%23000", 3, "none") ; background: var(--f2) }}//angle left left
@if $icon-angr {.angr { -webkit-mask: icon(angr, "%23000", 3, "none") ; background: var(--f2) }}//angle right
@if $icon-angrr {.angrr { -webkit-mask: icon(angrr, "%23000", 3, "none") ; background: var(--f2) }}//angle right right
@if $icon-angu {.angu { -webkit-mask: icon(angu, "%23000", 3, "none") ; background: var(--f2) }}//angle up
@if $icon-search {.search { -webkit-mask: icon(search, "%23000", 3, "none") ; background: var(--f2) }}//search
@if $icon-bitbucket {.bitbucket { background-image: icon(bitbucket, "%2328f", 2, "none") }}
@if $icon-buymeacoffee {.buymeacoffee { background-image: icon(buymeacoffee, "%23777", 1, "%23fd0") }}
@if $icon-check {.check { background-image: icon(check, "%23888", 2, "none") }}
@if $icon-chevron {.chevron { background-image: icon(chevron, "%23888", 2, "none") }}
@if $icon-clock {.clock { background-image: icon(clock, "%23888", 2, "none") }}
@if $icon-contrast {.contrast { mask: icon(contrast, "none", 1, "%23000") ; background: var(--f2) }}
@if $icon-date {.date { background-image: icon(date, "%23888", 2, "none") }}
@if $icon-docker {.docker { background-image: icon(docker, "%2329e", 2, "none") }}
@if $icon-element {.element { background-image: icon(element, "none", 1, "%231c8") }}
Expand All @@ -88,7 +99,6 @@
@if $icon-python {.python { background-image: icon(python, "%23fc1", 2, "%2326a") }}
@if $icon-researchgate {.researchgate { background-image: icon(researchgate, "none", 2, "%230db") }}
@if $icon-rss {.rss { background-image: icon(rss, "%23e94", 2, "none") }}
@if $icon-search {.search { background-image: icon(search, "%23888", 3, "none") }}
@if $icon-stack {.stack { background-image: icon(stack, "%23e72", 2, "none") }}
@if $icon-sun {.sun { background-image: icon(sun, "%23888", 2, "none") }}
@if $icon-tag {.tag { background-image: icon(tag, "%23888", 2, "none") }}
Expand All @@ -100,7 +110,7 @@
width: 1.8rem;
height: 1.8rem;
display: inline-block;
overflow: hidden;
//overflow: hidden;
text-align: center;
vertical-align: middle
}
Expand All @@ -110,13 +120,7 @@
display: inline-block;
//overflow: hidden;
text-align: center;
vertical-align: middle
}
.svgh:hover {
//background: var(--a3);
//opacity: 1;
color: var(--a3);
opacity: 1;
vertical-align: middle;
}
.fa-a:hover {
color: var(--a3);
Expand Down
8 changes: 8 additions & 0 deletions sass/include/_nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ main nav a:visited {//pagination link styling
}
main nav a:hover {//makes border of pagination links hover color
border-color: var(--a3);
.svgh {
background: var(--a3);
opacity: 1;
}
}
header > nav > div:first-of-type {//Keep the logo from wrapping
display: inline;
Expand Down Expand Up @@ -70,6 +74,10 @@ main nav {
font-weight: var(--fh);
border: .1rem solid var(--c3);
border-radius: var(--br);
.svgh {
background: var(--c3);
opacity: 1;
}
}
.on {
font-weight: var(--fh);
Expand Down
3 changes: 2 additions & 1 deletion sass/include/_sectioning.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,8 +80,9 @@ body {
}
}
footer{
line-height: var(--lhh);
hr, p {
margin: 0 0 .4rem
margin: 0.1rem 0 .3rem
}
}
}
4 changes: 4 additions & 0 deletions sass/include/_top.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,8 @@
text-decoration: none;
color: var(--c2);
background: var(--a1);
.svgh {
background: var(--c2);
opacity: 1;
}
}

1 comment on commit c2e4ff9

@Jieiku
Copy link
Owner Author

@Jieiku Jieiku commented on c2e4ff9 Jun 27, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was a couple motivations for moving away from using a woff2 icon font.

The first reason is it is one fewer request, the second reason is that users using noscript will see a somewhat broke page.

2022-06-26_13-52-24

You could argue that noscript users are accustomed to this and know to whitelist the site if they trust it, but this can be avoided entirely with css svg icons:

2022-06-26_13-54-12

The Abridge.woff2 file is still included but not used by default. Additionally Roboto is still defined as a font in the font family css, but is no longer loaded as a font resource.

The Roboto font files are also still included, just not loaded by default, this font is also still defined in this file: abridge/sass/font.scss

so literally all you need to do to keep loading the roboto font is make a change in config.toml:

change this:

stylesheets = [ "abridge-switcher.css" ]

to this

stylesheets = [ "abridge-switcher.css", "font.css" ]

You may need to adjust your config.toml:

#stylesheets = [ "abridge-switcher.css", "font.css" ] # include your own font!
#stylesheets = [ "abridge-switcher.css", "iconfont.css" ] # include your own font icons!
#stylesheets = [ "abridge-switcher.css", "font.css", "iconfont.css" ] # include your own font, and font icons!

You could think of this commit as a Refactor, still supporting these other methods/features, but not enabled by default, so that abridge can be kept lightweight as a default.

Please sign in to comment.