Finally fix CSS issues

This commit is contained in:
PapaTutuWawa 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;
}

View File

@ -1,6 +1,6 @@
<div class="horizontal-center">
<div class="post-list-item">
<h2><a class="post-title" href="/{{ slug }}.html">{{ title }}</a></h2>
<h2><a class="post-list-item-title" href="/{{ slug }}.html">{{ title }}</a></h2>
<p><b>&gt; {{ date }}</b></p>

View File

@ -16,18 +16,18 @@
{{ mathjax_include }}
</head>
<body>
<h1><center><a class="page-title" href="/">papatutuwawa@home:~$</a></center></h1>
<h3 class="title-sub"><center>by PapaTutuWawa</center></h3>
<h1><center><a class="page-title" href="/">papatutuwawa@home:~$</a></center></h1>
<h3 class="title-sub"><center>by PapaTutuWawa</center></h3>
<div class="container title-sub-subbar horizontal">
<a href="/about.html" class="subbar-link"><h3>About</h3></a>
<a href="/index.html" class="subbar-link"><h3>Archive</h3></a>
<a href="/atom.xml" class="subbar-link"><h3>RSS</h3></a>
</div>
<div class="container title-sub-subbar horizontal">
<a href="/about.html" class="subbar-link"><h3>About</h3></a>
<a href="/index.html" class="subbar-link"><h3>Archive</h3></a>
<a href="/atom.xml" class="subbar-link"><h3>RSS</h3></a>
</div>
<div class="container">
{{ content }}
</div>
<div class="container">
{{ content }}
</div>
</body>
<br/>
@ -39,5 +39,5 @@
<a href="https://github.com/RedHatOfficial/Overpass">Overpass</a> and
<a href="https://github.com/sunainapai/makesite">makesite</a>
</center>
</footer>
</footer>
</html>

View File

@ -14,6 +14,11 @@
If you have any questions or comments, then feel free to send me an email
(Preferably with <a href="{{ email_gpg_url }}">GPG encryption</a> to
{{ email_user }} [weird "a" with a circle] {{ email_domain }}.
<p>
This post is signed using my <a href="{{ email_gpg_url }}">public key</a>.
See <a href=/verify.html>here</a> for more information.
</p>
</article>
</div>
</div>