Finally fix CSS issues

This commit is contained in:
2020-09-23 16:59:04 +02:00
parent 20aff8dc83
commit 2500b3d9eb
4 changed files with 56 additions and 19 deletions

View File

@@ -1,3 +1,7 @@
* {
box-sizing: border-box;
}
img {
/* Prevent images in blog posts from getting too big */
max-width: 800px;
@@ -20,6 +24,10 @@ h1, h2, h3, h4 {
max-width: 800px;
}
.post-list-item-title {
color: #3498db;
}
.post {
display: block;
max-width: 1000px;
@@ -33,7 +41,21 @@ h1, h2, h3, h4 {
font-size: 21px;
}
.text-content {
max-width: 1000px;
}
@media only screen and (max-width: 768px) {
.page-title {
/* The page header title otherwise overflows the page on small screens */
font-size: 8vw;
}
.text-content {
/* Otherwise the page content overflows the page */
max-width: 100%;
}
.text {
/* A smaller font looks better on smaller devices */
font-size: 19px;
@@ -53,12 +75,22 @@ h1, h2, h3, h4 {
}
}
.post-title {
color: #3498db;
}
code {
display: inline-block;
max-width: 100%;
overflow-y: auto;
padding: 0 3px;
border-radius: 3px;
background-color: black;
line-height: 1.5;
}
pre > code {
background-color: black;
line-height: 1.5;
border-radius: 3px;
padding: 10px;
width: 100%;
overflow-x: auto;
}