From eede62d12dc1d962cd8f0cc40a8f679d4647f44e Mon Sep 17 00:00:00 2001
From: desmukh <desmukh@users.noreply.github.com>
Date: Tue, 27 Dec 2022 12:21:49 +0500
Subject: [PATCH] writing: style accordion

---
 layouts/partials/essay-accordion.html | 23 ++++++++++----
 layouts/partials/head.html            | 44 ++++++++++++++++++++-------
 layouts/writing/list.html             |  2 +-
 3 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/layouts/partials/essay-accordion.html b/layouts/partials/essay-accordion.html
index a643b9d..ba05f39 100644
--- a/layouts/partials/essay-accordion.html
+++ b/layouts/partials/essay-accordion.html
@@ -1,8 +1,19 @@
-<button class="accordion">{{ .year }}</button>
-<div class="acc-panel">
-  {{ range where .essays "year" .year }}
-    <div class="writing-item">
-      <p><a href={{ .url }}><strong>{{ .title }}</strong></a>, <em>{{ .publication }}</em>, {{ .date }}.</p>
+<div class="level accordion">
+  <div class="level-left">
+    <div class="level-item">{{ .year }}</div>
+  </div>
+  <div class="level-right">
+    <div class="level-item">
+      <span class="icon">
+        <i class="fa-sharp fa-solid fa-circle-arrow-down"></i>
+      </span>
     </div>
-  {{ end }}
+  </div>
+</div>
+<div class="acc-panel">
+  <div class="acc-panel-content">
+    {{ range where .essays "year" .year }}
+        <p><a href={{ .url }}><strong>{{ .title }}</strong></a>, {{ .publication }}, {{ .date }}.</p>
+    {{ end }}
+  </div>
 </div>
\ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index b04d33c..f4837f3 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -13,25 +13,47 @@
   {{ if eq .Title "Writing" }}
     <style>
       .accordion {
-        background-color: transparent;
-        color: #444;
         cursor: pointer;
-        padding: 18px;
-        width: 100%;
-        border: none;
-        text-align: left;
-        outline: none;
-        font-size: 15px;
-        transition: 0.4s;
+        margin-bottom: 0 !important;
+        padding: 8px 0 8px 0;
       }
       
       .acc-panel {
-        padding: 0 18px;
-        background-color: white;
         max-height: 0;
         overflow: hidden;
         transition: max-height 0.2s ease-out;
+        border-bottom: 1px solid;
+        font-weight: 600;
       }
+
+      .acc-panel-content {
+        padding-bottom: 20px;
+      }
+      
+      .acc-panel p{
+        padding-bottom: 8px;
+      }
+      .acc-panel a {
+        color: #0C84DC;
+      }
+      
+      #writing-page .thead {
+        font-family: IBMPlexSans;
+      }
+
+      .accordion .level-item {
+        font-family: IBMPlexSans;
+      }
+
+      .accordion .icon {
+        font-size: 1.5rem;
+      }
+
+      .writing-section {
+        padding-bottom: 28px;
+      }
+
     </style>
+    <script src="https://kit.fontawesome.com/a42e899e51.js" crossorigin="anonymous"></script>
   {{ end }}
 </head>
diff --git a/layouts/writing/list.html b/layouts/writing/list.html
index 866e75b..9a57e6a 100644
--- a/layouts/writing/list.html
+++ b/layouts/writing/list.html
@@ -1,5 +1,5 @@
 {{ define "main"}}
-  <div id="content" class="section writing">
+  <div id="writing-page" class="section writing">
     <div>
       <div class="writing-section">
         <div class="columns">