new style

This commit is contained in:
Never Gude 2026-02-12 18:04:08 +01:00
parent 3ca1685ec6
commit 84787d014e
17 changed files with 121 additions and 114 deletions

View file

@ -29,8 +29,8 @@
<body> <body>
<canvas id="tv-screen"></canvas> <canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<a href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
</header> </header>
<header id="title-block-header"> <header id="title-block-header">
<h1 class="title">Latex Endeavors</h1> <h1 class="title">Latex Endeavors</h1>

View file

@ -93,8 +93,8 @@
<body> <body>
<canvas id="tv-screen"></canvas> <canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<a href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
</header> </header>
<header id="title-block-header"> <header id="title-block-header">
<h1 class="title">Random linux utilities</h1> <h1 class="title">Random linux utilities</h1>

View file

@ -93,8 +93,8 @@
<body> <body>
<canvas id="tv-screen"></canvas> <canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<a href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
</header> </header>
<header id="title-block-header"> <header id="title-block-header">
<h1 class="title">Using rsync on Android to syncronise my Music <h1 class="title">Using rsync on Android to syncronise my Music

View file

@ -27,8 +27,8 @@
<body> <body>
<canvas id="tv-screen"></canvas> <canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<a href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
</header> </header>
<header id="title-block-header"> <header id="title-block-header">
<h1 class="title">Home</h1> <h1 class="title">Home</h1>
@ -44,33 +44,39 @@
<div class="articles-header"> <div class="articles-header">
<a href="rsync-android.html" class="articles-title">Using rsync on <a href="rsync-android.html" class="articles-title">Using rsync on
Android to syncronise my Music library</a> Android to syncronise my Music library</a>
<p class="articles-author"><em>Never</em></p>
</div> </div>
<p class="articles-summary">As Spotify is getting enshittified by <p class="articles-summary">As Spotify is getting enshittified by
capitalism, keeping a music library is kind of essential. Here I use capitalism, keeping a music library is kind of essential. Here I use
rsync to syncronise my library with my Android smartphone.</p> rsync to syncronise my library with my Android smartphone.</p>
<p class="articles-date">2026-01-12</p> <div class="articles-footer">
<div class="articles-author">Never</div>
<div class="articles-date">2026-01-12</div>
</div>
</li> </li>
<li> <li>
<div class="articles-header"> <div class="articles-header">
<a href="latex-endeavors.html" class="articles-title">Latex <a href="latex-endeavors.html" class="articles-title">Latex
Endeavors</a> Endeavors</a>
<p class="articles-author"><em>Never</em></p>
</div> </div>
<p class="articles-summary">Latex undoubtedly has some quirks. Some of <p class="articles-summary">Latex undoubtedly has some quirks. Some of
them have a rather unintuitive solution. In this article I cover some them have a rather unintuitive solution. In this article I cover some
quirks and solutions I have encountered.</p> quirks and solutions I have encountered.</p>
<p class="articles-date">2026-01-09</p> <div class="articles-footer">
<div class="articles-author">Never</div>
<div class="articles-date">2026-01-09</div>
</div>
</li> </li>
<li> <li>
<div class="articles-header"> <div class="articles-header">
<a href="random-linux-utils.html" class="articles-title">Random linux <a href="random-linux-utils.html" class="articles-title">Random linux
utilities</a> utilities</a>
<p class="articles-author"><em>Never</em></p>
</div> </div>
<p class="articles-summary">Tricks and tools I learned about, while <p class="articles-summary">Tricks and tools I learned about, while
tweaking my Linux sytem or trying to do productive things.</p> tweaking my Linux sytem or trying to do productive things.</p>
<p class="articles-date">2025-07-25</p> <div class="articles-footer">
<div class="articles-author">Never</div>
<div class="articles-date">2025-07-25</div>
</div>
</li> </li>
</ul> </ul>
</nav> </nav>

View file

@ -6,7 +6,7 @@
<description>Here I post random stuff.</description> <description>Here I post random stuff.</description>
<language>en-us</language> <language>en-us</language>
<pubDate>Mon, 12 Jan 2026 00:00:00 +0100</pubDate> <pubDate>Mon, 12 Jan 2026 00:00:00 +0100</pubDate>
<lastBuildDate>Thu, 12 Feb 2026 04:03:34 +0100</lastBuildDate> <lastBuildDate>Thu, 12 Feb 2026 17:20:07 +0100</lastBuildDate>
<docs>https://www.rssboard.org/rss-specification</docs> <docs>https://www.rssboard.org/rss-specification</docs>
<generator>pandoc</generator> <generator>pandoc</generator>
<managingEditor>n.gude@posteo.de (Never)</managingEditor> <managingEditor>n.gude@posteo.de (Never)</managingEditor>

View file

