commit 06e7d4da278f553c4445605452775804db4f635c
parent 5314713c9ab9803d0fad6df238aec20dbe1f0a1d
Author: Martin Kloeckner <mjkloeckner@gmail.com>
Date: Sat, 29 Aug 2026 13:00:35 -0300
Updae style
Diffstat:
4 files changed, 109 insertions(+), 54 deletions(-)
diff --git a/common/head.shtml b/common/head.shtml
@@ -13,6 +13,6 @@
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=contrast"/>
-<link rel='stylesheet' type='text/css' href="/css/style.css?ver=0.5.1">
+<link rel='stylesheet' type='text/css' href="/css/style.css?ver=0.5.2">
<link rel="icon" type="image/x-icon" href="favicon.webp">
<script type="text/javascript" src="/scripts/js/color-scheme-toggle.js"></script>
diff --git a/css/article.css b/css/article.css
@@ -19,6 +19,25 @@ img {
padding-bottom: .75em;
}
+.centered-img {
+ display: flex;
+ justify-content: center; /* Horizontal centering */
+ align-items: center; /* Vertical centering */
+ padding-bottom: .75em;
+}
+
+.side-by-side {
+ display: flex;
+ justify-content: center; /* Horizontal centering */
+ align-items: center; /* Vertical centering */
+ gap: 0.5em;
+ padding-bottom: .75em;
+}
+
+.side-by-side img {
+ width: 49.6%;
+}
+
#article-screenshot {
text-align: center;
}
@@ -172,9 +191,26 @@ blockquote {
#article-icon img {
max-width: 2.5em;
}
+
#article-icon {
padding-right: .5em
}
+
+ .side-by-side {
+ display: flex;
+ flex-direction: column;
+ justify-content: center; /* Horizontal centering */
+ align-items: center; /* Vertical centering */
+ }
+
+ .side-by-side img {
+ width: 70%;
+ }
+
+ img {
+ width: 100%;
+ }
+
}
@media (max-width: 400px) {
@@ -190,9 +226,11 @@ blockquote {
padding-bottom: .5em;
padding-top: .5em;
}
+
#article-icon img {
max-width: 2em;
}
+
#article-icon {
padding-right: .25em
}
diff --git a/css/blog.css b/css/blog.css
@@ -21,11 +21,10 @@
flex-direction: column-reverse;
}
#date {
- padding-bottom: 1em;
}
#title a {
/* color: var(--fg-color); */
- font-size: 1.25em;
+ font-size: 1.20em;
}
#date a {
/* color: var(--article-date); */
diff --git a/css/style.css b/css/style.css
@@ -21,7 +21,7 @@ body {
margin-bottom: 15em;
margin-left: .5em;
margin-right: .5em;
- font-size: 16px;
+ font-size: 18px;
font-family: "Nimbus Sans", "Nimbus Sans L", "Inter", "Helvetica", "inconsolata", monospace, "DejaVu Sans", sans, "Verdana", sans-serif, "Georgia", serif;
}
@@ -129,10 +129,14 @@ article {
margin-right: auto;
margin-bottom: .9em;
- text-align: left;
+ text-align: justify;
/* text-justify: distribute; */
- /* word-spacing: -2px; */
- /* hyphens: auto; */
+
+ -webkit-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+
+ overflow-wrap: break-word;
padding-left: 0.5em;
padding-right: 0.5em;
@@ -142,6 +146,15 @@ article {
border-radius: 1em;
}
+a {
+ -webkit-hyphens: auto;
+ -ms-hyphens: auto;
+ hyphens: auto;
+ white-space: normal;
+
+ word-break: auto-phrase;
+}
+
.article_bottom_bar {
border: 0;
clear: both;
@@ -455,42 +468,59 @@ b-time {
}
+ #blog-index-table {
+ a {
+ text-decoration: none;
+ text-align: left;
+ }
+ a:hover {
+ color: var(--link-color);
+ text-decoration: none;
+ }
+ #entry {
+ display: flex;
+ flex-direction: column-reverse;
+ padding-bottom: 1em;
+ }
+ #date {
+ /* padding-top: .10em; */
+ /* padding-bottom: 1em; */
+ }
+ #title {
+ display: block;
+ }
+ #title a {
+ /* color: var(--fg-color); */
+ font-size: 1.20em;
+ display: block;
+ }
+ #date a {
+ display: block;
+ font-size: 1.00em;
+ /* color: var(--article-date); */
+ }
+ #date a:hover {
+ color: var(--fg-color);
+ }
+ }
+
#latest-uploads {
- #blog-index-table {
- /* border: 1px solid #505050; */
- /* border-radius: .5em; */
- /* padding: .5em; */
- #entry {
- display: flex;
- flex-direction: column-reverse;
- padding-bottom: 1em;
- }
- #date {
- padding-top: .20em;
- /* padding-bottom: 1em; */
- }
- #title a {
- /* color: var(--fg-color); */
- font-size: 1.5em;
- }
- #date a {
- font-size: 1em;
- /* color: var(--article-date); */
- }
- tr:nth-child(n + 4) {
- display: none !important;
- }
- tr:nth-child(3) #date {
- padding-bottom: 0;
- }
- }
- #latest-uploads-title {
- padding-bottom: .25em;
- }
- #see-all-blog-entries {
- padding-top: 0em;
- }
- }
+ tr:nth-child(n + 6) {
+ display: none !important;
+ }
+ tr:nth-child(6) #date {
+ padding-bottom: 0;
+ }
+ tr:hover {
+ cursor: pointer;
+ }
+ }
+ #latest-uploads-title {
+ padding-bottom: .25em;
+ }
+ #see-all-blog-entries {
+ padding-top: 0em;
+ }
#header_link {
display: none;
}
@@ -583,15 +613,3 @@ b-time {
}
}
*/
-
-@keyframes zoom-in-zoom-out {
- 0% {
- transform: scale(1, 1);
- }
- 50% {
- transform: scale(1.12, 1.12);
- }
- 100% {
- transform: scale(1, 1);
- }
-}
