split out css

src/sass/_base.scss

@@ -482,82 +482,3 @@ img {
   transition-property: transform, margin-left, opacity;
   will-change: transform, margin-left;
 }
-
-@media screen and (max-width: $sm-breakpoint) {
-  .gdoc-nav {
-    margin-left: -$menu-width;
-    font-size: $font-size-base;
-
-    &__control {
-      display: inline-block;
-    }
-  }
-
-  .gdoc-header {
-    .icon {
-      width: $font-size-16 * 1.5;
-      height: $font-size-16 * 1.5;
-    }
-  }
-
-  .gdoc-brand {
-    font-size: $font-size-16 * 1.5;
-
-    &__img {
-      display: none;
-    }
-  }
-
-  .gdoc-error {
-    padding: $padding-16 * 6 $padding-16;
-
-    .icon {
-      width: $font-size-16 * 4;
-      height: $font-size-16 * 4;
-    }
-
-    &__message {
-      padding-left: $padding-32;
-    }
-
-    &__line {
-      padding: $padding-4 0;
-    }
-
-    &__title {
-      font-size: $font-size-16 * 2;
-    }
-  }
-
-  .gdoc-page__header .breadcrumb,
-  .hidden-mobile {
-    display: none;
-  }
-
-  .gdoc-footer {
-    &__item {
-      width: 100%;
-    }
-  }
-
-  #menu-control:checked ~ main {
-    .gdoc-nav nav,
-    .gdoc-page {
-      transform: translateX($menu-width);
-    }
-
-    .gdoc-page {
-      opacity: 0.25;
-    }
-  }
-
-  #menu-control:checked ~ .gdoc-header .gdoc-nav__control {
-    .icon.menu {
-      display: none;
-    }
-
-    .icon.arrow-back {
-      display: inline-block;
-    }
-  }
-}

src/sass/_mobile.scss

@@ -0,0 +1,78 @@
+@media screen and (max-width: $sm-breakpoint) {
+  .gdoc-nav {
+    margin-left: -$menu-width;
+    font-size: $font-size-base;
+
+    &__control {
+      display: inline-block;
+    }
+  }
+
+  .gdoc-header {
+    .icon {
+      width: $font-size-16 * 1.5;
+      height: $font-size-16 * 1.5;
+    }
+  }
+
+  .gdoc-brand {
+    font-size: $font-size-16 * 1.5;
+
+    &__img {
+      display: none;
+    }
+  }
+
+  .gdoc-error {
+    padding: $padding-16 * 6 $padding-16;
+
+    .icon {
+      width: $font-size-16 * 4;
+      height: $font-size-16 * 4;
+    }
+
+    &__message {
+      padding-left: $padding-32;
+    }
+
+    &__line {
+      padding: $padding-4 0;
+    }
+
+    &__title {
+      font-size: $font-size-16 * 2;
+    }
+  }
+
+  .gdoc-page__header .breadcrumb,
+  .hidden-mobile {
+    display: none;
+  }
+
+  .gdoc-footer {
+    &__item {
+      width: 100%;
+    }
+  }
+
+  #menu-control:checked ~ main {
+    .gdoc-nav nav,
+    .gdoc-page {
+      transform: translateX($menu-width);
+    }
+
+    .gdoc-page {
+      opacity: 0.25;
+    }
+  }
+
+  #menu-control:checked ~ .gdoc-header .gdoc-nav__control {
+    .icon.menu {
+      display: none;
+    }
+
+    .icon.arrow-back {
+      display: inline-block;
+    }
+  }
+}

src/sass/_print.scss

@@ -1,9 +1,35 @@
 @media print {
   .gdoc-nav,
-  .gdoc-footer {
+  .gdoc-footer .container span:not(:first-child),
+  .editpage {
     display: none;
   }
 
+  .gdoc-footer {
+    border-top: 1px solid $gray-300;
+  }
+
+  .gdoc-markdown pre {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+
+  .chroma code {
+    border: 1px solid $gray-300;
+    padding: $padding-8 !important;
+    font-weight: normal !important;
+  }
+
+  .gdoc-markdown code {
+    font-weight: bold;
+  }
+
+  a,
+  a:visited {
+    color: inherit !important;
+    text-decoration: none !important;
+  }
+
   main {
     flex-direction: column-reverse;
   }

src/sass/main.scss

@@ -1,11 +1,10 @@
-@import "defaults";
+@import "_defaults";
 
-@import "normalize";
-@import "utils";
-@import "fonts";
-@import "base";
-@import "print";
+@import "_normalize";
+@import "_utils";
+@import "_fonts";
+@import "_base";
 
-@import "markdown";
-@import "chroma_github";
-@import "shortcodes";
+@import "_markdown";
+@import "_chroma_github";
+@import "_shortcodes";

src/sass/mobile.scss

@@ -0,0 +1,3 @@
+@import "_defaults";
+
+@import "_mobile";

src/sass/print.scss

@@ -0,0 +1,3 @@
+@import "_defaults";
+
+@import "_print";