Adjust main content paddings on large screen sizes
This commit is contained in:
parent
d0a5ecdb96
commit
d2ae15bd1e
|
@ -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;
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<subtitle>Leilukin's personal website.</subtitle>
|
<subtitle>Leilukin'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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue