scss への置き換え / ダークモード対応 / トップページデザイン改修

client/src/App.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { RouterView } from 'vue-router'
-// import HelloWorld from './components/HelloWorld.vue'
 </script>
 
 <template>
@@ -42,31 +41,4 @@ nav a {
 nav a:first-of-type {
   border: 0;
 }
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-
-  nav {
-    text-align: left;
-    margin-left: -1rem;
-    font-size: 1rem;
-
-    padding: 1rem 0;
-    margin-top: 1rem;
-  }
-}
 </style>

client/src/assets/base.scss

@@ -0,0 +1,40 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  color: $color-text;
+  background-color: $color-background;
+
+  @include dark {
+    color: $color-text-dark;
+    background-color: $color-background-dark;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  line-height: 1.6;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

client/src/assets/main.css → client/src/assets/main.scss

@@ -1,4 +1,4 @@
-@import './base.css';
+@import './base.scss';
 
 #app {
   max-width: 1280px;
@@ -20,16 +20,3 @@ a,
     background-color: hsla(160, 100%, 37%, 0.2);
   }
 }
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

client/src/views/SignUp.vue → client/src/components/SignUp.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-import { AuthApi, type PostLogin, Configuration } from '@/lib/apis/generated'
+import apis from '@/lib/apis'
+import { type PostLogin } from '@/lib/apis/generated'
 import PageHeader from '@/components/PageHeader.vue'
 import PageContainer from '@/components/PageContainer.vue'
 
-const apis = new AuthApi(new Configuration({ basePath: '/api' }))
-
 const newUserName = ref('')
 const newPassword = ref('')
 const request = ref<PostLogin>({
@@ -21,15 +20,16 @@ const postNewAccount = () => {
 </script>
 
 <template>
-  <PageHeader title="サインアップ"/>
+  <PageHeader title="サインアップ" />
   <PageContainer>
     <div>
       ユーザー名
       <input v-model="newUserName" @keypress.prevent.enter="postNewAccount" />
     </div>
     <div>
       パスワード
-      <input v-model="newPassword" @keypress.prevent.enter="postNewAccount" />
+      <input type="password" v-model="newPassword" @keypress.prevent.enter="postNewAccount" />
     </div>
+    <button @click="postNewAccount">サインアップ</button>
   </PageContainer>
 </template>

client/src/main.ts

@@ -1,4 +1,4 @@
-import './assets/main.css'
+import './assets/main.scss'
 
 import { createApp } from 'vue'
 import App from './App.vue'

client/src/router/index.ts

@@ -14,12 +14,12 @@ const router = createRouter({
       // route level code-splitting
       // this generates a separate chunk (About.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
-      component: () => import('../views/SignUp.vue')
+      component: () => import('@/components/SignUp.vue')
     },
     {
       path: '/:pathMatch(.*)*',
       name: 'Not found',
-      component: () => import('../views/NotFound.vue')
+      component: () => import('@/views/NotFound.vue')
     }
   ],
   history: createWebHistory(import.meta.env.BASE_URL)

client/src/styles/color.scss

@@ -0,0 +1,34 @@
+// ライトモード
+$color-primary: #005bac;
+$color-primary-text: #eff0f0;
+
+$color-secondary: #b2bdc7;
+$color-secondary-text: #333e47;
+
+$color-background: #ffffff;
+$color-text: #000000;
+
+// ダークモード
+$color-primary-dark: #005bac;
+$color-primary-text-dark: #eff0f0;
+
+$color-secondary-dark: #b2bdc7;
+$color-secondary-text-dark: #333e47;
+
+$color-background-dark: #000000;
+$color-text-dark: #ffffff;
+
+// スマホ対応
+$sp: 768px;
+
+@mixin sp {
+  @media screen and (max-width: $sp) {
+    @content;
+  }
+}
+
+@mixin dark {
+  @media screen and (prefers-color-scheme: dark) {
+    @content;
+  }
+}

client/src/views/NotFound.vue

@@ -4,10 +4,8 @@ import PageContainer from '@/components/PageContainer.vue'
 </script>
 
 <template>
-  <PageHeader title="Not Found"/>
-  <PageContainer>
-    お探しのページは見つかりませんでした
-  </PageContainer>
+  <PageHeader title="Not Found" />
+  <PageContainer> お探しのページは見つかりませんでした </PageContainer>
 </template>
 
 <style lang="scss" scoped></style>

client/src/views/TopPage.vue

@@ -1,13 +1,19 @@
 <script setup lang="ts">
 import PageHeader from '@/components/PageHeader.vue'
 import PageContainer from '@/components/PageContainer.vue'
+import SignUp from '@/components/SignUp.vue'
 </script>
 
 <template>
-  <PageHeader title="トップページ"/>
+  <PageHeader title="トップページ" />
   <PageContainer>
     このサイトは、予定管理を簡単に行うためのものです
+    <sign-up />
   </PageContainer>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+// * {
+//   color: $color-primary;
+// }
+</style>

client/vite.config.ts

@@ -2,8 +2,8 @@ import { fileURLToPath, URL } from 'node:url'
 
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import dns from "dns";
-dns.setDefaultResultOrder("ipv4first");
+import dns from 'dns'
+dns.setDefaultResultOrder('ipv4first')
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -20,5 +20,12 @@ export default defineConfig({
         changeOrigin: true
       }
     }
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "@/styles/color.scss";`
+      }
+    }
   }
 })