From 228e8ee833f4e4930222b0c23c2872469217bc46 Mon Sep 17 00:00:00 2001
From: Jieiku
Date: Mon, 20 Jun 2022 20:07:15 -0700
Subject: Improve Sizing and Spacing

---
 sass/include/_icons.scss      |  4 +-
 sass/include/_nav.scss        | 30 +++++++++------
 sass/include/_sectioning.scss |  2 +-
 templates/base.html           | 21 +++++------
 templates/macros/social.html  | 88 ++++++++++++++++++++++---------------------
 5 files changed, 76 insertions(+), 69 deletions(-)

diff --git a/sass/include/_icons.scss b/sass/include/_icons.scss
index 4edff0a..b9a8e62 100644
--- a/sass/include/_icons.scss
+++ b/sass/include/_icons.scss
@@ -97,8 +97,8 @@
   @if $icon-x {.x { background-image: icon(x, "%23f00", 2, "none") }}
   @if $icon-youtube {.youtube { background-image: icon(youtube, "%23f00", 2, "none") }}
   .svg {
-    width: 48px;
-    height: 48px;
+    width: 1.8rem;
+    height: 1.8rem;
     display: inline-block;
     overflow: hidden;
     vertical-align: middle
diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss
index ad3ae79..d9d67a8 100644
--- a/sass/include/_nav.scss
+++ b/sass/include/_nav.scss
@@ -5,12 +5,6 @@
 .cnav {
   color: var(--a3);//pagination color current page
 }
-main nav {
-  margin-top: var(--s2);//pagination margin
-    ul li {
-    margin: .1rem;
-  }
-}
 .off {
   color: var(--c4);
   font-weight: var(--fh);
@@ -39,12 +33,11 @@ header > nav > div:nth-child(2) {//puts logo on left and menu/search on right
 }
 nav > div {
   ul, h2 {
-    line-height: 2;
+    line-height: 1.9;
     margin: 0;
     padding: 0;
   }
   margin: var(--s1) 0;
-  display: block;
 }
 nav {
   align-items: center;
@@ -60,11 +53,24 @@ nav {
     margin-bottom: 0;
     margin-top: 0.2rem;
   }
-  ul li {
+  li {
     display: inline-block;
-    margin: 0 0.2rem;
-    //position: relative;
-    //text-align: left;
+    margin: 0 .2rem;
+  }
+}
+main nav {
+  margin-top: var(--s2);//pagination margin
+    li {
+    margin: .1rem;
+  }
+}
+footer nav {
+  ul {
+    margin: 0;
+    padding: 0;
+  }
+  li {
+    margin: 0 .2rem .4rem;
   }
 }
 // breakpoint makes header responsive for mobile layouts
diff --git a/sass/include/_sectioning.scss b/sass/include/_sectioning.scss
index f5e2edf..9b61809 100644
--- a/sass/include/_sectioning.scss
+++ b/sass/include/_sectioning.scss
@@ -81,7 +81,7 @@ body {
   }
   footer{
     hr, p {
-      margin:0.5rem 0
+      margin: 0 0 .4rem
     }
   }
 }
diff --git a/templates/base.html b/templates/base.html
index 7ff1e55..bdb2537 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -49,9 +49,8 @@
           <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.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 %}
+          <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 %}</li>
           {%- endif %}
-          </li>
         </ul>
       </div>
       {%- if config.build_search_index %}
@@ -86,9 +85,7 @@
     <hr />
     {%- endif %}
     <div class="c">
