Merge pull request #4 from darshanbaral/add-about-page

Add about page and to top button

18 files changed, 417 insertions, 171 deletions

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..3eae312
--- /dev/null
+++ b/layouts/_default/about.html
@@ -0,0 +1,30 @@
+{{ define "main" }}
+{{ partial "social" . }}
+<img
+  src="{{ .Params.profileImage }}"
+  style="
+    display: block;
+    margin: 1em auto 0 auto;
+    max-width: 300px;
+    border-radius: 50%;
+  "
+/>
+
+<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" . }}
+{{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index b9a24e3..93dd666 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,23 @@
   "

 >

   {{ 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" . }}

+  {{ .Site.Params.shortAbout }}

 </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..bb6d140
--- /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; font-size: 0.9em;">
+      <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..51540ca 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,24 +1,119 @@
 <footer style="display: flex; flex-direction: column; margin-top: 0.5em;">

-  {{ if eq .Kind "page" }}

-  {{ partial "prevnext.html" . }}

-  {{ end }} {{ if eq .Kind "section" }}

+  <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>

     {{ 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-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-sections"

+        style="

+          padding: 0 15px;

+          max-width: 400px;

+          flex-basis: 33%;

+          box-sizing: border-box;

+        "

+      >

+        <h3>Sections</h3>

+        <ul style="padding: 0;">

+          {{ range .Site.Sections }}

+          <li style="list-style: none;">

+            <a href="{{ .Permalink }}">{{ .Title }}</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>

+<script>

+  toTop = () => {

+    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/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/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..1fd91ac 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,116 +56,132 @@ 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;

   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);

 }

-

 .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 +189,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 +228,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 {

+.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;

 }

-

 .show-more-info {

   background-color: var(--primaryColor);

 }

-

 .show-more-info:hover {

   cursor: pointer;

 }

-

 @keyframes blinkingText {

   0% {

     color: var(--bgColor);

@@ -293,9 +278,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
+}