consistant header gaps

This commit is contained in:
Reorx 2022-09-08 21:29:29 +08:00
parent e14673bee7
commit ce83fcc8ed
3 changed files with 21 additions and 13 deletions

View File

@ -4,8 +4,18 @@
min-height: calc(100vh - var(--header-height) - var(--footer-height)); min-height: calc(100vh - var(--header-height) - var(--footer-height));
max-width: calc(var(--main-width) + var(--gap) * 2); max-width: calc(var(--main-width) + var(--gap) * 2);
margin: auto; margin: auto;
padding: var(--gap); padding: var(--content-gap) var(--gap) 0;
padding-bottom: 0; }
@media screen and (max-width: 500px) {
.main {
padding-top: 0;
}
}
/* same as .post-header */
.page-header {
margin: var(--gap) 0 calc(var(--content-gap) * 1.5);
} }
.mark-line { .mark-line {

View File

@ -1,14 +1,10 @@
.page-header,
.post-header { .post-header {
margin: calc(var(--gap) * 4/3) 0; margin: var(--gap) 0 calc(var(--content-gap) * 1.5);
}
.post-header {
margin-top: calc(var(--gap) * 1/3);
} }
.post-title { .post-title {
font-size: 40px; font-size: 40px;
margin: var(--content-gap) 0; margin-bottom: var(--content-gap);
} }
.post-description { .post-description {

View File

@ -94,7 +94,8 @@ body.type-newsletter.layout-archives {
.main { .main {
border: var(--main-border); border: var(--main-border);
background-color: var(--theme); background-color: var(--theme);
margin-top: var(--content-gap); margin-top: var(--gap);
padding-top: 0;
padding-bottom: var(--icon-length); padding-bottom: var(--icon-length);
min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--content-gap)); min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--content-gap));
max-width: var(--nav-width); max-width: var(--nav-width);
@ -122,7 +123,7 @@ body.type-newsletter.layout-archives {
.main { .main {
.content { .content {
max-width: calc(var(--post-width)); max-width: calc(var(--post-width));
margin: 0 auto; margin: var(--icon-length) auto 0;
} }
.first-entry { .first-entry {
@ -131,12 +132,13 @@ body.type-newsletter.layout-archives {
h1 { h1 {
text-align: center; text-align: center;
margin-top: var(--gap); margin-bottom: 10px;
margin-bottom: calc(var(--content-gap) * 1);
} }
.subtitle { .subtitle {
text-align: center; text-align: center;
color: var(--secondary); color: var(--secondary);
line-height: 1.2em;
margin-bottom: var(--content-gap);
} }
h2 { h2 {
@ -216,7 +218,7 @@ body.type-newsletter.kind-page {
background-color: var(--signature-bg-dim); background-color: var(--signature-bg-dim);
transition: var(--link-transition); transition: var(--link-transition);
font-size: 32px; font-size: 32px;
// margin-bottom: calc(var(--content-gap) * 2); margin-bottom: var(--content-gap);
line-height: var(--icon-length); line-height: var(--icon-length);
box-shadow: none; // reset box-shadow: none; // reset