writing: style accordion

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>
+  </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>
-  {{ end }}
 </div>

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>

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