SVG CSS Icons, Load Fonts in Separate css file1.1.0

4 files changed, 31 insertions, 14 deletions

diff --git a/sass/include/_icons.scss b/sass/include/_icons.scss
index bba3e30..fa9b3d4 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 a86ec54..f3a9b29 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 9b61809..948e3e2 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 7b9d026..5d09238 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