Paginator Spacing, Relative Path Fonts, Fontawesome Icons

10 files changed, 36 insertions, 27 deletions

diff --git a/config.toml b/config.toml
index 6a67c2a..3d54d17 100644
--- a/config.toml
+++ b/config.toml
@@ -57,10 +57,12 @@ meta_post = { position="top", size="s95", author=true, readtime=false, readstrin
 footer_size = "s90" # size: s95, s90, s85, s80, s75, s70, false(full size)
 footer_credit = true
 #footer_credit_override = '<p class="s90">Powered by <a href="https://www.getzola.org/">Zola</a> &#38; <a href="https://github.com/Jieiku/abridge/">Abridge</a></p>'
+
 #uncomment one of the two lines, or neither, depending on which type of logo you want to use:
 #logo = { file="logo.svg", width="32", height="32", alt="Abridge", text="bridge" }
 #textlogo = '<font color="#f90">A</font>bridge'
 textlogo = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#f90" viewBox="0 0 96 96" width="32" height="32"><path stroke-width="14" d="M14 99 46 7h4l32 92"/><path stroke-width="9" d="M-3 82c43-26 59-26 102 0"/><path stroke-linecap="round" stroke-width="1.5" d="M94 72v7m-5-9.8v7m-5-9.8v7.1M79 64v7M63 57.7v7m-5-8.2v7m-5-7.8v7m-5-7.2v7m-5-6.7v7m-5-6.3v7m-5-5.8v7M17 64v7m-5-4.6v7m-5-4.2v7M2 72v7"/></svg>bridge'
+
 sitedesc = false # enables or disables the display of the site description below the logo.
 #copyright_start_year = 2019  # optional
 #copyright_end_year = 2020  # optional, recommend leaving unset, zola build will set this to current year by default
@@ -143,10 +145,19 @@ favicon16 = "favicon-16x16.png" # favicon-16x16.png
 
 # Uncomment below line to load fontawesome, eg: <i class="fa-solid fa-heart"></i>
 #fontawesome = "https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.1.1/css/all.min.css"
-#icon_read = "fa-solid fa-glasses" # displayed in metadata on index and below title on page.
-#icon_date = "fa-solid fa-calendar" # displayed in metadata on index and below title on page.
-#icon_info = "fa-solid fa-circle-info" # displayed in metadata on index and below title on page for categories/tags
-#icon_author = "fa-solid fa-pen-fancy" # displayed in metadata on index and below title on page.
+
+# Icons, by default fontawesome classes, but you can specify any icon you want here.
+#icon_read = "svgs fa-solid fa-glasses" # displayed in metadata on index and below title on page.
+#icon_date = "svgs fa-solid fa-calendar" # displayed in metadata on index and below title on page.
+#icon_info = "svgs fa-solid fa-circle-info" # displayed in metadata on index and below title on page for categories/tags
+#icon_author = "svgs fa-solid fa-pen-fancy" # displayed in metadata on index and below title on page.
+#icon_search = "svgs fa-solid fa-magnifying-glass" # Search button in search box.
+#icon_contrast = "svgs fa-a fa-solid fa-circle-half-stroke" # Theme Switcher button in top menu.
+#icon_top = "svgs fa-solid fa-circle-chevron-up" # Back to Top Button.
+#icon_first = "svgs fa-solid fa-angles-left" # Pagination First Page.
+#icon_prev = "svgs fa-solid fa-angle-left" # Pagination Previous Page.
+#icon_next = "svgs fa-solid fa-angle-right" # Pagination Next Page.
+#icon_last = "svgs fa-solid fa-angles-right" # Pagination Last Page.
 
 # For externally loaded Fonts, make sure to include the FULL url including the http/https prefix
 #fonts = [ {url = "https://fonts.googleapis.com/css?family=Montserrat:400,700,italic|Fira+Code:400,italic"} ]
@@ -176,7 +187,6 @@ katex_options = "katexoptions.js"
 katex_bundle = "katexbundle.min.js"
 
 
-
 ##########################
 # meta/seo/analytic tags
 ##########################
diff --git a/sass/fonts/_Arimo.scss b/sass/fonts/_Arimo.scss
index 83d9040..8931d79 100644
--- a/sass/fonts/_Arimo.scss
+++ b/sass/fonts/_Arimo.scss
@@ -1,17 +1,17 @@
 @font-face {
     font-family: 'Arimo';
-    src: local("Arimo"), url("/font/Arimo.woff2");//latin regular
+    src: local("Arimo"), url("font/Arimo.woff2");//latin regular
     font-display: swap;
 }
 @font-face {
     font-family: 'Arimo';
-    src: local("Arimo-Italic"), url("/font/Arimo-Italic.woff2");//latin italic
+    src: local("Arimo-Italic"), url("font/Arimo-Italic.woff2");//latin italic
     font-style: italic;
     font-display: swap;
 }
 @font-face {
     font-family: 'Arimo';
-    src: local("Arimo-Bold"), url("/font/Arimo-Bold.woff2");//latin bold
+    src: local("Arimo-Bold"), url("font/Arimo-Bold.woff2");//latin bold
     font-weight: bold;
     font-display: swap;
 }
diff --git a/sass/fonts/_FiraCode.scss b/sass/fonts/_FiraCode.scss
index 8053db9..a20f4d7 100644
--- a/sass/fonts/_FiraCode.scss
+++ b/sass/fonts/_FiraCode.scss
@@ -1,5 +1,5 @@
 @font-face {
     font-family: 'Fira Code';
-    src: local("Fira Code"), url("/font/FiraCode.woff2");//latin regular
+    src: local("Fira Code"), url("font/FiraCode.woff2");//latin regular
     font-display: swap;
 }
diff --git a/sass/fonts/_Lato.scss b/sass/fonts/_Lato.scss
index d8f2c0c..70c3d49 100644
--- a/sass/fonts/_Lato.scss
+++ b/sass/fonts/_Lato.scss
@@ -1,17 +1,17 @@
 @font-face {
     font-family: 'Lato';
-    src: local("Lato"), url("/font/Lato.woff2");//latin regular
+    src: local("Lato"), url("font/Lato.woff2");//latin regular
     font-display: swap;
 }
 @font-face {
     font-family: 'Lato';
-    src: local("Lato-Italic"), url("/font/Lato-Italic.woff2");//latin italic
+    src: local("Lato-Italic"), url("font/Lato-Italic.woff2");//latin italic
     font-style: italic;
     font-display: swap;
 }
 @font-face {
     font-family: 'Lato';
-    src: local("Lato-Bold"), url("/font/Lato-Bold.woff2");//latin bold
+    src: local("Lato-Bold"), url("font/Lato-Bold.woff2");//latin bold
     font-weight: bold;
     font-display: swap;
 }
diff --git a/sass/fonts/_Roboto.scss b/sass/fonts/_Roboto.scss
index d31714f..6370fc2 100644
--- a/sass/fonts/_Roboto.scss
+++ b/sass/fonts/_Roboto.scss
@@ -1,17 +1,17 @@
 @font-face {
     font-family: 'Roboto';
-    src: local("Roboto"), url("/font/Roboto.woff2");//latin regular
+    src: local("Roboto"), url("font/Roboto.woff2");//latin regular
     font-display: swap;
 }
 @font-face {
     font-family: 'Roboto';
-    src: local("Roboto-Italic"), url("/font/Roboto-Italic.woff2");//latin italic
+    src: local("Roboto-Italic"), url("font/Roboto-Italic.woff2");//latin italic
     font-style: italic;
     font-display: swap;
 }
 @font-face {
     font-family: 'Roboto';
-    src: local("Roboto-Bold"), url("/font/Roboto-Bold.woff2");//latin bold
+    src: local("Roboto-Bold"), url("font/Roboto-Bold.woff2");//latin bold
     font-weight: bold;
     font-display: swap;
 }
diff --git a/sass/include/_icons.scss b/sass/include/_icons.scss
index 159b33c..4edff0a 100644
--- a/sass/include/_icons.scss
+++ b/sass/include/_icons.scss
@@ -66,7 +66,7 @@
   @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-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") }}
diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss
index c046efd..ad3ae79 100644
--- a/sass/include/_nav.scss
+++ b/sass/include/_nav.scss
@@ -8,7 +8,7 @@
 main nav {
   margin-top: var(--s2);//pagination margin
     ul li {
-    margin: 0;
+    margin: .1rem;
   }
 }
 .off {
@@ -17,7 +17,6 @@ main nav {
   border: .1rem solid var(--c3);
   border-radius: var(--br);
   padding: .1rem var(--s1);
-  margin: .1rem;
 }
 main nav a,
 main nav a:visited {//pagination link styling
@@ -64,8 +63,8 @@ nav {
   ul li {
     display: inline-block;
     margin: 0 0.2rem;
-    position: relative;
-    text-align: left;
+    //position: relative;
+    //text-align: left;
   }
 }
 // breakpoint makes header responsive for mobile layouts
diff --git a/templates/base.html b/templates/base.html
index 0792345..7ff1e55 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -49,7 +49,7 @@
           <li><h2><a href="{{ get_url(path=i.url, trailing_slash=i.slash) }}{%- if i.slash and config.extra.uglyurls %}index.html{%- endif %}">{{ i.name | safe }}</a></h2> </li>
           {%- endfor %}
           {%- if config.extra.js_theme %}
-          <li class="js">{%- if config.extra.fontawesome %}<i type="reset" id="mode" class="svgs fa-a fa-solid fa-circle-half-stroke"></i>{%- else %}<i type="reset" id="mode" class="svgh svgs contrast"></i>{%- endif %}
+          <li class="js">{%- if config.extra.icon_contrast %}<i type="reset" id="mode" class="{{ config.extra.icon_contrast }}"></i>{%- else %}<i type="reset" id="mode" class="svgh svgs contrast"></i>{%- endif %}
           {%- endif %}
           </li>
         </ul>
@@ -59,7 +59,7 @@
         <form class="js" name="goSearch">
           <div class="searchd">
             <input id="userinput" type="text" placeholder="Search" autocomplete="off" />
-            <button type="submit" title="Search">{%- if config.extra.fontawesome %}<i class="svgs fa-solid fa-magnifying-glass"></i>{%- else %}<i class="svgs search"></i>{%- endif %}</button>
+            <button type="submit" title="Search">{%- if config.extra.icon_search %}<i class="{{ config.extra.icon_search }}"></i>{%- else %}<i class="svgs search"></i>{%- endif %}</button>
           </div>
           <div><div id="suggestions"></div></div>
         </form>
diff --git a/templates/macros/macros.html b/templates/macros/macros.html
index 072a9d9..68227d8 100644
--- a/templates/macros/macros.html
+++ b/templates/macros/macros.html
@@ -126,8 +126,8 @@
             {%- endif %}
       <nav>
         <ul>
-          {% if paginator.previous %}<li><a href="{{ paginator.first | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">&#124; &#60;</a></li>{% else %}<li><span class="off">&#124; &#60;</span></li>{% endif %}
-          {% if paginator.previous %}<li><a href="{{ paginator.previous | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">&#60;</a></li>{% else %}<li><span class="off">&#60;</span></li>{% endif %}
+          {% if paginator.previous %}<li><a href="{{ paginator.first | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{%- if config.extra.icon_first %}<i class="{{ config.extra.icon_first }}"></i>{%- else %}&laquo;{%- endif %}</a></li>{% else %}<li><span class="off">{%- if config.extra.icon_first %}<i class="{{ config.extra.icon_first }}"></i>{%- else %}&laquo;{%- endif %}</span></li>{% endif %}
+          {% if paginator.previous %}<li><a href="{{ paginator.previous | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{%- if config.extra.icon_prev %}<i class="{{ config.extra.icon_prev }}"></i>{%- else %}&lsaquo;{%- endif %}</a></li>{% else %}<li><span class="off">{%- if config.extra.icon_prev %}<i class="{{ config.extra.icon_prev }}"></i>{%- else %}&lsaquo;{%- endif %}</span></li>{% endif %}
           {%- for i in range(start=start, end=end+1) %}
           <li>
             {%- if i == paginator.current_index -%}
@@ -139,8 +139,8 @@
             {%- endif -%}
           </li>
           {%- endfor %}
-          {% if paginator.next %}<li><a href="{{ paginator.next | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">&#62;</a></li>{% else %}<li><span class="off">&#62;</span></li>{% endif %}
-          {% if paginator.next %}<li><a href="{{ paginator.last | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">&#62; &#124;</a></li>{% else %}<li><span class="off">&#62; &#124;</span></li>{% endif %}
+          {% if paginator.next %}<li><a href="{{ paginator.next | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{%- if config.extra.icon_next %}<i class="{{ config.extra.icon_next }}"></i>{%- else %}&rsaquo;{%- endif %}</a></li>{% else %}<li><span class="off">{%- if config.extra.icon_next %}<i class="{{ config.extra.icon_next }}"></i>{%- else %}&rsaquo;{%- endif %}</span></li>{% endif %}
+          {% if paginator.next %}<li><a href="{{ paginator.last | safe }}{%- if config.extra.uglyurls %}index.html{%- endif %}">{%- if config.extra.icon_last %}<i class="{{ config.extra.icon_last }}"></i>{%- else %}&raquo;{%- endif %}</a></li>{% else %}<li><span class="off">{%- if config.extra.icon_last %}<i class="{{ config.extra.icon_last }}"></i>{%- else %}&raquo;{%- endif %}</span></li>{% endif %}
         </ul>
       </nav>
   {%- endif %}
diff --git a/templates/page.html b/templates/page.html
index b0fbf83..0b9ec9f 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -82,7 +82,7 @@
 {%- if page.reading_time %}
 {%- if page.reading_time > 1 %}
 <span class="topout">
-<span class="topleft"> </span><a href="#" class="top">&cuwed;</a>
+<span class="topleft"> </span><a href="#" class="top">{%- if config.extra.icon_top %}<i class="{{ config.extra.icon_top }}"></i>{%- else %}&cuwed;{%- endif %}</a>
 </span>
 {%- endif %}
 {%- endif %}