From d96cc83b5c2b10455d415aa4cd98de9aae0603c2 Mon Sep 17 00:00:00 2001
From: Darshan Baral <darshanbaral@gmail.com>
Date: Thu, 14 May 2020 15:41:30 -0700
Subject: Added about page

---
 exampleSite/config.toml                   |  6 +-
 exampleSite/content/about/_index.md       | 65 +++++++++++++++++++++
 layouts/_default/about.html               | 18 ++++++
 layouts/index.html                        | 62 +++++---------------
 layouts/partials/about/education.html     | 16 ++++++
 layouts/partials/about/publications.html  | 27 +++++++++
 layouts/partials/footer.html              | 80 ++++++++++++++++++++++----
 layouts/partials/header.html              |  7 +++
 layouts/partials/icons/book.html          | 15 +++++
 layouts/partials/icons/folder.html        | 15 +++++
 layouts/partials/icons/graduationCap.html | 15 +++++
 layouts/partials/icons/portrait.html      | 15 +++++
 layouts/partials/intro.html               | 55 +++++-------------
 layouts/partials/menu.html                | 29 ++++++++--
 layouts/partials/social.html              |  1 +
 static/css/main.css                       | 96 ++++++++++++++-----------------
 16 files changed, 360 insertions(+), 162 deletions(-)
 create mode 100644 exampleSite/content/about/_index.md
 create mode 100644 layouts/_default/about.html
 create mode 100644 layouts/partials/about/education.html
 create mode 100644 layouts/partials/about/publications.html
 create mode 100644 layouts/partials/icons/book.html
 create mode 100644 layouts/partials/icons/folder.html
 create mode 100644 layouts/partials/icons/graduationCap.html
 create mode 100644 layouts/partials/icons/portrait.html

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index d9dd309..818a7e6 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -11,11 +11,11 @@ theme = "ghazal"
     author = "Darshan Baral"
     description = "A hugo theme for personal blogs"
     footer = "2020 Darshan Baral."
-    about = "This is a short intro about me to describe some of the cool things I do."
-    image = "https://i.stack.imgur.com/oI2SB.jpg?s=328&g=1"
+    shortAbout = "This is a short intro about me to describe some of the cool things I do."
+    mainimage = "https://i.stack.imgur.com/oI2SB.jpg?s=328&g=1"
+    profileImage = "https://i.stack.imgur.com/oI2SB.jpg?s=328&g=1"
 
     [params.theme]
-        profileImage = "/images/profile.jpg"
         fontSize = "20px"
         dateFormat = "2006/01/02"
         paginateNum = 5
