fix: code snippet display not correctly on smart phones

Author: ouioui199

css/prism.css

@@ -12,7 +12,7 @@ pre[class*="language-"] {
 	background: none;
 	/* text-shadow: 0 1px white; */
 	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-	font-size: 1em;
+	/* font-size: 1em; */
 	text-align: left;
 	white-space: pre;
 	word-spacing: normal;
@@ -143,7 +143,7 @@ pre[class*="language-"] {
 
 pre[class*="language-"].line-numbers {
 	position: relative;
-	padding: 1em 3.8em;
+	padding: .5rem 0 .5rem 3rem;
 	counter-reset: linenumber;
 }
 
@@ -182,3 +182,9 @@ pre[class*="language-"].line-numbers > code {
     text-align: right;
 }
 
+@media screen and (max-width: 481px) and (orientation: portrait) {
+
+	pre[class*="language-"].line-numbers {
+		padding: .5rem 0 .5rem 2rem;
+	}
+}

css/style.css

@@ -55,6 +55,10 @@ img {
     --columbia-blue: #cee9e4;
     --midnight-green: #01565b;
     --yellow: #e5f33d;
+
+    /* BLOG */
+    --BLOG-GAP: 2vw;
+    --BLOG-SIDE-WIDTH: 10vw
 }
 
 /* || UTILITY CLASSES */
@@ -752,7 +756,7 @@ p {
 .blog {
     flex-flow: row;
     margin: var(--MAIN-GAP) var(--MAIN-LRMARGIN);
-    gap: 2vw;
+    gap: var(--BLOG-GAP);
     font-size: var(--BLOG-FS);
     min-height: 100vh;
 }
@@ -771,7 +775,7 @@ p {
 
 .ai-cv-menu,
 .ai-cv-links {
-    min-width: 10vw;
+    min-width: var(--BLOG-SIDE-WIDTH);
 }
 
 .ai-cv-menu nav {
@@ -954,7 +958,8 @@ code {
     padding-left: 0;
     text-align: left;
     white-space: pre-wrap;
-    width: 47.6vw;
+    width: calc(100vw - var(--MAIN-LRMARGIN) * 2 - var(--BLOG-GAP) * 2 - var(--BLOG-SIDE-WIDTH) * 2 - 3rem);
+    font-size: var(--BLOG-FS);
 }
 
 pre {
@@ -1057,6 +1062,10 @@ pre {
         display: none;
     }
 
+    code {
+        width: calc(100vw - var(--MAIN-LRMARGIN) * 2 - 3rem);
+    }
+
     .video-player {
         min-height: 350px;
     }
@@ -1505,6 +1514,10 @@ pre {
         width: 1.125rem;
         height: 1.125rem;
     }
+
+    code {
+        width: calc(100vw - var(--MAIN-LRMARGIN) * 2 - 2rem);
+    }
 }
 
 @media screen and (max-width: 1024px) and (orientation: landscape) {