From 2bffc08630428c8dda360a776c0afb567796c72e Mon Sep 17 00:00:00 2001
From: Nikita Tokarchuk <nikita@tokarch.uk>
Date: Tue, 4 Jan 2022 21:45:38 +0100
Subject: [PATCH] Fix invalid kg-card width in the pinned container

---
 web/style/blog.scss   |  7 -------
 web/style/index.scss  |  6 +++---
 web/style/kg.scss     | 10 ++++++----
 web/style/pinned.scss | 13 +++++++++++--
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/web/style/blog.scss b/web/style/blog.scss
index 5a363fd..66fe1d1 100644
--- a/web/style/blog.scss
+++ b/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;
-    }
 }
diff --git a/web/style/index.scss b/web/style/index.scss
index e23743e..342d3f2 100644
--- a/web/style/index.scss
+++ b/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,
diff --git a/web/style/kg.scss b/web/style/kg.scss
index 98c7057..db7fde4 100644
--- a/web/style/kg.scss
+++ b/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,
diff --git a/web/style/pinned.scss b/web/style/pinned.scss
index 33d0090..317c821 100644
--- a/web/style/pinned.scss
+++ b/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 {
-    display: none;
+@media all and (max-width: 512px) {
+    .pinned-container .blog-post-content > * {
+        width: 90vw;
+    }
 }