Style updates

10 files changed, 218 insertions, 166 deletions

diff --git a/exampleSite/config.json b/exampleSite/config.json
index 900a96c..620d7b2 100644
--- a/exampleSite/config.json
+++ b/exampleSite/config.json
@@ -18,7 +18,7 @@
       "narrative": "this website is a demo for the redgood theme made by Urja Acharya. this section is customizable and can be used for a short inroduction by modifying `params.about.narrative` in `config`. markdown can be used in **this** section."
     },
     "social": {
-      "email": { "url": "#", "icon": "bi bi-envelope" },
+      "email": { "url": "#", "icon": "bi bi-envelope-fill" },
       "linkedin": { "url": "#", "icon": "bi bi-linkedin" },
       "fb": { "url": "#", "icon": "bi bi-facebook" },
       "twitter": { "url": "#", "icon": "bi bi-twitter" },
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 9983b08..13c11a3 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,3 +1,4 @@
 {{ define "main" }}
+{{ partial "share" . }}
 {{ .Content }}
 {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index ba73a48..be209af 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,11 +1,3 @@
-{{ define "main" }} {{ partial "index/pinnedPost" . }}
-<div class="grid-container">
-  <div class="recent-posts card shadow round-corner">
-    {{ partial "index/recentPost" . }}
-    {{ partial "index/siteSections" . }}
-  </div>
-  <div class="site-sections card shadow round-corner">
-    {{ partial "taxa" (dict "taxo" .Site.Taxonomies "mysite" .) }}
-  </div>
-</div>
+{{ define "main" }}
+{{ partial "index/pinnedPost" . }}
 {{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 7406a3d..6d9feb9 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,30 +1,56 @@
-<footer class="shadow round-corner">
+<footer>
+  <!-- Pagination for list pages -->
   {{ if eq .Kind "section" }}
   <div>{{ template "_internal/pagination.html" . }}</div>
-  {{ end }} {{ if eq .Kind "page" }}
+  {{ end }}
+  <!-- Previous/Next articles -->
+  {{ if eq .Kind "page" }}
   <div class="prev-next">{{ partial "prevNext" .}}</div>
   {{ end }}
-  <p>
-    {{ if .Site.Params.theme.copyrightInFooter }}<span>&copy;</span>{{end}}
-    <span>{{ dateFormat "2006" now }}</span>
-    <span>{{ .Site.Params.author }}.</span>
-    <span>{{ .Site.Params.theme.footerText | markdownify }}.</span>
-  </p>
-  <p>
-    <a href="https://github.com/urjaacharya/redgood">
-      {{- print "redgood" -}}
-    </a>
-    by
-    <a
-      href="https://www.urjaacharya.com/"
-      aria-label="link to urja acharya site"
-    >
-      {{- print "urja acharya" -}}
-    </a>
-  </p>
-  <div style="text-align: right; margin-bottom: 0.25em;">
-    <a class="primary-icon to-top" href="#" aria-label="navigate to top"
-      ><i class="bi bi-box-arrow-in-up"></i
-    ></a>
+  <div class="footer shadow round-corner">
+    <!-- Recent Posts -->
+    <div class="grid-container">
+      <div class="footer-recent-posts">
+        <h6>Recent Posts</h6>
+        <ol>
+          {{ range ((where .Site.Pages "Kind" "page").ByDate.Reverse) | first 7 }}
+          <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
+          {{ end }}
+        </ol>
+        <a href="{{ `archive` | relURL }}">...ALL POSTS</a>
+        <hr class="mobile white-hr" />
+      </div>
+      <div>
+        {{ partial "index/siteSections.html" . }}
+        {{ partial "taxa" (dict "taxo" .Site.Taxonomies "mysite" .) }}
+        <hr class="mobile white-hr" />
+      </div>
+    </div>
+    <!-- Footer info from config -->
+    <div class="footer-info-text">
+      <p>
+        {{ if .Site.Params.theme.copyrightInFooter }}<span>&copy;</span>{{end}}
+        <span>{{ dateFormat "2006" now }}</span>
+        <span>{{ .Site.Params.author }}.</span>
+        <span>{{ .Site.Params.theme.footerText | markdownify }}.</span>
+      </p>
+      <p>
+        <a href="https://github.com/urjaacharya/redgood">
+          {{- print "redgood" -}}
+        </a>
+        by
+        <a
+          href="https://www.urjaacharya.com/"
+          aria-label="link to urja acharya site"
+        >
+          {{- print "urja acharya" -}}
+        </a>
+      </p>
+    </div>
+    <div style="text-align: right; margin-bottom: 0.25em; font-size: 1.2em">
+      <a class="primary-icon to-top" href="#" aria-label="navigate to top">
+        <i class="bi bi-arrow-up-circle-fill"></i>
+      </a>
+    </div>
   </div>
 </footer>
diff --git a/layouts/partials/index/siteSections.html b/layouts/partials/index/siteSections.html
index 01f0697..0cfbc0d 100644
--- a/layouts/partials/index/siteSections.html
+++ b/layouts/partials/index/siteSections.html
@@ -1,9 +1,10 @@
-<h4 style="margin: 1em 0 1em 0;">Sections</h4>
-{{ range .Site.Sections }}
-{{ if not .Params.hideFromHome }}
-<p>
-  <a href="{{ .Permalink }}" aria-label="site sections">{{ .Title }}</a> -
-  {{ len .Pages}} Articles
-</p>
-{{ end }}
-{{ end }}
\ No newline at end of file
+<h6>Sections</h6>
+<div class="section-container">
+  {{ range .Site.Sections }}
+  {{ if not .Params.hideFromHome }}
+  <a class="section" href="{{ .Permalink }}" aria-label="site sections"
+    >{{ .Title }}</a
+  >
+  {{ end }}
+  {{ end }}
+</div>
diff --git a/layouts/partials/prevNext.html b/layouts/partials/prevNext.html
index 50c47a5..41fa1ff 100644
--- a/layouts/partials/prevNext.html
+++ b/layouts/partials/prevNext.html
@@ -1,22 +1,24 @@
+{{if or .PrevInSection .NextInSection }}
 {{- if .PrevInSection }}
     <a
-      class="active primary-icon"
+      class="active icon"
       href="{{ .PrevInSection.Permalink | relURL }}"
       aria-label="Previous Article"
-      ><i class="bi bi-arrow-left-circle"></i
+      ><i class="bi bi-arrow-left-circle-fill"></i
     ></a>
     {{- else }}
-    <div class="disabled"><i class="bi bi-arrow-left-circle"></i></div>
+    <div class="disabled icon"><i class="bi bi-arrow-left-circle-fill"></i></div>
     {{- end }}
 
     {{- if .NextInSection }}
     <a
-      class="active primary-icon"
+      class="active icon"
       href="{{ .NextInSection.Permalink | relURL }}"
       aria-label="Next Article"
-      ><i class="bi bi-arrow-right-circle"></i
+      ><i class="bi bi-arrow-right-circle-fill"></i
     ></a>
     {{- else }}
-    <div class="disabled"><i class="bi bi-arrow-right-circle"></i></div>
+    <div class="disabled icon"><i class="bi bi-arrow-right-circle-fill"></i></div>
     {{- end }}
-  </div>
\ No newline at end of file
+  </div>
+  {{ end }}
\ No newline at end of file
diff --git a/layouts/partials/regularHeader.html b/layouts/partials/regularHeader.html
index 8f3f144..93dac99 100644
--- a/layouts/partials/regularHeader.html
+++ b/layouts/partials/regularHeader.html
@@ -8,12 +8,12 @@
     "
   >
     <a class="primary-icon" href="{{ `/` | relURL }}" aria-label="home page">
-      <i class="bi bi-house-door"></i>
+      <i class="bi bi-house-fill"></i>
     </a>
-    {{ partial "share" . }}
+    
   </div>
   <div class="page-title-and-info" style="text-align: center">
-    <h1 class="page-title">
+    <h1 class="page-title" {{ if not (eq .Kind `page`) }}style="margin-bottom: 1em;"{{ end }}>
       {{ if or (eq .Kind "taxonomy") (eq .Kind "term") }}#{{ end }}{{ .Title }}
     </h1>
     {{ if eq .Kind "page" }}
diff --git a/layouts/partials/share.html b/layouts/partials/share.html
index 3b84c35..bccc6e1 100644
--- a/layouts/partials/share.html
+++ b/layouts/partials/share.html
@@ -1,44 +1,37 @@
-<div
-  class="share-links"
-  style="
-    display: flex;
-    margin-left: 1em;
-    align-items: center;
-    width: 140px;
-    justify-content: space-between;
-  "
->
-  {{ $url := printf "%s" .URL | absLangURL }}
-  <a
-    class="primary-icon"
-    href="mailto:?subject={{ print .Title ` by ` .Site.Params.author }}&amp;body={{ $url }}"
-    target="_self"
-    rel="noopener"
-    aria-label="share by email"
-    ><i class="bi bi-envelope"></i
-  ></a>
-  <a
-    class="primary-icon"
-    href="https://facebook.com/sharer/sharer.php?u={{ $url }}"
-    target="_blank"
-    rel="noopener"
-    aria-label="share on facebook"
-    ><i class="bi bi-facebook"></i
-  ></a>
-  <a
-    class="primary-icon"
-    href="https://twitter.com/intent/tweet/?text={{ print .Title ` by ` .Site.Params.author }}&amp;url={{ $url }}"
-    target="_blank"
-    rel="noopener"
-    aria-label="share on twitter"
-    ><i class="bi bi-twitter"></i
-  ></a>
-  <a
-    class="primary-icon"
-    href="https://www.linkedin.com/sharing/share-offsite/?url={{ $url }}"
-    target="_blank"
-    rel="noopener"
-    aria-label="share on twitter"
-    ><i class="bi bi-linkedin"></i
-  ></a>
+<div style="display: flex; justify-content: flex-end">
+  <div class="share-links">
+    {{ $url := printf "%s" .URL | absLangURL }}
+    <a
+      class="icon active"
+      href="mailto:?subject={{ print .Title ` by ` .Site.Params.author }}&amp;body={{ $url }}"
+      target="_self"
+      rel="noopener"
+      aria-label="share by email"
+      ><i class="bi bi-envelope-fill"></i
+    ></a>
+    <a
+      class="icon active"
+      href="https://facebook.com/sharer/sharer.php?u={{ $url }}"
+      target="_blank"
+      rel="noopener"
+      aria-label="share on facebook"
+      ><i class="bi bi-facebook"></i
+    ></a>
+    <a
+      class="icon active"
+      href="https://twitter.com/intent/tweet/?text={{ print .Title ` by ` .Site.Params.author }}&amp;url={{ $url }}"
+      target="_blank"
+      rel="noopener"
+      aria-label="share on twitter"
+      ><i class="bi bi-twitter"></i
+    ></a>
+    <a
+      class="icon active"
+      href="https://www.linkedin.com/sharing/share-offsite/?url={{ $url }}"
+      target="_blank"
+      rel="noopener"
+      aria-label="share on twitter"
+      ><i class="bi bi-linkedin"></i
+    ></a>
+  </div>
 </div>
diff --git a/layouts/partials/taxa.html b/layouts/partials/taxa.html
index 3485c4b..ffd3a2b 100644
--- a/layouts/partials/taxa.html
+++ b/layouts/partials/taxa.html
@@ -6,9 +6,9 @@
 
 {{ range sort ($scratch.Get "custom") ".Num" "desc" }}
 {{ $taxaTypeName := .Name }}
-<h4 style="margin: 0;">
+<h6>
   {{ $taxaTypeName | humanize }}
-</h4>
+</h6>
 {{ $this_taxa := index $.taxo .Name }}
 <div class="taxa-container">
   {{ range $this_taxa.ByCount }}
diff --git a/static/css/main.css b/static/css/main.css
index 3315909..2eb18fe 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -4,7 +4,7 @@
   --mainText: #272822;
   --secondaryText: rgb(105, 105, 105);
   --primary: #a3001b;
-  --highlight: #b6ffb6;
+  --highlight: #ffd97d;
   --shadow: var(--mainText);
   --inactive: #949494;
 }
@@ -57,7 +57,8 @@ header {
 .home-page-header {
   min-height: 275px;
   flex-direction: row;
-  padding-bottom: 0.25em;
+  padding: 0.5em;
+  justify-content: space-between;
 }
 .regular-page-header {
   justify-content: space-between;
@@ -70,7 +71,6 @@ header {
 }
 .header-info,
 .page-title-and-info {
-  padding: 0.25em;
   display: flex;
   flex-direction: column;
 }
@@ -97,37 +97,33 @@ header {
   border: solid 1px var(--mainText);
 }
 .header-image {
-  height: 230px;
-  width: 230px;
+  height: 100%;
+  width: 100%;
   border-radius: 50%;
   overflow: hidden;
   display: flex;
   justify-content: center;
 }
 .footer {
-  margin-top: 3em;
+  color: var(--bg);
+  margin-top: 1em;
   margin-bottom: 5px;
+  background-color: var(--primary);
+  padding: 1.5em 0.5em 0.5em 0.5em;
 }
 footer {
-  text-align: center;
-  background-color: var(--primary);
-  color: var(--bg);
-  padding: 1em 0.5em 0.5em 0.5em;
   display: flex;
   flex-direction: column;
-  justify-content: center;
   min-height: 80px;
   font-size: 0.95em;
   margin-bottom: 0.5em;
 }
-.footer p {
-  margin: 0;
+.footer-info-text {
+  text-align: center;
 }
-footer a,
+.footer a,
 .about-narrative a {
-  color: var(--bg);
-  text-decoration: underline;
-  font-weight: 600;
+  color: var(--highlight);
 }
 pre,
 code {
@@ -172,7 +168,7 @@ h6 {
 .page-title {
   color: var(--bg);
   margin: 0;
-  text-shadow: 3px 3px var(--shadow);
+  text-shadow: 0 0 3px var(--shadow);
 }
 .main-title {
   font-size: 3em;
@@ -224,13 +220,26 @@ td {
   );
   margin: 1.5em 0;
 }
+.mobile {
+  display: none;
+}
+.white-hr {
+  border: 0;
+  height: 1px;
+  background-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0),
+    var(--bgLight),
+    rgba(0, 0, 0, 0)
+  );
+  margin: 1.5em 0;
+}
 .primary-icon {
   font-size: 1.5em;
-  color: var(--bg);
-  border-radius: 5px;
+  color: var(--highlight);
 }
 .primary-icon:hover {
-  text-shadow: 0px 0px 5px var(--highlight);
+  text-shadow: 2px 2px var(--shadow);
 }
 .social-info {
   display: flex;
@@ -246,7 +255,7 @@ td {
 .card {
   background-color: var(--bgLight) !important;
   padding: 15px;
-  margin: 2em 0;
+  margin: 2em 0 1em 0;
 }
 .shadow {
   box-shadow: 1px 1px 2px 1px var(--shadow);
@@ -265,40 +274,48 @@ td {
   color: var(--bg);
   padding: 5px 5px;
   border-radius: 5px;
-  box-shadow: 3px 3px 5px 1px var(--shadow);
   transition: box-shadow 0.2s;
 }
 .card-links:hover {
-  box-shadow: 1px 1px 5px 1px var(--shadow);
+  box-shadow: 1px 1px 3px 1px var(--shadow);
   text-decoration: none;
 }
 .card-links:active {
   box-shadow: 0px 0px 1px 1px var(--shadow);
 }
-.taxa-container {
+.taxa-container,
+.section-container {
   display: flex;
   flex-wrap: wrap;
-  padding: 1em 0;
+  padding: 0 0 0 0.5em;
+  margin-bottom: 0.5em;
 }
 .taxa::before {
   content: "#";
 }
-.taxa {
+.taxa,
+.section {
   margin: 0.4em 0.4em 0.4em 0;
   padding: 4px;
 }
+/* previous/next article links */
 .prev-next {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
-  margin-bottom: 0.5em;
+}
+.icon {
   font-size: 1.5em;
 }
-.prev-next > div,
-.prev-next > a {
-  font-size: 1.2em;
-  padding: 0 0.5em;
-  border-radius: 5px;
+.icon.active:hover {
+  text-shadow: 0 0 1px var(--shadow);
+}
+.share-links {
+  display: flex;
+  flex-wrap: wrap;
+}
+.share-links > .icon {
+  margin-left: 0.75em;
 }
 .taxonomy-data,
 .list-page {
@@ -320,29 +337,11 @@ main img {
 .disabled {
   color: var(--inactive);
 }
-@media only screen and (max-width: 720px) {
-  .home-page-header {
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-  .header-info {
-    width: 98%;
-    align-items: center;
-  }
-  .main-title,
-  .about-narrative {
-    text-align: center;
-  }
-  .about-narrative {
-    margin: 0.5em 0 1.5em 0;
-  }
-  .share-text {
-    display: none;
-  }
-  .document-date {
-    margin: 0;
-  }
+.footer-recent-posts {
+  text-align: left;
+}
+.footer-recent-posts > ol > li {
+  text-align: left;
 }
 /* Pagination */
 ul.pagination {
@@ -356,14 +355,14 @@ li.page-item {
   width: 2.5em;
   height: 2em;
   display: flex;
-  justify-content: center;
   align-items: center;
+  text-align: center;
 }
 li.page-item {
-  border-top: 1px solid var(--bgLight);
-  border-bottom: 1px solid var(--bgLight);
-  border-left: 1px solid var(--bgLight);
-  background-color: var(--primary);
+  border-top: 1px solid var(--primary);
+  border-bottom: 1px solid var(--primary);
+  border-left: 1px solid var(--primary);
+  background-color: var(--bgLight);
 }
 li.page-item a {
   text-decoration: none;
@@ -374,22 +373,60 @@ li.page-item.disabled a {
   color: var(--inactiveColor);
 }
 li.page-item.active {
-  background-color: var(--bgLight);
-  text-shadow: 0px 0px 2px var(--bgLight);
+  background-color: var(--primary);
 }
 li.page-item.active a {
-  color: var(--primary);
+  color: var(--bgLight);
 }
 li.page-item:first-child {
   border-radius: 5px 0 0 5px;
 }
 li.page-item:last-child {
   border-radius: 0 5px 5px 0;
-  border-right: 1px solid var(--bgLight);
+  border-right: 1px solid var(--primary);
 }
 /* Grid */
 .grid-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(341px, 1fr));
+  display: flex;
+  flex-wrap: wrap;
   grid-gap: 1em;
+  justify-content: space-between;
+}
+.grid-container > div {
+  width: calc(50% - 3em);
+  text-align: left;
+}
+.grid-container > div > h6 {
+  margin: 0;
+}
+/* Small Screens */
+@media only screen and (max-width: 720px) {
+  .home-page-header {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  .header-info {
+    width: 98%;
+    align-items: center;
+  }
+  .main-title,
+  .about-narrative {
+    text-align: center;
+  }
+  .about-narrative {
+    margin: 0.5em 0 1.5em 0;
+  }
+  .share-text {
+    display: none;
+  }
+  .document-date {
+    margin: 0;
+  }
+  .grid-container > div {
+    width: 100%;
+  }
+  .mobile {
+    display: block;
+  }
 }