Leilukin
/
leilukin-site
mirror of https://github.com/helenclx/leilukin-site.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
_site/assets/css/main.css
View File

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

2
_site/feed.xml
View File

@ -4,7 +4,7 @@
<subtitle>Leilukin&#39;s personal website.</subtitle> <subtitle>Leilukin&#39;s personal website.</subtitle>
<link href="https://leilukin.neocities.org/feed.xml" rel="self"/> <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
<link href="https://leilukin.neocities.org"/> <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> <id>https://leilukin.neocities.org</id>
<author> <author>
<name>Leilukin</name> <name>Leilukin</name>

14
src/assets/css/main.css
View File

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