This repository has been archived on 2024-02-04. You can view files and clone it, but cannot push or open issues or pull requests.
blog.polynom.me/assets/css/blog.css

104 lines
1.6 KiB
CSS

* {
box-sizing: border-box;
}
/* Looks bad. And it is! Workaround for having no control over
* how the markdown python module renders the post.
*/
.post > article > p > img {
/* Prevent images in blog posts from getting too big */
max-width: 800px;
}
.profile-picture {
max-width: 200px;
}
h1, h2, h3, h4 {
color: #9b59b6;
}
.post-list {
padding: 10px;
}
.post-list-item {
display: block;
max-width: 800px;
}
.post-list-item-title {
color: #3498db;
}
.post {
display: block;
width: 100%;
padding: 10px;
font-size: 21px;
}
.text {
font-size: 21px;
}
.text-content {
max-width: 1000px;
}
.stretch-horizontally {
width: 100%;
}
@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;
}
.post {
/* A smaller font looks better on smaller devices */
font-size: 19px;
/* Otherwise the entire page overflows for some reason */
width: 100%;
}
p > img {
/* This should match all images used inside blog posts */
width: 100%;
}
}
code {
display: inline-block;
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;
}