Rumperuu/Omphaloskepsis
Archived
1
0
Fork 0
Code Issues 15 Pull requests Projects Releases 1 Wiki Activity

Fix width<1024px styling

Browse source
This commit is contained in:
Ben Goldsworthy 2021-01-24 12:59:54 +00:00
parent 65f346796f
commit dd6e4932f3
1 changed files with 47 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
style.css
View file

@ -122,8 +122,8 @@ html {
"header header header" "header header header"
". page-container ." ". page-container ."
"footer footer footer"; "footer footer footer";
border: 2px solid black; border: 2px solid black;
margin: 2em; margin: 2em;
} }
} }
@ -305,11 +305,12 @@ html {
#split-page > #wrapper { #split-page > #wrapper {
grid-area: post; grid-area: post;
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-rows: 70vh auto; grid-template-rows: 70vh auto auto;
justify-items: center; justify-items: center;
align-items: center; align-items: center;
grid-template-areas: grid-template-areas:
"post-content-header" "post-content-header"
"post-meta"
"post-content"; "post-content";
} }
@media only screen and (min-width: 1024px) { @media only screen and (min-width: 1024px) {
@ -380,8 +381,22 @@ html {
#split-page #post-meta { #split-page #post-meta {
grid-area: post-meta; grid-area: post-meta;
width: 100%; width: 85%;
text-align: left; text-align: center !important;
background-color: #DDDDD0;
margin: 1em 0;
padding-bottom: 1em;
border: 1px solid gray;
}
@media only screen and (min-width: 1024px) {
#split-page #post-meta {
background-color: transparent;
width: 100%;
text-align: left !important;
margin: 0;
border: none;
}
} }
#split-page #post-meta > h1 { #split-page #post-meta > h1 {
@ -389,7 +404,6 @@ html {
margin-top: 0.5em; margin-top: 0.5em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
line-height: 1.2em; line-height: 1.2em;
text-align: left;
} }
#split-page #post-meta h2 { #split-page #post-meta h2 {
@ -397,7 +411,6 @@ html {
font-size: 1.4em; font-size: 1.4em;
margin-bottom: 0.5em; margin-bottom: 0.5em;
line-height: 1.2em; line-height: 1.2em;
text-align: left;
} }
#split-page #post-meta > #post-contents > ol > li { #split-page #post-meta > #post-contents > ol > li {
@ -405,12 +418,34 @@ html {
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
#split-page #post-meta > #post-tags ul {
#split-page #post-meta > #post-tags > a { width: auto;
margin-top: 0.2em; margin: auto;
margin-left: 1em; list-style: none;
} }
#split-page #post-meta > #post-tags li {
float: left;
}
#split-page #post-meta > #post-tags li:not(:first-of-type) {
margin-left: 1.5em;
}
@media only screen and (min-width: 1024px) {
#split-page #post-meta > #post-tags ul {
margin: none;
width: 100%;
list-style: circle;
}
#split-page #post-meta > #post-tags li {
float: none;
margin-top: 0.2em;
margin-left: 1em !important;
}
}
#split-page > #wrapper > .body { #split-page > #wrapper > .body {
grid-area: post-content; grid-area: post-content;
display: block; display: block;
@ -551,6 +586,7 @@ html {
justify-items: center; justify-items: center;
align-items: start; align-items: start;
text-align: center; text-align: center;
padding-bottom: 1em;
} }
.comment-body { .comment-body {