blog sidebar, some cosmetic changes

public/style/blog.css

@@ -10,6 +10,62 @@ main {
     margin: 0 auto 1rem auto;
 }
 
+#blog-sidebar {
+    position: fixed;
+    width: 3em;
+    padding: 3em;
+    transform: translate(-9em, -1em);
+    overflow: clip;
+    opacity: .5;
+    transition: opacity .2s;
+}
+#blog-sidebar:hover {
+    opacity: 1;
+}
+
+#blog-sidebar ul {
+    margin: 0;
+    padding: .3em;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: .3em;
+    border-radius: 4px;
+    border: 1px solid var(--on-background);
+    box-shadow: 4px 4px 4px #0001;
+}
+
+#blog-sidebar a {
+    width: 35px;
+    height: 35px;
+    display: block;
+    padding: .2em;
+    border-radius: 2px;
+    text-decoration: none;
+}
+#blog-sidebar a:hover {
+    background: #0001;
+}
+#blog-sidebar a:active {
+    background: #0002;
+}
+
+#blog-sidebar a img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+#blog-sidebar span {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5em;
+}
+
 .blog p:hover,
 .comment p:hover {
     background: inherit;
@@ -76,7 +132,7 @@ article.blog {
 
 /* COMMENTS */
 
-.interactions {
+#interactions {
     margin: 1em 0;
     display: flex;
     flex-direction: row;
@@ -94,8 +150,8 @@ article.blog {
     font-weight: 600;
 }
 
-.interactions .likes,
-.interactions .reposts {
+#interactions .likes,
+#interactions .reposts {
     padding: 0 .5em;
     min-width: fit-content;
     font-family: monospace;
@@ -106,49 +162,26 @@ article.blog {
     text-wrap: nowrap;
 }
 
-.interactions .likes {
+#interactions .likes {
     border-color: var(--on-background);
 }
-.interactions .reposts {
+#interactions .reposts {
     border-color: var(--on-background);
 }
 
 .comment-callout {
-    padding: 1em;
-    background: var(--background-alt);
-    border-radius: 2px;
-    border: 1px solid #8884;
+    padding-bottom: 1em;
     text-align: center;
-}
-.comment-callout:hover {
-    background: var(--background-alt);
+    border-radius: 2px;
+    border-bottom: 1px solid #8884;
 }
 
-.btn.bluesky,
-.btn.mastodon {
-    font-family: monospace;
-    text-wrap: nowrap;
-    text-decoration: none;
-    transition-property: color background-color;
-    transition-duration: .1s;
-}
-
-.btn.bluesky {
+.bluesky {
     color: var(--bluesky);
-    border-color: var(--bluesky);
-}
-.btn.bluesky:hover {
-    background-color: var(--bluesky);
-    color: #fff;
 }
 
-.btn.mastodon {
+.mastodon {
     color: var(--mastodon);
-    border-color: var(--mastodon);
-}
-.btn.mastodon:hover {
-    background-color: var(--mastodon);
-    color: #fff;
 }
 
 .comment {

public/style/main.css

@@ -141,8 +141,23 @@ a#backtotop:hover {
     }
 }
 
+.light-only {
+    display: none;
+}
+
+.dark-only {
+    display: inherit;
+}
 
 @media (prefers-color-scheme: light) {
+    .light-only {
+        display: inherit;
+    }
+
+    .dark-only {
+        display: none;
+    }
+
     a.link-button:hover {
         box-shadow: none;
     }
@@ -161,6 +176,14 @@ a#backtotop:hover {
 }
 
 @media (prefers-color-scheme: dark) {
+    .light-only {
+        display: none;
+    }
+
+    .dark-only {
+        display: inherit;
+    }
+
     body.crt {
         text-shadow: 0 0 3em;
     }