From 30bca603cbdc3ada6c8cf978f124c2d5348c3b3e Mon Sep 17 00:00:00 2001
From: 53hornet <53hornet@gmail.com>
Date: Sun, 15 Jul 2018 18:17:51 -0400
Subject: Revamped CSS, added per-page backgrounds, added image transfer

---
 md/53hor.net/styles.css | 110 ++++++++++++++++++++++++++++++++++++------------
 1 file changed, 82 insertions(+), 28 deletions(-)

(limited to 'md/53hor.net/styles.css')

diff --git a/md/53hor.net/styles.css b/md/53hor.net/styles.css
index fdd0564..1ce2894 100644
--- a/md/53hor.net/styles.css
+++ b/md/53hor.net/styles.css
@@ -1,7 +1,8 @@
 /* stylesheet for 53hor.net */
 
 /* google fonts */
-@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i');
+@import url('https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i,900,900i');
+@import url('https://fonts.googleapis.com/css?family=Satisfy');
 
 :root {
   /* custom colors */
@@ -9,16 +10,21 @@
 }
 
 #TOC {
-  margin-top: 1em;
+  box-shadow: 3px 7px 5px black;
   position: fixed;
   width: 15%;
   height: 100%;
+  margin: 0;
+  background-color: white;
+  box-shadow: 0 2px 5px black inset;
+  overflow: auto;
 }
 
 #TOC ul {
-  list-style-type: none;
+  overflow: none;
+  height: 100%;
+  list-style-type: disc;
   color: var(--balboa);
-  overflow: hidden;
   padding-left: 1em;
 }
 
@@ -26,15 +32,25 @@
   text-decoration: none;
   display: block;
   color: gray;
+  font-weight: 400;
+  font-size: 0.7em;
+  font-style: italic;
+  transition: 0.25s;
+}
+
+#TOC li a:hover {
+  color: black;
 }
 
 #topnav {
+  box-shadow: 0 2px 5px black;
   margin: 0;
   overflow: hidden;
   position: fixed;
   top: 0;
   width: 100%;
-  background-color: white;
+  background-color: var(--balboa);
+  z-index: 1;
 }
 
 #topnav img {
@@ -49,30 +65,64 @@
   text-align: center;
   padding: 1em 1em;
   text-decoration: none;
-  color: var(--balboa);
+  color: white;
   transition: 0.5s;
 }
 
 #topnav a:hover {
-  background-color: var(--balboa);
-  color: white;
+  color: var(--balboa);
+  background-color: white;
+  box-shadow: 0 0 5px black;
 }
 
-article {
-  margin-left: 15%;
-  margin-top: 3em;
-  background-image: url(background.jpg);
-  background-repeat: no-repeat;
-  background-position: center top;
-  background-attachment: fixed;
-  background-size: cover;
+html {
+  height: 100%;
+  margin: 0;
 }
 
 body {
+  height: 100%;
   padding: 0;
   margin: 0;
   font-size: 1.2em;
   font-family: "Merriweather", serif;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  background-attachment: fixed;
+  background-size: cover;
+}
+
+article {
+  height: 100%;
+  margin-left: 15%;
+  margin-top: 3em;
+}
+
+iframe {
+  height: 100%;
+  width: 100%;
+  border: none;
+}
+
+figure {
+  margin: none;
+  padding: 1em;
+  margin-left: 25%;
+  width: 50%;
+  background-color: white;
+  box-shadow: 0 5px 5px black;
+}
+
+figure img {
+  width: 100%;
+}
+
+figure figcaption {
+  color: black;
+  text-align: right;
+  font-weight: 400;
+  font-size: 0.8em;
+  font-family: "Satisfy", sans-serif;
 }
 
 hr {
@@ -90,36 +140,40 @@ p {
   background-color: white;
   margin: 1em;
   padding: 1em;
+  box-shadow: 0 5px 5px black;
 }
 
-h1 {
+h3 { /* decorative page title */
   font-style: italic;
-  font-weight: 500;
+  font-weight: 900;
   font-size: 2.5em;
   text-align: center;
   color: white;
-  text-shadow: 3px 3px 3px black;
+  text-shadow: 2px 2px 5px black;
   padding-top: 1.5em;
 }
 
-h2 {
-  font-weight: 700;
+h4 { /* decorative page subtitle */
+  font-weight: 900;
   font-size: 1em;
-  color: white;
+  text-align: center;
   text-shadow: 3px 3px 3px black;
-  margin: 1em;
+  color: white;
 }
 
-h3 {
+h1 { /* section title */
   font-weight: 700;
   font-size: 1em;
-  color: var(--balboa);
+  color: white;
+  text-shadow: 3px 3px 3px black;
+  margin: 1em;
 }
 
-h4 {
+h2 { /* subsection title */
   font-weight: 700;
   font-size: 1em;
-  text-align: center;
-  text-shadow: 3px 3px 3px black;
   color: white;
+  text-shadow: 3px 3px 3px black;
+  margin: 1em;
 }
+
-- 
cgit v1.2.3