From 807d13487478a9910aebd4518d3597f8e71e3d82 Mon Sep 17 00:00:00 2001
From: Khaled Hosny <khaled@aliftype.com>
Date: Sun, 10 Nov 2024 23:03:52 +0200
Subject: [PATCH] Improve print layout

---
 _includes/contact.html |  2 +-
 _sass/print.scss       | 55 ++++++++++++++++++++++++++++++++++++
 assets/css/amiri.scss  |  1 +
 assets/css/qahiri.scss |  1 +
 assets/css/raqq.scss   | 63 +-----------------------------------------
 5 files changed, 59 insertions(+), 63 deletions(-)
 create mode 100644 _sass/print.scss

diff --git a/_includes/contact.html b/_includes/contact.html
index d971376..3c66efa 100644
--- a/_includes/contact.html
+++ b/_includes/contact.html
@@ -1,7 +1,7 @@
 <div class="contact">
     <h2>{{ messages.contact }}</h2>
     <p>{{ messages.contact-detail }} <a href="mailto:info@aliftype.com"><code>info@aliftype.com</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-->
diff --git a/_sass/print.scss b/_sass/print.scss
new file mode 100644
index 0000000..fb44974
--- /dev/null
+++ b/_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;
+  }
+}
diff --git a/assets/css/amiri.scss b/assets/css/amiri.scss
index 8d7acd5..2263e4f 100644
--- a/assets/css/amiri.scss
+++ b/assets/css/amiri.scss
@@ -11,6 +11,7 @@
 @import "colors";
 @import "fonts";
 @import "nav";
+@import "print";
 
 body {
   max-width: 1240px;
diff --git a/assets/css/qahiri.scss b/assets/css/qahiri.scss
index 215a331..d117864 100644
--- a/assets/css/qahiri.scss
+++ b/assets/css/qahiri.scss
@@ -12,6 +12,7 @@
 @import "fonts";
 @import "nav";
 @import "button";
+@import "print";
 
 body {
   max-width: 1240px;
diff --git a/assets/css/raqq.scss b/assets/css/raqq.scss
index af1d5aa..e084f5a 100644
--- a/assets/css/raqq.scss
+++ b/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", "٠"