Main page styling

.vitepress/config/en.ts

@@ -213,16 +213,16 @@ function getNav(): DefaultTheme.NavItem[] {
 		link: "/manuals/guides/getting-started/",
 		activeMatch: "/manuals/",
 	},
-	{
+/* 	{
 		text: "Desktop app",
 		link: "/desktop/",
 		activeMatch: "/desktop/",
-	},
-	{
+	}, */
+/* 	{
 		text: "News",
 		link: "/news/",
 		activeMatch: "/news/"
-	}
+	} */
   ]
 }
 

.vitepress/theme/components/Feature.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue';
+import type { DefaultTheme } from 'vitepress/theme'
+
 defineProps<{
+  image: DefaultTheme.ThemeableImage
   title: string
   details?: string
 }>()
@@ -7,23 +11,28 @@ defineProps<{
 
 <template>
   <div class="Feature">
-    <article class="box">
-      <h2 class="title" v-html="title"></h2>
-      <p v-if="details" class="details" v-html="details"></p>
-    </article>
+    <div class="box">
+      <h1 v-if="title" class="title">
+        <span v-html="title" class="clip"></span>
+      </h1>
+      <p v-if="details" class="details">
+        <p v-html="details"></p>
+      </p>
+      <div class="image">
+        <VPImage class="image-src" :image="image" />
+      </div>
+    </div>
   </div>
 </template>
 
 <style scoped>
 .Feature {
-  color: inherit;
   display: block;
   border: 4px solid var(--vp-c-brand-soft);
   border-radius: var(--vp-border-radius);
   height: 100%;
-  overflow-x: hidden;
   box-shadow: var(--vp-shadow-6);
-  transition: box-shadow .3s cubic-bezier(.22,.61,.36,1);
+  transition: border-color 0.25s, background-color 0.25s;
 }
 
 .box {
@@ -48,6 +57,11 @@ defineProps<{
   color: var(--vp-c-text-2);
 }
 
+.image {
+  margin-top: 24px;
+  margin-bottom: -24px;
+}
+
 .details:deep(a) {
   color: var(--vp-c-brand-1);
 }

.vitepress/theme/components/FeatureTitle.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="FeatureTitle">
+        <div class="container">
+            <p class="title">What Kotatsu can do?</p>
+            <h1 class="subtitle">And here's what it does!</h1>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+.FeatureTitle {
+  position: relative;
+  padding: 0 24px 24px 24px;
+}
+
+.container {
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+.title {
+  max-width: 392px;
+  line-height: 28px;
+  font-size: 24px;
+  font-weight: 500;
+  white-space: pre-wrap;
+}
+
+.subtitle {
+  padding-top: 8px;
+  max-width: 392px;
+  line-height: 28px;
+  font-size: 18px;
+  font-weight: 300;
+  white-space: pre-wrap;
+  color: var(--vp-c-text-2);
+}
+
+</style>

.vitepress/theme/components/Features.vue

@@ -5,7 +5,7 @@ import type { DefaultTheme } from 'vitepress/theme-without-fonts'
 import Feature from './Feature.vue'
 
 export interface Feature {
-  icon?: DefaultTheme.FeatureIcon
+  image?: DefaultTheme.ThemeableImage
   title: string
   details: string
   link?: string
@@ -44,7 +44,7 @@ const grid = computed(() => {
           :class="[grid]"
         >
           <Feature
-            :icon="feature.icon"
+            :image="feature.image"
             :title="feature.title"
             :details="feature.details"
             :link="feature.link"

.vitepress/theme/components/Home.vue

@@ -3,6 +3,7 @@ import { useData } from 'vitepress'
 
 import HomeHero from './HomeHero.vue'
 import Features from './Features.vue';
+import FeatureTitle from './FeatureTitle.vue';
 
 const { frontmatter: fm } = useData()
 </script>
@@ -11,6 +12,7 @@ const { frontmatter: fm } = useData()
   <template v-if="fm.main">
     <div class="container">
       <HomeHero :data="fm.main" />
+      <FeatureTitle />
       <Features :features="fm.main.features" />
     </div>
   </template>

.vitepress/theme/components/HomeHero.vue

@@ -1,5 +1,9 @@
 <script setup lang="ts">
+import { useQRCode } from '@vueuse/integrations/useQRCode'
+import type { DefaultTheme } from 'vitepress/theme'
+import VPImage from 'vitepress/dist/client/theme-default/components/VPImage.vue'
 import Button from './Button.vue'
+import { type Ref, inject } from 'vue'
 
 export interface HeroAction {
   theme?: 'brand' | 'alt'
@@ -8,6 +12,7 @@ export interface HeroAction {
 }
 
 export interface Data {
+  image?: DefaultTheme.ThemeableImage
   title: string
   text: string
   tagline: string
@@ -17,113 +22,291 @@ export interface Data {
 defineProps<{
   data: Data
 }>()
+
+const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
+const qrcode = useQRCode('https://github.com/KotatsuApp/Kotatsu/releases/latest')
 </script>
 
 <template>
-  <section id="hero">
-    <h1 class="title">
-      <span class="accent">{{ data.title }}</span>
-    </h1>
-    <p class="description">
-      {{ data.tagline }}
-    </p>
-    <p class="actions">
-      <p v-for="action in data.actions" :key="action.link" class="action">
-        <Button
-          tag="a"
-          :theme="action.theme"
-          :text="action.text"
-          :href="action.link"
-        />
-      </p>
-    </p>
-  </section>
+  <div class="VPHomeHero" :class="{ 'has-image': data.image || heroImageSlotExists }">
+    <div class="container">
+      <div class="main">
+        <slot name="home-hero-info">
+          <h1 v-if="data.title" class="title">
+            <span v-html="data.title" class="clip"></span>
+          </h1>
+          <p v-if="data.tagline" v-html="data.tagline" class="description"></p>
+        </slot>
+        <div v-if="data.actions" class="actions">
+          <p v-for="action in data.actions" :key="action.link" class="action">
+            <Button
+              tag="a"
+              :theme="action.theme"
+              :text="action.text"
+              :href="action.link"
+            />
+          </p>
+        </div>
+      </div>
+      <div v-if="data.image || heroImageSlotExists" class="image">
+        <div class="image-container">
+          <div class="image-bg" />
+          <slot name="image">
+            <VPImage class="image-src" :image="data.image" />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-
-section {
-  padding: 42px 32px;
+.VPHomeHero {
+  margin-top: calc((var(--vp-nav-height) + var(--var-layout-top-height, 0px)) * -1);
+  padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px;
 }
 
-#hero {
-  padding: 96px;
-  text-align: left;
+@media (min-width: 640px) {
+  .VPHomeHero {
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPHomeHero {
+    padding: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px;
+  }
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  max-width: 1152px;
+}
+
+@media (min-width: 960px) {
+  .container {
+    flex-direction: row;
+  }
+}
+
+.main {
+  position: relative;
+  z-index: 10;
+  order: 2;
+  flex-grow: 1;
+  flex-shrink: 0;
+}
+
+.VPHomeHero.has-image .container {
+  text-align: center;
+}
+
+@media (min-width: 960px) {
+  .VPHomeHero.has-image .container {
+    text-align: left;
+  }
+}
+
+@media (min-width: 960px) {
+  .main {
+    order: 1;
+    width: calc((100% / 3) * 2);
+  }
+
+  .VPHomeHero.has-image .main {
+    max-width: 592px;
+  }
 }
 
 .title {
   font-size: 48px;
-  line-height: 52px;
-  font-weight: 500;
-  max-width: 1340px;
-  margin: 0px auto;
+  letter-spacing: -0.4px;
+  line-height: 50px;
+  font-weight: 700;
+  max-width: 392px;
+  white-space: pre-wrap;
 }
 
-html:not(.dark) .accent,
-.dark .title {
-  background: -webkit-linear-gradient(315deg, var(--vp-c-brand-1) 10%, var(--vp-c-brand-3) 50%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+.VPHomeHero.has-image .title {
+  margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+  .title {
+    max-width: 576px;
+    line-height: 56px;
+    font-size: 48px;
+  }
+}
+
+@media (min-width: 960px) {
+  .title {
+    line-height: 64px;
+    font-size: 56px;
+  }
+
+  .VPHomeHero.has-image .title {
+    margin: 1.5rem 0;
+  }
 }
 
 .description {
-  max-width: 576px;
-  line-height: 1.5;
-  color: var(--vt-c-text-2);
-  transition: color 0.5s;
-  font-size: 17px;
-  margin: 24px 0;
+  padding-top: 8px;
+  max-width: 392px;
+  line-height: 28px;
+  font-size: 18px;
+  font-weight: 500;
+  white-space: pre-wrap;
+  color: var(--vp-c-text-2);
+}
+
+.VPHomeHero.has-image .description {
+  margin: 0 auto;
+}
+
+@media (min-width: 640px) {
+  .description {
+    padding-top: 12px;
+    max-width: 576px;
+    line-height: 32px;
+    font-size: 20px;
+  }
+}
+
+@media (min-width: 960px) {
+  .description {
+    line-height: 36px;
+    font-size: 24px;
+        max-width: 576px;
+  }
+
+  .VPHomeHero.has-image .description {
+    margin: 0;
+  }
 }
 
 .actions {
   display: flex;
   flex-wrap: wrap;
-  justify-content: left;
+  padding-top: 24px;
   margin: -6px;
 }
 
+.VPHomeHero.has-image .actions {
+  justify-content: center;
+}
+
+@media (min-width: 640px) {
+  .actions {
+    padding-top: 32px;
+  }
+}
+
+@media (min-width: 960px) {
+  .VPHomeHero.has-image .actions {
+    justify-content: flex-start;
+  }
+}
+
 .action {
   flex-shrink: 0;
   padding: 6px;
 }
 
-@media (max-width: 1340px) {
-  .tagline {
-    font-size: 64px;
-    letter-spacing: -0.5px;
+.image {
+  order: 1;
+  margin: -76px -24px -48px;
+}
+
+@media (min-width: 640px) {
+  .image {
+    margin: -108px -24px -48px;
   }
 }
 
-@media (max-width: 768px) {
-  #hero {
-    padding: 48px;
-  }
-  .tagline {
-    font-size: 48px;
-    letter-spacing: -0.5px;
+@media (min-width: 960px) {
+  .image {
+    flex-grow: 1;
+    order: 2;
+    margin: 0;
+    min-height: 100%;
   }
 }
 
-@media (max-width: 576px) {
-  #hero {
-    padding: 56px 32px;
-  }
-  .description {
-    font-size: 16px;
-    margin: 18px 0 30px;
-  }
-  #highlights h3 {
-    margin-bottom: 0.6em;
-  }
-  #highlights .vt-box {
-    padding: 20px 36px;
+.image-container {
+  position: relative;
+  margin: 0 auto;
+  width: 320px;
+  height: 320px;
+}
+
+@media (min-width: 640px) {
+  .image-container {
+    width: 392px;
+    height: 392px;
   }
 }
 
-@media (max-width: 370px) {
-  .tagline {
-    font-size: 36px;
+@media (min-width: 960px) {
+  .image-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.image-bg {
+  position: absolute;
+  top: 50%;
+  /*rtl:ignore*/
+  left: 50%;
+  border-radius: 50%;
+  width: 192px;
+  height: 192px;
+  background-image: var(--vp-home-hero-image-background-image);
+  filter: var(--vp-home-hero-image-filter);
+  /*rtl:ignore*/
+  transform: translate(-50%, -50%);
+}
+
+@media (min-width: 640px) {
+  .image-bg {
+    width: 256px;
+    height: 256px;
+  }
+}
+
+@media (min-width: 960px) {
+  .image-bg {
+    width: 320px;
+    height: 320px;
+  }
+}
+
+:deep(.image-src) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  max-width: 192px;
+  max-height: 192px;
+  transform: translate(-50%, -50%);
+}
+
+@media (min-width: 640px) {
+  :deep(.image-src) {
+    max-width: 256px;
+    max-height: 256px;
+  }
+}
+
+@media (min-width: 960px) {
+  :deep(.image-src) {
+    max-width: 320px;
+    max-height: 320px;
   }
 }
 </style>

.vitepress/theme/styles/global.css

@@ -7,16 +7,21 @@
   
     --vp-c-gray-1: #f7f7f7;
   
-    --vp-c-blue-1: #0059C8;
+    --vp-c-blue-1: #0059c8;
     --vp-c-blue-2: #0152b6;
     --vp-c-blue-3: #0764d4;
-    --vp-c-blue-soft: #005ac80e;
+    --vp-c-blue-soft: #0059c80e;
+
+    --vp-c-accent-1: #575e71;
+    --vp-c-accent-2: #4b5061;
+    --vp-c-accent-3: #4b5164;
+    --vp-c-accent-soft: #575e710e;
   
     --vp-c-brand-1: var(--vp-c-blue-1);
     --vp-c-brand-2: var(--vp-c-blue-2);
     --vp-c-brand-3: var(--vp-c-blue-3);
     --vp-c-brand-soft: var(--vp-c-blue-soft);
-  
+
     --vp-c-sponsor-1: #eab11f;
     --vp-c-sponsor-2: #e0a615;
     --vp-c-sponsor-3: #ecb732;
@@ -60,8 +65,8 @@
     --vp-local-search-footer-shadow: 0 -1px 0 0 #e0e3e8, 0 -3px 6px 0 rgba(69, 98, 155, .12);
 
     --vp-home-hero-name-color: transparent;
-	  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand) 30%, var(--vp-c-brand-dark));
-	  --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-light) 50%, var(--vp-c-brand-lighter) 50%);
+/* 	  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand-1) 30%, var(--vp-c-brand-dark));
+	  --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-accent-1) 50%, var(--vp-c-brand-1) 50%); */
 	  --vp-home-hero-image-filter: blur(40px);
   }
   
@@ -77,10 +82,13 @@
     --vp-c-blue-1: #7da1e9;
     --vp-c-blue-2: #6382c2;
     --vp-c-blue-3: #86a2da;
+    --vp-c-accent-1: #bec6dc;
+    --vp-c-accent-2: #a0a7bd;
+    --vp-c-accent-3: #b2b8c9;
     --vp-local-search-result-bg: var(--vp-c-bg-soft-mute);
     --vp-local-search-result-shadow: none;
     --vp-local-search-footer-shadow: none;
-    --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-brand-darker) 25%, var(--vp-c-brand-darkest) 25%);
+/*     --vp-home-hero-image-background-image: linear-gradient(-45deg, var(--vp-c-accent-1) 25%, var(--vp-c-brand-1) 25%); */
   }
 
   @media (min-width: 640px) {