hamburger resembles FAB

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

 }