@ -37,8 +37,8 @@ $endif$
<body> <body>
<canvas id="tv-screen"></canvas> <canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<a href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
</header> </header>
$for(include-before)$ $for(include-before)$
$include-before$ $include-before$
@ -85,16 +85,18 @@ $for(articles)$
$if(articles.title)$ $if(articles.title)$
<a href="$articles.filename$.html" class="articles-title">$articles.title$</a> <a href="$articles.filename$.html" class="articles-title">$articles.title$</a>
$endif$ $endif$
$if(articles.author)$
<p class="articles-author"><em>$articles.author$</em></p>
$endif$
</div> </div>
$if(articles.summary)$ $if(articles.summary)$
<p class="articles-summary">$articles.summary$</p> <p class="articles-summary">$articles.summary$</p>
$endif$ $endif$
$if(articles.date)$ <div class="articles-footer">
<p class="articles-date">$articles.date$</p> $if(articles.author)$
<div class="articles-author">$articles.author$</div>
$endif$ $endif$
$if(articles.date)$
<div class="articles-date">$articles.date$</div>
$endif$
</div>
</li> </li>
$endfor$ $endfor$
</ul> </ul>

View file

@ -27,8 +27,8 @@
<body> <body>
<canvas id="tv-screen"></canvas> <canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<a href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
</header> </header>
<header id="title-block-header"> <header id="title-block-header">
<h1 class="title">Home</h1> <h1 class="title">Home</h1>
@ -44,33 +44,39 @@
<div class="articles-header"> <div class="articles-header">
<a href="rsync-android.html" class="articles-title">Using rsync on <a href="rsync-android.html" class="articles-title">Using rsync on
Android to syncronise my Music library</a> Android to syncronise my Music library</a>
<p class="articles-author"><em>Never</em></p>
</div> </div>
<p class="articles-summary">As Spotify is getting enshittified by <p class="articles-summary">As Spotify is getting enshittified by
capitalism, keeping a music library is kind of essential. Here I use capitalism, keeping a music library is kind of essential. Here I use
rsync to syncronise my library with my Android smartphone.</p> rsync to syncronise my library with my Android smartphone.</p>
<p class="articles-date">2026-01-12</p> <div class="articles-footer">
<div class="articles-author">Never</div>
<div class="articles-date">2026-01-12</div>
</div>
</li> </li>
<li> <li>
<div class="articles-header"> <div class="articles-header">
<a href="latex-endeavors.html" class="articles-title">Latex <a href="latex-endeavors.html" class="articles-title">Latex
Endeavors</a> Endeavors</a>
<p class="articles-author"><em>Never</em></p>
</div> </div>
<p class="articles-summary">Latex undoubtedly has some quirks. Some of <p class="articles-summary">Latex undoubtedly has some quirks. Some of
them have a rather unintuitive solution. In this article I cover some them have a rather unintuitive solution. In this article I cover some
quirks and solutions I have encountered.</p> quirks and solutions I have encountered.</p>
<p class="articles-date">2026-01-09</p> <div class="articles-footer">
<div class="articles-author">Never</div>
<div class="articles-date">2026-01-09</div>
</div>
</li> </li>
<li> <li>
<div class="articles-header"> <div class="articles-header">
<a href="random-linux-utils.html" class="articles-title">Random linux <a href="random-linux-utils.html" class="articles-title">Random linux
utilities</a> utilities</a>
<p class="articles-author"><em>Never</em></p>
</div> </div>
<p class="articles-summary">Tricks and tools I learned about, while <p class="articles-summary">Tricks and tools I learned about, while
tweaking my Linux sytem or trying to do productive things.</p> tweaking my Linux sytem or trying to do productive things.</p>
<p class="articles-date">2025-07-25</p> <div class="articles-footer">
<div class="articles-author">Never</div>
<div class="articles-date">2025-07-25</div>
</div>
</li> </li>
</ul> </ul>
</nav> </nav>

View file

@ -29,8 +29,8 @@
<body> <body>
<canvas id="tv-screen"></canvas> <canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<a href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
</header> </header>
<header id="title-block-header"> <header id="title-block-header">
<h1 class="title">Latex Endeavors</h1> <h1 class="title">Latex Endeavors</h1>

View file

@ -93,8 +93,8 @@
<body> <body>
<canvas id="tv-screen"></canvas> <canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<a href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
</header> </header>
<header id="title-block-header"> <header id="title-block-header">
<h1 class="title">Random linux utilities</h1> <h1 class="title">Random linux utilities</h1>

View file

