Adjust main content paddings on large screen sizes

This commit is contained in:
Helen Chong 2024-05-10 13:54:48 +08:00
parent d0a5ecdb96
commit d2ae15bd1e
3 changed files with 11 additions and 19 deletions

View File

@ -37,6 +37,7 @@
--ff-primary: 'Noto Sans';
--sz-paragraph-margin: 1.15em;
--sz-main-padding: clamp(1rem, 5%, 4rem);
}
/* ------------------- */
@ -291,11 +292,11 @@ main {
.article,
.content:not(.content--divided),
.content__section {
padding: 1.5rem clamp(1rem, 5%, 3rem);
padding: 1.5rem var(--sz-main-padding);
}
.main__header {
padding: 2.5rem clamp(1rem, 5%, 3rem);
padding: 2.5rem var(--sz-main-padding);
text-align: center;
display: grid;
}
@ -332,8 +333,9 @@ main {
/* Desktop main content layout */
@media only screen and (min-width: 60rem) {
.content__wrapper {
padding: 0 var(--sz-main-padding);
grid-template-areas: 'leftbar article rightbar';
grid-template-columns: minmax(0, 15rem) minmax(0, 2.5fr) minmax(0, 15rem);
grid-template-columns: minmax(0, 20%) minmax(0, 2.5fr) minmax(0, 20%);
}
.article,
@ -350,12 +352,6 @@ main {
}
}
@media only screen and (min-width: 80rem) {
.content__wrapper {
max-width: 80rem;
}
}
/* HEADING WRAPPER AND ANCHOR */
.heading-wrapper {
display: flex;

View File

@ -4,7 +4,7 @@
<subtitle>Leilukin&#39;s personal website.</subtitle>
<link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
<link href="https://leilukin.neocities.org"/>
<updated>2024-05-10T04:48:57Z</updated>
<updated>2024-05-10T05:53:32Z</updated>
<id>https://leilukin.neocities.org</id>
<author>
<name>Leilukin</name>

View File

@ -37,6 +37,7 @@
--ff-primary: 'Noto Sans';
--sz-paragraph-margin: 1.15em;
--sz-main-padding: clamp(1rem, 5%, 4rem);
}
/* ------------------- */
@ -291,11 +292,11 @@ main {
.article,
.content:not(.content--divided),
.content__section {
padding: 1.5rem clamp(1rem, 5%, 3rem);
padding: 1.5rem var(--sz-main-padding);
}
.main__header {
padding: 2.5rem clamp(1rem, 5%, 3rem);
padding: 2.5rem var(--sz-main-padding);
text-align: center;
display: grid;
}
@ -332,8 +333,9 @@ main {
/* Desktop main content layout */
@media only screen and (min-width: 60rem) {
.content__wrapper {
padding: 0 var(--sz-main-padding);
grid-template-areas: 'leftbar article rightbar';
grid-template-columns: minmax(0, 15rem) minmax(0, 2.5fr) minmax(0, 15rem);
grid-template-columns: minmax(0, 20%) minmax(0, 2.5fr) minmax(0, 20%);
}
.article,
@ -350,12 +352,6 @@ main {
}
}
@media only screen and (min-width: 80rem) {
.content__wrapper {
max-width: 80rem;
}
}
/* HEADING WRAPPER AND ANCHOR */
.heading-wrapper {
display: flex;