feat(client): improve css system

Author: hiroppy

packages/client/assets/style/code.css

@@ -4,15 +4,17 @@
   --color-white: #f5f5f5;
 }
 
-pre {
+pre[class*='language-'] {
   background: var(--color-white);
   border: 1px solid rgba(0, 20, 80, 0.1);
   -webkit-box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
   box-shadow: 0 8px 16px rgba(0, 20, 80, 0.04), 0 4px 16px rgba(0, 0, 0, 0.08);
   border-radius: 10px;
   min-width: 50%;
   max-width: 100%;
-  width: auto;
+  width: fit-content;
+  margin: var(--code-align, auto);
+  margin-bottom: 4px;
 }
 
 code {
@@ -25,13 +27,13 @@ code {
 
 pre > code[class*='language-'],
 pre[class*='language-'] {
-  font-size: 1.4rem !important;
+  font-size: calc(var(--code-font-size) - 0.2rem) !important;
   line-height: 1.2;
 }
 
 @media screen and (min-width: 768px) {
   pre > code[class*='language-'],
   pre[class*='language-'] {
-    font-size: 1.8rem !important;
+    font-size: var(--code-font-size) !important;
   }
 }

packages/client/assets/style/common.css

@@ -7,13 +7,12 @@
 }
 
 .qr {
-  width: 320px;
-  height: 320px;
+  width: var(--qr-code-image-size);
+  height: var(--qr-code-image-size);
   margin: 0 auto;
 }
 
 .swiper-container {
-  background: #f5f5f5;
   height: 100vh;
   width: 100%;
 }
@@ -26,10 +25,17 @@
   overflow-y: auto;
 }
 
+.slide-box {
+  color: var(--base-color);
+  text-align: var(--base-align);
+  background: var(--background-color);
+}
+
 .slide-internal-box {
+  background: inherit;
   padding: 16px 0;
   text-align: inherit;
-  max-width: 1280px;
+  max-width: var(--base-max-slide-size);
   margin: auto;
   min-width: 320px;
   width: 90%;

packages/client/assets/style/customize.css

@@ -0,0 +1,9 @@
+@import 'modern-normalize/modern-normalize.css';
+@import 'swiper/swiper.min.css';
+@import 'swiper/components/a11y/a11y.min.css';
+@import './variables.css';
+@import './tags.css';
+@import './typography.css';
+@import './sidebar.css';
+@import './grid.css';
+@import './customize.css';