Initial commit

rubykansai · Feb 5, 2025 · c7202df · c7202df
1 parent 2abc82e
commit c7202df
Show file tree

Hide file tree

Showing 9 changed files with 171 additions and 27 deletions.
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <v-app-bar :elevation="0">
+      <v-app-bar-nav-icon class="d-flex d-sm-none" variant="text" @click.stop="drawer = !drawer" />
+      <template #append>
+        <NuxtLink v-for="(page, index) in pages" :key="index" class="d-none d-sm-block" :to="page.to">
+          <v-btn>{{ page.title }}</v-btn>
+        </NuxtLink>
+      </template>
+    </v-app-bar>
+    <v-navigation-drawer v-model="drawer">
+      <v-list>
+        <NuxtLink v-for="(page, index) in pages" :key="index" :to="page.to">
+          <v-list-item>{{ page.title }}</v-list-item>
+        </NuxtLink>
+      </v-list>
+    </v-navigation-drawer>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    drawer: false,
+    pages: [
+      { title: 'HOME', to: '/' },
+      { title: 'VENUE', to: 'https://www.kamogawa-odori.com/kaburenjou/' },
+    ],
+  }),
+}
+</script>
+
+<style scoped>
+.v-toolbar {
+  background: transparent !important;
+  border-bottom: #fff solid 1px !important;
+}
+
+.v-navigation-drawer {
+  background-color: #700002 !important;
+}
+
+.v-list-item, a {
+  font-family: 'Kumbh Sans', serif;
+  text-decoration: none;
+  color: #fff;
+}
+
+button {
+  font-family: 'Kumbh Sans', serif;
+  color: #fff;
+}
+
+</style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -25,6 +25,14 @@ export default defineNuxtConfig({
       },
     },
   },
+
+  components: [
+    {
+      path: '~/components',
+      pathPrefix: false,
+    },
+  ],
+
   app: {
     head: {
       title: '関西Ruby会議08',
@@ -34,21 +42,21 @@ export default defineNuxtConfig({
         { name: 'description', content: '関西Ruby会議は、関西で定期的に開催しているRubyプログラミング言語に関するカンファレンスです。Rubyに関する知見・技術を共有し、またRubyistの交流の場として、皆様に楽しんでいただけるカンファレンスを目指しています。' },
         { property: 'og:type', content: 'website' },
         { property: 'og:site_name', content: '関西Ruby会議08' },
-        // { property: 'og:image', content: 'https://rubykansai.github.io/kansai08/ogp.png' },
+        { property: 'og:image', content: 'https://rubykansai.github.io/kansai08/ogp.jpg' },
         { property: 'og:description', content: '関西Ruby会議は、関西で定期的に開催しているRubyプログラミング言語に関するカンファレンスです。Rubyに関する知見・技術を共有し、またRubyistの交流の場として、皆様に楽しんでいただけるカンファレンスを目指しています。' },
         { property: 'og:url', content: 'https://regional.rubykaigi.org/kansai08/' },
         { property: 'og:title', content: '関西Ruby会議08' },
         { name: 'twitter:title', content: '関西Ruby会議08' },
         { name: 'twitter:card', content: 'summary_large_image' },
         { name: 'twitter:site', content: '@rubykansai' },
-        // { name: 'twitter:image', content: 'https://rubykansai.github.io/kansai08/ogp.png' },
+        { name: 'twitter:image', content: 'https://rubykansai.github.io/kansai08/ogp.jpg' },
         { name: 'twitter:description', content: '関西Ruby会議は、関西で定期的に開催しているRubyプログラミング言語に関するカンファレンスです。Rubyに関する知見・技術を共有し、またRubyistの交流の場として、皆様に楽しんでいただけるカンファレンスを目指しています。' },
       ],
       link: [
         { rel: 'icon', type: 'image/x-icon', href: '/kansai08/favicon.ico' },
         {
           rel: 'stylesheet',
-          href: 'https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap',
+          href: 'https://fonts.googleapis.com/css2?family=Kumbh+Sans:[email protected]&family=Zen+Old+Mincho&display=swap',
           crossorigin: '',
         },
       ],
@@ -59,4 +67,6 @@ export default defineNuxtConfig({
     },
     baseURL: '/kansai08/',
   },
-})
+
+  compatibilityDate: '2025-02-05',
+})
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,38 +1,78 @@
 <template>
-  <div class="fill-height">
-    <v-row align-content="center fill-height">
-      <v-col align="center">
+  <v-app class="fill-height">
+    <AppHeader />
+    <v-row>
+    <v-img src="/lbottom.png" width="20vw" class="corner left-bottom"/>
+    <v-img src="/ltop.png" width="45vw" class="corner left-top"/>
+    <v-img src="/rbottom.png" width="10vw" class="corner right-bottom"/>
+    <v-img src="/rtop.png" width="15vw" class="corner right-top"/>
+      <v-col align="center" class="d-flex justify-center align-center">
         <v-card
-          :variant="flat"
           min-width="100vw"
-          class="text-center py-10"
+          class="py-16"
+          :elevation="0"
         >
-          <v-card-item class="my-10">
-            <div>
-              <div class="text-h2 mb-15">
-                関西Ruby会議08 / KansaiRubyKaigi08
-              </div>
-              <div class="text-h4 mb-5">
-                日時:2025年6月28日(土)
-              </div>
-              <div class="text-h4 mb-10">場所:<a href="https://www.kamogawa-odori.com/kaburenjou/">先斗町歌舞練場</a></div>
-              <div class="mb-10">
-                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3267.944713344888!2d135.7686033758716!3d35.00808906665747!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x600108eb55955555%3A0x72d899efcbcaca3f!2z5YWI5paX55S6IOatjOiInue3tOWgtA!5e0!3m2!1sja!2sjp!4v1736554814030!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
-              </div>
+          <v-card-item class="justify-center">
+            <v-img src="/logo.svg" width="50vh" class="mb-10"/>
+            <div class="text-h5 title">
+              2025.6.28 <span class="text-h6 title">(Sat)</span>　
+              <a class="text-h6 title" href="https://www.kamogawa-odori.com/kaburenjou/">
+                @先斗町歌舞練場
+              </a>
             </div>
-            <a href="https://twitter.com/rubykansai">
-              続報をお待ち下さい
-            </a>
           </v-card-item>
         </v-card>
       </v-col>
     </v-row>
-  </div>
+  </v-app>
 </template>
 
 <style scoped>
 * {
-  font-family: "Yuji Syuku", serif;
-  font-style: normal;
+  color: #fff;
+  box-sizing: border-box;
+}
+
+.v-application, .v-card {
+  background-color: #700002 !important;
+  position: relative;
+  z-index: 1;
+}
+
+.v-row {
+  margin: 0 !important;
+}
+
+.title {
+  font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
+}
+
+.title a {
+  text-decoration: none;
+}
+
+.corner {
+  position: absolute;
+  z-index: 10;
+}
+
+.left-top {
+  top: 0px;
+  left: 0px;
+}
+
+.right-top {
+  top: 0px;
+  right: 10%;
+}
+
+.left-bottom {
+  bottom: 0px;
+  left: 30%;
+}
+
+.right-bottom {
+  bottom: 5%;
+  right: 0px;
 }
 </style>
diff --git a/public/lbottom.png b/public/lbottom.png