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:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user