Style updates

4 files changed, 62 insertions, 33 deletions

diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index fb4aa13..daf5759 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,20 +1,15 @@
 {{ define "main" }}
-<h1 class="standard top-h1 mb-3">
-  {{- .Title -}}
-</h1>
-<div class="standard grid-container">
-  {{ range (.Paginator 10).Pages }}
-  <div class="index-box p-3 shadow rounded mb-4">
-    <h3>
-      <a href="{{ .Permalink | relURL }}">
-        {{- .Title -}}
-      </a>
-    </h3>
-    <p>Reading Time: {{ .ReadingTime }} minutes</p>
-    {{- partial "metadata" . -}}
-  </div>
-  {{ end }}
+<h1 class="standard top-h1 mb-3 {{ if eq .Kind "term" }}font-italic{{ end }}">{{ if eq .Kind "term" }}#{{ end }}{{- .Title -}}</h1>
+{{ range $key, $val := (.Paginator 10).Pages }}
+<h3 class="accordion mb-2 {{ if eq $key 0 }}active{{ end }}">
+  <span onclick="expandAccordion(this)" style="cursor: pointer">+</span>
+  <a href="{{ .Permalink | relURL }}"> {{- .Title -}} </a>
+</h3>
+<div id="panel-item-{{ $key }}" class="panel metadata-panel overflow-hidden">
+  <div class="metadata">{{- partial "metadata" . -}}</div>
 </div>
+{{ end }}
+<script src="{{ `js/accordion.js` | relURL }}"></script>
 <div class="mt-4 d-flex justify-content-center">
   {{ template "_internal/pagination.html" . }}
 </div>
diff --git a/layouts/partials/metadata.html b/layouts/partials/metadata.html
index 698a6e1..a315b0f 100644
--- a/layouts/partials/metadata.html
+++ b/layouts/partials/metadata.html
@@ -1,18 +1,17 @@
-<div class="mb-2">
-  <p class="mb-1">{{ .Date.Format "January 2, 2006" }}</p>
-  {{ $params := .Params }} {{ range $name, $value := .Site.Taxonomies }}
-  {{ if index $params $name }}
-  <p class="metadata-value mb-1 taxa taxa-container-div list-{{- $name -}}">
-    {{ $name | humanize }}: {{ range index $params $name }}
-    <a
-      class="pl-1 pr-1 rounded border border-secondary"
-      href="{{ $name | relURL }}/{{ . | urlize }}"
-      title="{{ $name }}"
-    >
-      {{- . -}}
-    </a>
-    {{ end }}
-  </p>
+<p class="mb-1">Reading Time: {{ .ReadingTime }} minutes</p>
+<p class="mb-1">{{ .Date.Format "January 2, 2006" }}</p>
+{{ $params := .Params }} {{ range $name, $value := .Site.Taxonomies }}
+{{ if index $params $name }}
+<p class="metadata-value mb-1 taxa taxa-container-div list-{{- $name -}}">
+  {{ $name | humanize }}: {{ range index $params $name }}
+  <a
+    class="metadata-tags"
+    href="{{ $name | relURL }}/{{ . | urlize }}"
+    title="{{ $name }}"
+  >
+    {{- . -}}
+  </a>
   {{ end }}
-  {{ end }}
-</div>
+</p>
+{{ end }}
+{{ end }}
diff --git a/static/css/aafu.css b/static/css/aafu.css
index 7cbacac..be760bd 100644
--- a/static/css/aafu.css
+++ b/static/css/aafu.css
@@ -44,6 +44,20 @@ td {
   padding: 0.25em 0.5em;
   text-align: left;
 }
+.main-menu > a {
+  text-decoration: none;
+  padding: 2px;
+  border-radius: 5px;
+  border: solid 1px var(--primaryLinks);
+  background-color: var(--primaryBg);
+  color: var(--primaryLinks);
+}
+.main-menu > a:hover {
+  text-decoration: none;
+  border: solid 1px var(--primaryLinks);
+  background-color: var(--primaryLinks);
+  color: var(--primaryBg);
+}
 dt {
   font-weight: 400;
 }
@@ -97,6 +111,27 @@ a:hover,
 .panel {
   max-height: 0;
   transition: 0.3s ease-out;
+  box-sizing: border-box;
+}
+.active + .metadata-panel {
+  margin-bottom: 1em;
+}
+.metadata {
+  background-color: var(--secondaryBg);
+  padding: 0.5em;
+}
+.metadata-tags {
+  font-size: 0.9em;
+  font-style: italic;
+}
+.metadata-tags::before {
+  content: "#";
+}
+.metadata-tags::after {
+  content: ",";
+}
+.metadata-tags:last-child::after {
+  content: "";
 }
 .skillbar {
   border-radius: 3px;
diff --git a/static/css/aafu_light.css b/static/css/aafu_light.css
index 33edcf7..46266e1 100644
--- a/static/css/aafu_light.css
+++ b/static/css/aafu_light.css
@@ -2,7 +2,7 @@
   --primaryBg: #f8f9fa;
   --primaryText: black;
   --primaryLinks: #007bff;
-  --secondaryBg: #fff;
+  --secondaryBg: #eae9e9;
   --secondaryText: #555050;
   --secondaryLinks: #007bff;
   --shadow: #595659;