diff --git a/exampleSite/content/about/_index.md b/exampleSite/content/about/_index.md
new file mode 100644
index 0000000..30545ae
--- /dev/null
+++ b/exampleSite/content/about/_index.md
@@ -0,0 +1,65 @@
+---
+title: "About Me"
+icon: "portrait"
+weight: 10
+name: "ASasd LADSK"
+prefix: ""
+suffix: "PhD"
+profileImage: "https://i.stack.imgur.com/oI2SB.jpg?s=328&g=1"
+## Education
+education:
+  [
+    {
+      title: "PhD",
+      institution: "University of Awesome",
+      major: "Awesome Engineering",
+      date: 2020,
+      project: "The awesome thing that I did",
+      projectTitle: "Dissertation",
+      projectURL: "#",
+    },
+    {
+      title: "MS",
+      institution: "University of Awesome",
+      major: "Awesome Engineering and Cool minor",
+      date: 2018,
+      project: "The awesome thing that I did",
+      projectTitle: "Thesis",
+      projectURL: "",
+    },
+  ]
+## Publications
+publications:
+  [
+    Journals:
+      [
+        {
+          title: "sdfksahfjsadh fkjsadhf lkjdsahf kjsadhf lkjads hfkjdsal fksdaf sadfkdsfjhksadgf dfas",
+          author: "asda B, asd asV, asd sad O",
+          date: 2019,
+          journal: "Journal dsalf adsf dsaf",
+          url: "",
+          abstract: "shahfkasjdhf ahflkjdsa hfkjdsa hflkjdsahflkdsa hfljdsahf lkjashfdkjad hflkjdsa hflkjdsafh kjsadhf kjsadhf lkjdsahf kjdsahf lkjdsahf lkjdsahf lkjsadhfljdsaf halkjdshf ldsajfh askjdhflkjdsaf ldsakflkjdsahf kjsadhflkjdsaf lkjdsahf kjsadgfkdsabfanmdsbfdsanf.,dsanfmsnafdhfdlkjsaj;lkdsa jf;lkdsajf ;lksajfd;lkdsa jf;kdsajf ds",
+        },
+        {
+          title: "sdfksahfjsadh fkjsadhf lkjdsahf kjsadhf lkjads hfkjdsal fksdaf sadfkdsfjhksadgf dfas",
+          author: "asda B, asd asV, asd sad O",
+          date: 2020,
+          journal: "Journal asjhdkas hdkjasdh",
+          url: "#",
+        },
+      ],
+    Proceedings:
+      [
+        {
+          title: "sdfksahfjsadh fkjsadhf lkjdsahf kjsadhf lkjads hfkjdsal fksdaf sadfkdsfjhksadgf dfas",
+          author: "asda B, asd asV, asd sad O",
+          date: 2019,
+          journal: "Journal asjhdkas hdkjasdh",
+          url: "#",
+        },
+      ],
+  ]
+---
+
+I am dsjf dsjf;asdjf j. ldsfjsak jdsfj;asd fdsf ;lasdfl jasd. aldskfj salkdjfalksd jflsajfas dfa.sdf aldsfj asldfj ldsjfldsf *jlkdsajflsajf*. afdsj lsadjf **asdjf sad fjldskfjsaldf**. ds flsadkjf lkasdjflkdsajf akdsjf. ldsajflas djflkdsajfkjlkdsajflkdsa jfla. lasdkjf ladsjflkajfa;jf;adskjfo9awefjldsa jljf lasjdflkjdsf lj.
diff --git a/layouts/_default/about.html b/layouts/_default/about.html
new file mode 100644
index 0000000..493f455
--- /dev/null
+++ b/layouts/_default/about.html
@@ -0,0 +1,18 @@
+{{ define "main" }}
+<img
+  src="{{ .Params.profileImage }}"
+  style="
+    display: block;
+    margin: 1em auto 0 auto;
+    max-width: 300px;
+    border-radius: 50%;
+  "
+/>
+{{ partial "social" . }}
+<h1 style="border-bottom: solid 3px;">
+  {{ .Params.prefix }} {{ .Params.name }}, {{ .Params.suffix }}
+</h1>
+{{ .Content }}
+{{ partial "about/education" . }}
+{{ partial "about/publications" . }}
+{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index b9a24e3..9e68506 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,7 +1,6 @@
 {{ define "main" }}
 <div
   style="
-    height: 100%;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
@@ -10,57 +9,22 @@
   "
 >
   {{ partial "intro.html" . }}
-  <div
+  <img
+    src="{{ .Site.Params.mainImage | relURL }}"
     style="
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      width: 80vw;
-      height: 80vw;
+      border-radius: 50%;
+      background-color: inherit;
+      opacity: 1;
+      visibility: visible;
+      transition: opacity 0.8s, width 0.8s, transform 0.8s;
+      width: 100%;
       min-width: 250px;
       min-height: 250px;
-      max-width: 400px;
-      max-height: 400px;
+      max-width: 300px;
+      max-height: 300px;
+      transform: none;
     "
-  >
-    <div
-      style="
-        position: absolute;
-        opacity: 0;
-        padding: 25px;
-        min-width: 250px;
-        min-height: 250px;
-        max-width: 400px;
-        max-height: 400px;
-        box-sizing: border-box;
-        transition: opacity 0.8s;
-        z-index: 10;
-      "
-      class="more-info"
-    >
-      <p style="margin: 0 0 0.25em 0; font-size: 0.9em; text-align: center;">
-        {{ .Site.Params.about }}
-      </p>
-      {{ partial "social.html" . }}
-    </div>
-    <div
-      class="profile-image"
-      style="
-        background-color: inherit;
-        opacity: 1;
-        visibility: visible;
-        transition: opacity 0.8s, width 0.8s, transform 0.8s;
-        width: 100%;
-        max-width: 325px;
-        transform: none;
-      "
-    >
-      <img
-        src="{{ .Site.Params.image | relURL }}"
-        style="width: 100%; height: 100%; border-radius: 100%;"
-      />
-    </div>
-  </div>
+  />
+  {{ partial "social.html" . }}
 </div>
 {{ end }}
diff --git a/layouts/partials/about/education.html b/layouts/partials/about/education.html
new file mode 100644
index 0000000..f642061
--- /dev/null
+++ b/layouts/partials/about/education.html
@@ -0,0 +1,16 @@
+{{ if .Params.education }}
+<h2 style="border-bottom: solid 3px; text-transform: uppercase;">
+  <i>{{ partial "icons/graduationCap" . }}</i>Education
+</h2>
+
+{{ range sort .Params.education "date" "desc" }}
+<p>{{ .date }}. {{ .title }}. {{ .major}}. {{ .institution }}</p>
+{{ if .project }}
+<p style="margin-top: -1em; margin-left: 1em;">
+  {{ .projectTitle}} - {{if .projectURL }}
+  <a href="{{ .projectURL }}">{{ .project }}</a>
+  {{ else }}
+  <u>{{ .project }}</u>
+  {{ end }}
+</p>
+{{ end }} {{ end }} {{ end }}
diff --git a/layouts/partials/about/publications.html b/layouts/partials/about/publications.html
new file mode 100644
index 0000000..af41121
--- /dev/null
+++ b/layouts/partials/about/publications.html
@@ -0,0 +1,27 @@
+{{ if .Params.publications }}
+<h2 style="border-bottom: solid 3px; text-transform: uppercase;">
+  <i>{{ partial "icons/book" . }}</i>Publications
+</h2>
+
+{{ range .Params.publications }} {{ range $key, $val := . }}
+<h3 style="font-variant: small-caps;">{{ $key }}</h3>
+<ol>
+  {{ range sort $val "date" "desc" }}
+  <li>
+    <p style="margin: 1em; text-indent: -0.5em;">
+      {{ .date }}. {{ .author | markdownify }}. {{ if .url }}<a
+        href="{{ .url }}"
+        >{{ .title }}</a
+      >{{ else }} <u>{{- .title -}}</u> {{end -}}. {{ .journal }}.
+    </p>
+    {{ if .abstract }}
+    <blockquote style="margin: 0 0 0 1em;">
+      <strong style="font-variant: small-caps; text-decoration: underline;"
+        >Abstract</strong
+      ><p style="margin: 0;">{{ .abstract }}</p>
+    </blockquote>
+    {{ end }}
+  </li>
+  {{ end }}
+</ol>
+{{ end }} {{ end }} {{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 544ca02..2e572d8 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,24 +1,84 @@
 <footer style="display: flex; flex-direction: column; margin-top: 0.5em;">
-  {{ if eq .Kind "page" }}
-  {{ partial "prevnext.html" . }}
-  {{ end }} {{ if eq .Kind "section" }}
+  {{ if eq .Kind "page" }} {{ partial "prevnext.html" . }} {{ end }}
+  {{ if eq .Kind "section" }}
   <div>
     {{ template "_internal/pagination.html" . }}
   </div>
   {{ end }}
   <div
     style="
-      padding: 10px 5px;
       font-size: 0.8em;
       background-color: var(--bgDarker);
       box-shadow: 0px 0px 2px 2px black;
-      text-align: center;
     "
   >
-    <p style="margin: 0 0 5px 0;">{{ .Site.Params.footer }}</p>
-    <p style="margin: 0;">
-      <a href="https://github.com/darshanbaral/ghazal">ghazal</a> by
-      <a href="https://www.darshanbaral.com/">darshan</a>.
-    </p>
+    <div style="display: flex; flex-wrap: wrap;">
+      <div
+        class="footer-about"
+        style="
+          padding: 0 15px;
+          max-width: 400px;
+          flex-basis: 33%;
+          box-sizing: border-box;
+        "
+      >
+        <h3>About Me</h3>
+        <img
+          style="max-width: 150px; border-radius: 50%; display: block; margin: auto;"
+          src="{{ .Site.Params.profileImage | relURL }}"
+        />
+        <p>
+          {{ .Site.Params.shortAbout }}
+          <a href="{{ `about` | relURL }}">More</a>
+        </p>
+      </div>
+      <div
+        class="footer-social"
+        style="
+          padding: 0 15px;
+          max-width: 400px;
+          flex-basis: 33%;
+          box-sizing: border-box;
+        "
+      >
+        <h3>Contact Me</h3>
+        <ul style="padding: 0;">
+          {{ range $key, $val := .Site.Params.social }}
+          <li style="list-style: none;">
+            <a href="{{ $val }}" style="font-variant: small-caps;"
+              >{{ partial (print "icons/" $key) . }}{{ $key }}</a
+            >
+          </li>
+          {{ end }}
+        </ul>
+      </div>
+      <div
+        class="footer-recent"
+        style="
+          padding: 0 15px;
+          max-width: 400px;
+          flex-basis: 33%;
+          flex-grow: 1;
+          box-sizing: border-box;
+        "
+      >
+        <h3>Recent Posts</h3>
+        <ul style="padding: 0;">
+          {{ range ((where .Site.Pages "Kind" "page").ByDate.Reverse) | first 5}}
+          <li style="list-style: none;">
+            <a href="{{ .Permalink }}">{{ .Title | truncate 25 }}</a>
+          </li>
+          {{ end }}
+        </ul>
+      </div>
+    </div>
+    <hr style="width: 50%; border-color: var(--textColor);">
+    <div style="text-align: center;">
+      <p style="margin: 0 0 5px 0;">{{ .Site.Params.footer }}</p>
+      <p style="margin: 0;">
+        <a href="https://github.com/darshanbaral/ghazal">ghazal</a> by
+        <a href="https://www.darshanbaral.com/">darshan</a>.
+      </p>
+    </div>
   </div>
 </footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index af3d452..81f86ec 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,5 +1,12 @@
 <header
   style="
+  width: 95%;
+  max-width: 960px;
+  position: fixed;
+  top: 0;
+  z-index: 10;
+  transition: all 0.3s;
+  height: {{ if not .IsHome}}60px{{ else }}0{{ end }};
     box-shadow: {{ if not .IsHome}} 0px 0px 2px 2px black {{ else }} none {{ end }};
     background-color: {{ if not .IsHome}} var(--bgDarker) {{ else }} inherit {{ end }};
   "
diff --git a/layouts/partials/icons/book.html b/layouts/partials/icons/book.html
new file mode 100644
index 0000000..82d36bc
--- /dev/null
+++ b/layouts/partials/icons/book.html
@@ -0,0 +1,15 @@
+<svg
+  aria-hidden="true"
+  focusable="false"
+  data-prefix="fas"
+  data-icon="book"
+  class="svg-inline--fa fa-book fa-w-14"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 448 512"
+>
+  <path
+    fill="currentColor"
+    d="M448 360V24c0-13.3-10.7-24-24-24H96C43 0 0 43 0 96v320c0 53 43 96 96 96h328c13.3 0 24-10.7 24-24v-16c0-7.5-3.5-14.3-8.9-18.7-4.2-15.4-4.2-59.3 0-74.7 5.4-4.3 8.9-11.1 8.9-18.6zM128 134c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm0 64c0-3.3 2.7-6 6-6h212c3.3 0 6 2.7 6 6v20c0 3.3-2.7 6-6 6H134c-3.3 0-6-2.7-6-6v-20zm253.4 250H96c-17.7 0-32-14.3-32-32 0-17.6 14.4-32 32-32h285.4c-1.9 17.1-1.9 46.9 0 64z"
+  ></path>
+</svg>
diff --git a/layouts/partials/icons/folder.html b/layouts/partials/icons/folder.html
new file mode 100644
index 0000000..3b90d5c
--- /dev/null
+++ b/layouts/partials/icons/folder.html
@@ -0,0 +1,15 @@
+<svg
+  aria-hidden="true"
+  focusable="false"
+  data-prefix="fas"
+  data-icon="folder"
+  class="svg-inline--fa fa-folder fa-w-16"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 512 512"
+>
+  <path
+    fill="currentColor"
+    d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
+  ></path>
+</svg>
diff --git a/layouts/partials/icons/graduationCap.html b/layouts/partials/icons/graduationCap.html
new file mode 100644
index 0000000..6480361
--- /dev/null
+++ b/layouts/partials/icons/graduationCap.html
@@ -0,0 +1,15 @@
+<svg
+  aria-hidden="true"
+  focusable="false"
+  data-prefix="fas"
+  data-icon="graduation-cap"
+  class="svg-inline--fa fa-graduation-cap fa-w-20"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 640 512"
+>
+  <path
+    fill="currentColor"
+    d="M622.34 153.2L343.4 67.5c-15.2-4.67-31.6-4.67-46.79 0L17.66 153.2c-23.54 7.23-23.54 38.36 0 45.59l48.63 14.94c-10.67 13.19-17.23 29.28-17.88 46.9C38.78 266.15 32 276.11 32 288c0 10.78 5.68 19.85 13.86 25.65L20.33 428.53C18.11 438.52 25.71 448 35.94 448h56.11c10.24 0 17.84-9.48 15.62-19.47L82.14 313.65C90.32 307.85 96 298.78 96 288c0-11.57-6.47-21.25-15.66-26.87.76-15.02 8.44-28.3 20.69-36.72L296.6 284.5c9.06 2.78 26.44 6.25 46.79 0l278.95-85.7c23.55-7.24 23.55-38.36 0-45.6zM352.79 315.09c-28.53 8.76-52.84 3.92-65.59 0l-145.02-44.55L128 384c0 35.35 85.96 64 192 64s192-28.65 192-64l-14.18-113.47-145.03 44.56z"
+  ></path>
+</svg>
diff --git a/layouts/partials/icons/portrait.html b/layouts/partials/icons/portrait.html
new file mode 100644
index 0000000..60de60e
--- /dev/null
+++ b/layouts/partials/icons/portrait.html
@@ -0,0 +1,15 @@
+<svg
+  aria-hidden="true"
+  focusable="false"
+  data-prefix="fas"
+  data-icon="portrait"
+  class="svg-inline--fa fa-portrait fa-w-12"
+  role="img"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 384 512"
+>
+  <path
+    fill="currentColor"
+    d="M336 0H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V48c0-26.5-21.5-48-48-48zM192 128c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm112 236.8c0 10.6-10 19.2-22.4 19.2H102.4C90 384 80 375.4 80 364.8v-19.2c0-31.8 30.1-57.6 67.2-57.6h5c12.3 5.1 25.7 8 39.8 8s27.6-2.9 39.8-8h5c37.1 0 67.2 25.8 67.2 57.6v19.2z"
+  ></path>
+</svg>
diff --git a/layouts/partials/intro.html b/layouts/partials/intro.html
index 3bdb64f..2c32f80 100644
--- a/layouts/partials/intro.html
+++ b/layouts/partials/intro.html
@@ -7,51 +7,24 @@
     justify-content: center;
     color: var(--primaryColor);
     text-align: center;
-    margin-bottom: 0.5em;
+    margin-bottom: 1em;
   "
 >
   <h1 style="margin: 0; font-size: 1.7em;">
     {{.Site.Params.title}}
   </h1>
-  <i
-    style="
-      font-size: 0.75em;
-      border-radius: 50%;
-      display: inline-flex;
-      padding: 5px;
-      margin: 0 5px;
-    "
-    class="show-more-info chevron-hz"
-    onclick="showInfo()"
+  <a href="{{ `about` | relURL }}" style="display: inline-flex;"
+    ><i
+      style="
+        font-size: 0.75em;
+        border-radius: 50%;
+        display: inline-flex;
+        padding: 5px;
+        margin: 0 5px;
+      "
+      class="show-more-info chevron-hz"
+    >
+      {{ partial "icons/chevron.html" . }}
+    </i></a
   >
-    {{ partial "icons/chevron.html" . }}
-  </i>
 </div>
-
-<script>
-  const showInfo = () => {
-    const showMoreInfo = document.querySelector(".show-more-info");
-    const profileImage = document.querySelector(".profile-image");
-    const chevron = document.querySelector(".fa-chevron-right");
-    const moreInfo = document.querySelector(".more-info");
-
-    if (showMoreInfo.classList.contains("chevron-hz")) {
-      showMoreInfo.classList.remove("chevron-hz");
-      chevron.style.transform = "rotate(90deg)";
-      profileImage.style.opacity = "0";
-      profileImage.style.width = "0";
-      profileImage.style.transform = "rotate(180deg)";
-      moreInfo.style.visibility = "visible";
-      moreInfo.style.opacity = "1";
-    } else {
-      showMoreInfo.classList.add("chevron-hz");
-      chevron.style.transform = "none";
-      profileImage.style.visibility = "visible";
-      profileImage.style.width = "100%";
-      profileImage.style.transform = "none";
-      profileImage.style.opacity = "1";
-      moreInfo.style.visibility = "hidden";
-      moreInfo.style.opacity = "0";
-    }
-  };
-</script>
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index f47080e..9868f4d 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -4,8 +4,7 @@
     width: 100vw;
     height: 100vh;
     overflow: hidden;
-    background-color: #19092be3;
-    transition: all 0.5s;
+    background-color: var(--bgTransparent);
     position: fixed;
     left: 0;
     top: -100vh;
@@ -15,6 +14,7 @@
   "
 >
   <div
+    class="menu-container"
     style="
       background-color: var(--bgColor);
       display: flex;
@@ -27,10 +27,29 @@
       box-shadow: 3px 3px 5px 2px black;
     "
   >
-    <a class="menu-item" href="/">Home</a>
+    <a class="menu-item" href="/"><i>{{ partial "icons/home" . }}</i>Home</a>
 
-    {{ range .Site.Sections }}
-    <a class="menu-item" href="{{ .Permalink }}">{{ .Title }}</a>
+    {{ range .Site.Sections.ByWeight }}
+    <a class="menu-item" href="{{ .Permalink }}"
+      ><i>{{ if .Params.icon }} {{ partial (print "icons/" .Params.icon) . }}
+      {{ else }} {{ partial "icons/folder" . }} {{ end }}</i>{{ .Title }}</a
+    >
     {{ end }}
   </div>
 </div>
+<script>
+  const slideMenu = document.querySelector(".slide-menu");
+  const menuContainer = document.querySelector(".menu-container");
+  slideMenu.addEventListener("click", (event) => {
+    if (event.target !== menuContainer){
+      const hamBurger = document.querySelector(".hamburger");
+      const cross = document.querySelector(".cross");
+      htmlDoc.style.overflowY = "scroll";
+      htmlDoc.style.marginRight = "0";
+      hamBurger.style.visibility = "visible";
+      cross.style.visibility = "hidden";
+      slideMenu.classList.add("collapsed");
+      slideMenu.style.top = "-100vh";
+    }
+  });
+</script>
diff --git a/layouts/partials/social.html b/layouts/partials/social.html
index 72f2a6e..cf5ca2a 100644
--- a/layouts/partials/social.html
+++ b/layouts/partials/social.html
@@ -14,6 +14,7 @@
       class="social-icon"
       style="
         display: inline-flex;
+        font-size: 1.4em;
         padding: 10px;
         border-radius: 50%;
         align-self: center;
diff --git a/static/css/main.css b/static/css/main.css
index af288f1..80428dc 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -2,24 +2,22 @@
   --bgColor: #381460;
   --bgDarker: #2b0f49;
   --bgLighter: #4a2d69;
+  --bgTransparent: #19092be3;
   --textColor: #ffbd69;
   --primaryColor: #fe346e;
   --primaryHoverColor: #fe346e;
   --inactiveColor: gray;
   --codeColor: #51ef5b;
 }
-
 html {
   margin: 0;
   overflow-y: scroll;
   margin-right: 0;
 }
-
 body {
   width: 95%;
   margin: auto;
   position: relative;
-  z-index: 10;
   display: flex;
   flex-direction: column;
   max-width: 960px;
@@ -30,20 +28,10 @@ body {
   font-weight: 300;
   font-size: 1.2em;
 }
-header {
-  width: 95%;
-  height: 60px;
-  max-width: 960px;
-  position: fixed;
-  top: 0;
-  z-index: 30;
-  transition: all 0.3s;
-}
 header,
 footer {
   flex: none;
 }
-
 main {
   flex: 1 1 0%;
 }
@@ -51,7 +39,6 @@ code {
   font-size: 1em;
   color: var(--codeColor);
 }
-
 pre {
   padding: 0.5em;
   border: solid 1px;
@@ -60,7 +47,6 @@ pre {
   background-color: var(--bgDarker) !important;
   overflow: auto;
 }
-
 h1,
 h2,
 h3,
@@ -70,71 +56,95 @@ h6 {
   font-weight: 300;
   line-height: 1.2em;
 }
-
 h1 {
-  font-size: 1.8em;
+  font-size: 1.9em;
 }
-
 h2 {
   font-size: 1.6em;
 }
-
 h3 {
-  font-size: 1.4em;
+  font-size: 1.3em;
 }
-
 h4 {
-  font-size: 1.2em;
+  font-size: 1.1em;
 }
-
 a {
   color: var(--primaryColor);
   text-decoration: none;
 }
-
 a:hover {
   color: var(--textColor);
+  text-decoration: underline;
 }
-
 .metadata-items::before {
   content: "#";
 }
-
 svg {
   width: 1em;
   height: 1em;
 }
-
 blockquote {
   padding-left: 10px;
+  padding-top: 5px;
+  padding-bottom: 5px;
   border-left: solid 5px var(--textColor);
   background-color: var(--bgLighter);
+  border-radius: 5px;
+}
+blockquote > p {
+  margin: 0;
+}
+strong {
+  font-weight: 700;
 }
-
 .footnotes {
   font-size: 0.8em;
 }
 .menu-item {
-  display: block;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   font-size: 1.2em !important;
   width: 100%;
   padding: 0 0.5em;
   box-sizing: border-box;
 }
+.menu-item > i {
+  display: inline-flex;
+  margin-right: 5px;
+}
 .menu-item:hover {
   background-color: var(--bgLighter);
+  text-decoration: none;
 }
 table {
   border-collapse: collapse;
 }
 thead {
   border-top: solid 3px var(--textColor);
-  border-bottom: solid 1px var(--textColor);
+  background-color: var(--bgLighter);
 }
 tbody {
   border-bottom: solid 2px var(--textColor);
 }
-
+th,
+td {
+  border: solid 1px var(--textColor);
+  padding: 0 0.5em;
+}
+mark {
+  background-color: var(--textColor);
+  color: var(--bgColor);
+  border-radius: 5px;
+  padding: 0 3px;
+}
+kbd {
+  background-color: var(--bgLighter);
+  padding: 0 4px;
+  margin: 0 2px;
+  border-radius: 5px;
+  box-shadow: 2px 2px 2px 2px var(--bgDarker);
+}
 .hamburger-cross {
   display: flex;
   justify-content: center;
@@ -162,24 +172,20 @@ tbody {
 .social-icon:hover {
   background-color: var(--bgLighter);
 }
-
 .sharing-icon {
   border-radius: 50%;
   margin: 0 5px 0 0;
 }
-
 .sharing-icon > i {
   display: inline-flex;
   border-radius: 50%;
   padding: 12px;
   font-size: 1.2em;
 }
-
 .sharing-icon > i:hover {
   background-color: var(--bgLighter);
   color: var(--textColor);
 }
-
 ul.pagination {
   display: flex;
   flex-direction: row;
@@ -187,45 +193,36 @@ ul.pagination {
   align-items: center;
   list-style-type: none;
 }
-
 li.page-item {
   font-size: 0.9em;
   padding: 1px 12px;
 }
-
 li.page-item {
   border-top: 1px solid var(--primaryColor);
   border-bottom: 1px solid var(--primaryColor);
   border-left: 1px solid var(--primaryColor);
   background-color: var(--bgColor);
 }
-
 li.page-item.disabled a {
   color: var(--inactiveColor);
 }
-
 li.page-item.active {
   background-color: var(--primaryColor);
 }
-
 li.page-item.active a {
   color: var(--bgColor);
   font-weight: 700;
 }
-
 li.page-item:nth-child(1) {
   border-radius: 10px 0 0 10px;
 }
-
 li.page-item:nth-child(6) {
   border-radius: 0 10px 10px 0;
   border-right: 1px solid var(--primaryColor);
 }
-
 .breadcrumb-link:hover {
   text-decoration: underline;
 }
-
 .next-link,
 .previous-link {
   padding: 3px;
@@ -235,47 +232,39 @@ li.page-item:nth-child(6) {
   min-width: 100px;
   margin-bottom: 1em;
 }
-
 .previous-link.active,
 .next-link.active {
   color: var(--primaryColor);
   background-color: var(--bgColor);
   border: solid 1px var(--primaryColor);
 }
-
 .next-link.active:hover,
 .previous-link.active:hover {
   color: var(--bgColor);
   text-decoration: none;
   background-color: var(--primaryHoverColor);
 }
-
 .previous-link.disabled,
 .next-link.disabled {
   color: var(--inactiveColor);
   border: solid 1px;
   border-color: var(--inactiveColor);
 }
-
 .fa-chevron-right {
   animation: blinkingText 1s infinite;
   transition: all 0.5s;
   color: var(--bgColor);
 }
-
 .fa-chevron-right:hover {
   animation: none;
   transition: all 0.8s;
 }
-
 .show-more-info {
   background-color: var(--primaryColor);
 }
-
 .show-more-info:hover {
   cursor: pointer;
 }
-
 @keyframes blinkingText {
   0% {
     color: var(--bgColor);
@@ -293,9 +282,8 @@ li.page-item:nth-child(6) {
     color: var(--bgColor);
   }
 }
-
 .content img {
   max-width: 95%;
   display: block;
   margin: 1em auto;
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3


From e00cc632962d264348bb9d9fa18cb29a7a70103a Mon Sep 17 00:00:00 2001
From: Darshan Baral <darshanbaral@gmail.com>
Date: Thu, 14 May 2020 21:41:39 -0700
Subject: Added scroll to top button

---
 layouts/partials/footer.html | 30 +++++++++++++++++++++++++++---
 layouts/partials/head.html   |  5 ++++-
 static/css/main.css          |  4 ++--
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 2e572d8..ba46305 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,23 @@
 <footer style="display: flex; flex-direction: column; margin-top: 0.5em;">
+  <div style="position: fixed; bottom: 60px; margin: auto; width: 95%; max-width: 960px;">
+  <i
+    class="to-top-button"
+    onclick="toTop()"
+    style="
+      display: none;
+      transform: rotate(-90deg);
+      background-color: var(--bgLighter);
+      border-radius: 50%;
+      border: solid 2px var(--primaryColor);
+      padding: 10px;
+      position: absolute;
+      cursor: pointer;
+      right: 0;
+      font-size: 1.25em;
+    "
+    >{{ partial "icons/chevron" . }}</i
+  ></div>
+
   {{ if eq .Kind "page" }} {{ partial "prevnext.html" . }} {{ end }}
   {{ if eq .Kind "section" }}
   <div>
@@ -24,7 +43,7 @@
       >
         <h3>About Me</h3>
         <img
-          style="max-width: 150px; border-radius: 50%; display: block; margin: auto;"
+          style="max-width: 100px; border-radius: 50%; display: block;"
           src="{{ .Site.Params.profileImage | relURL }}"
         />
         <p>
@@ -64,7 +83,7 @@
       >
         <h3>Recent Posts</h3>
         <ul style="padding: 0;">
-          {{ range ((where .Site.Pages "Kind" "page").ByDate.Reverse) | first 5}}
+          {{ range ((where .Site.Pages "Kind" "page").ByDate.Reverse) | first 5 }}
           <li style="list-style: none;">
             <a href="{{ .Permalink }}">{{ .Title | truncate 25 }}</a>
           </li>
@@ -72,7 +91,7 @@
         </ul>
       </div>
     </div>
-    <hr style="width: 50%; border-color: var(--textColor);">
+    <hr style="width: 50%; border-color: var(--textColor);" />
     <div style="text-align: center;">
       <p style="margin: 0 0 5px 0;">{{ .Site.Params.footer }}</p>
       <p style="margin: 0;">
@@ -82,3 +101,8 @@
     </div>
   </div>
 </footer>
+<script>
+  toTop = () => {
+    window.scrollTo({top: 0, behavior: 'smooth'});
+  }
+</script>
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 7c11285..be7aba8 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -42,6 +42,9 @@
     window.addEventListener("scroll", () => {
       let currentY = window.scrollY;
       let header = document.querySelector("header");
+      let toTop = document.querySelector(".to-top-button");
+
+      toTop.style.display = currentY < 500 ? "none" : "inline-flex";
 
       if (
         document.body.offsetHeight - (window.innerHeight + window.pageYOffset) < 10
@@ -59,7 +62,7 @@
       if (currentY - initialY < -5 || currentY < 60) {
         initialY = currentY;
         header.style.top = "0";
-      } 
+      }
     });
   </script>
 </head>
diff --git a/static/css/main.css b/static/css/main.css
index 80428dc..2071b89 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -250,12 +250,12 @@ li.page-item:nth-child(6) {
   border: solid 1px;
   border-color: var(--inactiveColor);
 }
-.fa-chevron-right {
+.show-more-info > svg {
   animation: blinkingText 1s infinite;
   transition: all 0.5s;
   color: var(--bgColor);
 }
-.fa-chevron-right:hover {
+.show-more-info > svg:hover {
   animation: none;
   transition: all 0.8s;
 }
-- 
cgit v1.2.3


From 4aa150c6bd2b5eb9b51e4e65c59c87017cfad910 Mon Sep 17 00:00:00 2001
From: Darshan Baral <darshanbaral@gmail.com>
Date: Thu, 14 May 2020 22:10:19 -0700
Subject: hamburger resembles FAB

---
 layouts/_default/about.html              | 20 ++++++--
 layouts/index.html                       |  1 +
 layouts/partials/about/publications.html |  2 +-
 layouts/partials/footer.html             | 81 ++++++++++++++++++--------------
 layouts/partials/hamburgerCross.html     |  1 +
 static/css/main.css                      |  8 +---
 6 files changed, 67 insertions(+), 46 deletions(-)

diff --git a/layouts/_default/about.html b/layouts/_default/about.html
index 493f455..3eae312 100644
--- a/layouts/_default/about.html
+++ b/layouts/_default/about.html
@@ -1,4 +1,5 @@
 {{ define "main" }}
+{{ partial "social" . }}
 <img
   src="{{ .Params.profileImage }}"
   style="
@@ -8,10 +9,21 @@
     border-radius: 50%;
   "
 />
-{{ partial "social" . }}
-<h1 style="border-bottom: solid 3px;">
-  {{ .Params.prefix }} {{ .Params.name }}, {{ .Params.suffix }}
-</h1>
+
+<div
+  style="
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    border-bottom: solid 3px;
+  "
+>
+  <h1 style="margin: 0.15em 0;">
+    {{ .Params.prefix }} {{ .Params.name }}, {{ .Params.suffix }}
+  </h1>
+  <h2 style="margin: 0.15em 0;">{{ .Params.jobTitle }}</h2>
+  <h3 style="margin: 0.15em 0;">{{ .Params.office }}, {{ .Params.location }}</h3>
+</div>
 {{ .Content }}
 {{ partial "about/education" . }}
 {{ partial "about/publications" . }}
diff --git a/layouts/index.html b/layouts/index.html
index 9e68506..93dd666 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -26,5 +26,6 @@
     "
   />
   {{ partial "social.html" . }}
+  {{ .Site.Params.shortAbout }}
 </div>
 {{ end }}
diff --git a/layouts/partials/about/publications.html b/layouts/partials/about/publications.html
index af41121..bb6d140 100644
--- a/layouts/partials/about/publications.html
+++ b/layouts/partials/about/publications.html
@@ -15,7 +15,7 @@
       >{{ else }} <u>{{- .title -}}</u> {{end -}}. {{ .journal }}.
     </p>
     {{ if .abstract }}
-    <blockquote style="margin: 0 0 0 1em;">
+    <blockquote style="margin: 0 0 0 1em; font-size: 0.9em;">
       <strong style="font-variant: small-caps; text-decoration: underline;"
         >Abstract</strong
       ><p style="margin: 0;">{{ .abstract }}</p>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index ba46305..51540ca 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,24 +1,34 @@
 <footer style="display: flex; flex-direction: column; margin-top: 0.5em;">
-  <div style="position: fixed; bottom: 60px; margin: auto; width: 95%; max-width: 960px;">
-  <i
-    class="to-top-button"
-    onclick="toTop()"
+  <div
     style="
-      display: none;
-      transform: rotate(-90deg);
-      background-color: var(--bgLighter);
-      border-radius: 50%;
-      border: solid 2px var(--primaryColor);
-      padding: 10px;
-      position: absolute;
-      cursor: pointer;
-      right: 0;
-      font-size: 1.25em;
+      position: fixed;
+      bottom: 60px;
+      margin: auto;
+      width: 95%;
+      max-width: 960px;
     "
-    >{{ partial "icons/chevron" . }}</i
-  ></div>
+  >
+    <i
+      class="to-top-button"
+      onclick="toTop()"
+      style="
+        display: none;
+        transform: rotate(-90deg);
+        background-color: var(--bgLighter);
+        border-radius: 50%;
+        border: solid 2px var(--primaryColor);
+        padding: 10px;
+        position: absolute;
+        cursor: pointer;
+        right: 0;
+        font-size: 1.25em;
+      "
+      >{{ partial "icons/chevron" . }}</i
+    >
+  </div>
 
-  {{ if eq .Kind "page" }} {{ partial "prevnext.html" . }} {{ end }}
+  {{ if eq .Kind "page" }} {{ partial "prevnext.html" . }}
+  {{ end }}
   {{ if eq .Kind "section" }}
   <div>
     {{ template "_internal/pagination.html" . }}
@@ -33,7 +43,7 @@
   >
     <div style="display: flex; flex-wrap: wrap;">
       <div
-        class="footer-about"
+        class="footer-social"
         style="
           padding: 0 15px;
           max-width: 400px;
@@ -41,18 +51,20 @@
           box-sizing: border-box;
         "
       >
-        <h3>About Me</h3>
-        <img
-          style="max-width: 100px; border-radius: 50%; display: block;"
-          src="{{ .Site.Params.profileImage | relURL }}"
-        />
-        <p>
-          {{ .Site.Params.shortAbout }}
-          <a href="{{ `about` | relURL }}">More</a>
-        </p>
+        <h3>Contact Me</h3>
+        <ul style="padding: 0;">
+          {{ range $key, $val := .Site.Params.social }}
+          <li style="list-style: none;">
+            <a href="{{ $val }}" style="font-variant: small-caps;"
+              >{{ partial (print "icons/" $key) . }}{{ $key }}</a
+            >
+          </li>
+          {{ end }}
+        </ul>
       </div>
+
       <div
-        class="footer-social"
+        class="footer-sections"
         style="
           padding: 0 15px;
           max-width: 400px;
@@ -60,17 +72,16 @@
           box-sizing: border-box;
         "
       >
-        <h3>Contact Me</h3>
+        <h3>Sections</h3>
         <ul style="padding: 0;">
-          {{ range $key, $val := .Site.Params.social }}
+          {{ range .Site.Sections }}
           <li style="list-style: none;">
-            <a href="{{ $val }}" style="font-variant: small-caps;"
-              >{{ partial (print "icons/" $key) . }}{{ $key }}</a
-            >
+            <a href="{{ .Permalink }}">{{ .Title }}</a>
           </li>
           {{ end }}
         </ul>
       </div>
+
       <div
         class="footer-recent"
         style="
@@ -103,6 +114,6 @@
 </footer>
 <script>
   toTop = () => {
-    window.scrollTo({top: 0, behavior: 'smooth'});
-  }
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  };
 </script>
diff --git a/layouts/partials/hamburgerCross.html b/layouts/partials/hamburgerCross.html
index 3afc2c1..c93c344 100644
--- a/layouts/partials/hamburgerCross.html
+++ b/layouts/partials/hamburgerCross.html
@@ -3,6 +3,7 @@
   style="
     position: absolute;
     top: 5px;
+    left: 5px;
     z-index: 50;
     width: 50px;
     height: 50px;
diff --git a/static/css/main.css b/static/css/main.css
index 2071b89..1fd91ac 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -149,26 +149,22 @@ kbd {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--primaryColor);
   cursor: pointer;
 }
-
 .hamburger,
 .cross {
   display: inline-flex;
   border-radius: 50%;
   position: absolute;
   padding: 12px;
+  background-color: var(--primaryColor);
+  color: var(--bgDarker);
 }
-
 .social-icons > a {
   border-radius: 50%;
   margin: 0 5px;
   display: flex;
 }
-
-.hamburger:hover,
-.cross:hover,
 .social-icon:hover {
   background-color: var(--bgLighter);
 }
-- 
cgit v1.2.3