From 3b922ec7ca695b4681bb55eb64a8971724f82b58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9ophile=20Bastian?= <contact@tobast.fr>
Date: Thu, 2 Nov 2017 15:49:42 +0100
Subject: [PATCH] Moar CSS! Now handling code tags.

---
 mainsite/static/css/screen.css    | 123 +++++++++++++++++++-----------
 mainsite/static/sass/_colors.scss |   3 +
 mainsite/static/sass/screen.scss  |  34 ++++++++-
 3 files changed, 115 insertions(+), 45 deletions(-)

diff --git a/mainsite/static/css/screen.css b/mainsite/static/css/screen.css
index 76b9122..0176db5 100644
--- a/mainsite/static/css/screen.css
+++ b/mainsite/static/css/screen.css
@@ -122,30 +122,65 @@ h2 {
 }
 
 /* line 62, ../sass/screen.scss */
+h3 {
+  font-size: 1.5em;
+  text-align: left;
+  padding: 15px;
+  margin-bottom: 0.4em;
+}
+
+/* line 69, ../sass/screen.scss */
 strong, b {
   font-weight: bold;
 }
 
-/* line 66, ../sass/screen.scss */
+/* line 73, ../sass/screen.scss */
 i, em {
   font-style: italic;
 }
 
-/* line 70, ../sass/screen.scss */
+/* line 77, ../sass/screen.scss */
 a {
   color: #8c0e00;
   text-decoration: none;
   font-weight: bold;
 }
 