@ -6,7 +6,7 @@
<description>Here I post random stuff.</description> <description>Here I post random stuff.</description>
<language>en-us</language> <language>en-us</language>
<pubDate>Mon, 12 Jan 2026 00:00:00 +0100</pubDate> <pubDate>Mon, 12 Jan 2026 00:00:00 +0100</pubDate>
<lastBuildDate>Thu, 12 Feb 2026 04:03:34 +0100</lastBuildDate> <lastBuildDate>Thu, 12 Feb 2026 17:20:07 +0100</lastBuildDate>
<docs>https://www.rssboard.org/rss-specification</docs> <docs>https://www.rssboard.org/rss-specification</docs>
<generator>pandoc</generator> <generator>pandoc</generator>
<managingEditor>n.gude@posteo.de (Never)</managingEditor> <managingEditor>n.gude@posteo.de (Never)</managingEditor>

View file

@ -93,8 +93,8 @@
<body> <body>
<canvas id="tv-screen"></canvas> <canvas id="tv-screen"></canvas>
<header id="page-header"> <header id="page-header">
<a href="index.html">Home</a> <a class="page-header-button" href="index.html">Home</a>
<a href="rss.xml">RSS Feed</a> <a class="rss-button" href="rss.xml">RSS Feed</a>
</header> </header>
<header id="title-block-header"> <header id="title-block-header">
<h1 class="title">Using rsync on Android to syncronise my Music <h1 class="title">Using rsync on Android to syncronise my Music

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Before After
Before After

View file

