v0.2.4

update: post page layout change on small screen

dist/assets/index-BMUJRc5c.css

@@ -1 +0,0 @@
-post{display:block}post[filetype=mp4] span.duration,post[filetype=webm] span.duration,post[filetype=zip] span.duration{background-color:#fff;color:#000}post span.duration{position:absolute;background-color:#00000050;bottom:.3rem;right:.3rem;padding:2px 4px;border-radius:4px;font-size:12px;text-transform:uppercase;z-index:2}post img{border-radius:10px;height:100%;width:100%}post video{border-radius:10px;height:100%;width:100%;object-fit:cover;position:absolute}#post section{background-color:#2f2f45;border-radius:20px;padding:20px}#post div.main{width:calc(100vw - 300px - 4rem);padding-right:10px;display:flex;flex-direction:column}@media (max-width: 800px){#post div.main{width:100%}}#post div.main::-webkit-scrollbar{background-color:#000;width:4px}#post div.main::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}#post div.main>h3{padding-left:1rem;margin-block:1rem}#post div.main div.viewer{height:calc(100vh - 2rem);display:flex;justify-content:center;align-items:center;background-color:#000;border-radius:20px;overflow:hidden}#post div.main div.viewer img{max-width:100%;max-height:100%}#post div.main div.viewer video{max-width:100%;max-height:100%}#post div.main section.commentary *{text-wrap:wrap;word-break:break-word}#post div.sidebar{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.4rem;width:300px;overflow:scroll;overflow-x:hidden;height:calc(100vh - 2rem);border-radius:20px}@media (max-width: 800px){#post div.sidebar{position:relative;width:100%;overflow:visible;height:100%;padding-inline:1rem;padding-bottom:1rem}}#post div.sidebar::-webkit-scrollbar{background-color:#000;width:0px}#post div.sidebar::-webkit-scrollbar-thumb{background-color:#aeaeec}#post div.sidebar h3{padding-left:1rem;margin-block:.6rem}#post div.sidebar .post-info{background-color:#2f2f45;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:.4rem}#post div.sidebar div.property{display:flex;gap:.6rem;align-items:center}#post div.sidebar div.property div.property-values{display:flex;gap:.4rem}#post div.sidebar div.property div.property-values span.property-value{background-color:#525278;color:#aeaeec;padding:2px 4px;border-radius:4px}#post div.sidebar div.inline{display:flex;gap:1rem}#post div.sidebar div.post-tags{display:flex;flex-direction:column;gap:.2rem}#post div.sidebar div.post-tags div.tag{align-items:center}#post div.sidebar div.post-tags div.tag a.tag-name{word-break:break-word;color:#d1d1ee;text-decoration:none}#post div.sidebar div.post-tags div.tag span.tag-post-count{background-color:#525278;color:#aeaeec;padding:0 4px;border-radius:4px;font-size:12px;margin-left:.4rem}page#root layout *{transition:all .3s ease}page#root .loader{text-align:center;padding-block:2rem}html{overflow-x:hidden}body{background-color:#1e1e2c;color:#d1d1ee;margin:0;font-family:Microsoft Yahei;font-size:14px}body::-webkit-scrollbar{background-color:#000;width:8px}body::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}app{display:block}app view{display:block}app view page{min-height:100%;padding:1rem;display:block}

dist/assets/index-Bnhfn_iK.css

@@ -0,0 +1 @@
+post{display:block}post[filetype=mp4] span.duration,post[filetype=webm] span.duration,post[filetype=zip] span.duration{background-color:#fff;color:#000}post span.duration{position:absolute;background-color:#00000050;bottom:.3rem;right:.3rem;padding:2px 4px;border-radius:4px;font-size:12px;text-transform:uppercase;z-index:2}post img{border-radius:10px;height:100%;width:100%}post video{border-radius:10px;height:100%;width:100%;object-fit:cover;position:absolute}#post{padding:0}#post section{background-color:#2f2f45;border-radius:20px;padding:20px}#post div.viewer{height:calc(100vh - 2rem);display:flex;justify-content:center;align-items:center;background-color:#000;border-radius:20px;overflow:hidden;width:calc(100vw - 300px - 4rem);margin:1rem}@media (max-width: 800px){#post div.viewer{width:100%;height:100vh;border-radius:0;margin:0}}#post div.viewer img{max-width:100%;max-height:100%}#post div.viewer video{max-width:100%;max-height:100%}#post div.content{width:calc(100vw - 300px - 4rem);display:flex;flex-direction:column;padding:1rem;box-sizing:border-box}@media (max-width: 800px){#post div.content{width:100%}}#post div.content::-webkit-scrollbar{background-color:#000;width:4px}#post div.content::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}#post div.content>h3{padding-left:1rem;margin-block:1rem}#post div.content section.commentary *{text-wrap:wrap;word-break:break-word}#post div.sidebar{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.4rem;width:300px;overflow:scroll;overflow-x:hidden;height:calc(100vh - 2rem);border-radius:20px}@media (max-width: 800px){#post div.sidebar{position:static;width:100%;overflow:visible;height:100%;padding:1rem;box-sizing:border-box}}#post div.sidebar::-webkit-scrollbar{background-color:#000;width:0px}#post div.sidebar::-webkit-scrollbar-thumb{background-color:#aeaeec}#post div.sidebar h3{padding-left:1rem;margin-block:.6rem}#post div.sidebar .post-info{background-color:#2f2f45;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:.4rem}#post div.sidebar div.property{display:flex;gap:.6rem;align-items:center}#post div.sidebar div.property div.property-values{display:flex;gap:.4rem}#post div.sidebar div.property div.property-values span.property-value{background-color:#525278;color:#aeaeec;padding:2px 4px;border-radius:4px}#post div.sidebar div.inline{display:flex;gap:1rem}#post div.sidebar div.post-tags{display:flex;flex-direction:column;gap:.2rem}#post div.sidebar div.post-tags div.tag{align-items:center}#post div.sidebar div.post-tags div.tag a.tag-name{word-break:break-word;color:#d1d1ee;text-decoration:none}#post div.sidebar div.post-tags div.tag span.tag-post-count{background-color:#525278;color:#aeaeec;padding:0 4px;border-radius:4px;font-size:12px;margin-left:.4rem}page#root layout *{transition:all .3s ease}page#root .loader{text-align:center;padding-block:2rem}html{overflow-x:hidden}body{background-color:#1e1e2c;color:#d1d1ee;margin:0;font-family:Microsoft Yahei;font-size:14px}body::-webkit-scrollbar{background-color:#000;width:8px}body::-webkit-scrollbar-thumb{background-color:#aeaeec;border-radius:2px}app{display:block}app view{display:block}app view page{min-height:100%;padding:1rem;display:block}

dist/index.html

@@ -5,8 +5,8 @@
     <!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Danbooru Viewer v0.1</title>
-    <script type="module" crossorigin src="/assets/index-DR9E_CfL.js"></script>
+    <script type="module" crossorigin src="/assets/index-D2JYqypC.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BMUJRc5c.css">
+    <link rel="stylesheet" crossorigin href="/assets/index-Bnhfn_iK.css">
   </head>
   <body>
   </body>

package.json

@@ -2,7 +2,7 @@
   "name": "danbooru-viewer",
   "module": "index.ts",
   "type": "module",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "devDependencies": {
     "@types/bun": "latest"
   },

src/route/posts/$post.ts

@@ -82,8 +82,8 @@ export const posts_route = new Route('/posts/:id', ({params}) => {
 
     load();
     return $('page').id('post').content([
-        $('div').class('main').content([
+        ele.$viewer,
-            ele.$viewer,
+        $('div').class('content').content([
             $('h3').content(`Artist's Commentary`),
             ele.$commentary.content('loading...')
         ]),

src/route/posts/_$post.scss

@@ -1,19 +1,45 @@
 #post {
-
+    padding: 0;
     section {
         background-color: #2f2f45;
         border-radius: 20px;
         padding: 20px;
     }
 
-    div.main {
+    div.viewer {
-        // overflow: scroll;
+        height: calc(100vh - 2rem);
-        // overflow-x: hidden;
+        display: flex;
-        // height: calc(100vh - 2rem);
+        justify-content: center;
+        align-items: center;
+        background-color: #000000;
+        border-radius: 20px;
+        overflow: hidden;
+        width: calc(100vw - 300px - 4rem);
+        margin: 1rem;
+        
+        @media (max-width: 800px) {
+            width: 100%;
+            height: calc(100vh);
+            border-radius: 0;
+            margin:0;
+        }
+
+        img {
+            max-width: 100%;
+            max-height: 100%;
+        }
+        video {
+            max-width: 100%;
+            max-height: 100%;
+        }
+    }
+
+    div.content {
         width: calc(100vw - 300px - 4rem);
-        padding-right: 10px;
         display: flex;
         flex-direction: column;
+        padding: 1rem;
+        box-sizing: border-box;
 
         @media (max-width: 800px) {
             width: 100%;
@@ -34,24 +60,6 @@
             margin-block: 1rem;
         }
 
-        div.viewer {
-            height: calc(100vh - 2rem);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background-color: #000000;
-            border-radius: 20px;
-            overflow: hidden;
-            img {
-                max-width: 100%;
-                max-height: 100%;
-            }
-            video {
-                max-width: 100%;
-                max-height: 100%;
-            }
-        }
-
         section.commentary {
             * {
                 text-wrap: wrap;
@@ -74,12 +82,12 @@
         border-radius: 20px;
 
         @media (max-width: 800px) {
-            position: relative;
+            position: static;
             width: 100%;
             overflow: visible;
             height: 100%;
-            padding-inline: 1rem;
+            padding: 1rem;
-            padding-bottom: 1rem;
+            box-sizing: border-box;
         }
 
         &::-webkit-scrollbar {