style improvements and bluesky comments!

public/style/blog.css

@@ -1,7 +1,20 @@
+:root {
+    --like: rgb(223, 104, 104);
+    --repost: rgb(162, 223, 73);
+    --bluesky: rgb(16, 131, 254);
+    --mastodon: rgb(86, 58, 204);
+}
+
 main {
+    width: min(calc(100% - 4rem), 900px);
     margin: 0 auto 1rem auto;
 }
 
+.blog p:hover,
+.comment p:hover {
+    background: inherit;
+}
+
 article.blog {
     font-family: 'Lora', serif;
 }
@@ -15,16 +28,29 @@ article.blog {
     line-height: 1.5em;
 }
 
-.blog p:hover {
-    background: inherit;
-}
-
 .blog sub {
     opacity: .75;
 }
 
+.blog pre {
+    max-height: 15em;
+    padding: .5em;
+    font-size: .9em;
+    border: 1px solid #8884;
+    border-radius: 2px;
+    overflow: scroll;
+    background: #060606;
+}
+
+.blog p code {
+    padding: .2em .3em;
+    font-size: .9em;
+    border: 1px solid #8884;
+    border-radius: 2px;
+    background: #060606;
+}
+
 .blog img {
-    margin: 0 auto;
     max-height: 50%;
     max-width: 100%;
 
@@ -44,3 +70,124 @@ article.blog {
     background-repeat: no-repeat;
     background-position: center;
 }
+
+
+
+/* COMMENTS */
+
+.interactions {
+    margin: 1em 0;
+    display: flex;
+    flex-direction: row;
+    gap: .5em;
+    flex-wrap: wrap;
+}
+
+.btn {
+    display: inline-block;
+    padding: .4em .6em;
+    border: 1px solid var(--on-background);
+    border-radius: 2px;
+    color: inherit;
+    text-decoration: none;
+    font-weight: 600;
+}
+
+.interactions .likes,
+.interactions .reposts {
+    padding: 0 .5em;
+    min-width: fit-content;
+    font-family: monospace;
+    text-align: center;
+    line-height: 2em;
+    border: 1px solid var(--on-background);
+    border-radius: 2px;
+    text-wrap: nowrap;
+}
+
+.interactions .likes {
+    border-color: var(--on-background);
+}
+.interactions .reposts {
+    border-color: var(--on-background);
+}
+
+.btn.bluesky,
+.btn.mastodon {
+    font-family: monospace;
+    text-wrap: nowrap;
+}
+
+.btn.bluesky {
+    color: var(--bluesky);
+    border-color: var(--bluesky);
+}
+
+.btn.mastodon {
+    color: var(--mastodon);
+    border-color: var(--mastodon);
+}
+
+.comment {
+    font-family: 'Inter', 'Arial', sans-serif;
+    font-size: 1em;
+}
+
+.comment .comment-hover {
+    padding: 1em;
+    transition: background-color .1s;
+}
+
+.comment .comment-hover:hover {
+    background-color: #8881;
+}
+
+.comment .comment-header a {
+    display: flex;
+    gap: .5em;
+    font-weight: 600;
+    color: var(--primary);
+    text-decoration: none;
+    align-items: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.comment .comment-header a .display-name {
+    overflow: inherit;
+    text-overflow: inherit;
+}
+
+.comment .comment-header a .handle {
+    opacity: .5;
+    font-family: monospace;
+    font-size: .9em;
+    overflow: inherit;
+    text-overflow: inherit;
+}
+
+.comment .comment-header img.avatar {
+    width: 1.5em;
+    height: 1.5em;
+}
+
+.comment .comment-body {
+    color: inherit;
+    text-decoration: none;
+}
+
+.comment p.comment-text {
+    margin: .5em 0;
+    white-space: break-spaces;
+}
+
+.comment .comment-footer .comment-date {
+    margin: 0;
+    font-size: .8em;
+    opacity: .5;
+}
+
+.comment .comment-replies {
+    margin-left: 1em;
+    border-left: 2px solid #8884;
+}