fix: search links scroll to section

- also search results are now unified
- concordance view does no longer center search term
- less markup

Author: line-o

src/main/frontend/sass/_colors.scss

@@ -1,17 +1,28 @@
 :root {
-    --primary: #3B86C6;
+    /* black and white */
+    --white: #f3f3f3;
+    --black: #232528;
+
+    /* brand colors */
+    --primary: #0088cc;
     --grey: #737577;
     --darkgrey: #4D4C4E;
 
-    --lighterprimary: #d3e1ec;
-
-    --secondary: color-mix(in oklab, var(--primary) 80%, var(--black));
-    --darktext: #47453f;
+    /* shades */
+    --lighterprimary: color-mix(in oklab, var(--primary) 50%, var(--white));
+    --lightprimary: color-mix(in oklab, var(--primary) 25%, var(--white));
+    --darkerprimary: color-mix(in oklab, var(--primary) 85%, var(--black));
+    --darkprimary: color-mix(in oklab, var(--primary) 50%, var(--black));
     --lightgrey: #dfdfe0;
 
-    --white: #f3f3f3;
-    --black: #232528;
+    /* text */
+    --darktext: #383426;
+
+    /* secondary color + shade */
+    --secondary: #ffcb05;
+    --lightersecondary: #fef8c4;
+}
 
-    --yell: #ffcb05;
-    --whisper: #fef8c4;
+::selection {
+    background: var(--lightprimary);
 }

src/main/frontend/sass/_doc.scss

@@ -1,38 +1,42 @@
 @charset "utf-8";
 
-table a {
-  padding-left: 3px;
-  padding-right: 3px;
+/* toc */
+#sidebar h3 {
+  margin-block: 1.21rem .96rem;
 }
 
-span.score {
-  color: var(--lightgrey);
-}
 
