Column count depending on viewport size

This commit is contained in:
Nox Sluijtman 2023-03-23 19:52:55 +01:00
parent 866ddf338e
commit dcc9f2bf22

View file

@ -74,13 +74,35 @@ hr{color: var(--ansi00);}
} }
header{text-transform: capitalize; text-align:center;border-bottom:2pt solid; font-weight:bold;} header{text-transform: capitalize; text-align:center;border-bottom:2pt solid; font-weight:bold;}
.page-head{text-transform: capitalize; text-align:center;border-bottom:2pt solid; font-weight:bold;} .page-head{text-transform: capitalize; text-align:center;border-bottom:2pt solid; font-weight:bold;}
@media (min-width: 1200px){
.post-content{ column-count: 2; }
}
@media (max-width: 800px){ @media (max-width: 800px){
main{max-width:100%; margin: 1em;} main{max-width:100%; margin: 1em;}
menu{padding:0; width: 100%; border-right:solid 0pt;} menu{padding:0; width: 100%; border-right:solid 0pt;}
menu a{ padding-left: 1em;} menu a{ padding-left: 1em;}
.post-content{
max-width: 80ch;
}
}
@media (min-width: 80ch){
.post-content{ column-count: 1;
max-width: 80ch;
margin: auto;
}
}
@media (min-width: 160ch){
.post-content{ column-count: 2;
max-width: 160ch;
margin: auto;
}
}
@media (min-width: 240ch){
.post-content{ column-count: 3;
max-width: 240ch;
margin: auto;
}
}
.post-content{
margin: auto;
} }
.post-content img{ .post-content img{
max-width: 100%; max-width: 100%;