docs: Make vitepress components css files more readable and simply

docs/.vitepress/components/BlogHome.vue

@@ -18,10 +18,8 @@ const posts = computed<Post[]>(() =>
 
 <template>
   <div class="container">
-    <div>
-      <div class="vp-doc">
-        <h1>Blog</h1>
-      </div>
+    <div class="inner-container">
+      <h1>Blog</h1>
 
       <ul>
         <BlogPostPreview v-for="post of posts" :key="post.url" :post />
@@ -35,37 +33,33 @@ const posts = computed<Post[]>(() =>
   display: flex;
   flex-direction: column;
   align-items: center;
-}
-.container > div {
-  padding: 32px;
-  max-width: 900px;
-  width: 100%;
-  min-width: 0;
-}
 
-h1 {
-  padding-bottom: 16px;
-}
+  .inner-container {
+    padding: 32px;
+    max-width: 900px;
+    width: 100%;
 
-ul {
-  display: flex;
-  flex-direction: column;
-  list-style: none;
-}
-ul,
-li {
-  padding: 0;
-  margin: 0;
-}
+    h1 {
+      font-size: 32px;
+      font-weight: 600;
+      margin-top: 10px;
+      padding-bottom: 16px;
+    }
 
-ul li {
-  padding-top: 16px;
-  margin-top: 16px;
-  border-top: 1px solid var(--vp-c-default);
-}
-ul li:last-child {
-  padding-bottom: 16px;
-  margin-bottom: 16px;
-  border-bottom: 1px solid var(--vp-c-default);
+    ul {
+      display: flex;
+      flex-direction: column;
+
+      li {
+        padding-top: 16px;
+        margin-top: 16px;
+
+        &:last-child {
+          padding-bottom: 16px;
+          margin-bottom: 16px;
+        }
+      }
+    }
+  }
 }
 </style>

docs/.vitepress/components/BlogLayout.vue

@@ -9,7 +9,7 @@ const date = useBlogDate(() => frontmatter.value.date);
 
 <template>
   <div class="vp-doc">
-    <main class="container-content">
+    <main class="container">
       <h1 v-html="frontmatter.title" />
       <p class="meta-row">
         <a
@@ -18,7 +18,10 @@ const date = useBlogDate(() => frontmatter.value.date);
           :href="`https://github.com/${author.github}`"
           class="author"
         >
-          <img :src="`https://github.com/${author.github}.png?size=96`" />
+          <img
+            :src="`https://github.com/${author.github}.png?size=96`"
+            alt="Author's avatar"
+          />
           <span>{{ author.name }}</span>
         </a>
         <span>&bull;</span>
@@ -30,48 +33,43 @@ const date = useBlogDate(() => frontmatter.value.date);
 </template>
 
 <style scoped>
-vp-doc {
+.vp-doc {
   display: flex;
-}
-main {
-  max-width: 1080px;
-  padding: 32px;
-  margin: auto;
-}
-@media (min-width: 768px) {
-  main {
-    padding: 64px;
+
+  .container {
+    max-width: 1080px;
+    padding: 32px;
+    margin: auto;
+
+    @media (min-width: 768px) {
+      padding: 64px;
+    }
+  }
+
+  .meta-row {
+    display: flex;
+    color: var(--vp-c-text-2);
+    gap: 16px;
+    overflow: hidden;
+    padding-bottom: 32px;
+
+    .author {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      color: var(--vp-c-text-2);
+      font-weight: normal;
+      text-decoration: none;
+
+      :hover {
+        text-decoration: underline;
+      }
+
+      img {
+        width: 24px;
+        border-radius: 100%;
+      }
+    }
   }
-}
-.meta-row {
-  display: flex;
-  color: var(--vp-c-text-2);
-  gap: 16px;
-  overflow: hidden;
-  padding-bottom: 32px;
-}
-.meta-row > * {
-  flex-shrink: 0;
-}
-.author {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  color: var(--vp-c-text-2);
-  font-weight: normal;
-  text-decoration: none;
-}
-.author img {
-  width: 24px;
-  height: 24px;
-  border-radius: 100%;
-}
-.author span {
-  padding: 0;
-  margin: 0;
-}
-.author:hover {
-  text-decoration: underline;
-  color: var(--vp-c-text-2);
 }
 </style>

docs/.vitepress/components/BlogPostPreview.vue

@@ -31,42 +31,23 @@ const date = useBlogDate(() => props.post.date);
 </template>
 
 <style scoped>
-li {
-  padding: 0;
-  margin: 0;
-}
+.vp-doc {
+  * {
+    margin-block: 10px;
+  }
 
-p {
-  margin: 0;
-}
-h3 {
-  margin: 0;
-  padding: 0;
-  border: none;
-}
+  .title {
+    color: var(--vp-c-text-1);
+  }
 
-li > a > div {
-  display: flex;
-  flex-direction: column;
-  margin: 0 -16px;
-  padding: 16px;
-  border-radius: 16px;
-}
-li > a > div:hover {
-  background: var(--vp-c-default);
-}
-li .title {
-  color: var(--vp-c-text);
-  margin-bottom: 12px;
-}
-li .description {
-  font-size: 16px;
-  color: var(--vp-c-text-2);
-  margin-bottom: 8px;
-}
-li .meta {
-  font-weight: 400;
-  font-size: 12px;
-  color: var(--vp-c-text-2);
+  .description {
+    color: var(--vp-c-text-2);
+  }
+
+  .meta {
+    font-weight: 400;
+    font-size: 12px;
+    color: var(--vp-c-text-2);
+  }
 }
 </style>

docs/.vitepress/components/EntrypointPatterns.vue

@@ -5,36 +5,61 @@ defineProps<{
 </script>
 
 <template>
-  <table class="no-vertical-dividers">
+  <table class="no-vertical-dividers entrypoint-patterns">
     <thead>
       <tr>
-        <th style="width: 100%">Filename</th>
+        <th class="col-filename">Filename</th>
         <th></th>
         <th>Output Path</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="pattern of patterns">
-        <td style="white-space: nowrap; padding-right: 8px">
+      <tr v-for="pattern of patterns" :key="pattern[0]">
+        <td class="cell-input">
           <code>entrypoints/{{ pattern[0] }}</code>
         </td>
-        <td style="padding: 6px; opacity: 50%">
+        <td class="cell-arrow">
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="20"
             height="20"
             viewBox="0 0 24 24"
+            width="20"
+            xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              fill="currentColor"
               d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11H4Z"
+              fill="currentColor"
             />
           </svg>
         </td>
-        <td style="white-space: nowrap; padding-left: 8px">
+        <td class="cell-output">
           <code>/{{ pattern[1] }}</code>
         </td>
       </tr>
     </tbody>
   </table>
 </template>
+
+<style scoped>
+.entrypoint-patterns {
+  width: 100%;
+
+  .col-filename {
+    width: 100%;
+  }
+
+  .cell-input {
+    white-space: nowrap;
+    padding-right: 8px;
+  }
+
+  .cell-arrow {
+    padding: 6px;
+    opacity: 0.5;
+  }
+
+  .cell-output {
+    white-space: nowrap;
+    padding-left: 8px;
+  }
+}
+</style>