-/* line 76, ../sass/screen.scss */
+/* From http://adis.ca/entry/2011/pretty-code-block-in-css/ */
+/* line 84, ../sass/screen.scss */
+pre {
+  font-family: "Courier 10 Pitch", Courier, monospace;
+  font-size: 80%;
+  line-height: 140%;
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -o-pre-wrap;
+  background-color: #f0f0f0;
+  padding: 10px;
+}
+
+/* From http://adis.ca/entry/2011/pretty-code-block-in-css/ */
+/* line 97, ../sass/screen.scss */
+code {
+  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+  font-size: 80%;
+  line-height: 140%;
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -o-pre-wrap;
+  background-color: #f0f0f0;
+}
+
+/* line 108, ../sass/screen.scss */
 header {
   max-width: 700px;
   margin: 0 auto;
   text-align: center;
 }
 @media screen and (min-width: 600px) {
-  /* line 76, ../sass/screen.scss */
+  /* line 108, ../sass/screen.scss */
   header {
     border-bottom: 3px solid #000;
     position: relative;
@@ -153,7 +188,7 @@ header {
     margin: 30px auto;
     margin-bottom: 55px;
   }
-  /* line 87, ../sass/screen.scss */
+  /* line 119, ../sass/screen.scss */
   header:after {
     content: " ";
     position: absolute;
@@ -165,14 +200,14 @@ header {
   }
 }
 
-/* line 99, ../sass/screen.scss */
+/* line 131, ../sass/screen.scss */
 .container {
   margin: 0 auto;
   max-width: 1200px;
   width: 100%;
 }
 @media screen and (min-width: 600px) {
-  /* line 99, ../sass/screen.scss */
+  /* line 131, ../sass/screen.scss */
   .container {
     display: table;
     display: flex;
@@ -180,26 +215,26 @@ header {
   }
 }
 
-/* line 110, ../sass/screen.scss */
+/* line 142, ../sass/screen.scss */
 .sidebar {
   width: 400px;
   padding-right: 40px;
 }
-/* line 114, ../sass/screen.scss */
+/* line 146, ../sass/screen.scss */
 .sidebar .minimenu {
   display: none;
 }
-/* line 118, ../sass/screen.scss */
+/* line 150, ../sass/screen.scss */
 .sidebar ul.nav {
   margin-bottom: 30px;
 }
-/* line 121, ../sass/screen.scss */
+/* line 153, ../sass/screen.scss */
 .sidebar ul.nav li {
   display: block;
   font-weight: normal;
   margin: 7px 0;
 }
-/* line 126, ../sass/screen.scss */
+/* line 158, ../sass/screen.scss */
 .sidebar ul.nav li a {
   border: 1px solid rgba(140, 14, 0, 0.5);
   background: #fff;
@@ -209,19 +244,19 @@ header {
   text-align: center;
 }
 @media screen and (min-width: 600px) {
-  /* line 126, ../sass/screen.scss */
+  /* line 158, ../sass/screen.scss */
   .sidebar ul.nav li a {
     box-shadow: -2px 2px 0 #f06e00;
     transition: box-shadow 0.4s ease-out, transform 0.4s ease-out;
   }
-  /* line 138, ../sass/screen.scss */
+  /* line 170, ../sass/screen.scss */
   .sidebar ul.nav li a:hover {
     box-shadow: -6px 6px 0 #f06e00;
     transform: translateX(2px) translateY(-2px);
   }
 }
 
-/* line 149, ../sass/screen.scss */
+/* line 181, ../sass/screen.scss */
 .main {
   background: #fff;
   flex-grow: 1;
@@ -229,7 +264,7 @@ header {
   width: 100%;
   border: 1px solid rgba(140, 14, 0, 0.7);
 }
-/* line 156, ../sass/screen.scss */
+/* line 188, ../sass/screen.scss */
 .main .last-publication a {
   display: block;
   max-width: 350px;
@@ -245,66 +280,66 @@ header {
   box-shadow: 0 0 0 rgba(140, 14, 0, 0);
   transition: box-shadow 1s ease-out;
 }
-/* line 171, ../sass/screen.scss */
+/* line 203, ../sass/screen.scss */
 .main .last-publication a:hover {
   box-shadow: 0 0 5px #8c0e00;
 }
-/* line 176, ../sass/screen.scss */
+/* line 208, ../sass/screen.scss */
 .main .intro-text {
   margin-bottom: 40px;
 }
-/* line 180, ../sass/screen.scss */
+/* line 212, ../sass/screen.scss */
 .main p {
-  margin-bottom: 1em;
+  margin: 0.5em 0;
 }
-/* line 184, ../sass/screen.scss */
+/* line 216, ../sass/screen.scss */
 .main .md-text {
   text-align: justify;
   font-size: 1.1em;
 }
-/* line 189, ../sass/screen.scss */
+/* line 221, ../sass/screen.scss */
 .main ol, .main ul {
   list-style-position: outside;
   margin-left: 20px;
   margin-bottom: 1em;
 }
-/* line 194, ../sass/screen.scss */
+/* line 226, ../sass/screen.scss */
 .main ol {
   list-style-type: decimal;
 }
-/* line 197, ../sass/screen.scss */
+/* line 229, ../sass/screen.scss */
 .main ul {
   list-style-type: disc;
 }
-/* line 200, ../sass/screen.scss */
+/* line 232, ../sass/screen.scss */
 .main li {
   margin: 0.35em 0;
 }
 
-/* line 205, ../sass/screen.scss */
+/* line 237, ../sass/screen.scss */
 .publication-list {
   margin: 10px 5px;
   margin-left: 30px;
   padding: 0 30px;
   max-width: 700px;
 }
-/* line 211, ../sass/screen.scss */
+/* line 243, ../sass/screen.scss */
 .publication-list .publication-entry {
   display: flex;
   align-items: center;
   position: relative;
   border-bottom: 1px solid #86abcb;
 }
-/* line 217, ../sass/screen.scss */
+/* line 249, ../sass/screen.scss */
 .publication-list .publication-entry:first-child {
   border-top: 1px solid #86abcb;
 }
-/* line 221, ../sass/screen.scss */
+/* line 253, ../sass/screen.scss */
 .publication-list .publication-entry > span {
   padding: 7px 5px;
   display: inline-block;
 }
-/* line 225, ../sass/screen.scss */
+/* line 257, ../sass/screen.scss */
 .publication-list .publication-entry .publication-date {
   text-align: right;
   font-weight: light;
@@ -312,16 +347,16 @@ header {
   font-style: italic;
   width: 100px;
 }
-/* line 232, ../sass/screen.scss */
+/* line 264, ../sass/screen.scss */
 .publication-list .publication-entry .publication-descr {
   font-size: 0.9em;
   opacity: 0.9;
 }
-/* line 235, ../sass/screen.scss */
+/* line 267, ../sass/screen.scss */
 .publication-list .publication-entry .publication-descr:before {
   content: "– ";
 }
-/* line 239, ../sass/screen.scss */
+/* line 271, ../sass/screen.scss */
 .publication-list .publication-entry a.overlay {
   position: absolute;
   z-index: 1;
@@ -332,12 +367,12 @@ header {
 }
 
 @media screen and (max-width: 599px) {
-  /* line 251, ../sass/screen.scss */
+  /* line 283, ../sass/screen.scss */
   body {
     padding-top: 75px;
   }
 
-  /* line 254, ../sass/screen.scss */
+  /* line 286, ../sass/screen.scss */
   header, .sidebar {
     position: fixed;
     top: 0;
@@ -345,7 +380,7 @@ header {
     width: 100%;
   }
 
-  /* line 260, ../sass/screen.scss */
+  /* line 292, ../sass/screen.scss */
   header {
     z-index: 15;
     right: 60px;
@@ -354,13 +389,13 @@ header {
     height: 60px;
     line-height: 60px;
   }
-  /* line 267, ../sass/screen.scss */
+  /* line 299, ../sass/screen.scss */
   header img {
     max-height: 55px;
     vertical-align: middle;
   }
 
-  /* line 272, ../sass/screen.scss */
+  /* line 304, ../sass/screen.scss */
   .sidebar {
     z-index: 14;
     background: #f8ef78;
@@ -370,18 +405,18 @@ header {
     max-height: 100vh;
     overflow-y: auto;
   }
-  /* line 281, ../sass/screen.scss */
+  /* line 313, ../sass/screen.scss */
   .sidebar .minimenu {
     position: absolute;
     right: 5px;
     top: 5px;
     display: block;
   }
-  /* line 286, ../sass/screen.scss */
+  /* line 318, ../sass/screen.scss */
   .sidebar .minimenu img {
     height: 50px;
   }
-  /* line 290, ../sass/screen.scss */
+  /* line 322, ../sass/screen.scss */
   .sidebar ul.nav {
     display: flex;
     width: 100%;
@@ -390,17 +425,17 @@ header {
     font-size: 0.95em;
     margin-bottom: 10px;
   }
-  /* line 298, ../sass/screen.scss */
+  /* line 330, ../sass/screen.scss */
   .sidebar ul.nav li {
     display: inline-block;
     min-width: 150px;
     margin: 5px;
   }
-  /* line 302, ../sass/screen.scss */
+  /* line 334, ../sass/screen.scss */
   .sidebar ul.nav li a {
     padding: 10px;
   }
-  /* line 309, ../sass/screen.scss */
+  /* line 341, ../sass/screen.scss */
   .sidebar.collapse ul {
     display: none;
   }
diff --git a/mainsite/static/sass/_colors.scss b/mainsite/static/sass/_colors.scss
index ea754fd..2d41fce 100644
--- a/mainsite/static/sass/_colors.scss
+++ b/mainsite/static/sass/_colors.scss
@@ -8,3 +8,6 @@ $orange: #f06e00;
 $blanc: #fff;
 $pfont: "Source Sans Pro", sans-serif;
 $hfont: "Bitter", serif;
+$codeGray: #f0f0f0;
+$codeFont: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
+$preFont: "Courier 10 Pitch", Courier, monospace;
diff --git a/mainsite/static/sass/screen.scss b/mainsite/static/sass/screen.scss
index 49924f7..3f77d1a 100644
--- a/mainsite/static/sass/screen.scss
+++ b/mainsite/static/sass/screen.scss
@@ -59,6 +59,13 @@ h2 {
     margin-bottom: 0.7em;
 }
 
+h3 {
+  font-size: 1.5em;
+  text-align: left;
+  padding: 15px;
+  margin-bottom: 0.4em;
+}
+
 strong, b {
     font-weight: bold;
 }
@@ -73,6 +80,31 @@ a {
     font-weight: bold;
 }
 
+/* From http://adis.ca/entry/2011/pretty-code-block-in-css/ */
+pre {
+	font-family: $preFont;
+	font-size: 80%;
+	line-height: 140%;
+	white-space: pre;
+	white-space: pre-wrap;
+	white-space: -moz-pre-wrap;
+	white-space: -o-pre-wrap;
+	background-color: $codeGray;
+	padding: 10px;
+}
+
+/* From http://adis.ca/entry/2011/pretty-code-block-in-css/ */
+code {
+	font-family: $codeFont;
+	font-size: 80%;
+	line-height: 140%;
+	white-space: pre;
+	white-space: pre-wrap;
+	white-space: -moz-pre-wrap;
+	white-space: -o-pre-wrap;
+	background-color: $codeGray;
+}
+
 header {
     max-width: 700px;
     margin: 0 auto;
@@ -178,7 +210,7 @@ header {
     }
 
     p {
-      margin-bottom: 1em;
+      margin: 0.5em 0;
     }
 
     .md-text {