Style changes

17 files changed, 196 insertions, 154 deletions

diff --git a/exampleSite/config.json b/exampleSite/config.json
index f3e1ea9..900a96c 100644
--- a/exampleSite/config.json
+++ b/exampleSite/config.json
@@ -1,7 +1,7 @@
 {
   "baseURL": "https://www.example.org/",
   "languageCode": "en-us",
-  "title": "demo of redgood",
+  "title": "redgood",
   "theme": "redgood",
   "disableKinds": "taxonomyTerm",
   "params": {
@@ -10,7 +10,8 @@
     "theme": {
       "dateFormat": "2006-01-02",
       "copyrightInFooter": false,
-      "footerText": "customizable short *markdown* enabled text"
+      "footerText": "customizable short *markdown* enabled text",
+      "pinnedPosts": false
     },
     "about": {
       "profileImage": "images/profile.jpg",
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index dcf346a..f28d06c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -7,7 +7,10 @@
     {{ else }}
     {{ partial "regularHeader" . }}
     {{ end }}
-    <main>{{- block "main" . }} {{- end }}</main>
+    <main {{ if not .IsHome }}class="card shadow round-corner"{{ end }}>
+      {{- block "main" . }}
+      {{- end }}
+    </main>
     {{- partial "footer.html" . -}}
   </body>
 </html>
diff --git a/layouts/index.html b/layouts/index.html
index 7095424..ba73a48 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,14 +1,11 @@
-{{ define "main" }}
-{{ partial "index/pinnedPost" . }}
-{{ partial "index/recentPost" . }}
-<h3>Sections</h3>
-<div class="site-sections home-page-card">
-  {{ range .Site.Sections }}
-  {{ if not .Params.hideFromHome }}
-  <p>
-    <a href="{{ .Permalink }}" aria-label="site sections">{{ .Title }}</a> - {{ len .Pages}} Articles
-  </p>
-  {{ end }} {{ end }}
+{{ 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>
-{{ partial "taxa" (dict "taxo" .Site.Taxonomies "mysite" .) }}
 {{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index f0c644e..f204ede 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,51 +1,25 @@
-<footer>
+<footer class="shadow round-corner">
   {{ if eq .Kind "section" }}
   <div>{{ template "_internal/pagination.html" . }}</div>
+  {{ end }} {{ if eq .Kind "page" }}
+  <div class="prev-next">{{ partial "prevNext" .}}</div>
   {{ end }}
-  {{ if eq .Kind "page" }}
-  <div class="prev-next">
-    {{- if .PrevInSection }}
+  <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
-      class="active"
-      href="{{ .PrevInSection.Permalink | relURL }}"
-      aria-label="Previous Article"
-      ><i class="bi bi-arrow-left-circle"></i
-    ></a>
-    {{- else }}
-    <div class="disabled"><i class="bi bi-arrow-left-circle"></i></div>
-    {{- end }}
-    <a href="#" aria-label="navigate to top"
-      ><i class="bi bi-box-arrow-in-up"></i></a>
-    {{- if .NextInSection }}
-    <a
-      class="active"
-      href="{{ .NextInSection.Permalink | relURL }}"
-      aria-label="Next Article"
-      ><i class="bi bi-arrow-right-circle"></i
-    ></a>
-    {{- else }}
-    <div class="disabled"><i class="bi bi-arrow-right-circle"></i></div>
-    {{- end }}
-  </div>
-  {{ end }}
-
-  <div class="footer">
-    <p>
-      {{ if .Site.Params.theme.copyrightInFooter }} &copy; {{end}}
-      {{ dateFormat "2006" now }} {{ .Site.Params.author }}.
-      {{ .Site.Params.theme.footerText | markdownify }}.
-    </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>
+      href="https://www.urjaacharya.com/"
+      aria-label="link to urja acharya site"
+    >
+      {{- print "urja acharya" -}}
+    </a>
+  </p>
 </footer>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 5645f6b..cba76f2 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -9,9 +9,7 @@
   <meta name="author" content="{{ .Site.Params.author }}" />
 
   <link rel="stylesheet" href="{{ `/css/main.css` | relURL }}" />
-  {{ if not .IsHome }}
-  <link rel="stylesheet" href="{{ `/css/pagination.css` | relURL }}" />
-  {{ end }}
+
   <link
     href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;600&display=swap"
     rel="stylesheet"
diff --git a/layouts/partials/homeHeader.html b/layouts/partials/homeHeader.html
index a32c792..46bc1a0 100644
--- a/layouts/partials/homeHeader.html
+++ b/layouts/partials/homeHeader.html
@@ -1,6 +1,6 @@
-<header class="home-page-header">
+<header class="home-page-header shadow round-corner">
   <div class="header-image-container">
-    <div class="header-image">
+    <div class="header-image shadow">
       <img
         src="{{ .Site.Params.about.profileImage | relURL }}"
         alt="profile image of {{ .Site.Params.author }}"
diff --git a/layouts/partials/index/homePageArticle.html b/layouts/partials/index/homePageArticle.html
new file mode 100644
index 0000000..65d4e84
--- /dev/null
+++ b/layouts/partials/index/homePageArticle.html
@@ -0,0 +1,17 @@
+<div class="pinned-post card shadow round-corner">
+    <div class="card-links"></div>
+    <h1 style="margin: 0"><a href="{{ .Permalink }}">{{ .Title }}</a></h1>
+    <p class="document-date">
+      {{ dateFormat .Site.Params.theme.dateFormat .Date }} &middot; {{ .Params.author }}
+    </p>
+    <hr />
+    {{ .Content }}
+    {{ if .Site.Params.theme.pinnedPosts }}
+    <hr />
+    <a
+      href="{{ `pinnedposts` | relURL }}"
+      style="display: block; text-align: right"
+      >Previously Pinned Posts</a
+    >
+    {{ end }}
+  </div>
\ No newline at end of file
diff --git a/layouts/partials/index/pinnedPost.html b/layouts/partials/index/pinnedPost.html
index 8b29a3d..b5d8ce3 100644
--- a/layouts/partials/index/pinnedPost.html
+++ b/layouts/partials/index/pinnedPost.html
@@ -1,14 +1,9 @@
-{{ range ((where .Site.Pages "Params.pinned" true).ByDate.Reverse) | first 1 }}
-<h2>
-  <a href="{{ .Permalink }}">{{ .Title }}</a>
-</h2>
-<div class="pinned-post home-page-card">
-  <p>{{ .Summary | plainify | truncate 250 }}</p>
-  <div class="home-page-card-links">
-    <a href="{{ .Permalink }}"> Read Pinned Post </a>
-  </div>
-  <div class="home-page-card-links">
-    <a href="{{ `pinnedposts` | relURL }}">All Pinned</a>
-  </div>
-</div>
+{{ if .Site.Params.theme.pinnedPosts }}
+  {{ range ((where .Site.Pages "Params.pinned" true).ByDate.Reverse) | first 1 }}
+    {{ partial "index/homePageArticle" . }}
+  {{ end }}
+{{ else }}
+  {{ range site.RegularPages | first 1 }}
+    {{ partial "index/homePageArticle" . }}
+  {{ end }}
 {{ end }}
diff --git a/layouts/partials/index/recentPost.html b/layouts/partials/index/recentPost.html
index 7578c0f..5ad744c 100644
--- a/layouts/partials/index/recentPost.html
+++ b/layouts/partials/index/recentPost.html
@@ -1,9 +1,9 @@
-<h3>Recent Posts</h3>
-<div class="recent-posts home-page-card">
+
+<h4 style="margin:0 0 1em 0;">Recent Posts</h4>
   {{ range ((where .Site.Pages "Kind" "page").ByDate.Reverse) | first 6 }}
   {{ partial "listPage" . }}
   {{ end }}
-  <div class="home-page-card-links">
+  <div class="card-links">
     <a href="{{ `archive` | relURL }}">All Posts</a>
   </div>
-</div>
+
diff --git a/layouts/partials/index/siteSections.html b/layouts/partials/index/siteSections.html
new file mode 100644
index 0000000..01f0697
--- /dev/null
+++ b/layouts/partials/index/siteSections.html
@@ -0,0 +1,9 @@
+<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
diff --git a/layouts/partials/prevNext.html b/layouts/partials/prevNext.html
new file mode 100644
index 0000000..5a1b4e8
--- /dev/null
+++ b/layouts/partials/prevNext.html
@@ -0,0 +1,23 @@
+{{- if .PrevInSection }}
+    <a
+      class="active primary-icon"
+      href="{{ .PrevInSection.Permalink | relURL }}"
+      aria-label="Previous Article"
+      ><i class="bi bi-arrow-left-circle"></i
+    ></a>
+    {{- else }}
+    <div class="disabled"><i class="bi bi-arrow-left-circle"></i></div>
+    {{- end }}
+    <a class="primary-icon" href="#" aria-label="navigate to top"
+      ><i class="bi bi-box-arrow-in-up"></i></a>
+    {{- if .NextInSection }}
+    <a
+      class="active primary-icon"
+      href="{{ .NextInSection.Permalink | relURL }}"
+      aria-label="Next Article"
+      ><i class="bi bi-arrow-right-circle"></i
+    ></a>
+    {{- else }}
+    <div class="disabled"><i class="bi bi-arrow-right-circle"></i></div>
+    {{- end }}
+  </div>
\ No newline at end of file
diff --git a/layouts/partials/regularHeader.html b/layouts/partials/regularHeader.html
index 69470fc..8f3f144 100644
--- a/layouts/partials/regularHeader.html
+++ b/layouts/partials/regularHeader.html
@@ -1,4 +1,4 @@
-<header class="regular-page-header">
+<header class="regular-page-header shadow round-corner">
   <div
     style="
       display: flex;
@@ -7,7 +7,7 @@
       margin-bottom: 0.5em;
     "
   >
-    <a class="header-icon" href="{{ `/` | relURL }}" aria-label="home page">
+    <a class="primary-icon" href="{{ `/` | relURL }}" aria-label="home page">
       <i class="bi bi-house-door"></i>
     </a>
     {{ partial "share" . }}
diff --git a/layouts/partials/share.html b/layouts/partials/share.html
index e7cd823..1a26565 100644
--- a/layouts/partials/share.html
+++ b/layouts/partials/share.html
@@ -10,7 +10,7 @@
 >
   {{ $url := printf "%s" .URL | absLangURL }}
   <a
-    class="header-icon"
+    class="primary-icon"
     href="mailto:?subject={{ print .Title ` by ` .Site.Params.author }}&amp;body={{ $url }}"
     target="_self"
     rel="noopener"
@@ -18,7 +18,7 @@
     ><i class="bi bi-envelope"></i
   ></a>
   <a
-    class="header-icon"
+    class="primary-icon"
     href="https://facebook.com/sharer/sharer.php?u={{ $url }}"
     target="_blank"
     rel="noopener"
@@ -26,7 +26,7 @@
     ><i class="bi bi-facebook"></i
   ></a>
   <a
-    class="header-icon"
+    class="primary-icon"
     href="https://twitter.com/intent/tweet/?text={{ print .Title ` by ` .Site.Params.author }}&amp;url={{ $url }}"
     target="_blank"
     rel="noopener"
diff --git a/layouts/partials/social.html b/layouts/partials/social.html
index 5a1bd37..5433122 100644
--- a/layouts/partials/social.html
+++ b/layouts/partials/social.html
@@ -1,11 +1,11 @@
 {{ $width := mul (len .Site.Params.social) 2 }}
 <div class="social-info" style="width: {{ $width }}em;">
   {{- range $key, $val := .Site.Params.social -}} {{ if eq $key "email" }}
-  <a class="header-icon" href="mailto:{{- $val.url }}" aria-label="{{ $key }}"
+  <a class="primary-icon" href="mailto:{{- $val.url }}" aria-label="{{ $key }}"
     ><i class="{{ $val.icon }}"></i>
   </a>
   {{ else }}
-  <a class="header-icon" href="{{- $val.url }}" aria-label="{{ $key }}"
+  <a class="primary-icon" href="{{- $val.url }}" aria-label="{{ $key }}"
     ><i class="{{ $val.icon }}"></i>
   </a>
   {{ end }} {{- end -}}
diff --git a/layouts/partials/taxa.html b/layouts/partials/taxa.html
index e0fe815..3485c4b 100644
--- a/layouts/partials/taxa.html
+++ b/layouts/partials/taxa.html
@@ -6,11 +6,11 @@
 
 {{ range sort ($scratch.Get "custom") ".Num" "desc" }}
 {{ $taxaTypeName := .Name }}
-<h3>
+<h4 style="margin: 0;">
   {{ $taxaTypeName | humanize }}
-</h3>
+</h4>
 {{ $this_taxa := index $.taxo .Name }}
-<div class="taxa-container home-page-card">
+<div class="taxa-container">
   {{ range $this_taxa.ByCount }}
   {{ $taxaValueName := .Page.Title }}
     <a class="taxa" href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
diff --git a/static/css/main.css b/static/css/main.css
index a19b466..3320f1b 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -6,7 +6,7 @@
   --primary: #a3001b;
   --highlight: #b6ffb6;
   --shadow: black;
-  --inactive: grey;
+  --inactive: #949494;
 }
 html {
   font-size: 18px;
@@ -101,13 +101,12 @@ header {
   overflow: hidden;
   display: flex;
   justify-content: center;
-  box-shadow: 3px 3px 5px 3px black;
 }
-footer {
+.footer {
   margin-top: 3em;
   margin-bottom: 5px;
 }
-.footer {
+footer {
   text-align: center;
   background-color: var(--primary);
   color: var(--bg);
@@ -115,15 +114,14 @@ footer {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
   min-height: 80px;
   font-size: 0.9em;
   font-weight: 300;
 }
-footer p {
+.footer p {
   margin: 0;
 }
-.footer a,
+footer a,
 .about-narrative a {
   color: var(--bg);
   text-decoration: underline;
@@ -178,7 +176,7 @@ h6 {
   font-size: 2.5em;
 }
 .page-title {
-  font-size: 1.75em;
+  font-size: 2.5em;
 }
 .front-matter {
   border-bottom: solid 3px var(--primary);
@@ -192,10 +190,9 @@ pre {
 }
 blockquote {
   border-left: solid 5px var(--secondaryText);
-  padding: 0.5em;
-  background-color: var(--bgLight);
-  border-radius: 2px;
-  box-shadow: 1px 1px 4px 1px var(--shadow);
+  padding: 0.25em;
+  display: block;
+  margin: 0 0 0 1em;
 }
 blockquote p {
   margin: 0;
@@ -214,16 +211,23 @@ td {
   border: solid 1px var(--primary);
   padding: 5px;
 }
-svg {
-  height: 1em;
-  width: 1em;
-}
-.header-icon {
+hr {
+  border: 0;
+  height: 1px;
+  background-image: linear-gradient(
+    to right,
+    rgba(0, 0, 0, 0),
+    var(--primary),
+    rgba(0, 0, 0, 0)
+  );
+  margin: 1.5em 0;
+}
+.primary-icon {
   font-size: 1.5em;
   color: var(--bg);
   border-radius: 5px;
 }
-.header-icon:hover {
+.primary-icon:hover {
   text-shadow: 0px 0px 5px var(--highlight);
 }
 .social-info {
@@ -237,26 +241,31 @@ svg {
 .archive-table {
   margin-top: 1em;
 }
-.home-page-card {
+.card {
   background-color: var(--bgLight) !important;
   padding: 15px;
-  border-radius: 5px;
+  margin: 2em 0;
+}
+.shadow {
   box-shadow: 1px 1px 2px 1px var(--shadow);
 }
-.home-page-card > p:last-child {
+.round-corner {
+  border-radius: 5px;
+}
+.card > p:last-child {
   margin-bottom: 0;
 }
-.home-page-card > p:first-child {
+.card > p:first-child {
   margin-top: 0;
 }
-.home-page-card-links {
+.card-links {
   margin-top: 1em;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   display: inline-block;
 }
-.home-page-card-links a {
+.card-links a {
   background-color: var(--primary);
   color: var(--bg);
   margin-right: 10px;
@@ -265,17 +274,17 @@ svg {
   box-shadow: 3px 3px 5px 1px var(--shadow);
   transition: box-shadow 0.2s;
 }
-.home-page-card-links > a:hover {
+.card-links > a:hover {
   box-shadow: 1px 1px 5px 1px var(--shadow);
   text-decoration: none;
 }
-.home-page-card-links > a:active {
+.card-links > a:active {
   box-shadow: 0px 0px 1px 1px var(--shadow);
 }
 .taxa-container {
   display: flex;
   flex-wrap: wrap;
-  padding: 5px 11px;
+  padding: 1em 0;
 }
 .taxa::before {
   content: "#";
@@ -288,7 +297,7 @@ svg {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  margin-bottom: 3em;
+  margin-bottom: 1.5em;
   font-size: 1.5em;
 }
 .prev-next > div,
@@ -341,3 +350,52 @@ main img {
     margin: 0;
   }
 }
+/* Pagination */
+ul.pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  list-style-type: none;
+}
+li.page-item {
+  width: 2.5em;
+  height: 2em;
+  display: flex;
+  justify-content: center;
+  align-items: 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);
+}
+li.page-item a {
+  text-decoration: none;
+  font-weight: 400;
+  width: 100% !important;
+}
+li.page-item.disabled a {
+  color: var(--inactiveColor);
+}
+li.page-item.active {
+  background-color: var(--bgLight);
+  text-shadow: 0px 0px 2px var(--bgLight);
+}
+li.page-item.active a {
+  color: var(--primary);
+}
+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);
+}
+/* Grid */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(341px, 1fr));
+  grid-gap: 1em;
+}
diff --git a/static/css/pagination.css b/static/css/pagination.css
deleted file mode 100644
index 85311bb..0000000
--- a/static/css/pagination.css
+++ /dev/null
@@ -1,33 +0,0 @@
-ul.pagination {
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  list-style-type: none;
-}
-li.page-item {
-  padding: 10px;
-}
-li.page-item {
-  border-top: 1px solid var(--primary);
-  border-bottom: 1px solid var(--primary);
-  border-left: 1px solid var(--primary);
-  background-color: var(--bg);
-}
-li.page-item.disabled a {
-  color: var(--inactiveColor);
-}
-li.page-item.active {
-  background-color: var(--primary);
-}
-li.page-item.active a {
-  color: var(--bg);
-  font-weight: 600;
-}
-li.page-item:first-child {
-  border-radius: 10px 0 0 10px;
-}
-li.page-item:last-child {
-  border-radius: 0 10px 10px 0;
-  border-right: 1px solid var(--primary);
-}