commit 3005881b1136d5ee52f830ef1a05c99ca9b0f693
parent c201f98d25e58725f093a002be72477856c63a20
Author: Martin Kloeckner <mjkloeckner@gmail.com>
Date: Sun, 30 Aug 2026 16:25:27 -0300
Update style
Diffstat:
5 files changed, 93 insertions(+), 33 deletions(-)
diff --git a/blog/another-imagemagick-use-case-process-oscilloscope-screenshots/another-imagemagick-use-case-process-oscilloscope-screenshots.md b/blog/another-imagemagick-use-case-process-oscilloscope-screenshots/another-imagemagick-use-case-process-oscilloscope-screenshots.md
@@ -99,14 +99,14 @@ image and saving it as `gray.png`. Then, for the main colors used by the
interface: red, blue, green, orange, cyan and yellow, it creates a mask in which
only that particular color appears, while the rest of the colors are made
transparent. It then replaces that color with the desired new color. For
-example, for channel one's yellow (`#F8E400`), `yellow_mask.png` is created with
-the yellow color replaced with blue (`#005FFF`).
+example, for channel one's yellow `#F8E400`, `yellow_mask.png` is created with
+the yellow color replaced with blue `#005FFF`.
At the end, all the masks are combined on top of the previously created inverted
greyscale image, resulting in the final image shown below.
<div class="centered-img">
- <img style="max-width: 75%" src="./sine_250_light.png" alt="OWON HDS25s">
+ <img src="./sine_250_light.png" alt="OWON HDS25s">
</div>
It is true that simply inverting the image would have been enough, but I think
diff --git a/css/article.css b/css/article.css
@@ -2,7 +2,7 @@
/* text-decoration: underline; */
text-align: left;
padding-top: .5em;
- padding-bottom: .75em;
+ padding-bottom: .5em;
}
.article-date {
@@ -30,7 +30,7 @@ img {
display: flex;
justify-content: center; /* Horizontal centering */
align-items: center; /* Vertical centering */
- gap: 0.5em;
+ gap: 5px;
padding-bottom: .75em;
}
@@ -71,7 +71,7 @@ img {
}
h2 {
- padding-bottom: 1em;
+ padding-bottom: .5em;
font-size: 1.5em;
}
h3 { font-size: 1.25em; }
@@ -175,12 +175,12 @@ blockquote {
@media (max-width: 800px) {
.article_bottom_bar {
- width: 45%;
+ /* width: 45%; */
margin-top: 1em;
}
#article-title {
padding-top: .25em;
- padding-bottom: .5em;
+ padding-bottom: .25em;
font-size: 1.5em;
}
@@ -198,13 +198,13 @@ blockquote {
.side-by-side {
display: flex;
- flex-direction: column;
- justify-content: center; /* Horizontal centering */
- align-items: center; /* Vertical centering */
+ /* flex-direction: column; */
+ justify-content: center;
+ align-items: center;
}
.side-by-side img {
- width: 70%;
+ width: 100%;
}
img {
diff --git a/css/blog.css b/css/blog.css
@@ -20,14 +20,15 @@
display: flex;
flex-direction: column-reverse;
}
- #date {
- }
- #title a {
+ /* #date { */
+ /* padding-bottom: 0.5em; */
+ /* } */
+ /* #title a { */
/* color: var(--fg-color); */
- font-size: 1.20em;
- }
- #date a {
+ /* font-size: 1.20em; */
+ /* } */
+ /* #date a { */
/* color: var(--article-date); */
- }
+ /* } */
}
}
diff --git a/css/colors.css b/css/colors.css
@@ -1,9 +1,12 @@
:root, [data-theme="dark"] {
--bg-color: #191919;
--fg-color: antiquewhite;
+ --selection-fg-color: #ffffff;
+ --selection-bg-color: #564c44;
--accent-color: crimson;
--secondary-accent-color: peru;
- --hover-color: peru;
+ --hover-fg-color: peru;
+ --hover-bg-color: #443A32;
--code-bg: #262626;
--link-color: peru;
--link-hover-color: crimson;
@@ -19,7 +22,8 @@
--bg-color: white;
--accent-color: #CC2936;
--secondary-accent-color: #141414;
- --hover-color: #a04a00;
+ --hover-fg-color: #A04A00;
+ --hover-bg-color: #DADADA;
--link-hover-color: #CC2936;
--link-color: #A04A00;
--title-color: #000000;
diff --git a/css/style.css b/css/style.css
@@ -15,6 +15,16 @@ html {
overflow-y: scroll;
}
+::selection {
+ color: var(--selection-fg-color);
+ background: var(--selection-bg-color);
+}
+
+::-moz-selection {
+ color: var(--selection-fg-color);
+ background: var(--selection-bg-color);
+}
+
body {
color: var(--fg-color);
background: var(--bg-color);
@@ -22,7 +32,7 @@ body {
margin-left: .5em;
margin-right: .5em;
font-size: 18px;
- font-family: "Nimbus Sans", "Nimbus Sans L", "Inter", "Helvetica", "inconsolata", monospace, "DejaVu Sans", sans, "Verdana", sans-serif, "Georgia", serif;
+ font-family: "Nimbus Sans", "Nimbus Sans L", "Inter", "Helvetica", "inconsolata", "DejaVu Sans", sans, "Verdana", sans-serif, "Georgia", serif, monospace;
}
header {
@@ -38,12 +48,17 @@ header {
text-align: center;
padding-top: .75em;
+ /* padding-bottom: .25em; */
padding-left: 0.75em;
padding-right: 0.75em;
border-top: 1em;
}
+table {
+ border-spacing: 0px;
+}
+
#color-scheme-button-light {
display: none;
}
@@ -96,7 +111,6 @@ header {
color: inherit;
transition: .75;
- /* font-family: "inconsolata", monospace, "DejaVu Sans", sans, sans-serif; */
font-family: "Nimbus Sans", "Nimbus Sans L", "Inter", "Helvetica", "inconsolata", monospace, "DejaVu Sans", sans, "Verdana", sans-serif, "Georgia", serif;
}
@@ -111,7 +125,7 @@ header {
}
#header_link:hover {
- color: var(--hover-color);
+ color: var(--header-hover-fg-color);
}
#header_title {
@@ -130,7 +144,6 @@ article {
margin-bottom: .9em;
text-align: justify;
- /* text-justify: distribute; */
-webkit-hyphens: auto;
-ms-hyphens: auto;
@@ -155,6 +168,7 @@ a {
word-break: auto-phrase;
}
+
.article_bottom_bar {
border: 0;
clear: both;
@@ -234,8 +248,10 @@ a:visited, a:active, a:link {
}
a:hover {
- color: var(--link-hover-color);
+ /* color: var(--link-hover-color); */
text-decoration: underline;
+ text-decoration: none;
+ background: var(--hover-bg-color);
}
ol {
@@ -252,6 +268,7 @@ ul {
}
.header_buttons {
+ /* margin: 0 0 .100em 0; */
margin: 0;
padding-bottom: 0em;
font-size: 1.65em;
@@ -266,7 +283,7 @@ h1 { font-size: 1.75em; }
h2 {
font-size: 1.25em;
- padding-top: 1em;
+ padding-top: .5em;
padding-bottom: .5em;
}
@@ -407,6 +424,22 @@ hr {
}
}
+#latest-uploads-blog-entries, #blog_entries {
+ #title a:hover {
+ text-decoration: none;
+ }
+
+ tr:hover {
+ /* background: #000; */
+ background: var(--hover-bg-color);
+ cursor: pointer;
+ }
+
+ td a {
+ display: block;
+ }
+}
+
#urgent-announcement {
color: var(--fg-color);
font-weight: bold;
@@ -421,6 +454,10 @@ b-time {
font-family: "inconsolata", monospace;
}
+#blog-index-table {
+ width: 100%;
+}
+
@media (max-width: 800px) {
body {
margin-left: 0em;
@@ -439,6 +476,10 @@ b-time {
footer {
padding-top: .5em;
}
+ a {
+ -webkit-tap-highlight-color: transparent;
+ user-select: none;
+ }
.header_flex_div{
flex-direction: column;
align-items: center;
@@ -451,18 +492,22 @@ b-time {
padding-bottom: .25em;
a:hover {
- color: peru;
+ color: var(--hover-fg-color);
}
}
.header_bottom_bar{
+ /* width: 55%; */
}
.article_bottom_bar {
+ /* width: 40%; */
padding-top: .5em;
margin-top: .5em;
+ margin-bottom: .75em;
}
#header_title {
font-size: 2.20em;
line-height: 1.10em;
+ /* padding-bottom: .10em; */
}
#index-title {
padding-top: 0;
@@ -479,10 +524,13 @@ b-time {
color: var(--link-color);
text-decoration: none;
}
+ /* border: 1px solid #505050; */
+ /* border-radius: .5em; */
+ /* padding: .5em; */
#entry {
display: flex;
flex-direction: column-reverse;
- padding-bottom: 1em;
+ margin-bottom: .5em;
}
#date {
/* padding-top: .10em; */
@@ -493,7 +541,7 @@ b-time {
}
#title a {
/* color: var(--fg-color); */
- font-size: 1.20em;
+ font-size: 1.00em;
display: block;
}
#date a {
@@ -506,6 +554,15 @@ b-time {
}
}
+ /*
+ @media (hover: hover) and (pointer: fine) {
+ tr:hover {
+ cursor: pointer;
+ background-color: #000;
+ }
+ }
+ */
+
#latest-uploads {
tr:nth-child(n + 6) {
display: none !important;
@@ -513,10 +570,8 @@ b-time {
tr:nth-child(6) #date {
padding-bottom: 0;
}
- tr:hover {
- cursor: pointer;
- }
}
+
#latest-uploads-title {
padding-bottom: .25em;
}
