polynom.me/blog.polynom.me
Archived
2
0
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Finally fix CSS issues

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
assets/css/blog.css
View File

@ -1,3 +1,7 @@
* {
box-sizing: border-box;
}
img { img {
/* Prevent images in blog posts from getting too big */ /* Prevent images in blog posts from getting too big */
max-width: 800px; max-width: 800px;
@ -20,6 +24,10 @@ h1, h2, h3, h4 {
max-width: 800px; max-width: 800px;
} }
.post-list-item-title {
color: #3498db;
}
.post { .post {
display: block; display: block;
max-width: 1000px; max-width: 1000px;
@ -33,7 +41,21 @@ h1, h2, h3, h4 {
font-size: 21px; font-size: 21px;
} }
.text-content {
max-width: 1000px;
}
@media only screen and (max-width: 768px) { @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 { .text {
/* A smaller font looks better on smaller devices */ /* A smaller font looks better on smaller devices */
font-size: 19px; font-size: 19px;
@ -53,12 +75,22 @@ h1, h2, h3, h4 {
} }
} }
.post-title {
color: #3498db;
}
code { code {
display: inline-block; display: inline-block;
max-width: 100%; padding: 0 3px;
overflow-y: auto; 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;
} }

2
layout/item.html
View File

@ -1,6 +1,6 @@
<div class="horizontal-center"> <div class="horizontal-center">
<div class="post-list-item"> <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> <p><b>&gt; {{ date }}</b></p>

22
layout/page.html
View File

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

5
layout/post.html
View File

@ -14,6 +14,11 @@
If you have any questions or comments, then feel free to send me an email 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 (Preferably with <a href="{{ email_gpg_url }}">GPG encryption</a> to
{{ email_user }} [weird "a" with a circle] {{ email_domain }}. {{ 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> </article>
</div> </div>
</div> </div>