From fd3a283476174695902bf8b05a81bd94bf1b84b9 Mon Sep 17 00:00:00 2001
From: pdp8 <pdp8@pdp8.info>
Date: Sat, 27 Jul 2024 20:13:00 +0200
Subject: picture albums, layout improvements (?)

---
 style.css | 166 ++++++++++++++++++++++++--------------------------------------
 1 file changed, 63 insertions(+), 103 deletions(-)

(limited to 'style.css')

diff --git a/style.css b/style.css
index 8478ca3..ddaf027 100644
--- a/style.css
+++ b/style.css
@@ -1,91 +1,67 @@
 body {
+  display: flex;
+  flex-direction: column;
   background-color: black;
   color: #eee;
-  width: 100vw;
-  margin: 0;
+  margin: 1em;
   font-family: sans-serif;
 }
 
 nav {
-  padding: 0.75em 0 1em 0;
-}
-
-nav a {
-  padding: 0 1em;
-  text-decoration: none;
+  display: flex;
+  align-items: center;
 }
 
 nav img {
   height: 2em;
-  display: inline;
-  vertical-align: bottom;
 }
 
-nav #logo img {
-  height: 2em;
+nav .menu {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  font-size: larger
 }
 
-nav .current {
-  color: white;
+nav a {
+  margin: 0 0.5em;
 }
 
-nav #menu {
-  display: none;
+nav .current {
+  color: #eee;
+  font-weight: bold;
 }
 
-nav a:hover {
-  color: white;
+a {
+  color: #888;
+  transition: 0.5s ease;
+  text-decoration: none;
 }
 
-@media screen and (max-width: 600px) {
-  nav .item {
-    display: none;
-    padding-left: 1em;
-    padding-top: 0.5em;
-  }
-
-  nav #menu {
-    float: right;
-    display: inline;
-    font-size: 2em;
-  }
+a:hover {
+  color: white;
 }
 
-.post {
-  margin: 2em 1em;
+td {
+  padding-right: 1em;
+  font-size: larger;
 }
 
 img,
 video {
   max-height: 80vh;
-  max-width: 80vw;
+  max-width: 95vw;
   object-fit: contain;
-  display: block;
-  margin-left: 0;
+  margin: 0 auto
 }
 
-#image {
-  padding-top: 2.5%;
-  padding-bottom: 1%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.gallery {
-  margin: 1em;
-  flex-wrap: wrap;
-  display: flex
-}
-
-.thumb {
-  margin: 2px 3px;
+audio {
+  width: 12.5em;
+  height: 2.5em;
 }
 
-.cover {
-  max-height: min(50vh, 90vw);
-  max-width: min(50vh, 90vw);
-  margin-left: 0;
-  padding: 1em 0;
+audio::-webkit-media-controls-panel {
+  background-color: #aaa;
 }
 
 iframe {
@@ -94,67 +70,51 @@ iframe {
   border: none;
 }
 
-a {
-  color: #888;
-}
-
-td {
-  padding-right: 1em;
-  font-size: larger;
-}
-
-audio {
-  width: 12.5em;
-  height: 2.5em;
+.webring {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 2em;
+  align-items: baseline;
 }
 
-audio::-webkit-media-controls-panel {
-  background-color: #aaa;
+.post {
+  /* margin: 1em 2em; */
 }
 
-#controller {
-  position: fixed;
-  left: 0;
-  bottom: 2.5%;
-  width: 100%;
-  text-align: center;
-  padding: 0
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
 }
 
-.btn {
-  display: inline-block;
-  cursor: pointer;
-  color: #111;
-  font-size: 2em;
-  font-weight: bold;
-  width: 4em;
+.thumb {
+  margin: 0.25em;
 }
 
-#prev,
-#next {
-  cursor: pointer;
-  position: absolute;
-  color: lightgrey;
-  font-weight: bold;
-  font-size: 8em;
-  transition: 0.5s ease;
-  bottom: 6vh;
+.cover {
+  max-height: min(50vh, 90vw);
+  max-width: min(50vh, 90vw);
+  margin-left: 0;
+  display: block;
+  padding: 1em 0;
 }
 
-#prev {
-  left: 1%;
+.slide {
+  display: flex;
+  flex-direction: column;
+  margin-top: 2em;
 }
 
-#next {
-  right: 1%;
+.slidenav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-#prev:hover,
-#next:hover {
-  text-decoration: none;
+.navarrow {
+  font-weight: bold;
+  font-size: 3em;
 }
 
-#prev:active,
-#next:active {
-  color: black;
-}
+.license {
+  margin-top: 3em
+}
\ No newline at end of file
-- 
cgit v1.2.3