-.section {
-  margin-block-end: 1rem;
+/* search results rendering  */
+
+/* hit row */
+article.hit {
+  border-block-start: thin solid var(--lighterprimary);
   color: var(--darktext);
+  margin-block-end: 1rem;
 }
 
-div.headings, td.headings {
-  background: var(--lightgrey);
+/* hit headline (breadcrumb) */
+header.hit-heading {
   font-size: 1.5rem;
   color: var(--grey);
+  margin-block-start: .5rem;
+  margin-block-end: .25rem;
 }
 
-td.previous {
-    text-align: right;
+header .separator {
+  margin-inline: .2rem;
 }
 
-.kwic .hi {
-  margin: 0 .5em 0 .5em;
+.hit mark, .hit .hi {
+  background: var(--lightersecondary);
   text-align: center;
 }
 
-table[class="kwic"] {
-  border-collapse: separate;
-  border-spacing: 0 .5em;
+/*
+p.previous {
+  text-align: right;
 }
+*/
 
 section dl.dl-horizontal {
   dt {
@@ -50,35 +54,22 @@ section dl.dl-horizontal {
   padding: 6px 4px;
 }
 
-#content .content dt {
-  font-weight: bold;
-  word-wrap: break-word;
+/* note blocks */
+
+.alert-success h4 {
+  color: var(--bs-success-text-emphasis);
+}
+
+.alert-danger h4 {
+  color: var(--bs-danger-text-emphasis);
 }
 
 .content {
-  font: 16px/24px Georgia, "Times New Roman", Times, serif;
-  color: #555;
+  color: var(--darktext);
+
   section {
     clear: both;
   }
-  h1 {
-    font-family: "QuicksandBook", "Arial", Helvetica, sans-serif;
-    font-size: 1.75em;
-    font-weight: bold;
-    margin: .8em 0 0 0;
-  }
-  h2 {
-    color: var(--primary);
-    font-family: "QuicksandBook", "Arial", Helvetica, sans-serif;
-    font-size: 1.33em;
-    font-weight: bold;
-    margin: .3em 0 0;
-    padding: 10px 0 5px;
-  }
-  h3 {
-    font-size: 1em;
-    font-weight: bold;
-  }
   table {
     margin: .5em 1em;
   }
@@ -140,8 +131,8 @@ section dl.dl-horizontal {
   }
   dl.wide {
     dt {
-      width: 35em;
       word-wrap: break-word;
+      font-weight: bold;
     }
     dd {
       margin-left: 1.5em;
@@ -181,11 +172,15 @@ section dl.dl-horizontal {
     margin-bottom: .85em;
   }
   .guimenuitem {
-    background: var(--whisper);
+    background: var(--lightersecondary);
   }
   .example {
     margin: .25em 0 .25em 1em;
     padding: 10px 10px;
-    border: 1px solid #707070;
+    border: 1px solid var(--grey);
+  }
+
+  a[name] {
+    scroll-margin-top: 1rem;
   }
 }

src/main/frontend/sass/_general.scss

@@ -6,49 +6,51 @@
   font-style: normal;
 }
 
-h1, h2 {
+body {
+  min-height: 100vh;
+  background-color: var(--white);
+  position: relative;
+}
+
+h1, h2,  h3 {
   font-family: "QuicksandBook", "Arial", Helvetica, sans-serif;
-  font-weight: bold;
 }
 
 h1 {
-  font-size: 1.75rem;
-  padding: 0px 0 5px;
-  margin: 0;
   color: var(--primary);
+  font-weight: bold;
+  font-size: 3.25rem;
+  letter-spacing: -.05em;
 }
 
 h2 {
-  font-size: 1.25rem;
-  padding: 10px 0;
-  letter-spacing: 1px;
+  color: var(--darkerprimary);
+  font-weight: bold;
+  font-size: 2.25rem;
+  letter-spacing: -.05em;
 }
 
 h3 {
-  font-size: 1.125rem;
-  padding: 10px 0 5px;
-  margin: 0 0 5px;
-  font-weight: bold;
+  color: var(--darkprimary);
+  font-size: 1.85rem;
 }
 
 h4 {
-  font-size: 1rem;
-  padding: 10px 0;
+  font-size: 1.2rem;
   font-style: italic;
   font-weight: normal;
 }
 
 h5 {
   font-size: 1rem;
-  padding: 10px 0;
   font-weight: normal;
 }
 
 a {
-  color: var(--primary);
+  color: var(--darkerprimary);
   text-decoration: none;
   &:hover {
-    color: var(--secondary);
+    color: var(--darkprimary);
     text-decoration: underline;
   }
 }
@@ -112,10 +114,6 @@ input:required:valid {
   margin: 10px 0;
 }
 
-.hi {
-  background: #FFED3D;
-}
-
 .hidden {
   display: none;
 }
@@ -156,34 +154,34 @@ input:required:valid {
 
 .btn-info {
   --bs-btn-color: var(--black);
-  --bs-btn-bg: var(--yell);
-  --bs-btn-border-color: var(--yell);
+  --bs-btn-bg: var(--secondary);
+  --bs-btn-border-color: var(--secondary);
   --bs-btn-hover-color: var(--black);
-  --bs-btn-hover-bg: var(--yell);
-  --bs-btn-hover-border-color: var(--yell);
+  --bs-btn-hover-bg: var(--secondary);
+  --bs-btn-hover-border-color: var(--secondary);
   --bs-btn-focus-shadow-rgb: 11,172,204;
   --bs-btn-active-color: var(--black);
-  --bs-btn-active-bg: var(--yell);
-  --bs-btn-active-border-color: var(--yell);
+  --bs-btn-active-bg: var(--secondary);
+  --bs-btn-active-border-color: var(--secondary);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
   --bs-btn-disabled-color: var(--black);
-  --bs-btn-disabled-bg: var(--yell);
-  --bs-btn-disabled-border-color: var(--yell);
+  --bs-btn-disabled-bg: var(--secondary);
+  --bs-btn-disabled-border-color: var(--secondary);
 }
 
 .btn-outline-info {
-  --bs-btn-color: var(--yell);
-  --bs-btn-border-color: var(--yell);
+  --bs-btn-color: var(--secondary);
+  --bs-btn-border-color: var(--secondary);
   --bs-btn-hover-color: var(--black);
-  --bs-btn-hover-bg: var(--yell);
-  --bs-btn-hover-border-color: var(--yell);
+  --bs-btn-hover-bg: var(--secondary);
+  --bs-btn-hover-border-color: var(--secondary);
   --bs-btn-focus-shadow-rgb: 13,202,240;
   --bs-btn-active-color: var(--black);
-  --bs-btn-active-bg: var(--yell);
-  --bs-btn-active-border-color: var(--yell);
+  --bs-btn-active-bg: var(--secondary);
+  --bs-btn-active-border-color: var(--secondary);
   --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: var(--yell);
-  --bs-btn-disabled-border-color: var(--yell);
+  --bs-btn-disabled-color: var(--secondary);
+  --bs-btn-disabled-border-color: var(--secondary);
 }
 
 .toc {