1
0
mirror of https://github.com/sendevia/website.git synced 2026-03-05 23:32:45 +08:00

feat: improve responsive grid layout across components

This commit is contained in:
2025-10-27 16:37:40 +08:00
parent f87d7efcc9
commit ec8cf6628a
5 changed files with 64 additions and 11 deletions

View File

@@ -37,11 +37,11 @@ const siteVersion = theme.value.siteVersion;
</footer>
</template>
<style lang="scss">
<style lang="scss" scoped>
@use "sass:meta";
@use "../styles/mixin";
.main-layout-footer {
footer {
display: flex;
align-items: flex-start;
flex-direction: column;
@@ -124,17 +124,26 @@ const siteVersion = theme.value.siteVersion;
}
@media screen and (max-width: 1600px) {
footer {
grid-column: span 12;
}
}
@media screen and (max-width: 1200px) {
.main-layout-footer {
footer {
grid-column: span 8;
}
}
@media screen and (max-width: 840px) {
footer {
grid-column: span 6;
}
}
@media screen and (max-width: 600px) {
footer {
grid-column: span 4;
}
}
</style>

View File

@@ -43,12 +43,12 @@ if (typeof window !== "undefined") {
</header>
</template>
<style lang="scss">
<style lang="scss" scoped>
@use "sass:meta";
@use "../styles/mixin";
header {
grid-column: 1 / 13;
grid-column: span 12;
position: relative;
@@ -159,6 +159,9 @@ header {
}
@media screen and (max-width: 1600px) {
header {
grid-column: span 12;
}
}
@media screen and (max-width: 1200px) {
@@ -169,8 +172,6 @@ header {
min-height: 360px;
#header-hero-container {
grid-column: span 2;
padding: 5vw;
#header-hero-headline {
@@ -186,6 +187,8 @@ header {
@media screen and (max-width: 840px) {
header {
grid-column: span 6;
#header-hero-container {
width: 100%;
@@ -202,6 +205,8 @@ header {
@media screen and (max-width: 600px) {
header {
grid-column: span 4;
#header-hero-container {
padding: 30px;

View File

@@ -56,13 +56,13 @@ if (typeof window !== "undefined") {
</div>
</template>
<style scoped lang="scss">
<style lang="scss" scoped>
@use "../styles/mixin";
#layout-scrolltop {
display: flex;
align-items: center;
grid-column: 11/13;
grid-column: 10 / 13;
justify-content: center;
position: sticky;
@@ -111,6 +111,9 @@ if (typeof window !== "undefined") {
}
@media screen and (max-width: 1600px) {
#layout-scrolltop {
grid-column: 10 / 13;
}
}
@media screen and (max-width: 1200px) {
@@ -120,8 +123,14 @@ if (typeof window !== "undefined") {
}
@media screen and (max-width: 840px) {
#layout-scrolltop {
grid-column: 6 / 7;
}
}
@media screen and (max-width: 600px) {
#layout-scrolltop {
grid-column: 4 / 5;
}
}
</style>

View File

@@ -467,7 +467,8 @@ height: 54px;
h5,
h6 {
margin-block-start: 18px;
padding-block-end: 36px;
padding-block-end: 12px;
padding-inline: 24px;
line-height: 54px;
@@ -725,7 +726,7 @@ padding-block: 0px;
}
&#article-indicator {
grid-column: 11 / 13;
grid-column: 10 / 13;
position: sticky;
top: 120px;
@@ -733,6 +734,15 @@ padding-block: 0px;
}
@media screen and (max-width: 1600px) {
section {
&#article-content {
grid-column: 1 / 10;
}
&#article-indicator {
grid-column: 10 / 13;
}
}
}
@media screen and (max-width: 1200px) {
@@ -748,8 +758,26 @@ padding-block: 0px;
}
@media screen and (max-width: 840px) {
section {
&#article-content {
grid-column: 1 / 7;
}
&#article-indicator {
grid-column: 5 / 7;
}
}
}
@media screen and (max-width: 600px) {
section {
&#article-content {
grid-column: 1 / 5;
}
&#article-indicator {
grid-column: 3 / 5;
}
}
}
</style>

View File

@@ -220,6 +220,8 @@ if (typeof window !== "undefined") {
@media screen and (max-width: 1600px) {
#layout #layout-content-flow {
grid-template-columns: repeat(12, minmax(60px, 72px));
padding-inline: 12px;
}
}