From 881911deebeeffad8dc2a7acc51c0ce63966ef60 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyuyukunkunkun@gmail.com>
Date: Fri, 25 Oct 2024 16:27:01 +0800
Subject: [PATCH] mod: page max-width, galgame page

---
 assets/css/theme/color.scss           |  4 ++++
 components/galgame/card/Card.vue      | 25 ++++++++++++++-----------
 components/galgame/card/Container.vue |  9 +--------
 components/pool/Container.vue         |  2 +-
 components/report/Report.vue          |  2 +-
 error.vue                             |  2 +-
 layouts/message.vue                   |  2 +-
 package.json                          |  2 +-
 pages/category/index.vue              |  2 +-
 pages/donate/index.vue                |  2 +-
 pages/edit/galgame/index.vue          |  2 +-
 pages/edit/topic/index.vue            |  2 +-
 pages/friend-links/index.vue          |  2 +-
 pages/galgame/[gid]/index.vue         |  2 +-
 pages/galgame/index.vue               |  2 +-
 pages/index.vue                       |  2 +-
 pages/kungalgame/index.vue            |  2 +-
 pages/kungalgamer/[uid].vue           |  2 +-
 pages/login/index.vue                 |  2 +-
 pages/ranking/index.vue               |  2 +-
 pages/register/index.vue              |  2 +-
 pages/search/index.vue                |  2 +-
 pages/section/[section]/index.vue     |  2 +-
 pages/technique/index.vue             |  2 +-
 pages/thanks-list/index.vue           |  2 +-
 pages/topic/[tid]/index.vue           |  2 +-
 pages/update-log/index.vue            |  2 +-
 27 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/assets/css/theme/color.scss b/assets/css/theme/color.scss
