mod: page max-width, galgame page

KUN1007 · Oct 25, 2024 · 881911d · 881911d
1 parent 87d322e
commit 881911d
Show file tree

Hide file tree

Showing 27 changed files with 43 additions and 43 deletions.
diff --git 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
@@ -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>
+</style>
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,6 @@
 {
   "name": "kun-galgame-nuxt3",
-  "version": "2.19.13",
+  "version": "2.19.14",
   "packageManager": "[email protected]",
   "private": true,
   "scripts": {

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;