Fix invalid kg-card width in the pinned container

web/style/blog.scss

@@ -52,15 +52,8 @@
     width: 50vw;
 }
 
-.blog-post-content > .kg-card {
-    width: 100%;
-}
-
 @media all and (max-width: 512px) {
     .blog-post-content > * {
         width: 90vw;
     }
-    .pinned-container .blog-post-content > * {
-        width: 90vw;
-    }
 }

web/style/index.scss

@@ -1,11 +1,11 @@
 @use "./const.scss" as *;
 
 @use "./blog.scss";
-@use "./font.scss";
-@use "./kg.scss";
-@use "./menu.scss";
 @use "./pinned.scss";
+@use "./menu.scss";
 @use "./scroll.scss";
+@use "./kg.scss";
+@use "./font.scss";
 @use "./external.scss";
 
 body,

web/style/kg.scss

@@ -1,6 +1,7 @@
 @use "./const.scss" as *;
 
 .kg-card {
+    width: auto;
     max-width: 70vw;
     padding: 0.2em;
     border-width: 2px;
@@ -10,8 +11,11 @@
     background-color: $main-color;
 }
 
-.kg-card img {
+.kg-card > * {
     vertical-align: top;
+}
+
+.kg-card img {
     border-radius: 0.2em;
 }
 
@@ -24,11 +28,9 @@
 
 .kg-code-card {
     background-color: #333;
-}
-
-.kg-code-card pre {
     text-shadow: none;
     overflow-x: auto;
+    width: 100%;
 
     li.L0,
     li.L1,

web/style/pinned.scss

@@ -5,10 +5,19 @@
     z-index: 1;
 }
 
+.pinned-container .blog-post-head {
+    display: none;
+}
+
 .pinned-container .blog-post-content > * {
     width: 80vw;
 }
+.pinned-container .blog-post-content > .kg-card {
+    width: auto;
+}
 
-.pinned-container .blog-post-head {
+@media all and (max-width: 512px) {
-    display: none;
+    .pinned-container .blog-post-content > * {
+        width: 90vw;
+    }
 }