🎨 Refactor CSS styles for improved layout and responsiveness; update Display component to conditionally apply 'main-display' class based on embed mode

Author: Howardzhangdqs

src/assets/main.css

@@ -1,34 +1,73 @@
 @import url(./markdown.css);
 
 :root {
-    --global-padding: 1rem;
+  --global-padding: 1rem;
 }
 
 body {
-    font-family: 'Roboto Mono', Consolas, "PingFang SC", "system-ui", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
-    font-size: 1rem;
-    line-height: 1.5;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
+  font-family: 'Roboto Mono', Consolas, "PingFang SC", "system-ui", "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
 }
 
 .btn {
-    border-radius: 10em;
-    padding: 0.5em 1em;
-    border: 1px solid #0004;
-    background-color: rgb(247, 247, 247);
-    transform: translate(0, 10px);
-    transition: all 0.3s, transform 0.05s;
-    right: 26px;
+  border-radius: 10em;
+  padding: 0.5em 1em;
+  border: 1px solid #0004;
+  background-color: rgb(247, 247, 247);
+  transform: translate(0, 10px);
+  transition: all 0.3s, transform 0.05s;
+  right: 26px;
 
-    font-weight: normal;
+  font-weight: normal;
 }
 
 .btn:hover {
-    background-color: rgb(241, 241, 241);
+  background-color: rgb(241, 241, 241);
 }
 
 .btn:active {
-    transform: translate(0, 10px) scale(0.9);
+  transform: translate(0, 10px) scale(0.9);
+}
+
+.main-display {
+  width: 90%;
+  max-width: 900px;
+  min-width: 280px;
+  margin-left: auto;
+  margin-right: auto;
+  box-sizing: border-box;
+  transition: width 0.2s;
+  height: fit-content !important;
+}
+
+@media (max-width: 900px) {
+  .main-display {
+    width: 96%;
+    max-width: 700px;
+    min-width: 220px;
+  }
+}
+
+@media (max-width: 700px) {
+  .main-display {
+    width: 98%;
+    max-width: 98%;
+    min-width: 160px;
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+@media (max-width: 500px) {
+  .main-display {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+    padding-left: 4px;
+    padding-right: 4px;
+  }
 }

src/components/Display.vue

@@ -8,7 +8,7 @@
       嵌入模式
     </button>
   </div>
-  <div v-html="parsed_markdown" class="markdown md"></div>
+  <div v-html="parsed_markdown" class="markdown md" :class="(embed_mode ? 'main-display' : '')"></div>
   <div v-html="inject_css"></div>
 </template>
 
@@ -26,11 +26,12 @@ import router from "@/router/index.ts";
 const VITE_SINGLE_FILE_RENDER = import.meta.env.VITE_SINGLE_FILE_RENDER == "True";
 
 const props = defineProps<{
+  embed_mode?: boolean;
   show_copy_button?: boolean;
   show_embed_button?: boolean;
 }>();
 
-const { show_copy_button, show_embed_button } = props;
+const { show_copy_button, show_embed_button, embed_mode } = props;
 
 const md = markdownit({
   html: true,

src/views/EmbedView.vue

@@ -2,34 +2,34 @@
 import Display from "../components/Display.vue";
 import content, { user_css } from "../content.ts";
 import { onMounted } from "vue";
-import { encode, decode } from "js-base64";
+import { decode } from "js-base64";
 
 onMounted(() => {
   // 解析 URL 参数
   const params = new URLSearchParams(window.location.search);
 
   // 解析 content 参数（base64 编码）
-  const contentParam = params.get('content');
+  const contentParam = params.get("content");
   if (contentParam) {
     try {
       // 使用 js-base64 进行 UTF-8 安全的 base64 解码
       const decodedContent = decode(contentParam);
       content.value = decodedContent;
     } catch (error) {
-      console.error('Error decoding content parameter:', error);
-      console.error('Content param:', contentParam);
+      console.error("Error decoding content parameter:", error);
+      console.error("Content param:", contentParam);
     }
   }
 
   // 解析 style 参数
-  const styleParam = params.get('style');
+  const styleParam = params.get("style");
   if (styleParam) {
     try {
       // 使用 js-base64 进行 UTF-8 安全的 base64 解码
       user_css.value = decode(styleParam);
     } catch (error) {
-      console.error('Error decoding style parameter:', error);
-      console.error('Style param:', styleParam);
+      console.error("Error decoding style parameter:", error);
+      console.error("Style param:", styleParam);
       // 如果解码失败，尝试直接使用参数值
       user_css.value = styleParam;
     }
@@ -39,7 +39,7 @@ onMounted(() => {
 
 <template>
   <div class="embed-container">
-    <Display />
+    <Display :embed_mode="true" />
   </div>
 </template>
 
@@ -49,5 +49,6 @@ onMounted(() => {
   height: 100vh;
   padding: 0;
   margin: 0;
+  overflow: auto;
 }
-</style>
+</style>

src/views/HomeView.vue

@@ -17,7 +17,7 @@ const VITE_SINGLE_FILE_RENDER = import.meta.env.VITE_SINGLE_FILE_RENDER == "True
 
     <!-- Display Panel -->
     <div class="flex">
-      <Display :show_copy_button="true" :show_embed_button="true" />
+      <Display :show_copy_button="true" :show_embed_button="true" :embed_mode="false" />
     </div>
   </div>
 </template>
@@ -44,4 +44,4 @@ const VITE_SINGLE_FILE_RENDER = import.meta.env.VITE_SINGLE_FILE_RENDER == "True
   border-color: v-bind('VITE_SINGLE_FILE_RENDER ? "none" : "#0005"');
   box-shadow: v-bind('VITE_SINGLE_FILE_RENDER ? "none" : "0 0 30px #0002"');
 }
-</style>
+</style>