better print

Author: bjelline

Rules

@@ -106,7 +106,7 @@ class Nanoc::Filter
 
         @output << match.pre_match
 
-        @output << %(\n<a class="slide_break" id="slide-#{i}" href="slide.html#slide-#{i}"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. #{i}">▻</a>\n\n)
+        @output << %(\n<a class="slide_break do-not-print" id="slide-#{i}" href="slide.html#slide-#{i}"  title="Wechsle zur Präsentations-Ansicht, Folie Nr. #{i}">▻</a>\n\n)
         i += 1
         if match[0] =~ /§/
           # discard match

content/assets/css/all.css

@@ -232,6 +232,13 @@ body {
   background-color: #ffffff;
 }
 
+@media print {
+  .do-not-print {
+    display: none  !important;
+  }
+}
+
+
 @media (prefers-color-scheme: dark) {
   body {
     color: #ddd;

content/images/css-absolute/style.css

@@ -17,6 +17,7 @@ a { color: rgb(60, 60, 60); text-decoration: none; }
 .italic { font-style: italic; }
 
 
+
 @media screen and (min-width: 992px) {
 
   body {
@@ -55,49 +56,49 @@ a { color: rgb(60, 60, 60); text-decoration: none; }
   }
   .header .logo {
     width: 160px;
-  }  
+  }
   .header .messages {
-    width: 715px;  
-    height: 62px;  
+    width: 715px;
+    height: 62px;
     margin-bottom: 0px;
-    padding: 0 20px 23px 20px;  
-  }  
+    padding: 0 20px 23px 20px;
+  }
 
   .footer .wrapper {
     width: 896px;
     margin:auto;
-  }  
+  }
 
   #project .left {
     float: left;
     margin-right: 24px;
     width: 284px;
     clear: both;
-  }  
+  }
   #project .right {
     float: left;
     width: 588px;
     margin-top: 12px;
-  }    
+  }
   #project .long_description {
     display: none;
-  }  
+  }
 
   #project .long_description {
     -moz-column-gap: 24px;
-    -moz-column-count: 3;    
+    -moz-column-count: 3;
     column-gap: 24px;
     column-count: 3;
     text-align: justify;
     margin-top: 24px;
-  }  
+  }
 }
 
 
 /*    Tablet Layout: 768px.    */
 
 @media screen and (min-width: 768px) and (max-width: 991px) {
-  
+
   body {
     position: relative;
   }
@@ -106,16 +107,16 @@ a { color: rgb(60, 60, 60); text-decoration: none; }
     min-width: 712px;
     padding-top: 42px;
     margin: 0 auto;
-  }  
+  }
   .header {
     width: 100%;
     box-sizing: border-box;
-  }  
+  }
   .header .button {
     box-sizing: border-box;
     width: 20%;
     height: 32px;
-  } 
+  }
   .header .fhlogo {
     width: 197px;
     height: 72px;
@@ -127,21 +128,21 @@ a { color: rgb(60, 60, 60); text-decoration: none; }
   }
   .header .logo {
     width: 160px;
-  } 
+  }
   .header .messages {
-    width: 715px;  
-    height: 62px;  
+    width: 715px;
+    height: 62px;
     margin-bottom: 0px;
-    padding: 0 20px 23px 20px;  
-  }   
+    padding: 0 20px 23px 20px;
+  }
   .header .messages a {
     font-size: 18px;
     line-height: 20px;
-  }   
+  }
   .footer .wrapper {
     width: 896px;
     margin:auto;
-  }  
+  }
 
   #project {
     display: flex;
@@ -158,57 +159,57 @@ a { color: rgb(60, 60, 60); text-decoration: none; }
     flex: 2;
     width: 284px;
     margin-right: 24px;;
-  }  
+  }
   #project .right {
     flex: 4;
-  }  
+  }
   #project .long_description {
     display: none;
-  }  
+  }
   #project .long_description {
     -moz-column-gap: 24px;
-    -moz-column-count: 3;      
+    -moz-column-count: 3;
     column-gap: 24px;
     column-count: 3;
     text-align: justify;
     margin-top: 24px;
-  }    
+  }
 }
 
 
 
 /*  Mobile Layout: 320px.  */
 
 @media screen and (min-width: 451px) and (max-width: 767px) {
-  
+
   body {
     position: relative;
   }
   .page_container {
     position: relative;
     box-model: border-box;
     padding: 20px;
-  }   
+  }
   .header {
     width: 100%;
     box-sizing: border-box;
-  }  
+  }
   .header .button {
     box-sizing: border-box;
     width: 20%;
     height: 32px;
-  } 
+  }
   .header .logo svg, .header .fhlogo svg {
     width: 100px;
     height: auto;
-  }  
+  }
   .header .messages a {
     font-size: 18px;
     line-height: 20px;
-  }  
+  }
   .footer .wrapper {
     width: 100%;
-  }   
+  }
 
   #project {
     display: flex;