-      <p>
-        {{- social_macros::social_links(social_config=config.extra.social) }}
-      </p>
+      {{- social_macros::social_links(social_config=config.extra.social) }}
 
       {#- Copyright START #}
       {%- set copyright_start_year=config.extra.copyright_start_year | default(value="") %}
@@ -96,13 +93,13 @@
       {%- set copyright_end_year=config.extra.copyright_end_year | default(value=now() | date(format="%Y")) %}
       <p{%- if config.extra.footer_size %} class="{{ config.extra.footer_size }}"{% endif %}>Copyright &copy; {{ copyright_start_year ~ copyright_end_year }} {{ config.title }}</p>
       {#- Copyright END #}
-      <p{%- if config.extra.footer_size %} class="{{ config.extra.footer_size }}"{% endif %}>
-        {%- for i in config.extra.menu_footer %}
-        <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> &nbsp;
-        {%- endfor %}
-      </p>
-
-
+      <nav>
+        <ul>
+          {%- for i in config.extra.menu_footer %}
+          <li{%- if config.extra.footer_size %} class="{{ config.extra.footer_size }}"{% endif %}><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> </li>
+          {%- endfor %}
+        </ul>
+      </nav>
       {%- if config.extra.footer_credit | default(value=true) %}
       {%- if config.extra.footer_credit_override %}
       {{ config.extra.footer_credit_override | safe }}
diff --git a/templates/macros/social.html b/templates/macros/social.html
index 96f0056..2fb9ecc 100644
--- a/templates/macros/social.html
+++ b/templates/macros/social.html
@@ -1,45 +1,49 @@
 {%- macro social_links(social_config) %}
+      <nav>
+        <ul>
 {%- set base_url = get_url(path="", lang=lang) %}
-        {%- if config.generate_feed %}{%- if config.extra.social.feed %}
-        <a href="{{ get_url(path=config.feed_filename, trailing_slash=false) | safe }}" target="_blank"><i type="Button" class="svg rss" title="Atom/RSS Feed"></i></a> {% endif %}{% endif %}
-        {%- if social_config.mail %}
-        <a href="mailto:{{ social_config.mail }}" target="_blank"><i type="Button" class="svg mail" title="Mail"></i></a> {% endif %}
-        {%- if social_config.mastodon %}
-        <a href="{{ social_config.mastodon }}/" target="_blank"><i type="Button" class="svg mastodon" title="Mastodon"></i></a> {% endif %}
-        {%- if social_config.element %}
-        <a href="https://{{ social_config.element }}/" target="_blank"><i type="Button" class="svg element" title="Element"></i></a> {% endif %}
-        {%- if social_config.matrix %}
-        <a href="https://{{ social_config.matrix }}/" target="_blank"><i type="Button" class="svg matrix" title="Matrix"></i></a> {% endif %}
-        {%- if social_config.twitter %}
-        <a href="https://twitter.com/{{ social_config.twitter }}/" target="_blank"><i type="Button" class="svg twitter" title="Twitter"></i></a> {% endif %}
-        {%- if social_config.facebook %}
-        <a href="https://www.facebook.com/{{ social_config.facebook }}/" target="_blank"><i type="Button" class="svg facebook" title="Facebook"></i></a> {% endif %}
-        {%- if social_config.linkedin %}
-        <a href="https://www.linkedin.com/in/{{ social_config.linkedin }}/" target="_blank"><i type="Button" class="svg linkedin" title="LinkedIn"></i></a> {% endif %}
-        {%- if social_config.researchgate %}
-        <a href="https://www.researchgate.net/profile/{{ social_config.researchgate }}/" target="_blank"><i type="Button" class="svg researchgate" title="ResearchGate"></i></a> {% endif %}
-        {%- if social_config.gitlab %}
-        <a href="https://gitlab.com/{{ social_config.gitlab }}/" target="_blank"><i type="Button" class="svg gitlab" title="Gitlab"></i></a> {% endif %}
-        {%- if social_config.github %}
-        <a href="https://github.com/{{ social_config.github }}/" target="_blank"><i type="Button" class="svg github" title="Github"></i></a> {% endif %}
-        {%- if social_config.bitbucket %}
-        <a href="https://bitbucket.org/{{ social_config.bitbucket }}/" target="_blank"><i type="Button" class="svg bitbucket" title="Bitbucket"></i></a> {% endif %}
-        {%- if social_config.python %}
-        <a href="https://pypi.org/user/{{ social_config.python }}/" target="_blank"><i type="Button" class="svg python" title="Python"></i></a> {% endif %}
-        {%- if social_config.docker %}
-        <a href="https://hub.docker.com/u/{{ social_config.docker }}/" target="_blank"><i type="Button" class="svg docker" title="Docker"></i></a> {% endif %}
-        {%- if social_config.stack %}
-        <a href="https://stackoverflow.com/users/{{ social_config.stack }}/" target="_blank"><i type="Button" class="svg stack" title="Stack"></i></a> {% endif %}
-        {%- if social_config.instagram %}
-        <a href="https://www.instagram.com/{{ social_config.instagram }}/" target="_blank"><i type="Button" class="svg instagram" title="Instagram"></i></a> {% endif %}
-        {%- if social_config.pinterest %}
-        <a href="https://www.pinterest.com/{{ social_config.pinterest }}/" target="_blank"><i type="Button" class="svg pinterest" title="Pinterest"></i></a> {% endif %}
-        {%- if social_config.twitch %}
-        <a href="https://www.twitch.tv/{{ social_config.twitch }}/" target="_blank"><i type="Button" class="svg twitch" title="Twitch"></i></a> {% endif %}
-        {%- if social_config.youtube %}
-        <a href="https://www.youtube.com/channel/{{ social_config.youtube }}/" target="_blank"><i type="Button" class="svg youtube" title="YouTube"></i></a> {% endif %}
-        {%- if social_config.buymeacoffee %}
-        <a href="https://www.buymeacoffee.com/{{ social_config.buymeacoffee }}/" target="_blank"><i type="Button" class="svg buymeacoffee" title="Buy Me A Coffee"></i></a> {% endif %}
-        {%- if social_config.github_sponsor %}
-        <a href="https://github.com/sponsors/{{ social_config.github_sponsor }}/" target="_blank"><i type="Button" class="svg github-sponsor" title="GitHub Sponsor"></i></a> {% endif %}
+          {%- if config.generate_feed %}{%- if config.extra.social.feed %}
+          <li><a href="{{ get_url(path=config.feed_filename, trailing_slash=false) | safe }}" target="_blank"><i type="Button" class="svg rss" title="Atom/RSS Feed"></i></a></li>{% endif %}{% endif %}
+          {%- if social_config.mail %}
+          <li><a href="mailto:{{ social_config.mail }}" target="_blank"><i type="Button" class="svg mail" title="Mail"></i></a></li>{% endif %}
+          {%- if social_config.mastodon %}
+          <li><a href="{{ social_config.mastodon }}/" target="_blank"><i type="Button" class="svg mastodon" title="Mastodon"></i></a></li>{% endif %}
+          {%- if social_config.element %}
+          <li><a href="https://{{ social_config.element }}/" target="_blank"><i type="Button" class="svg element" title="Element"></i></a></li>{% endif %}
+          {%- if social_config.matrix %}
+          <li><a href="https://{{ social_config.matrix }}/" target="_blank"><i type="Button" class="svg matrix" title="Matrix"></i></a></li>{% endif %}
+          {%- if social_config.twitter %}
+          <li><a href="https://twitter.com/{{ social_config.twitter }}/" target="_blank"><i type="Button" class="svg twitter" title="Twitter"></i></a></li>{% endif %}
+          {%- if social_config.facebook %}
+          <li><a href="https://www.facebook.com/{{ social_config.facebook }}/" target="_blank"><i type="Button" class="svg facebook" title="Facebook"></i></a></li>{% endif %}
+          {%- if social_config.linkedin %}
+          <li><a href="https://www.linkedin.com/in/{{ social_config.linkedin }}/" target="_blank"><i type="Button" class="svg linkedin" title="LinkedIn"></i></a></li>{% endif %}
+          {%- if social_config.researchgate %}
+          <li><a href="https://www.researchgate.net/profile/{{ social_config.researchgate }}/" target="_blank"><i type="Button" class="svg researchgate" title="ResearchGate"></i></a></li>{% endif %}
+          {%- if social_config.gitlab %}
+          <li><a href="https://gitlab.com/{{ social_config.gitlab }}/" target="_blank"><i type="Button" class="svg gitlab" title="Gitlab"></i></a></li>{% endif %}
+          {%- if social_config.github %}
+          <li><a href="https://github.com/{{ social_config.github }}/" target="_blank"><i type="Button" class="svg github" title="Github"></i></a></li>{% endif %}
+          {%- if social_config.bitbucket %}
+          <li><a href="https://bitbucket.org/{{ social_config.bitbucket }}/" target="_blank"><i type="Button" class="svg bitbucket" title="Bitbucket"></i></a></li>{% endif %}
+          {%- if social_config.python %}
+          <li><a href="https://pypi.org/user/{{ social_config.python }}/" target="_blank"><i type="Button" class="svg python" title="Python"></i></a></li>{% endif %}
+          {%- if social_config.docker %}
+          <li><a href="https://hub.docker.com/u/{{ social_config.docker }}/" target="_blank"><i type="Button" class="svg docker" title="Docker"></i></a></li>{% endif %}
+          {%- if social_config.stack %}
+          <li><a href="https://stackoverflow.com/users/{{ social_config.stack }}/" target="_blank"><i type="Button" class="svg stack" title="Stack"></i></a></li>{% endif %}
+          {%- if social_config.instagram %}
+          <li><a href="https://www.instagram.com/{{ social_config.instagram }}/" target="_blank"><i type="Button" class="svg instagram" title="Instagram"></i></a></li>{% endif %}
+          {%- if social_config.pinterest %}
+          <li><a href="https://www.pinterest.com/{{ social_config.pinterest }}/" target="_blank"><i type="Button" class="svg pinterest" title="Pinterest"></i></a></li>{% endif %}
+          {%- if social_config.twitch %}
+          <li><a href="https://www.twitch.tv/{{ social_config.twitch }}/" target="_blank"><i type="Button" class="svg twitch" title="Twitch"></i></a></li>{% endif %}
+          {%- if social_config.youtube %}
+          <li><a href="https://www.youtube.com/channel/{{ social_config.youtube }}/" target="_blank"><i type="Button" class="svg youtube" title="YouTube"></i></a></li>{% endif %}
+          {%- if social_config.buymeacoffee %}
+          <li><a href="https://www.buymeacoffee.com/{{ social_config.buymeacoffee }}/" target="_blank"><i type="Button" class="svg buymeacoffee" title="Buy Me A Coffee"></i></a></li>{% endif %}
+          {%- if social_config.github_sponsor %}
+          <li><a href="https://github.com/sponsors/{{ social_config.github_sponsor }}/" target="_blank"><i type="Button" class="svg github-sponsor" title="GitHub Sponsor"></i></a></li>{% endif %}
+        </ul>
+      </nav>
 {%- endmacro %}
-- 
cgit v1.3.1