Standardise CSS

assets/css/_html.css

@@ -35,6 +35,22 @@
 @import "makeup.css";
 @import "tabset.css";
 
+body {
+  background-color: var(--background);
+  color: var(--textBody);
+  font-size: var(--text-md);
+  line-height: 1.6875em;
+}
+
+.swup-progress-bar {
+  height: 2px;
+  background-color: var(--progressBarColor);
+}
+
+option {
+  background-color: var(--sidebarBackground);
+}
+
 body:not(.dark) .content-inner img[src*="#gh-dark-mode-only"],
 body.dark .content-inner img[src*="#gh-light-mode-only"] {
   display: none;

assets/css/autocomplete.css

@@ -3,20 +3,24 @@
   position: absolute;
   width: calc(100% - 32px);
   top: 55px;
-}
 
-.autocomplete .triangle {
-  width: 0;
-  height: 0;
-  border-left: 12px solid transparent;
-  border-right: 12px solid transparent;
-  border-bottom: 12px solid var(--autocompleteBackground);
-  position: absolute;
-  top: 8px;
-  left: 26px;
-  transform: translateX(-50%);
-  z-index: 100;
-  background-color: transparent;
+  & .triangle {
+    width: 0;
+    height: 0;
+    border-left: 12px solid transparent;
+    border-right: 12px solid transparent;
+    border-bottom: 12px solid var(--autocompleteBackground);
+    position: absolute;
+    top: 8px;
+    left: 26px;
+    transform: translateX(-50%);
+    z-index: 100;
+    background-color: transparent;
+  }
+
+  &.shown {
+    display: block;
+  }
 }
 
 .autocomplete-results {
@@ -30,19 +34,21 @@
   font-weight: 300;
   font-size: 0.9rem;
   font-style: italic;
-}
 
-.autocomplete-results .query {
-  margin-right: auto;
-}
+  & .query {
+    margin-right: auto;
+  }
 
-.autocomplete-results .bold {
-  color: var(--autocompleteResultsBold);
-  font-weight: 400;
-}
+  & .bold {
+    color: var(--autocompleteResultsBold);
+    font-weight: 400;
+  }
 
