near/arnes.space
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Slight improvements to aside in post layout on mobile`

Browse source
This commit is contained in:
arne 2022-03-03 12:21:59 +01:00
commit 49f22eb8c3
1 changed files with 60 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

105
src/assets/style.scss
View file

@ -102,6 +102,60 @@ main {
}
}
header {
grid-area: header;
}
aside {
grid-area: aside;
ul {
list-style: none;
margin: 0;
padding: 0;
}
dl {
margin: 0;
padding-bottom: 22px;
display: flex;
flex-wrap: wrap;
dt, dd {
display: inline-block;
}
dd {
margin: 0;
}
}
a {
padding-left: 0;
padidng-right: 0;
}
}
article {
grid-area: content;
h2 {
padding: 16px 0
}
ul {
padding: 0 0 0 16px;
margin: 0 0 32px;
}
}
footer {
grid-area: footer;
padding-top: 48px;
border-top: 1px dotted #aaa;
}
@media screen and (max-width: 768px) {
body {
font-size: 14px;
@ -127,53 +181,27 @@ main {
"content"
"footer";
}
}
header {
grid-area: header;
}
aside {
grid-area: aside;
ul {
list-style: none;
margin: 0;
padding: 0;
dl {
dt, dd {
flex: 1 1 auto;
flex-basis: 50%;
}
dl {
margin: 0;
padding-bottom: 22px;
dt, dd {
display: inline-block;
dt {
flex-shrink: 1;
flex-gorw: 0;
}
dd {
margin: 0;
flex-shrink: 0;
flex-grow: 1;
}
}
}
}
article {
grid-area: content;
h2 {
padding: 16px 0
}
ul {
padding: 0 0 0 16px;
margin: 0 0 32px;
}
}
footer {
grid-area: footer;
padding-top: 48px;
border-top: 1px dotted #aaa;
}
// special page styling
@ -188,6 +216,11 @@ footer {
padding-bottom: 16px;
}
a {
padding-left: .3em;
padding-right: .3em;
}
ul {
list-style: inside;
padding: 0 0 0 16px;