Added some space between the bottom nav links on mobile devices

[pcdenotes.git] / notes / static / notes / style.css

diff --git a/notes/static/notes/style.css b/notes/static/notes/style.css
index 3cbd4b7e9169c6476010c9cb9c657c10fd545d18..b798bd1bf4e100e323632acde10eaa7994b6f101 100644 (file)
--- a/notes/static/notes/style.css
+++ b/notes/static/notes/style.css
@@ -13,31 +13,88 @@ h2 a:link, h2 a:visited, h2 a:active, h2 a:hover {
     color: #212529;
 }
 
+h2 {
+    padding-top: 1em;
+}
 
 article .publication-date {
     font-style: italic;
     font-size: smaller;
 }
 
+article > div {
+    padding-top: 0.5em;
+}
+
+article img {
+    max-width: 100%;
+}
+
+article blockquote {
+    background: #eeeeee;
+    font-style: italic;
+    border-left: 2px solid #d63384;
+    padding: 0.5em;
+}
+
+/* Removes a margin-bottom coming from Bootstrap, but not making sense in this case */
+article blockquote p:last-child {
+    margin-bottom: 0;
+}
+
+article pre {
+    background: #eeeeee;
+    padding: 0.5em;
+}
+
 footer {
     color: #ffffff;
     background-color: #212529;
 }
 
-@media screen and (min-width: 600px) {
-    footer div:first-child {
-        padding-left: 10em;
-        padding-right: 10em;
-    }
-}
-
 footer ul {
     list-style-type: none;
     margin-left: 0;
     padding-left: 0;
 }
 
-footer #copyright {
-    text-align: center;
-    margin-top: 2em;
+footer a img {
+    border: none;
+}
+
+/* Large screens */
+@media screen and (min-width: 600px) {
+    footer div#footer-left {
+        text-align: right;
+    }
+
+    footer div#footer-middle {
+        text-align: center;
+    }
+
+    footer #copyright {
+        text-align: center;
+        font-size: smaller;
+        margin-top: 2em;
+    }
+
+    footer #footer-note {
+        text-align: center;
+        font-size: smaller;
+    }
+}
+
+/* Small screens */
+@media screen and (max-width: 600px) {
+    footer div#footer-middle {
+        margin-top: 1em;
+    }
+
+    footer div#footer-middle li {
+        margin-bottom: 0.5em;
+    }
+
+    footer #copyright, footer #footer-note {
+        margin-top: 1em;
+    }
 }
\ No newline at end of file