-.autocomplete.shown {
-  display: block;
+  @media screen and (hover: none) {
+    & .press-return {
+      display: none !important;
+    }
+  }
 }
 
 .autocomplete-container {
@@ -55,7 +61,7 @@
 .autocomplete-suggestions {
   background-color: var(--autocompleteBackground);
   border-radius: var(--borderRadius-base);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   overflow-y: auto;
   max-height: 450px;
   white-space: normal;
@@ -75,45 +81,38 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
 
-.autocomplete-suggestion.selected {
-  background-color: var(--autocompleteSelected);
-}
-
-.autocomplete-suggestion:hover {
-  background-color: var(--autocompleteHover);
-}
-
-.autocomplete-suggestion em {
-  font-style: normal;
-  font-weight: bold;
-}
+  &.selected {
+    background-color: var(--autocompleteSelected);
+  }
 
-.autocomplete-suggestion .separator {
-  opacity: 0.4;
-  margin: 0 2px;
-}
+  &:hover {
+    background-color: var(--autocompleteHover);
+  }
 
-.autocomplete-suggestion .description {
-  opacity: 0.6;
-}
+  & em {
+    font-style: normal;
+    font-weight: bold;
+  }
 
-.autocomplete-suggestion .label {
-  background-color: var(--autocompleteLabelBack);
-  opacity: 0.6;
-  color: var(--autocompleteLabelFont);
-  padding: 4px 8px 4px 8px;
-  border-radius: 4px;
-  margin-left: 5px;
-  text-transform: uppercase;
-  font-family: var(--sansFontFamily);
-  font-size: 0.7rem;
-}
+  & .separator {
+    opacity: 0.4;
+    margin: 0 2px;
+  }
 
+  & .description {
+    opacity: 0.6;
+  }
 
-@media screen and (hover: none) {
-  .autocomplete-results .press-return {
-    display: none !important;
+  & .label {
+    background-color: var(--autocompleteLabelBack);
+    opacity: 0.6;
+    color: var(--autocompleteLabelFont);
+    padding: 4px 8px 4px 8px;
+    border-radius: 4px;
+    margin-left: 5px;
+    text-transform: uppercase;
+    font-family: var(--sansFontFamily);
+    font-size: 0.7rem;
   }
 }

assets/css/content/admonition.css

@@ -1,129 +1,83 @@
 /* See general.css for base admonition styles - they are shared with blockquote */
 
 .content-inner section.admonition {
-  border-radius: var(--borderRadius-base);
-}
+  --admonitionBackground: transparent;
+  --admonitionHeading: var(--contrast);
 
-.content-inner section.admonition > .admonition-title {
-  color: var(--contrast);
-  padding-left: 2.2rem;
-  font-weight: 700;
-  font-style: normal;
-}
-.content-inner section.admonition > .admonition-title::before {
-  color: var(--contrast);
-  position: absolute;
-  left: 1rem;
-  font-size: 1.8rem;
-  font-family: 'remixicon';
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+  background-color: var(--admonitionBackground);
+  border-radius: var(--borderRadius-base);
 
-.content-inner section.admonition {
   &.warning {
-    background-color: var(--warningBackground);
-    & .admonition-title {
-      &, &::before {
-        content: var(--icon-error-warning);
-        color: var(--warningHeading);
-      }
-    }
+    --admonitionBackground: var(--warningBackground);
+    --admonitionHeading: var(--warningHeading);
+    --admonitionPrintHeading: hsl(var(--warningHue), 90%, 40%);
+    --admonitionIcon: var(--icon-error-warning);
   }
   &.error {
-    background-color: var(--errorBackground);
-    & .admonition-title {
-      &, &::before {
-        content: var(--icon-error-warning);
-        color: var(--errorHeading);
-      }
-    }
+    --admonitionBackground: var(--errorBackground);
+    --admonitionHeading: var(--errorHeading);
+    --admonitionPrintHeading: hsl(var(--errorHue), 80%, 40%);
+    --admonitionIcon: var(--icon-error-warning);
   }
   &.info {
-    background-color: var(--infoBackground);
-    & .admonition-title {
-      &, &::before {
-        content: var(--icon-information);
-        color: var(--infoHeading);
-      }
-    }
+    --admonitionBackground: var(--infoBackground);
+    --admonitionHeading: var(--infoHeading);
+    --admonitionPrintHeading: hsl(var(--infoHue), 80%, 40%);
+    --admonitionIcon: var(--icon-information);
   }
   &.neutral {
-    background-color: var(--neutralBackground);
-    & .admonition-title {
-      &, &::before {
-        content: var(--icon-double-quotes-l);
-        color: var(--neutralHeading);
-      }
-    }
+    --admonitionBackground: var(--neutralBackground);
+    --admonitionHeading: var(--neutralHeading);
+    --admonitionPrintHeading: hsl(var(--neutralHue), 30%, 40%);
+    --admonitionIcon: var(--icon-double-quotes-l);
   }
   &.tip {
-    background-color: var(--tipBackground);
-    & .admonition-title {
-      &, &::before {
-        content: var(--icon-information);
-        color: var(--tipHeading);
-      }
-    }
+    --admonitionBackground: var(--tipBackground);
+    --admonitionHeading: var(--tipHeading);
+    --admonitionPrintHeading: hsl(var(--tipHue), 50%, 40%);
+    --admonitionIcon: var(--icon-information);
   }
-}
 
-@media print {
-  .content-inner section.admonition {
-    &.warning {
-      border-color: hsl(from var(--warningHeading) h s l / 15%);
-      & .admonition-title {
-        &, &::before {
-          color: hsl(var(--warningHue), 90%, 40%);
-        }
-      }
-    }
-    &.error {
-      border-color: hsl(from var(--errorHeading) h s l / 15%);
-      & .admonition-title {
-        &, &::before {
-          color: hsl(var(--errorHue), 80%, 40%);
-        }
-      }
-    }
-    &.info {
-      border-color: hsl(from var(--infoHeading) h s l / 15%);
-      & .admonition-title {
-        &, &::before {
-          color: hsl(var(--infoHue), 80%, 40%);
-        }
-      }
-    }
-    &.neutral {
-      border-color: hsl(from var(--neutralHeading) h s l / 15%);
-      & .admonition-title {
-        &, &::before {
-          color: hsl(var(--neutralHue), 30%, 40%);
-        }
-      }
+  & > .admonition-title {
+    color: var(--admonitionHeading);
+    padding-left: 2.2rem;
+    font-weight: 700;
+    font-style: normal;
+
+    &::before {
+      content: var(--admonitionIcon);
+      color: var(--admonitionHeading);
+      position: absolute;
+      left: 1rem;
+      font-size: 1.8rem;
+      font-family: 'remixicon';
+      font-style: normal;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
     }
-    &.tip {
-      border-color: hsl(from var(--tipHeading) h s l / 15%);
-      & .admonition-title {
-        &, &::before {
-          color: hsl(var(--tipHue), 50%, 40%);
-        }
-      }
+
+    & code {
+      margin: 0 0.5ch;
     }
   }
-}
-
-.content-inner section.admonition > .admonition-title code {
-  margin: 0 0.5ch;
-}
 
-@media screen and (max-width: 768px) {
-  .content-inner section.admonition {
+  @media screen and (max-width: 768px) {
     margin-left: calc(-1 * var(--content-gutter));
     margin-right: calc(-1 * var(--content-gutter));
     padding-left: var(--content-gutter);
     padding-right: var(--content-gutter);
     border-radius: 0;
   }
+
+  @media print {
+    &:is(.warning, .error, .info, .neutral, .tip) {
+      border-color: hsl(from var(--admonitionHeading) h s l / 15%);
+    }
+
+    & > .admonition-title {
+      &, &::before {
+        color: var(--admonitionPrintHeading, var(--admonitionHeading));
+      }
+    }
+  }
 }