feat: update demo layout style

Author: Lruihao

public/favicon.ico

@@ -58,5 +58,7 @@ body {
     opacity: .1;
     pointer-events: none;
     touch-action: none;
+    top: 0;
+    left: 0;
   }
 }

src/assets/base.css

@@ -17,6 +17,6 @@
   #app {
     display: grid;
     grid-template-rows: 1fr auto auto;
-    padding: 0 2rem;
+    max-width: 1000px;
   }
 }

src/assets/main.css

@@ -4,7 +4,7 @@ const currentYear = new Date().getFullYear()
 
 <template>
   <footer>
-    <p>仅用于个人非商用</P>
+    <p>仅限个人非商用</P>
     <p>
       © 2019 - {{ currentYear }}
       <a href="https://github.com/Lruihao/mmt-webfont/" target="_blank">沐目体</a>

src/components/Footer.vue

@@ -4,13 +4,13 @@
     <a
       href="https://github.com/Lruihao/mmt-webfont"
       class="github-corner"
+      target="_blank"
       aria-label="View source on GitHub"
     >
       <svg
         width="80"
         height="80"
         viewBox="0 0 250 250"
-        style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"
         aria-hidden="true"
       >
         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
@@ -34,6 +34,16 @@
   position: fixed;
   top: 0;
   right: 0;
+  z-index: 100;
+
+  svg {
+    fill: var(--github-corner-fill, #151513);
+    color: var(--github-corner-color, #fff);
+    position: absolute;
+    top: 0;
+    border: 0;
+    right: 0;
+  }
 }
 .github-corner:hover .octo-arm {
   animation: octocat-wave 560ms ease-in-out;
@@ -66,4 +76,11 @@
     animation: octocat-wave 560ms ease-in-out;
   }
 }
+
+@media (prefers-color-scheme: dark) {
+  .github-corner {
+    --github-corner-fill: #fff;
+    --github-corner-color: #151513;
+  }
+}
 </style>

src/components/SectionCover.vue

@@ -12,6 +12,7 @@ interface Comment {
 }
 
 const mid = ref<string>('2280569152')
+const loading = ref<boolean>(false)
 const defaultComment: Comment = {
   musicName: '',
   musicUrl: '',
@@ -24,6 +25,7 @@ const defaultComment: Comment = {
 const comment = ref<Comment>(defaultComment)
 
 function getRandomComment() {
+  loading.value = true
   fetch(`https://api.lruihao.cn/netease/comment?mid=${mid.value}`)
     .then(response => response.json())
     .then((res) => {
@@ -43,6 +45,9 @@ function getRandomComment() {
         content: '获取评论失败，请稍后再试...',
       }
     })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 onMounted(() => {
@@ -52,7 +57,7 @@ onMounted(() => {
 
 <template>
   <section class="section-music">
-    <div class="comment-163" title="随机下一条" @click="getRandomComment">
+    <div v-if="!loading" class="comment-163" title="随机下一条" @click="getRandomComment">
       <span class="pic-backdrop" :style="comment.picUrl ? `background-image: url(${comment.picUrl});` : ''" />
       <div class="commentator">
         <img
@@ -63,38 +68,38 @@ onMounted(() => {
         >
         <span class="comment-nickname">{{ comment.nickname }}</span>
       </div>
-      <div v-if="comment.content" class="comment-content">
+      <div class="comment-content">
         {{ comment.content }}
       </div>
-      <div v-else class="loading-indicator-wrapper">
-        <div class="aether-spinner">
-          <div class="rect-one" />
-          <div class="rect-two" />
-          <div class="rect-three" />
-        </div>
-      </div>
       <div class="music-info">
-        <span class="artists-name">{{ comment.artist }}</span>
         <span class="music-name">{{ comment.musicName }}</span>
+        <span class="artists-name">{{ comment.artist }}</span>
+      </div>
+    </div>
+    <div v-else class="loading-indicator-wrapper">
+      <div class="aether-spinner">
+        <div class="rect-one" />
+        <div class="rect-two" />
+        <div class="rect-three" />
       </div>
     </div>
   </section>
 </template>
 
 <style scoped>
 .section-music {
+  position: relative;
   z-index: 1;
   padding: 1rem;
   min-height: 185px;
-  --color-comment: #272626;
 
   .comment-163 {
     font-family: MMT, '沐目体';
     position: relative;
     border: 1px solid #f5f5f5;
     padding: 0.75em;
     border-radius: 0.75rem;
-    color: var(--color-comment);
+    color: var(--color-comment, #272626);
     cursor: pointer;
     height: 100%;
   }
@@ -146,28 +151,37 @@ onMounted(() => {
   .music-info {
     display: flex;
     align-items: center;
-    flex-direction: row-reverse;
-    font-weight: 500;
+    justify-content: flex-end;
     font-size: 1.2rem;
     margin-top: 0.75em;
+    text-shadow: 0 0 4px var(--color-text-shadow, rgba(0, 0, 0, .4));
+  }
+  .music-name:not(:empty)::before {
+    content: '《';
+  }
+  .artists-name:not(:empty)::after {
+    content: '》';
   }
   .music-name:not(:empty)::after {
-    content: '-';
-    margin-left: 0.25rem;
-    margin-right: 0.25rem;
+    content: '·';
+    margin-inline: 0.25rem;
   }
   .mmt-netease-powered {
-    display: blcok;
+    display: block;
     text-align: right;
     font-size: 80%;
     color: #999;
     margin-block: 0.5rem;
   }
 }
+
 @media (prefers-color-scheme: dark) {
   .section-music {
     --color-comment: #f5f5f5;
   }
+  .music-info {
+    --color-text-shadow: rgba(255, 255, 255, .8);
+  }
 }
 
 .loading-indicator-wrapper {

src/components/SectionMusic.vue

@@ -14,6 +14,10 @@ const style = computed(() => {
   }
 })
 
+if (window.innerWidth < 768) {
+  fontSize.value = 20
+}
+
 // ————“沐目之，湘也。”
 // 取字于大学时初恋的名字，这个字体也是为她而写。
 // 沐目体和红人馆的那首《最甜情歌》有着类似的遭遇。