@@ -225,58 +226,58 @@ a { color: rgb(60, 60, 60); text-decoration: none; }
   #project .left {
     width: 100%;
     order: 99;
-  }  
+  }
   #project .right {
     width: 100%;
     order: 2;
-  }  
+  }
   #project .short_description {
     display: none;
-  }  
+  }
   #project .long_description {
     -moz-column-gap: 24px;
-    -moz-column-count: 2;      
+    -moz-column-count: 2;
     column-gap: 24px;
     column-count: 2;
     text-align: justify;
     margin-top: 24px;
-  }   
+  }
 }
 
 
 @media screen and (max-width: 450px) {
-  
+
   body {
     position: relative;
   }
   .page_container {
     position: relative;
     box-model: border-box;
     padding: 10px;
-  }   
+  }
   .header {
     width: 100%;
     box-sizing: border-box;
-  }  
+  }
   .header .button {
     box-sizing: border-box;
     width: 50%;
     height: 32px;
-  } 
+  }
   .header .button:empty {
     display:none;
   }
   .header .logo svg, .header .fhlogo svg {
     width: 100px;
     height: auto;
-  }  
+  }
   .header .messages a {
     font-size: 18px;
     line-height: 20px;
-  }  
+  }
   .footer .wrapper {
     width: 100%;
-  }   
+  }
 
   #project {
     display: flex;
@@ -286,33 +287,33 @@ a { color: rgb(60, 60, 60); text-decoration: none; }
     justify-content: space-between;
   }
   #project .heading {
-    width: 100%; 
+    width: 100%;
     order: 1;
   }
 
   #project .left {
     width: 100%;
     order: 99;
-  }  
+  }
   #project .right {
     width: 100%;
     order: 2;
-  }  
+  }
   #project .short_description {
     display: none;
-  }  
+  }
   #project .long_description {
     -moz-column-gap: 24px;
-    -moz-column-count: 2;      
+    -moz-column-count: 2;
     column-gap: 24px;
     column-count: 2;
     text-align: justify;
     margin-top: 24px;
-  }  
+  }
   #project embed {
     width: 100%;
     height: auto;
-  } 
+  }
 
   #filter td {
     padding: 2px !important;
@@ -322,9 +323,9 @@ a { color: rgb(60, 60, 60); text-decoration: none; }
     width: 100% !important;
   }
   #search .form .search_input {
-    width: 100% !important;    
+    width: 100% !important;
   }
   #profile .middle_column, #profile .right_column {
-    width: 100% !important;        
+    width: 100% !important;
   }
-}  
+}

layouts/article_footer.html

@@ -1,4 +1,4 @@
-<div class="pagination">
+<div class="pagination do-not-print">
   <ul>
     <% if @item %>
       <% if @item[:previous_item] %>

layouts/default.html

@@ -8,7 +8,7 @@
       <h2 class="title" id="slide-0">
         <%= @item[:title] %>
       </h2>
-      <a href="<%= @item.reps[:slide].path %>">als Präsentation ▻</a>
+      <a href="<%= @item.reps[:slide].path %>" class="do-not-print">als Präsentation ▻</a>
     </div>
     <% end %> <%= yield %> <%= render 'article_footer' %>
   </div>

layouts/footer.html

@@ -1,8 +1,8 @@
 
   <div class="row">
     <div class="span12" id="legal">
-        <p class="copyright">veröffentlicht unter <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/at/deed.de">creative commons by-nc-sa</a> in den Jahren 2012-2024 von <a href="#">Brigitte Jellinek</a>.</p>
-        <p>Zum Weiterentwickeln dieser Seite: <a href="https://github.com/web-development/web-development-textbook">Projekt forken</a> oder <a href="https://github.com/web-development/web-development-textbook/blob/master/<%= @item[:filename] %>">Kommentar zu dieser Seite</a></p>
+        <p class="copyright">veröffentlicht unter <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/at/deed.de">creative commons by-nc-sa</a> in den Jahren 2012-2025 von <a href="#">Brigitte Jellinek</a>.</p>
+        <p class="do-not-print">Zum Weiterentwickeln dieser Seite: <a href="https://github.com/web-development/web-development-textbook">Projekt forken</a> oder <a href="https://github.com/web-development/web-development-textbook/blob/master/<%= @item[:filename] %>">Kommentar zu dieser Seite</a></p>
     </div>
   </div>
 

layouts/sidebar.html

@@ -1,5 +1,5 @@
 <!-- sidebar -->
-<div id="sidebar" class="span3 offset1">
+<div id="sidebar" class="span3 offset1 do-not-print">
         <div class="page-header">
         <h2>Kapitel</h2>
         </div>