index 24328f05..4b5a13e3 100644
--- a/assets/css/theme/color.scss
+++ b/assets/css/theme/color.scss
@@ -1,4 +1,7 @@
 html {
+  --kungalgame-white-solid: #fff;
+  --kungalgame-black-solid: #000;
+
   --kungalgame-gray-4: #bcc8d4;
 
   --kungalgame-blue-2: #80ccff;
@@ -21,6 +24,7 @@ html {
   --kungalgame-pink-4: #e85aad;
 
   --kungalgame-shadow-color: hsla(0, 0%, 0%, 0.05);
+  --kungalgame-trans-gray: rgba(255, 255, 255, 0.2);
 
   --kungalgame-trans-blue-3: #54aeff77;
   --kungalgame-trans-blue-4: #218bff77;
diff --git a/components/galgame/card/Card.vue b/components/galgame/card/Card.vue
index 3f721631..e6161dbb 100644
--- a/components/galgame/card/Card.vue
+++ b/components/galgame/card/Card.vue
@@ -75,7 +75,7 @@ defineProps<{
 <style lang="scss" scoped>
 .grid-card {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
   gap: 10px;
 }
 
@@ -86,7 +86,8 @@ defineProps<{
   color: var(--kungalgame-font-color-3);
   border-radius: 8px;
   box-shadow: var(--shadow);
-  border: 1px solid var(--kungalgame-blue-3);
+  overflow: hidden;
+  @include kun-blur;
 }
 
 .banner {
@@ -134,15 +135,12 @@ defineProps<{
     left: 0;
     right: 0;
     padding: 8px 8px;
-    background: linear-gradient(
-      transparent,
-      rgba(0, 0, 0, 0.7)
-    );
-    color: white;
+    background: linear-gradient(transparent, var(--kungalgame-mask-color-0));
+    color: var(--kungalgame-white-solid);
     display: flex;
     justify-content: space-between;
     align-items: flex-end;
-    font-size: x-small;
+    font-size: small;
 
     .data {
       display: flex;
@@ -158,10 +156,10 @@ defineProps<{
     .language {
       display: flex;
       gap: 8px;
-      
+
       span {
         padding: 2px 4px;
-        background: rgba(255, 255, 255, 0.2);
+        background: var(rgba(255, 255, 255, 0.2));
         border-radius: 4px;
       }
     }
@@ -180,6 +178,11 @@ defineProps<{
   color: var(--kungalgame-blue-5);
   font-weight: bold;
   margin: 7px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 
 .publisher {
@@ -202,4 +205,4 @@ defineProps<{
     gap: 7px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/galgame/card/Container.vue b/components/galgame/card/Container.vue
index 4f73473d..4792f090 100644
--- a/components/galgame/card/Container.vue
+++ b/components/galgame/card/Container.vue
@@ -31,15 +31,9 @@ const { data, status } = await useFetch(`/api/galgame`, {
 </template>
 
 <style lang="scss" scoped>
-.container {
-  padding: 17px;
-
-  @include kun-blur;
-}
-
 .declaration {
   user-select: none;
-  margin-top: 17px;
+  margin-top: 16px;
   text-align: center;
   font-size: small;
   color: var(--kungalgame-font-color-0);
@@ -48,7 +42,6 @@ const { data, status } = await useFetch(`/api/galgame`, {
 @media (max-width: 700px) {
   .container {
     margin: 0 5px;
-    padding: 17px 10px;
   }
 }
 </style>
diff --git a/components/pool/Container.vue b/components/pool/Container.vue
index ea567289..c6bf6e96 100644
--- a/components/pool/Container.vue
+++ b/components/pool/Container.vue
@@ -107,7 +107,7 @@ onUnmounted(() => {
 .pool {
   display: flex;
   flex-direction: column;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   padding: 0 10px;
 }
diff --git a/components/report/Report.vue b/components/report/Report.vue
index 9f7427fa..9e8d607a 100644
--- a/components/report/Report.vue
+++ b/components/report/Report.vue
@@ -91,7 +91,7 @@ const handleSubmitReport = async () => {
 <style lang="scss" scoped>
 .container {
   width: 100%;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   padding: 20px 20px 60px;
 
diff --git a/error.vue b/error.vue
index 5a2f69e2..5c00e3bf 100644
--- a/error.vue
+++ b/error.vue
@@ -42,7 +42,7 @@ const handleError = async () => {
   flex-direction: column;
   height: 100%;
   min-height: calc(100dvh - 75px);
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
 }
 
diff --git a/layouts/message.vue b/layouts/message.vue
index 54eb3faa..daf858f2 100644
--- a/layouts/message.vue
+++ b/layouts/message.vue
@@ -45,7 +45,7 @@ const isShowContent = computed(() => {
   border-radius: 10px;
   height: calc(100dvh - 75px);
   transition: width 0.2s;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: auto;
   display: flex;
 }
diff --git a/package.json b/package.json
index 5a293145..57fff17a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kun-galgame-nuxt3",
-  "version": "2.19.13",
+  "version": "2.19.14",
   "packageManager": "pnpm@9.12.1",
   "private": true,
   "scripts": {
diff --git a/pages/category/index.vue b/pages/category/index.vue
index 088b6248..7e37d6e0 100644
--- a/pages/category/index.vue
+++ b/pages/category/index.vue
@@ -23,7 +23,7 @@ useHead({
   display: flex;
   flex-direction: column;
   height: 100%;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   color: var(--kungalgame-font-color-3);
 }
diff --git a/pages/donate/index.vue b/pages/donate/index.vue
index 60443cb5..f3a38ff4 100644
--- a/pages/donate/index.vue
+++ b/pages/donate/index.vue
@@ -72,7 +72,7 @@ const isShowOR = ref(false)
 <style lang="scss" scoped>
 .root {
   height: calc(100vh - 75px);
-  max-width: 64rem;
+  max-width: 80rem;
   min-width: 500px;
   min-height: 500px;
   margin: 0 auto;
diff --git a/pages/edit/galgame/index.vue b/pages/edit/galgame/index.vue
index ccb7e98b..be4cafe5 100644
--- a/pages/edit/galgame/index.vue
+++ b/pages/edit/galgame/index.vue
@@ -19,7 +19,7 @@ const type = useRequestURL().searchParams.get('type')
   flex-direction: column;
   height: 100%;
   min-height: calc(100dvh - 75px);
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   color: var(--kungalgame-font-color-3);
 }
diff --git a/pages/edit/topic/index.vue b/pages/edit/topic/index.vue
index 91555c28..73cabc80 100644
--- a/pages/edit/topic/index.vue
+++ b/pages/edit/topic/index.vue
@@ -65,7 +65,7 @@ onBeforeRouteLeave(async (_, __, next) => {
 .container {
   position: relative;
   width: 100%;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
 
   @include kun-blur;
diff --git a/pages/friend-links/index.vue b/pages/friend-links/index.vue
index 3f7fcc4f..621a8d9f 100644
--- a/pages/friend-links/index.vue
+++ b/pages/friend-links/index.vue
@@ -31,7 +31,7 @@ useHead({
   display: flex;
   flex-direction: column;
   height: 100%;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   padding: 17px;
 
diff --git a/pages/galgame/[gid]/index.vue b/pages/galgame/[gid]/index.vue
index e8016b34..a6df87f9 100644
--- a/pages/galgame/[gid]/index.vue
+++ b/pages/galgame/[gid]/index.vue
@@ -122,7 +122,7 @@ if (galgame.value) {
   display: flex;
   flex-direction: column;
   height: 100%;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   padding: 17px;
 
diff --git a/pages/galgame/index.vue b/pages/galgame/index.vue
index f1744509..807fab9d 100644
--- a/pages/galgame/index.vue
+++ b/pages/galgame/index.vue
@@ -25,7 +25,7 @@ useHead({
   display: flex;
   flex-direction: column;
   height: 100%;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   color: var(--kungalgame-font-color-3);
 }
diff --git a/pages/index.vue b/pages/index.vue
index 11223e35..8c7ea1a4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -90,7 +90,7 @@ useHead({
   flex-direction: column;
   height: 100%;
   min-height: calc(100dvh - 75px);
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   padding: 17px;
 
diff --git a/pages/kungalgame/index.vue b/pages/kungalgame/index.vue
index 16053437..775473e3 100644
--- a/pages/kungalgame/index.vue
+++ b/pages/kungalgame/index.vue
@@ -32,7 +32,7 @@ useHead({
   border-radius: 7px;
   height: calc(100dvh - 75px);
   transition: width 0.2s;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: auto;
   display: flex;
 }
diff --git a/pages/kungalgamer/[uid].vue b/pages/kungalgamer/[uid].vue
index 9e311a66..5cc8f392 100644
--- a/pages/kungalgamer/[uid].vue
+++ b/pages/kungalgamer/[uid].vue
@@ -84,7 +84,7 @@ useHead({
 .root {
   margin: 0 auto;
   min-height: 800px;
-  max-width: 64rem;
+  max-width: 80rem;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/pages/login/index.vue b/pages/login/index.vue
index 15b6dcba..6aa4a86e 100644
--- a/pages/login/index.vue
+++ b/pages/login/index.vue
@@ -25,7 +25,7 @@ useHead({
   flex-direction: column;
   height: 100%;
   min-height: calc(100dvh - 75px);
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   @include kun-center;
 }
diff --git a/pages/ranking/index.vue b/pages/ranking/index.vue
index 4a09a163..a3611072 100644
--- a/pages/ranking/index.vue
+++ b/pages/ranking/index.vue
@@ -34,7 +34,7 @@ useHead({
 .article {
   max-height: calc(100dvh - 100px);
   width: 100%;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: auto;
   display: flex;
   padding: 10px;
diff --git a/pages/register/index.vue b/pages/register/index.vue
index a3097994..89adf2d8 100644
--- a/pages/register/index.vue
+++ b/pages/register/index.vue
@@ -25,7 +25,7 @@ useHead({
   flex-direction: column;
   height: 100%;
   min-height: calc(100dvh - 75px);
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   @include kun-center;
 }
diff --git a/pages/search/index.vue b/pages/search/index.vue
index 1028dac4..7ce3b3fe 100644
--- a/pages/search/index.vue
+++ b/pages/search/index.vue
@@ -24,7 +24,7 @@ useHead({
   flex-direction: column;
   height: 100%;
   min-height: calc(100dvh - 75px);
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   color: var(--kungalgame-font-color-3);
   padding: 17px;
diff --git a/pages/section/[section]/index.vue b/pages/section/[section]/index.vue
index ae6b1039..725b9e1a 100644
--- a/pages/section/[section]/index.vue
+++ b/pages/section/[section]/index.vue
@@ -39,7 +39,7 @@ useHead({
   flex-direction: column;
   height: 100%;
   min-height: calc(100dvh - 75px);
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
 
   @include kun-blur;
diff --git a/pages/technique/index.vue b/pages/technique/index.vue
index c84c29fc..70c65496 100644
--- a/pages/technique/index.vue
+++ b/pages/technique/index.vue
@@ -35,7 +35,7 @@ useHead({
   height: 100%;
   transition: width 0.2s;
   width: 100%;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
diff --git a/pages/thanks-list/index.vue b/pages/thanks-list/index.vue
index 5f66fb67..ef22d987 100644
--- a/pages/thanks-list/index.vue
+++ b/pages/thanks-list/index.vue
@@ -37,7 +37,7 @@ useHead({
 
 .container {
   width: 100%;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   position: relative;
   display: flex;
diff --git a/pages/topic/[tid]/index.vue b/pages/topic/[tid]/index.vue
index f07bd5d3..848d173f 100644
--- a/pages/topic/[tid]/index.vue
+++ b/pages/topic/[tid]/index.vue
@@ -143,7 +143,7 @@ if (data) {
   display: flex;
   flex-direction: column;
   height: 100%;
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   color: var(--kungalgame-font-color-3);
 }
diff --git a/pages/update-log/index.vue b/pages/update-log/index.vue
index d353c123..a1701ac8 100644
--- a/pages/update-log/index.vue
+++ b/pages/update-log/index.vue
@@ -36,7 +36,7 @@ useHead({
   flex-direction: column;
   height: 100%;
   min-height: calc(100dvh - 75px);
-  max-width: 64rem;
+  max-width: 80rem;
   margin: 0 auto;
   padding: 10px;
   overflow-y: scroll;