Improve print layout

_includes/contact.html

@@ -1,7 +1,7 @@
 <div class="contact">
     <h2>{{ messages.contact }}</h2>
     <p>{{ messages.contact-detail }} <a href="mailto:[email protected]"><code>[email protected]</code></a></p>
-    <p>
+    <p class="links">
         <a href="https://github.com/aliftype">{{ messages.github }}</a><br />
         <a href="https://www.facebook.com/AlifTypeFoundry">{{ messages.facebook }}</a><br />
         <!--a href="https://www.instagram.com/khaledhosny.type">{{ messages.instagram }}</a></br-->

_sass/print.scss

@@ -0,0 +1,55 @@
+@media print {
+
+  nav,
+  .downloads,
+  .links,
+  .lang-switcher-side,
+  .lang-switcher-top,
+  #sitedesigner {
+    display: none !important;
+  }
+
+  body {
+    background-color: revert !important;
+    grid-template-columns: auto !important;
+    max-width: 100% !important;
+    padding: 0 8% !important;
+    grid-template-areas:
+      "title"
+      "section"
+    ;
+  }
+
+  #title {
+    width: 100% !important;
+    font-size: 10vw !important;
+  }
+
+  * {
+    font-palette: light !important;
+  }
+
+  a {
+    text-decoration: revert !important;
+  }
+
+  header,
+  footer {
+    padding: 0 !important;
+    border: none !important;
+  }
+
+  blockquote.kufi {
+    break-after: default;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  blockquote {
+    break-after: avoid-page;
+  }
+}

assets/css/amiri.scss

@@ -11,6 +11,7 @@
 @import "colors";
 @import "fonts";
 @import "nav";
+@import "print";
 
 body {
   max-width: 1240px;

assets/css/qahiri.scss

@@ -12,6 +12,7 @@
 @import "fonts";
 @import "nav";
 @import "button";
+@import "print";
 
 body {
   max-width: 1240px;

assets/css/raqq.scss

@@ -10,6 +10,7 @@
 @import "colors";
 @import "fonts";
 @import "nav";
+@import "print";
 
 body {
   max-width: 1240px;
@@ -319,68 +320,6 @@ footer p {
   }
 }
 
-@media print {
-  body {
-    background-color: revert;
-    grid-template-columns: auto;
-    max-width: 100%;
-    padding: 0 8%;
-    grid-template-areas:
-      "title"
-      "section"
-      "footer"
-      "header"
-    ;
-  }
-
-  body * {
-    font-palette: light;
-  }
-
-  body,
-  .kufi p,
-  .كوفي p,
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  #title,
-  #logo {
-    color: revert;
-  }
-
-  section {
-    break-after: page;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  blockquote {
-    break-after: avoid-page;
-  }
-
-  blockquote.kufi {
-    break-after: default;
-  }
-
-  footer {
-    border: none;
-  }
-
-  .lang-switcher-top,
-  .lang-switcher-side,
-  #sitedesigner {
-    display: none;
-  }
-
-}
-
 {% for i in (1..125) %}
   {% assign ai = i
     | replace: "0", "٠"