Better sizing of text in mobile view, plus adjusted margins

This commit is contained in:
Halfdan 2022-07-24 17:40:43 +02:00
parent 8317aefd4e
commit 46bc8bfa5d

View file

@ -35,7 +35,7 @@ body {
line-height : 165%;
text-align : left;
border-right : var(--base-grid) solid var(--bar-color);
//border-right : var(--base-grid) solid var(--bar-color);
}
a {
@ -46,23 +46,31 @@ h1, h2, h3, h4, h5, h6 {
font-weight : 700;
}
h1 {
font-size : 2.5rem;
margin : 0 0 2rem 0;
main h1 {
font-size : 3rem;
margin : 0 0 3rem 0;
}
h2 {
main h2 {
font-size : 2rem;
margin : 1.5rem 0 1rem 0;
margin : 3.5rem 0 1.5rem 0;
}
h3 {
main h3 {
font-size : 1.5rem;
margin : 1rem 0 0.5rem 0;
margin : 2rem 0 1.5rem 0;
}
p, ol, ul, code {
margin : 1rem 0;
main p, main code {
margin : 1.5rem 0;
}
main ol, main ul {
margin : 1.5rem;
}
main ol li, main ul li {
margin : 0.5rem 0;
}
aside {
@ -77,6 +85,7 @@ aside header, aside nav, aside footer {
}
main {
width : 100vw;
max-width : 900px;
}
@ -131,6 +140,11 @@ aside nav footer ol li a {
}
@media(max-width:1000px) {
:root {
--base-grid : 40px;
--base-font-size : 30px;
}
body {
flex-direction : column;
border : 0;