Restyle summaries

src/components/About.vue

@@ -141,9 +141,16 @@ main {
     margin-left: 20px;
   }
 
+  details summary > * {
+  display: inline;
+}
+
   .about summary {
-    min-width: calc((100% - 20px)) !important;
+    cursor: pointer;
+    min-width: 100%;
     margin-bottom: 20px;
+    text-align: left;
+    border-bottom: solid 1px var(--v-border-base);
   }
 
   blockquote {

src/components/Header.vue

 <!-- eslint-disable -->
 <template>
-  <div>
+  <div class = "header">
     <span class="dict-label" tabindex="0">{{dict_label}}</span>
     <h2 class="article_header" tabindex="0">{{header_text}}</h2>
     <h2 class="secondary_header" v-if="secondary_header_text.length" tabindex="0">{{secondary_header_text}}</h2>
@@ -160,12 +160,12 @@ article h2.secondary_header {
   font-variant-caps: all-small-caps;
 }
 
-details {
+.header details {
   margin-top: 10px;
   position: relative;
 }
 
-details > summary {
+.header summary {
   position: relative;
   max-width: 130px;
   list-style: none;
@@ -175,15 +175,14 @@ details > summary {
   padding-bottom: 6px;
   padding-right: 10px;
   color: var(--v-primary-base);
-  background-color: #ffffff;
   cursor: pointer;
 }
 
-details[open] > summary {
-  box-shadow: 5px 5px 0px var(--v-primary-base)
+.header details[open] > summary {
+  box-shadow: 2px 2px 0px var(--v-primary-base)
 }
 
-details > summary:after {
+.header details > summary:after {
   content: "⌄";
   font-weight: bold;
   position: absolute;
@@ -192,19 +191,19 @@ details > summary:after {
   margin-right: 3px;
 }
 
-details > summary.bob:before {
+.header details > summary.bob:before {
   content: "Se ";
 }
 
-details > summary.nob:before {
+.header details > summary.nob:before {
   content: "Sjå ";
 }
 
-details[open] > summary.bob:before, details[open] > summary.nob:before {
+.header details[open] > summary.bob:before, details[open] > summary.nob:before {
   content: "Skjul  ";
 }
 
-details[open] > summary:after {
+.header details[open] > summary:after {
   content: "⌃";
   font-weight: bold;
   position: absolute;
@@ -222,7 +221,7 @@ details[open] > summary:after {
   }
 }
 
-details[open] summary ~ * {
+.header details[open] summary ~ * {
   animation: open 0.3s ease-in-out;
 }
 
@@ -235,7 +234,7 @@ details[open] summary ~ * {
   padding-top: 10px;
 }
 
-details > summary::-webkit-details-marker {
+.header details > summary::-webkit-details-marker {
   display: none;
 }