sendevia/website
1
0
Fork 0
mirror of https://github.com/sendevia/website.git synced 2026-03-06 07:40:50 +08:00
Code Activity

feat: improve responsive layout for large screen sizes

Browse Source
This commit is contained in:
sendevia
2025-10-25 15:36:35 +08:00
parent 18738baaf8
commit 565073574a
4 changed files with 47 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
.vitepress/theme/components/Footer.vue
View File

@@ -122,4 +122,19 @@ const siteVersion = theme.value.siteVersion;
justify-content: flex-end;
}
}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1200px) {
.main-layout-footer {
grid-column: span 8;
}
}
@media screen and (max-width: 840px) {
}
@media screen and (max-width: 600px) {
}
</style>

17
.vitepress/theme/components/Header.vue
View File

@@ -156,8 +156,15 @@ header {
}
}
}
}
@media screen and (max-width: 1600px) {
}
@media screen and (max-width: 1200px) {
header {
grid-column: span 8;
@media screen and (max-width: 1200px) {
height: 45vh;
min-height: 360px;
@@ -175,8 +182,10 @@ header {
}
}
}
}
@media screen and (max-width: 840px) {
@media screen and (max-width: 840px) {
header {
#header-hero-container {
width: 100%;
@@ -189,8 +198,10 @@ header {
}
}
}
}
@media screen and (max-width: 600px) {
@media screen and (max-width: 600px) {
header {
#header-hero-container {
padding: 30px;

9
.vitepress/theme/layouts/Article.vue
View File

@@ -596,6 +596,15 @@ span.lang {
}
@media screen and (max-width: 1200px) {
section {
&#article-content {
grid-column: 1 / 7;
}
&#article-indicator {
grid-column: 7 / 9;
}
}
}
@media screen and (max-width: 840px) {

62
.vitepress/theme/layouts/Default.vue
View File

@@ -157,14 +157,14 @@ if (typeof window !== "undefined") {
align-content: space-between;
align-items: start;
gap: 24px;
grid-column: 3;
grid-template-columns: repeat(12, minmax(72px, 100vw));
grid-column: 2;
grid-template-columns: repeat(12, minmax(60px, 72px));
justify-content: center;
position: relative;
padding-block-end: 68px;
padding-inline: 20vw;
padding-block-start: 12px;
width: 100%;
@@ -219,82 +219,38 @@ if (typeof window !== "undefined") {
}
@media screen and (max-width: 1600px) {
$columns: 9;
#layout #layout-content-flow {
grid-template-columns: repeat($columns, 1fr);
padding-inline: 6vw;
#layout-content-filler {
grid-column: span $columns;
grid-template-columns: minmax(50vw, 70%) minmax(300px, 30%);
}
hr {
grid-column: span $columns;
}
padding-inline: 12px;
}
}
@media screen and (max-width: 1200px) {
$columns: 6;
#layout #layout-content-flow {
grid-template-columns: repeat($columns, 1fr);
grid-template-columns: repeat(8, 1fr);
padding-inline: 24px;
#layout-content-filler {
grid-column: span $columns;
grid-template-columns: auto;
}
hr {
grid-column: span $columns;
}
width: 100%;
}
}
@media screen and (max-width: 840px) {
$columns: 4;
#layout {
grid-template-columns: 0px auto;
grid-template-rows: auto 80px;
#layout-content-flow {
grid-template-columns: repeat($columns, 1fr);
grid-template-columns: repeat(6, 1fr);
padding-block: 64px;
padding-inline: 42px;
#layout-content-filler {
grid-column: span $columns;
}
#layout-scrolltop {
grid-column: $columns;
bottom: 0px;
}
hr {
grid-column: span $columns;
}
}
}
}
@media screen and (max-width: 600px) {
$columns: 4;
#layout #layout-content-flow {
padding-inline: 12px;
grid-template-columns: repeat(4, 1fr);
#layout-content-filler [role="doc-endnotes"]ol {
margin-inline: 0px;
padding-inline: 0px;
}
padding-inline: 12px;
}
}
</style>