new experiment, fix comments

src/comments.css

@@ -1 +1 @@
-.name.svelte-m0gh76{font-weight:600}.internal.svelte-m0gh76{background:linear-gradient(to right,red,lime,blue);background-clip:text;color:transparent}textarea.svelte-1xxfb50{width:100%;resize:vertical}.error.svelte-1xxfb50{padding:.5em}.controls.svelte-1xxfb50{display:flex;justify-content:space-between}.children.svelte-10v2gkf.svelte-10v2gkf{padding-left:.5em;border-left:3px solid black}.comment.svelte-10v2gkf.svelte-10v2gkf{margin-top:.5em;margin-bottom:1.5em}.comment.svelte-10v2gkf .content.svelte-10v2gkf{padding:.25em}.comment.svelte-10v2gkf .container.svelte-10v2gkf{display:flex}.comment.svelte-10v2gkf .container .avatar.svelte-10v2gkf{width:3em;height:3em;margin-right:1em}.comment.svelte-10v2gkf.svelte-10v2gkf:last-of-type{margin-bottom:none}.controls.svelte-10v2gkf a.svelte-10v2gkf{text-decoration:none;color:#76cd26}
+.name.svelte-m0gh76{font-weight:600}.internal.svelte-m0gh76{background:linear-gradient(to right,red,lime,blue);background-clip:text;color:transparent}textarea.svelte-1xxfb50{width:100%;resize:vertical}.error.svelte-1xxfb50{padding:.5em}.controls.svelte-1xxfb50{display:flex;justify-content:space-between}.children.svelte-1v7b0ag.svelte-1v7b0ag{padding-left:.5em;border-left:3px solid black}@media (prefers-color-scheme: dark){.children.svelte-1v7b0ag.svelte-1v7b0ag{border-left:3px solid white}}.comment.svelte-1v7b0ag.svelte-1v7b0ag{margin-top:.5em;margin-bottom:1.5em}.comment.svelte-1v7b0ag .content.svelte-1v7b0ag{padding:.25em}.comment.svelte-1v7b0ag .container.svelte-1v7b0ag{display:flex}.comment.svelte-1v7b0ag .container .avatar.svelte-1v7b0ag{width:3em;height:3em;margin-right:1em}.comment.svelte-1v7b0ag.svelte-1v7b0ag:last-of-type{margin-bottom:none}.controls.svelte-1v7b0ag a.svelte-1v7b0ag{text-decoration:none;color:#76cd26}.error.svelte-12gp6sl{padding:.5em;background:salmon;margin-top:.5em;margin-bottom:.5em}

src/index.js

@@ -118,7 +118,7 @@ const renderContainer = (tokens, idx) => {
     if (opening) {
         if (blockType === "captioned") {
             const link = `<a href="${md.utils.escapeHtml(options.src)}">`
-            return `<div class="${options.wide ? "caption wider" : "caption"}">${options.link ? link : ""}<img src="${md.utils.escapeHtml(options.src)}">${options.link ? "</a>" : ""}`
+            return `${options.wide ? "<div class=wider>" : ""}<div class=caption>${options.link ? link : ""}<img src="${md.utils.escapeHtml(options.src)}">${options.link ? "</a>" : ""}`
         } else if (blockType === "epigraph") {
             return `<div class="epigraph"><div>`
         } else if (blockType === "buttons") {
@@ -130,7 +130,7 @@ const renderContainer = (tokens, idx) => {
         }
     } else {
         if (blockType === "captioned") {
-            return `</div>`
+            return options.wide ? `</div></div>` : `</div>`
         } else if (blockType === "epigraph") {
             let ret = `</div></div>`
             if (options.attribution) {
@@ -417,7 +417,7 @@ const fetchFeeds = async () => {
         }))
         writeCache("feeds", globalData.openring)
     }
-    
+
     const entries = []
     for (const [name, feed] of Object.entries(globalData.openring)) {
         for (const entry of feed.entries) {

src/style.sass

@@ -84,7 +84,7 @@ nav
 
     a, img, picture
         margin-right: 0.5em
-        
+
     @for $i from 1 through 6
         a:nth-child(#{$i + 1})
             color: hsl(120 + ($i * 30), 100%, 80%)
@@ -122,7 +122,7 @@ main
     display: flex
     flex-wrap: wrap
     text-align: left
-    
+
     > div
         min-width: 20em
         background: #eee
@@ -182,6 +182,9 @@ button, select, input, textarea, .textarea
     padding: 1em
     margin-bottom: 0.5em
     margin-top: 0.5em
+    box-sizing: border-box
+    > a
+        display: block
     img, picture
         width: 100%
     p
@@ -193,11 +196,10 @@ blockquote
     margin-left: 0.2rem
 
 .wider
-    width: calc(100vw - 2 * $content-margin)
-    max-width: 80em
-    min-width: 40em
     > *
-        min-width: 40em
+        width: calc(100vw - 2 * $content-margin)
+        max-width: 80em
+        min-width: calc(40rem - 2 * $content-margin)
     position: relative
     z-index: 1
 
@@ -258,6 +260,11 @@ blockquote
     main.fullwidth
         margin-left: $content-margin
         margin-right: $content-margin
+    .wider
+        > *
+            width: calc(100vw - 2 * $content-margin - $navbar-width)
+            max-width: 80em
+            min-width: calc(40rem - 2 * $content-margin - $navbar-width)
 
 $hl-border: 3px
 .footnote-item.hl1, .footnote-item.hl2
@@ -298,6 +305,10 @@ $hl-border: 3px
     blockquote
         border-left: 0.4rem solid white
 
+    button, select, input, textarea, .textarea
+        background: #333
+        color: white
+
 .sidenotes img, .footnotes img
     width: 100%
     max-width: 15em
@@ -328,7 +339,7 @@ table
     padding-top: 1rem
     padding-bottom: 1rem
 
-    > div    
+    > div
         font-style: italic
 
     .attribution
@@ -393,4 +404,4 @@ table
     .title
         font-size: 1.1em
         font-family: $headers
-        font-weight: 600
+        font-weight: 600