From c2e4ff935b54126ec516f55b5e47ade99c99a1cd Mon Sep 17 00:00:00 2001 From: Jieiku <106644+Jieiku@users.noreply.github.com> Date: Sun, 26 Jun 2022 20:02:56 -0700 Subject: [PATCH] SVG CSS Icons, Load Fonts in Separate css file --- README.md | 10 ++++++++-- config.toml | 18 +++++++++-------- sass/_variables.scss | 10 ++++++++-- sass/abridge-blue-dark.scss | 4 ++-- sass/abridge-blue-light.scss | 4 ++-- sass/abridge-blue-switcher.scss | 4 ++-- sass/abridge-blue.scss | 4 ++-- sass/abridge-blueshade-dark.scss | 4 ++-- sass/abridge-blueshade-light.scss | 4 ++-- sass/abridge-blueshade-switcher.scss | 4 ++-- sass/abridge-blueshade.scss | 4 ++-- sass/abridge-dark.scss | 4 ++-- sass/abridge-light.scss | 4 ++-- sass/abridge-switcher.scss | 4 ++-- sass/abridge.scss | 4 ++-- sass/font.scss | 5 +++++ sass/include/_icons.scss | 30 ++++++++++++++++------------ sass/include/_nav.scss | 8 ++++++++ sass/include/_sectioning.scss | 3 ++- sass/include/_top.scss | 4 ++++ 20 files changed, 86 insertions(+), 50 deletions(-) create mode 100644 sass/font.scss diff --git a/README.md b/README.md index a178dc0c..a75e1c18 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/config.toml b/config.toml index 90d61dd5..4e8367d9 100644 --- a/config.toml +++ b/config.toml @@ -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) @@ -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: #fontawesome = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css" diff --git a/sass/_variables.scss b/sass/_variables.scss index af41e320..c747c761 100644 --- a/sass/_variables.scss +++ b/sass/_variables.scss @@ -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; diff --git a/sass/abridge-blue-dark.scss b/sass/abridge-blue-dark.scss index 7d50a020..eed6abdc 100644 --- a/sass/abridge-blue-dark.scss +++ b/sass/abridge-blue-dark.scss @@ -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 diff --git a/sass/abridge-blue-light.scss b/sass/abridge-blue-light.scss index de2c30a6..c23dbf48 100644 --- a/sass/abridge-blue-light.scss +++ b/sass/abridge-blue-light.scss @@ -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 diff --git a/sass/abridge-blue-switcher.scss b/sass/abridge-blue-switcher.scss index 7acbc4fa..202723b7 100644 --- a/sass/abridge-blue-switcher.scss +++ b/sass/abridge-blue-switcher.scss @@ -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 diff --git a/sass/abridge-blue.scss b/sass/abridge-blue.scss index 7f599e0e..67f556f9 100644 --- a/sass/abridge-blue.scss +++ b/sass/abridge-blue.scss @@ -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 diff --git a/sass/abridge-blueshade-dark.scss b/sass/abridge-blueshade-dark.scss index f9d470e0..726f59df 100644 --- a/sass/abridge-blueshade-dark.scss +++ b/sass/abridge-blueshade-dark.scss @@ -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 diff --git a/sass/abridge-blueshade-light.scss b/sass/abridge-blueshade-light.scss index 0c1e57f9..70a2544b 100644 --- a/sass/abridge-blueshade-light.scss +++ b/sass/abridge-blueshade-light.scss @@ -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 diff --git a/sass/abridge-blueshade-switcher.scss b/sass/abridge-blueshade-switcher.scss index 4c8bd803..db973e33 100644 --- a/sass/abridge-blueshade-switcher.scss +++ b/sass/abridge-blueshade-switcher.scss @@ -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 diff --git a/sass/abridge-blueshade.scss b/sass/abridge-blueshade.scss index b5b91550..2f67e510 100644 --- a/sass/abridge-blueshade.scss +++ b/sass/abridge-blueshade.scss @@ -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 diff --git a/sass/abridge-dark.scss b/sass/abridge-dark.scss index be52227b..38885531 100644 --- a/sass/abridge-dark.scss +++ b/sass/abridge-dark.scss @@ -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 diff --git a/sass/abridge-light.scss b/sass/abridge-light.scss index 4f9285fa..bd7825f2 100644 --- a/sass/abridge-light.scss +++ b/sass/abridge-light.scss @@ -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 diff --git a/sass/abridge-switcher.scss b/sass/abridge-switcher.scss index 04620090..1dce1fee 100644 --- a/sass/abridge-switcher.scss +++ b/sass/abridge-switcher.scss @@ -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 diff --git a/sass/abridge.scss b/sass/abridge.scss index 5b7f2857..c25f39e8 100644 --- a/sass/abridge.scss +++ b/sass/abridge.scss @@ -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 diff --git a/sass/font.scss b/sass/font.scss new file mode 100644 index 00000000..56d7b546 --- /dev/null +++ b/sass/font.scss @@ -0,0 +1,5 @@ +//@import "fonts/Abridge"; +@import "fonts/Roboto"; +//@import "fonts/Arimo"; +//@import "fonts/Lato"; +//@import "fonts/FiraCode"; // Monospaced \ No newline at end of file diff --git a/sass/include/_icons.scss b/sass/include/_icons.scss index bba3e305..fa9b3d44 100644 --- a/sass/include/_icons.scss +++ b/sass/include/_icons.scss @@ -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", @@ -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") }} @@ -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") }} @@ -100,7 +110,7 @@ width: 1.8rem; height: 1.8rem; display: inline-block; - overflow: hidden; + //overflow: hidden; text-align: center; vertical-align: middle } @@ -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); diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss index a86ec54e..f3a9b29a 100644 --- a/sass/include/_nav.scss +++ b/sass/include/_nav.scss @@ -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; @@ -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); diff --git a/sass/include/_sectioning.scss b/sass/include/_sectioning.scss index 9b618095..948e3e2a 100644 --- a/sass/include/_sectioning.scss +++ b/sass/include/_sectioning.scss @@ -80,8 +80,9 @@ body { } } footer{ + line-height: var(--lhh); hr, p { - margin: 0 0 .4rem + margin: 0.1rem 0 .3rem } } } diff --git a/sass/include/_top.scss b/sass/include/_top.scss index 7b9d026d..5d092388 100644 --- a/sass/include/_top.scss +++ b/sass/include/_top.scss @@ -21,4 +21,8 @@ text-decoration: none; color: var(--c2); background: var(--a1); + .svgh { + background: var(--c2); + opacity: 1; + } } \ No newline at end of file