new style
This commit is contained in:
parent
3ca1685ec6
commit
84787d014e
17 changed files with 121 additions and 114 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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 |
Binary file not shown.
|
|
@ -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 |
Binary file not shown.
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue