feat: レスポンシブ対応

Author: sevenc-nanashi

src/App.vue

@@ -46,50 +46,90 @@ onBeforeUnmount(() => {
 
 <template>
   <main un-grid un-place-items="center">
-    <div un-flex un-size="max" un-flex-col un-items="center" un-gap="6">
-      <h1 un-text="4xl">AviUtl2 User Portal</h1>
-      <nav id="nav" un-flex un-gap="3" un-justify="center">
+    <div
+      un-flex
+      un-size="max"
+      un-flex-col
+      un-items="center"
+      un-gap="6"
+      un-px="4"
+      md:un-px="0"
+      un-w="full"
+      md:un-w="auto"
+    >
+      <h1 un-text="3xl md:4xl">AviUtl2 User Portal</h1>
+      <nav
+        id="nav"
+        aria-label="主要リンク"
+        un-flex="~ col md:row"
+        un-items="center"
+        un-justify="center"
+        un-gap="2"
+        un-w="full"
+      >
         <template v-for="(item, index) in data" :key="index">
           <a
             v-if="item.type === 'link'"
             :href="item.url"
             target="_blank"
-            un-text="hover:underline"
-            >{{ item.title }}</a
+            rel="noreferrer"
+            :un-font="item.official ? 'bold' : 'normal'"
+          >
+            {{ item.title }}
+          </a>
+          <a
+            v-else-if="item.type === 'section'"
+            role="button"
+            un-cursor="pointer"
+            @click="openSection(item)"
           >
-          <a v-else-if="item.type === 'section'" @click="openSection(item)">
             {{ item.title }}
           </a>
-          <span v-if="index < data.length - 1">|</span>
+          <span
+            v-if="index < data.length - 1"
+            un-hidden="~"
+            un-inline-block="md:~"
+          >
+            |
+          </span>
         </template>
       </nav>
     </div>
   </main>
   <SectionInfo :section="section" @close="closeSection" />
   <AboutDialog :open="showAbout" @close="closeAbout" />
   <footer
-    un-text="sm slate-500"
+    un-text="sm slate-500 center"
     un-py="6"
     un-bg="white/50"
     un-backdrop-blur="md"
-    un-gap="4"
-    un-flex
+    un-gap="3"
+    md:un-gap="4"
+    un-flex="~ col md:row"
+    un-items="center"
     un-justify="center"
   >
     <span
       >Created by
-      <a href="https://sevenc7c.com" target="_blank" un-text="[#48b0d5]"
+      <a
+        href="https://sevenc7c.com"
+        target="_blank"
+        rel="noreferrer"
+        un-text="[#48b0d5]"
         >Nanashi.</a
       ></span
     >
-    |
+    <span aria-hidden="true" un-hidden un-inline-block="md:~"> | </span>
     <span
       >Source Available on
-      <a href="https://github.com/aviutl2/aviutl2-jp" target="_blank"
+      <a
+        href="https://github.com/aviutl2/aviutl2-jp"
+        target="_blank"
+        rel="noreferrer"
         >GitHub</a
       ></span
     >
-    |
+    <span aria-hidden="true" un-hidden un-inline-block="md:~"> | </span>
     <a
       type="button"
       un-cursor="pointer"

src/components/BaseDialog.vue

@@ -31,6 +31,7 @@ const isOpen = computed(() => props.open);
         un-items="center"
         un-justify="center"
         un-z="50"
+        un-p="4 md:8"
         @click.self="emit('close')"
       >
         <div
@@ -39,7 +40,9 @@ const isOpen = computed(() => props.open);
           un-shadow="xl"
           un-max-w="xl"
           un-w="full"
-          un-p="6"
+          un-p="4 md:6"
+          un-max-h="full"
+          un-overflow="y-auto"
         >
           <slot />
         </div>

src/data.ts

@@ -2,6 +2,7 @@ export type Link = {
   type: "link";
   title: string;
   url: string;
+  official?: boolean;
 };
 export type Section = {
   type: "section";
@@ -23,10 +24,11 @@ export const data: Array<Section | Link> = [
     type: "link",
     title: "公式サイト",
     url: "https://spring-fragrance.mints.ne.jp/aviutl/",
+    official: true,
   },
   {
     type: "link",
-    title: "Web版ドキュメント",
+    title: "非公式Web版ドキュメント",
     url: "https://docs.aviutl2.jp",
   },
   {
@@ -92,7 +94,8 @@ export const data: Array<Section | Link> = [
       {
         type: "link",
         title: "AviUtl2のWiki",
-        description: "AviUtl ExEdit2（通称：AviUtl2）についての情報をまとめるための非公式@Wiki。 ",
+        description:
+          "AviUtl ExEdit2（通称：AviUtl2）についての情報をまとめるための非公式@Wiki。 ",
         maintainer: {
           name: "廣田 ひろあき（仮）",
           url: "https://x.com/hirota_hiroaki",

src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import "@fontsource/noto-sans-jp/400.css";
+import "@fontsource/noto-sans-jp/700.css";
 import "./styles/reset.css";
 import "./styles/style.scss";
 import "virtual:uno.css";