Finish print css

hschne · Jun 6, 2018 · 3484d57 · 3484d57
1 parent 5b8d1c8
commit 3484d57
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,8 @@
-# printable-shortcuts
-Create a nice looking printout of your aliases or shortcuts from markdown
+# Git Aliases Cheatsheet
+
+Website: [git-aliases](https://hschne.at/git-aliases/)
+
+The [Oh-My-Zsh Git Plugin](https://github.com/robbyrussell/oh-my-zsh/blob/master/plugins/git/git.plugin.zsh) provides a bunch of aliases that I can never remember. 
+
+So I made a website for those shortcuts. Also features a print version for, you know, printing. 
+
diff --git a/index.html b/index.html
@@ -3,16 +3,15 @@
 <head>
     <meta charset="UTF-8">
     <link href='https://fonts.googleapis.com/css?family=Roboto Mono' rel='stylesheet'>
-    <link href="default.css" rel="stylesheet">
+    <link href="default.css" rel="stylesheet" media="screen">
     <link href="print.css" rel="stylesheet" media="print">
 </head>
 <body>
 <header class="header">
-
     <h1>Git Aliases Cheatsheet</h1>
     <h3 class="subheader">Inspired by the Oh-My-Zsh <a
             href="https://github.com/robbyrussell/oh-my-zsh/blob/master/plugins/git/git.plugin.zsh">Git Plugin</a>.
-        Print or download the <a href="#">PDF</a>.</h3>
+        Print or download the <a href="https://github.com/hschne/git-aliases/releases/download/1.0.0/git-aliases-1.0.0.pdf">PDF</a>.</h3>
 
 </header>
 

diff --git a/print.css b/print.css
@@ -1,13 +1,64 @@
+:root {
+    --black: #2B2C27;
+}
+
 body {
     width: 297mm;
     height: 209mm;
+
 }
 
 @page {
     margin: 0.5cm;
 }
 
-/* We don't want to display the headers' */
+header h3 {
+    display: none;
+}
+
 header {
+    text-align: center;
+}
+
+footer {
     display: none;
-}
+}
+
+body {
+    font-family: 'Roboto Mono', Arial, sans-serif;
+    font-size: 0.9em;
+}
+
+.container {
+    columns: 4 350px;
+}
+
+table {
+    -webkit-column-break-inside: avoid;
+    page-break-inside: avoid;
+    break-inside: avoid;
+    width: 100%;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin-bottom: 15px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+td, th {
+    border: 1px solid black;
+    height: 25px;
+}
+
+th {
+    font-weight: bold;
+    background-color: #F8F8F0;
+}
+
+td {
+    padding-left: 0.5em;
+}
+
+td:first-child {
+    width: 60px;
+}