@ -1,41 +1,38 @@
:root { :root {
--foreground: #1a1a1a; --foreground: #1a1a1a;
--background: #fdfdfdf0; --background: #fdfdfdf0;
--border: #c9c9c9; --html-border: #c9c9c9;
--html-background: #e3e3e3; --html-background: #e3e3e3;
--blockquote-text: #606060; --blockquote-text: #606060;
--blockquote-border: #e6e6e6; --blockquote-border: #e6e6e6;
--button-border: #e3e3e3; --button-primary: #e3e3e3;
--button-background: #d0d0d0; --button-secondary: #d0d0d0;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--foreground: #fdfdfd; --foreground: #fdfdfd;
--background: #1a1a1af0; --background: #1a1a1af0;
--border: #4c4c4c; --html-border: #4c4c4c;
--html-background: #303030; --html-background: #2b2a33;
--blockquote-text: #e6e6e6; --blockquote-text: #e6e6e6;
--blockquote-border: #606060; --blockquote-border: #606060;
--button-border: #4c4c4c; --button-primary: #4c4c4c;
--button-background: #404040; --button-secondary: #404040;
} }
} }
html { html {
color: var(--foreground); color: var(--foreground);
/*background: url("recursion.gif");*/
background: var(--html-background); background: var(--html-background);
background-repeat: repeat-y;
background-size: cover;
font-family: serif; font-family: serif;
font-size: 14pt; font-size: 14pt;
} }
body { body {
background-color: var(--background); background-color: var(--background);
border: solid 1px var(--border); border: solid 1px var(--html-border);
margin: 0 auto; margin: 0 auto;
max-width: 48em; max-width: 48em;
padding-left: 50pt; padding-left: 50pt;
@ -61,19 +58,33 @@ body {
justify-content: space-between; justify-content: space-between;
background: url("images/shark-top-small.png"); background: url("images/shark-top-small.png");
background-size: contain; background-size: contain;
border: 4pt ridge var(--border); border: 1pt solid var(--html-border);
} }
#page-header a { #page-header a {
padding: 4pt;
color: var(--foreground); color: var(--foreground);
background-color: var(--button-background); padding: 4pt;
border: 2pt outset var(--button-border);
text-decoration: none; text-decoration: none;
} }
#page-header a:active { .page-header-button {
border: 2pt inset var(--button-border) background: linear-gradient(to bottom, var(--button-primary) 0%, var(--button-secondary) 100%);
border: 1pt solid var(--blockquote-border);
border-radius: 4pt;
}
.page-header-button:active {
background: linear-gradient(to bottom, var(--button-secondary) 0%, var(--button-primary) 100%);
}
.rss-button {
background: linear-gradient(to bottom, #fb9d3a 0%, #d95c29 100%);
border: 1pt solid #f2994f;
border-radius: 4pt;
}
.rss-button:active {
background: linear-gradient(to bottom, #d95c29 0%, #fb9d3a 100%);
} }
#articles ul { #articles ul {
@ -82,24 +93,25 @@ body {
#articles li { #articles li {
list-style: none; list-style: none;
display: block;
} }
.articles-header { .articles-header {
margin: 8pt 0 4pt 0;
}
.articles-footer {
margin-top: 4pt;
display: flex; display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
} }
.articles-title { .articles-title {
margin: 8pt 0 4pt 0;
font-size: 14pt; font-size: 14pt;
font-weight: bold; font-weight: bold;
} }
.articles-author { .articles-author {
margin: 12pt 0 4pt 0; font-style: italic;
} }
.articles-summary { .articles-summary {
@ -107,12 +119,11 @@ body {
} }
.articles-date { .articles-date {
margin: 0;
text-align: right; text-align: right;
} }
#page-footer { #page-footer {
border: 4pt ridge var(--border); border: 1pt solid var(--html-border);
background: url("images/shark-top-small.png"); background: url("images/shark-top-small.png");
background-size: contain; background-size: contain;
display: flex; display: flex;
@ -125,22 +136,6 @@ body {
align-items: center; align-items: center;
} }
/*
#TOC {
padding: 24px;
}
section {
display: flex;
flex-direction: row;
}
article {
padding: 12px;
overflow: auto;
}
*/
@media (max-width: 600px) { @media (max-width: 600px) {
body { body {
font-size: 0.9em; font-size: 0.9em;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 29 KiB

Before After
Before After

Binary file not shown.

View file

@ -1,24 +1,24 @@
:root { :root {
--foreground: #1a1a1a; --foreground: #1a1a1a;
--background: #fdfdfdf0; --background: #fdfdfdf0;
--border: #c9c9c9; --html-border: #c9c9c9;
--html-background: #e3e3e3; --html-background: #e3e3e3;
--blockquote-text: #606060; --blockquote-text: #606060;
--blockquote-border: #e6e6e6; --blockquote-border: #e6e6e6;
--button-border: #e3e3e3; --button-primary: #e3e3e3;
--button-background: #d0d0d0; --button-secondary: #d0d0d0;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--foreground: #fdfdfd; --foreground: #fdfdfd;
--background: #1a1a1af0; --background: #1a1a1af0;
--border: #4c4c4c; --html-border: #4c4c4c;
--html-background: #303030; --html-background: #2b2a33;
--blockquote-text: #e6e6e6; --blockquote-text: #e6e6e6;
--blockquote-border: #606060; --blockquote-border: #606060;
--button-border: #4c4c4c; --button-primary: #4c4c4c;
--button-background: #404040; --button-secondary: #404040;
} }
} }
@ -32,7 +32,7 @@ html {
body { body {
background-color: var(--background); background-color: var(--background);
border: solid 1px var(--border); border: solid 1px var(--html-border);
margin: 0 auto; margin: 0 auto;
max-width: 48em; max-width: 48em;
padding-left: 50pt; padding-left: 50pt;
@ -58,19 +58,33 @@ body {
justify-content: space-between; justify-content: space-between;
background: url("images/shark-top-small.png"); background: url("images/shark-top-small.png");
background-size: contain; background-size: contain;
border: 4pt ridge var(--border); border: 1pt solid var(--html-border);
} }
#page-header a { #page-header a {
padding: 4pt;
color: var(--foreground); color: var(--foreground);
background-color: var(--button-background); padding: 4pt;
border: 2pt outset var(--button-border);
text-decoration: none; text-decoration: none;
} }
#page-header a:active { .page-header-button {
border: 2pt inset var(--button-border) background: linear-gradient(to bottom, var(--button-primary) 0%, var(--button-secondary) 100%);
border: 1pt solid var(--blockquote-border);
border-radius: 4pt;
}
.page-header-button:active {
background: linear-gradient(to bottom, var(--button-secondary) 0%, var(--button-primary) 100%);
}
.rss-button {
background: linear-gradient(to bottom, #fb9d3a 0%, #d95c29 100%);
border: 1pt solid #f2994f;
border-radius: 4pt;
}
.rss-button:active {
background: linear-gradient(to bottom, #d95c29 0%, #fb9d3a 100%);
} }
#articles ul { #articles ul {
@ -79,24 +93,25 @@ body {
#articles li { #articles li {
list-style: none; list-style: none;
display: block;
} }
.articles-header { .articles-header {
margin: 8pt 0 4pt 0;
}
.articles-footer {
margin-top: 4pt;
display: flex; display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
} }
.articles-title { .articles-title {
margin: 8pt 0 4pt 0;
font-size: 14pt; font-size: 14pt;
font-weight: bold; font-weight: bold;
} }
.articles-author { .articles-author {
margin: 12pt 0 4pt 0; font-style: italic;
} }
.articles-summary { .articles-summary {
@ -104,12 +119,11 @@ body {
} }
.articles-date { .articles-date {
margin: 0;
text-align: right; text-align: right;
} }
#page-footer { #page-footer {
border: 4pt ridge var(--border); border: 1pt solid var(--html-border);
background: url("images/shark-top-small.png"); background: url("images/shark-top-small.png");
background-size: contain; background-size: contain;
display: flex; display: flex;
@ -122,22 +136,6 @@ body {
align-items: center; align-items: center;
} }
/*
#TOC {
padding: 24px;
}
section {
display: flex;
flex-direction: row;
}
article {
padding: 12px;
overflow: auto;
}
*/
@media (max-width: 600px) { @media (max-width: 600px) {
body { body {
font-size: 0.9em; font-size: 0.9em;