dark theme, lazy img/media loading, climbing integrated, IA links

1 files changed, 62 insertions, 21 deletions

diff --git a/html/style.css b/html/style.css
index 63fdb65..1c8bf59 100644
--- a/html/style.css
+++ b/html/style.css
@@ -1,12 +1,12 @@
 body {
+  background-color: black;
+  color: #eee;
   width: 100vw;
   margin: 0;
   font-family: sans-serif;
 }
 
 nav {
-  background: #000;
-  color: #fff;
   padding: 0.75em 0 1em 0;
 }
 
@@ -21,13 +21,21 @@ nav img {
   vertical-align: bottom;
 }
 
-nav #logo img { height: 2em; }
+nav #logo img {
+  height: 2em;
+}
 
-nav .current { color: #fff; }
+nav .current {
+  color: white;
+}
 
-nav #menu { display:none; }
+nav #menu {
+  display: none;
+}
 
-nav a:hover { color: #fff; }
+nav a:hover {
+  color: white;
+}
 
 @media screen and (max-width: 600px) {
   nav .item {
@@ -43,16 +51,32 @@ nav a:hover { color: #fff; }
   }
 }
 
-.post { padding: 1em; }
+.post {
+  padding: 1em;
+}
 
-img, video {
-  max-width: 100%;
+img,
+video {
   max-height: 80vh;
+  max-width: 80vw;
+  object-fit: contain;
   display: block;
   margin-left: auto;
   margin-right: auto;
 }
 
+#image {
+  padding-top: 2.5%;
+  padding-bottom: 1%;
+}
+
+.cover {
+  max-height: min(50vh, 90vw);
+  max-width: min(50vh, 90vw);
+  margin-left: 0;
+  padding: 1em 0;
+}
+
 iframe {
   width: 100%;
   height: 90vh;
@@ -63,16 +87,19 @@ a {
   color: #888;
 }
 
-#image {
-  padding-top: 2.5%;
-  padding-bottom: 1%;
+td {
+  padding-right: 1em;
+  font-size: larger;
 }
 
-.cover {
-  max-height: 50vh;
-  margin-left: 0;
+audio {
+  width: 12.5em;
+  height: 2.5em;
 }
 
+audio::-webkit-media-controls-panel {
+  background-color: #aaa;
+}
 
 #controller {
   position: fixed;
@@ -86,13 +113,14 @@ a {
 .btn {
   display: inline-block;
   cursor: pointer;
-  color: #000;
+  color: #111;
   font-size: 2em;
   font-weight: bold;
   width: 4em;
 }
 
-#prev, #next {
+#prev,
+#next {
   cursor: pointer;
   position: absolute;
   color: lightgrey;
@@ -102,7 +130,20 @@ a {
   bottom: 6vh;
 }
 
-#prev { left: 1%; }
-#next { right: 1%; }
-#prev:hover, #next:hover { text-decoration: none; }
-#prev:active, #next:active { color: black; }
+#prev {
+  left: 1%;
+}
+
+#next {
+  right: 1%;
+}
+
+#prev:hover,
+#next:hover {
+  text-decoration: none;
+}
+
+#prev:active,
+#next:active {
+  color: black;
+}
\ No newline at end of file