Revert "Convert print and mobile styles to pure css."

This reverts commit 8e9c7209dc.

assets/sass/mobilemenu.scss

@@ -0,0 +1,141 @@
+// The mobile navigation stylesheet for this theme.
+
+@import 'init';
+
+.mobile-nav {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  font-family: var(--ff-headings);
+  z-index: 20;
+  pointer-events: none;
+
+  &[data-navopen] {
+    position: fixed;
+  }
+
+  .language-icon {
+    fill: var(--color-text-bg);
+  }
+
+  &__cover {
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--color-mobile-menu-cover);
+    opacity: 0;
+
+    [data-navopen] & {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  &__toggle {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: var(--gutters);
+    right: var(--gutters);
+    padding: 0 .3rem;
+    border-color: var(--color-button-text-hover);
+    z-index: 22;
+    pointer-events: auto;
+
+    &:hover,
+    &:focus-visible,
+    &:active {
+      svg {
+        fill: var(--color-button-text-hover);
+      }
+    }
+  }
+
+  &__hamburger {
+    fill: var(--color-button-text);
+    width: 1.6rem;
+    margin-inline-start: .1rem;
+
+    .button--outline & {
+      fill: var(--color-button);
+    }
+
+    rect {
+      transform-origin: center;
+    }
+
+    [data-navopen] & {
+      rect {
+        y: 45px;
+
+        &:nth-of-type(1) {
+          transform: rotate(45deg);
+        }
+
+        &:nth-of-type(2) {
+          opacity: 0;
+        }
+
+        &:nth-of-type(3) {
+          transform: rotate(-45deg);
+        }
+      }
+    }
+  }
+
+  &__sheet {
+    visibility: hidden;
+    background-color: var(--color-mobile-menu);
+    width: 90vw;
+    height: 100vh;
+    padding: 2.25rem;
+    transform: translateX(100vw);
+    z-index: 21;
+
+    [data-navopen] & {
+      visibility: visible;
+      pointer-events: auto;
+      box-shadow: -10px 0 10px -10px var(--color-nearblack);
+      transform: translateX(10vw);
+    }
+  }
+
+  &__region {
+    &:not(:empty) {
+      margin-block-end: .5rem;
+    }
+  }
+
+  &__navbar {
+    display: flex;
+    flex-direction: column;
+    padding-inline-start: 0;
+    margin-block: 0;
+
+    li {
+      list-style: none;
+    }
+
+    a {
+      display: inline-block;
+      padding-block: .5rem;
+    }
+  }
+
+  &__cover,
+  &__toggle,
+  &__hamburger > rect,
+  &__sheet {
+    // Add some transitions unless user prefer less motion.
+    @media (prefers-reduced-motion: no-preference) {
+      transition: all 130ms ease-in;
+
+      [data-navopen] & {
+        transition: all 330ms ease-out;
+      }
+    }
+  }
+}

assets/sass/print.scss

@@ -0,0 +1,44 @@
+// The print stylesheet for this theme.
+
+@import 'init';
+
+.pager,
+%pager,
+.mobile-nav,
+aside,
+nav,
+footer {
+  display: none;
+}
+
+@media print {
+  html {
+    font-size: var(--print-font-size);
+  }
+
+  html,
+  body,
+  .page {
+    background-color: white;
+    border-color: black;
+    box-shadow: none;
+    color: black;
+  }
+
+  .main {
+    width: 100%;
+  }
+
+  // Underline all links.
+  :link,
+  :visited {
+    text-decoration: underline;
+  }
+
+  // Add visible title after abbreviations.
+  abbr[title] {
+    &::after {
+      content: ' (' attr(title) ')';
+    }
+  }
+}

layouts/_partials/head/styles.html

@@ -5,8 +5,8 @@
 {{ $mobile_options := merge $main_options (dict "targetPath" "css/mobilemenu.css") -}}
 {{ $print_options := merge $main_options (dict "targetPath" "css/print.css") -}}
 {{ $main_style := resources.Get "sass/styles.scss" | toCSS $main_options -}}
-{{ $mobile_style := resources.Get "sass/mobilemenu.css" | toCSS $mobile_options -}}
-{{ $print_style := resources.Get "sass/print.css" | toCSS $print_options -}}
+{{ $mobile_style := resources.Get "sass/mobilemenu.scss" | toCSS $mobile_options -}}
+{{ $print_style := resources.Get "sass/print.scss" | toCSS $print_options -}}
 {{ if ne hugo.Environment "development" -}}
   {{ $main_style = $main_style | fingerprint -}}
   {{ $mobile_style = $mobile_style | fingerprint -}}