Compare commits

...

2 Commits

Author SHA1 Message Date
andrzej 85bc1cc1a5 styling 2024-11-14 20:09:18 +01:00
andrzej 702db993f6 styling, syntax highlighting 2024-11-14 19:45:16 +01:00
23 changed files with 1219 additions and 112 deletions

View File

@ -4,7 +4,7 @@ draft = false
title = 'Permissions Strike Again' title = 'Permissions Strike Again'
+++ +++
# It's always permissions ## It's always permissions
Configuring Apache really isn't rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it's one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes. Configuring Apache really isn't rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it's one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.

View File

@ -2,3 +2,7 @@ baseURL = 'https://example.org/'
languageCode = 'en-us' languageCode = 'en-us'
title = 'My New Hugo Site' title = 'My New Hugo Site'
theme = "cuqui" theme = "cuqui"
[markup]
[markup.highlight]
noClasses = false

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>Categories | My New Hugo Site</title> <title>
Categories | My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>

View File

@ -1,5 +1,63 @@
:root {
/* Rosé Pine Dawn */
--rp-base: hsl(32deg, 57%, 95%);
--rp-surface: hsl(35deg, 100%, 98%);
--rp-overlay: hsl(33deg, 43%, 91%);
--rp-muted: hsl(257deg, 9%, 61%);
--rp-subtle: hsl(248deg, 12%, 52%);
--rp-text: hsl(248deg, 19%, 40%);
--rp-love: hsl(343deg, 35%, 55%);
--rp-gold: hsl(35deg, 81%, 56%);
--rp-rose: hsl(3deg, 53%, 67%);
--rp-pine: hsl(197deg, 53%, 34%);
--rp-foam: hsl(189deg, 30%, 48%);
--rp-iris: hsl(268deg, 21%, 57%);
--rp-highlight-low: hsl(25deg, 35%, 93%);
--rp-highlight-med: hsl(10deg, 9%, 86%);
--rp-highlight-high: hsl(315deg, 4%, 80%);
}
@media (prefers-color-scheme: dark) {
:root {
/* Rosé Pine */
--rp-base: hsl(249deg, 22%, 12%);
--rp-surface: hsl(247deg, 23%, 15%);
--rp-overlay: hsl(248deg, 25%, 18%);
--rp-muted: hsl(249deg, 12%, 47%);
--rp-subtle: hsl(248deg, 15%, 61%);
--rp-text: hsl(245deg, 50%, 91%);
--rp-love: hsl(343deg, 76%, 68%);
--rp-gold: hsl(35deg, 88%, 72%);
--rp-rose: hsl(2deg, 55%, 83%);
--rp-pine: hsl(197deg, 49%, 38%);
--rp-foam: hsl(189deg, 43%, 73%);
--rp-iris: hsl(267deg, 57%, 78%);
--rp-highlight-low: hsl(244deg, 18%, 15%);
--rp-highlight-med: hsl(249deg, 15%, 28%);
--rp-highlight-high: hsl(248deg, 13%, 36%);
/* Rosé Pine Moon */
/* --rp-base: hsl(246deg, 24%, 17%); */
/* --rp-surface: hsl(248deg, 24%, 20%); */
/* --rp-overlay: hsl(248deg, 21%, 26%); */
/* --rp-muted: hsl(249deg, 12%, 47%); */
/* --rp-subtle: hsl(248deg, 15%, 61%); */
/* --rp-text: hsl(245deg, 50%, 91%); */
/* --rp-love: hsl(343deg, 76%, 68%); */
/* --rp-gold: hsl(35deg, 88%, 72%); */
/* --rp-rose: hsl(2deg, 66%, 75%); */
/* --rp-pine: hsl(197deg, 48%, 47%); */
/* --rp-foam: hsl(189deg, 43%, 73%); */
/* --rp-iris: hsl(267deg, 57%, 78%); */
/* --rp-highlight-low: hsl(245deg, 22%, 20%); */
/* --rp-highlight-med: hsl(247deg, 16%, 30%); */
/* --rp-highlight-high: hsl(249deg, 15%, 38%); */
}
}
body { body {
color: #222; background-color: var(--rp-base);
color: var(--rp-text);
font-family: sans-serif; font-family: sans-serif;
line-height: 1.5; line-height: 1.5;
margin: 1rem; margin: 1rem;
@ -9,6 +67,7 @@ body {
header { header {
border-bottom: 1px solid #222; border-bottom: 1px solid #222;
margin-bottom: 1rem; margin-bottom: 1rem;
/* background-color: var(--rp-muted); */
} }
footer { footer {
@ -17,6 +76,40 @@ footer {
} }
a { a {
color: #00e; color: var(--rp-foam);
text-decoration: none; text-decoration: none;
} }
a:visited {
color: var(--rp-pine);
}
h1 {
color: var(--rp-gold);
/* background-color: var(--rp-overlay); */
background-image: linear-gradient(to bottom, var(--rp-overlay), var(--rp-overlay), var(--rp-base));
border-radius: 1rem 1rem 0 0;
padding: 1rem;
}
h2 {
color: var(--rp-gold);
}
code {
background: var(--rp-surface);
padding: 0.3em;
border-radius: 1em;
span {
background: var(--rp-surface);
}
}
.highlight {
padding: 1rem;
background-color: var(--rp-surface);
border-radius: 1rem;
}

446
public/css/syntax.css Normal file
View File

@ -0,0 +1,446 @@
:root {
/* Rosé Pine Dawn */
--rp-base: hsl(32deg, 57%, 95%);
--rp-surface: hsl(35deg, 100%, 98%);
--rp-overlay: hsl(33deg, 43%, 91%);
}
@media (prefers-color-scheme: dark) {
:root {
/* Rosé Pine */
--rp-base: hsl(249deg, 22%, 12%);
--rp-surface: hsl(247deg, 23%, 15%);
--rp-overlay: hsl(248deg, 25%, 18%);
}
}
/* Background */
.bg {
color: #e0def4;
background-color: var(--rp-surface);
}
/* PreWrapper */
.chroma {
color: #e0def4;
background-color: var(--rp-surface);
}
/* Other */
.chroma .x {}
/* Error */
.chroma .err {
color: #eb6f92
}
/* CodeLine */
.chroma .cl {}
/* LineLink */
.chroma .lnlinks {
outline: none;
text-decoration: none;
color: inherit
}
/* LineTableTD */
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
/* LineTable */
.chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
}
/* LineHighlight */
.chroma .hl {
background-color: #39374a
}
/* LineNumbersTable */
.chroma .lnt {
white-space: pre;
-webkit-user-select: none;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f
}
/* LineNumbers */
.chroma .ln {
white-space: pre;
-webkit-user-select: none;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f
}
/* Line */
.chroma .line {
display: flex;
}
/* Keyword */
.chroma .k {
color: #3e8fb0
}
/* KeywordConstant */
.chroma .kc {
color: #3e8fb0
}
/* KeywordDeclaration */
.chroma .kd {
color: #3e8fb0
}
/* KeywordNamespace */
.chroma .kn {
color: #c4a7e7
}
/* KeywordPseudo */
.chroma .kp {
color: #3e8fb0
}
/* KeywordReserved */
.chroma .kr {
color: #3e8fb0
}
/* KeywordType */
.chroma .kt {
color: #3e8fb0
}
/* Name */
.chroma .n {
color: #ea9a97
}
/* NameAttribute */
.chroma .na {
color: #ea9a97
}
/* NameBuiltin */
.chroma .nb {
color: #ea9a97
}
/* NameBuiltinPseudo */
.chroma .bp {
color: #ea9a97
}
/* NameClass */
.chroma .nc {
color: #9ccfd8
}
/* NameConstant */
.chroma .no {
color: #f6c177
}
/* NameDecorator */
.chroma .nd {
color: #908caa
}
/* NameEntity */
.chroma .ni {
color: #ea9a97
}
/* NameException */
.chroma .ne {
color: #3e8fb0
}
/* NameFunction */
.chroma .nf {
color: #ea9a97
}
/* NameFunctionMagic */
.chroma .fm {
color: #ea9a97
}
/* NameLabel */
.chroma .nl {
color: #ea9a97
}
/* NameNamespace */
.chroma .nn {
color: #ea9a97
}
/* NameOther */
.chroma .nx {}
/* NameProperty */
.chroma .py {
color: #ea9a97
}
/* NameTag */
.chroma .nt {
color: #ea9a97
}
/* NameVariable */
.chroma .nv {
color: #ea9a97
}
/* NameVariableClass */
.chroma .vc {
color: #ea9a97
}
/* NameVariableGlobal */
.chroma .vg {
color: #ea9a97
}
/* NameVariableInstance */
.chroma .vi {
color: #ea9a97
}
/* NameVariableMagic */
.chroma .vm {
color: #ea9a97
}
/* Literal */
.chroma .l {
color: #f6c177
}
/* LiteralDate */
.chroma .ld {
color: #f6c177
}
/* LiteralString */
.chroma .s {
color: #f6c177
}
/* LiteralStringAffix */
.chroma .sa {
color: #f6c177
}
/* LiteralStringBacktick */
.chroma .sb {
color: #f6c177
}
/* LiteralStringChar */
.chroma .sc {
color: #f6c177
}
/* LiteralStringDelimiter */
.chroma .dl {
color: #f6c177
}
/* LiteralStringDoc */
.chroma .sd {
color: #f6c177
}
/* LiteralStringDouble */
.chroma .s2 {
color: #f6c177
}
/* LiteralStringEscape */
.chroma .se {
color: #3e8fb0
}
/* LiteralStringHeredoc */
.chroma .sh {
color: #f6c177
}
/* LiteralStringInterpol */
.chroma .si {
color: #f6c177
}
/* LiteralStringOther */
.chroma .sx {
color: #f6c177
}
/* LiteralStringRegex */
.chroma .sr {
color: #f6c177
}
/* LiteralStringSingle */
.chroma .s1 {
color: #f6c177
}
/* LiteralStringSymbol */
.chroma .ss {
color: #f6c177
}
/* LiteralNumber */
.chroma .m {
color: #f6c177
}
/* LiteralNumberBin */
.chroma .mb {
color: #f6c177
}
/* LiteralNumberFloat */
.chroma .mf {
color: #f6c177
}
/* LiteralNumberHex */
.chroma .mh {
color: #f6c177
}
/* LiteralNumberInteger */
.chroma .mi {
color: #f6c177
}
/* LiteralNumberIntegerLong */
.chroma .il {
color: #f6c177
}
/* LiteralNumberOct */
.chroma .mo {
color: #f6c177
}
/* Operator */
.chroma .o {
color: #908caa
}
/* OperatorWord */
.chroma .ow {
color: #908caa
}
/* Punctuation */
.chroma .p {
color: #908caa
}
/* Comment */
.chroma .c {
color: #6e6a86
}
/* CommentHashbang */
.chroma .ch {
color: #6e6a86
}
/* CommentMultiline */
.chroma .cm {
color: #6e6a86
}
/* CommentSingle */
.chroma .c1 {
color: #6e6a86
}
/* CommentSpecial */
.chroma .cs {
color: #6e6a86
}
/* CommentPreproc */
.chroma .cp {
color: #6e6a86
}
/* CommentPreprocFile */
.chroma .cpf {
color: #6e6a86
}
/* Generic */
.chroma .g {}
/* GenericDeleted */
.chroma .gd {
color: #eb6f92
}
/* GenericEmph */
.chroma .ge {
font-style: italic
}
/* GenericError */
.chroma .gr {}
/* GenericHeading */
.chroma .gh {}
/* GenericInserted */
.chroma .gi {
color: #9ccfd8
}
/* GenericOutput */
.chroma .go {}
/* GenericPrompt */
.chroma .gp {}
/* GenericStrong */
.chroma .gs {
font-weight: bold
}
/* GenericSubheading */
.chroma .gu {
color: #c4a7e7
}
/* GenericTraceback */
.chroma .gt {}
/* GenericUnderline */
.chroma .gl {}
/* TextWhitespace */
.chroma .w {}

View File

@ -2,12 +2,14 @@
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head> <head>
<meta name="generator" content="Hugo 0.138.0"><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <meta name="generator" content="Hugo 0.138.0"><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>My New Hugo Site</title> <title>
My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -20,7 +22,7 @@
<nav> <nav>
<ul> <ul>
<li> <li>
<a aria-current="page" class="active" href="/">Home</a> <a href="/">Home</a>
</li> </li>
<li> <li>
<a href="/posts/">Posts</a> <a href="/posts/">Posts</a>
@ -35,9 +37,6 @@
</header> </header>
<main> <main>
<p>Laborum voluptate pariatur ex culpa magna nostrud est incididunt fugiat
pariatur do dolor ipsum enim. Consequat tempor do dolor eu. Non id id anim anim
excepteur excepteur pariatur nostrud qui irure ullamco.</p>
<h2><a href="/posts/hard-problem/">Hard Problem: Invalidating the browser cache</a></h2> <h2><a href="/posts/hard-problem/">Hard Problem: Invalidating the browser cache</a></h2>
@ -46,7 +45,7 @@ excepteur excepteur pariatur nostrud qui irure ullamco.</p>
<p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the problem handily for me, on my machine. But what about other people&rsquo;s machines?</p> <p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the problem handily for me, on my machine. But what about other people&rsquo;s machines?</p>
<h2><a href="/posts/permissions-strike-again/">Permissions Strike Again</a></h2> <h2><a href="/posts/permissions-strike-again/">Permissions Strike Again</a></h2>
<h1 id="its-always-permissions">It&rsquo;s always permissions</h1> <h2 id="its-always-permissions">It&rsquo;s always permissions</h2>
<p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p> <p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p>
<p><strong>And it almost always has to do with permissions.</strong></p> <p><strong>And it almost always has to do with permissions.</strong></p>

View File

@ -20,7 +20,7 @@
<link>http://localhost:1313/posts/permissions-strike-again/</link> <link>http://localhost:1313/posts/permissions-strike-again/</link>
<pubDate>Wed, 13 Nov 2024 11:53:13 +0100</pubDate> <pubDate>Wed, 13 Nov 2024 11:53:13 +0100</pubDate>
<guid>http://localhost:1313/posts/permissions-strike-again/</guid> <guid>http://localhost:1313/posts/permissions-strike-again/</guid>
<description>&lt;h1 id=&#34;its-always-permissions&#34;&gt;It&amp;rsquo;s always permissions&lt;/h1&gt;&#xA;&lt;p&gt;Configuring Apache really isn&amp;rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&amp;rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.&lt;/p&gt;&#xA;&lt;p&gt;&lt;strong&gt;And it almost always has to do with permissions.&lt;/strong&gt;&lt;/p&gt;</description> <description>&lt;h2 id=&#34;its-always-permissions&#34;&gt;It&amp;rsquo;s always permissions&lt;/h2&gt;&#xA;&lt;p&gt;Configuring Apache really isn&amp;rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&amp;rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.&lt;/p&gt;&#xA;&lt;p&gt;&lt;strong&gt;And it almost always has to do with permissions.&lt;/strong&gt;&lt;/p&gt;</description>
</item> </item>
<item> <item>
<title>Post 3</title> <title>Post 3</title>

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>Hard Problem: Invalidating the browser cache | My New Hugo Site</title> <title>
Hard Problem: Invalidating the browser cache | My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -45,27 +47,27 @@
<p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the problem handily for me, on my machine. But what about other people&rsquo;s machines?</p> <p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the problem handily for me, on my machine. But what about other people&rsquo;s machines?</p>
<h2 id="invalidating-cached-html">Invalidating cached HTML</h2> <h2 id="invalidating-cached-html">Invalidating cached HTML</h2>
<p>The best way to deal with this problem is to tell the browser not to cache our HTML in the first place. We can achieve this by adding the following meta tag to <code>index.html</code>, and any other HTML files we don&rsquo;t want cached.</p> <p>The best way to deal with this problem is to tell the browser not to cache our HTML in the first place. We can achieve this by adding the following meta tag to <code>index.html</code>, and any other HTML files we don&rsquo;t want cached.</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span> &lt;<span style="color:#f92672">meta</span> <span style="color:#a6e22e">http-equiv</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;pragma&#34;</span> <span style="color:#a6e22e">content</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;no-cache&#34;</span> /&gt; <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"> <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&#34;pragma&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;no-cache&#34;</span> <span class="p">/&gt;</span>
</span></span></code></pre></div><h2 id="invalidating-cached-css">Invalidating cached CSS</h2> </span></span></code></pre></div><h2 id="invalidating-cached-css">Invalidating cached CSS</h2>
<p>A quick google search revealed that the best way to invalidate browser cache is by changing the url of the file you&rsquo;re telling it to load. So we would change this:</p> <p>A quick google search revealed that the best way to invalidate browser cache is by changing the url of the file you&rsquo;re telling it to load. So we would change this:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;css/defaults.css&#34;</span> /&gt; <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;css/defaults.css&#34;</span> <span class="p">/&gt;</span>
</span></span></code></pre></div><p>to this:</p> </span></span></code></pre></div><p>to this:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;css/defaults-2.css&#34;</span> /&gt; <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;css/defaults-2.css&#34;</span> <span class="p">/&gt;</span>
</span></span></code></pre></div><p>and the browser would recognize this as new file and load it from the server. Problem solved! Of course, you would have to change the file name too&hellip;</p> </span></span></code></pre></div><p>and the browser would recognize this as new file and load it from the server. Problem solved! Of course, you would have to change the file name too&hellip;</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>mv css/defaults.css css/defaults-2.css <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl">mv css/defaults.css css/defaults-2.css
</span></span></code></pre></div><p>&hellip; and this would get tedious very quickly. Furthermore, it&rsquo;s going to make a mess of your version history if, as far as Git is concerned, you&rsquo;re deleting the CSS file and writing a new one with every deployment. Surely there&rsquo;s a better way?</p> </span></span></code></pre></div><p>&hellip; and this would get tedious very quickly. Furthermore, it&rsquo;s going to make a mess of your version history if, as far as Git is concerned, you&rsquo;re deleting the CSS file and writing a new one with every deployment. Surely there&rsquo;s a better way?</p>
<h3 id="using-a-query">Using a query</h3> <h3 id="using-a-query">Using a query</h3>
<p>Of course there is. Look at this:</p> <p>Of course there is. Look at this:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;css/defaults.css?v=2&#34;</span>/&gt; <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;css/defaults.css?v=2&#34;</span><span class="p">/&gt;</span>
</span></span></code></pre></div><p>As we&rsquo;re requesting the file via http, we can append a query. Awesome. Not awesome enough though. I&rsquo;m too lazy to do this every time I push a commit, and, being human, I&rsquo;ll probably forget at a critical moment. This can only mean one thing. It&rsquo;s time to bash (🤣) out a quick build script!</p> </span></span></code></pre></div><p>As we&rsquo;re requesting the file via http, we can append a query. Awesome. Not awesome enough though. I&rsquo;m too lazy to do this every time I push a commit, and, being human, I&rsquo;ll probably forget at a critical moment. This can only mean one thing. It&rsquo;s time to bash (🤣) out a quick build script!</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span><span style="color:#75715e">#!/usr/bin/env bash <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-bash" data-lang="bash"><span class="line"><span class="cl"><span class="cp">#!/usr/bin/env bash
</span></span></span><span style="display:flex;"><span><span style="color:#75715e"></span>COMMIT<span style="color:#f92672">=</span><span style="color:#e6db74">&#34;</span><span style="color:#66d9ef">$(</span>git rev-parse HEAD<span style="color:#66d9ef">)</span><span style="color:#e6db74">&#34;</span> </span></span></span><span class="line"><span class="cl"><span class="cp"></span><span class="nv">COMMIT</span><span class="o">=</span><span class="s2">&#34;</span><span class="k">$(</span>git rev-parse HEAD<span class="k">)</span><span class="s2">&#34;</span>
</span></span><span style="display:flex;"><span>sed -i <span style="color:#e6db74">&#34;s/css?=\w*/css?v=</span><span style="color:#e6db74">${</span>COMMIT<span style="color:#e6db74">}</span><span style="color:#e6db74">/g&#34;</span> index.html </span></span><span class="line"><span class="cl">sed -i <span class="s2">&#34;s/css?=\w*/css?v=</span><span class="si">${</span><span class="nv">COMMIT</span><span class="si">}</span><span class="s2">/g&#34;</span> index.html
</span></span></code></pre></div><p>Let&rsquo;s talk real quick about what&rsquo;s happening here:</p> </span></span></code></pre></div><p>Let&rsquo;s talk real quick about what&rsquo;s happening here:</p>
<p><code>COMMIT=&quot;$(git rev-parse HEAD)&quot;</code> gets the commit id from Git and assigns it the variable <code>$COMMIT</code>.</p> <p><code>COMMIT=&quot;$(git rev-parse HEAD)&quot;</code> gets the commit id from Git and assigns it the variable <code>$COMMIT</code>.</p>
<p>Then, <code>sed -i &quot;s/css?=\w*/css?v=${COMMIT}/g&quot; index.html</code> does a find and replace on <code>index.html</code>. The regular expression <code>css?=\w*</code> matches &lsquo;css?=&rsquo; plus any number of contiguous alphanumeric characters (everything until the next quote mark, basically) before replacing these alphanumeric characters with the commit id. The flag <code>-i</code> tells sed to edit the file in place. The <code>g</code> tells it to perform the operation on the whole file.</p> <p>Then, <code>sed -i &quot;s/css?=\w*/css?v=${COMMIT}/g&quot; index.html</code> does a find and replace on <code>index.html</code>. The regular expression <code>css?=\w*</code> matches &lsquo;css?=&rsquo; plus any number of contiguous alphanumeric characters (everything until the next quote mark, basically) before replacing these alphanumeric characters with the commit id. The flag <code>-i</code> tells sed to edit the file in place. The <code>g</code> tells it to perform the operation on the whole file.</p>
<p>Now, whenever we push a new commit, any CSS imports in <code>index.html</code> will be changed to something like this:</p> <p>Now, whenever we push a new commit, any CSS imports in <code>index.html</code> will be changed to something like this:</p>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span>&lt;<span style="color:#f92672">link</span> <span style="color:#a6e22e">rel</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;stylesheet&#34;</span> <span style="color:#a6e22e">href</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;css/styles.css?v=ab10c24280844c10c10c1adfb8b85b03b316f72b&#34;</span> /&gt; <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;css/styles.css?v=ab10c24280844c10c10c1adfb8b85b03b316f72b&#34;</span> <span class="p">/&gt;</span>
</span></span></code></pre></div><p>Pretty neat, huh?</p> </span></span></code></pre></div><p>Pretty neat, huh?</p>
<p>There&rsquo;s just one thing bugging me: surely I do actually want the CSS to be cached <em>sometimes</em>. Caching exists for a reason, and I don&rsquo;t want to sacrifice performance. Maybe I can modify the build script so that it only updates the CSS imports when the CSS files have changed&hellip; Sounds like a topic for another blogpost!</p> <p>There&rsquo;s just one thing bugging me: surely I do actually want the CSS to be cached <em>sometimes</em>. Caching exists for a reason, and I don&rsquo;t want to sacrifice performance. Maybe I can modify the build script so that it only updates the CSS imports when the CSS files have changed&hellip; Sounds like a topic for another blogpost!</p>

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>Posts | My New Hugo Site</title> <title>
Posts | My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -44,7 +46,7 @@
<p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the problem handily for me, on my machine. But what about other people&rsquo;s machines?</p> <p>The experienced computer touchers amongst you will be saying &ldquo;this is obviously a cache problem&rdquo;, and you&rsquo;re right, it is obviously a cache problem. Pressing <code>CTR + SHIFT + R</code> (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the problem handily for me, on my machine. But what about other people&rsquo;s machines?</p>
<h2><a href="/posts/permissions-strike-again/">Permissions Strike Again</a></h2> <h2><a href="/posts/permissions-strike-again/">Permissions Strike Again</a></h2>
<h1 id="its-always-permissions">It&rsquo;s always permissions</h1> <h2 id="its-always-permissions">It&rsquo;s always permissions</h2>
<p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p> <p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p>
<p><strong>And it almost always has to do with permissions.</strong></p> <p><strong>And it almost always has to do with permissions.</strong></p>

View File

@ -20,7 +20,7 @@
<link>http://localhost:1313/posts/permissions-strike-again/</link> <link>http://localhost:1313/posts/permissions-strike-again/</link>
<pubDate>Wed, 13 Nov 2024 11:53:13 +0100</pubDate> <pubDate>Wed, 13 Nov 2024 11:53:13 +0100</pubDate>
<guid>http://localhost:1313/posts/permissions-strike-again/</guid> <guid>http://localhost:1313/posts/permissions-strike-again/</guid>
<description>&lt;h1 id=&#34;its-always-permissions&#34;&gt;It&amp;rsquo;s always permissions&lt;/h1&gt;&#xA;&lt;p&gt;Configuring Apache really isn&amp;rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&amp;rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.&lt;/p&gt;&#xA;&lt;p&gt;&lt;strong&gt;And it almost always has to do with permissions.&lt;/strong&gt;&lt;/p&gt;</description> <description>&lt;h2 id=&#34;its-always-permissions&#34;&gt;It&amp;rsquo;s always permissions&lt;/h2&gt;&#xA;&lt;p&gt;Configuring Apache really isn&amp;rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&amp;rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.&lt;/p&gt;&#xA;&lt;p&gt;&lt;strong&gt;And it almost always has to do with permissions.&lt;/strong&gt;&lt;/p&gt;</description>
</item> </item>
<item> <item>
<title>Post 3</title> <title>Post 3</title>

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>Permissions Strike Again | My New Hugo Site</title> <title>
Permissions Strike Again | My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -40,7 +42,7 @@
<time datetime="2024-11-13T11:53:13&#43;01:00">November 13, 2024</time> <time datetime="2024-11-13T11:53:13&#43;01:00">November 13, 2024</time>
<h1 id="its-always-permissions">It&rsquo;s always permissions</h1> <h2 id="its-always-permissions">It&rsquo;s always permissions</h2>
<p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p> <p>Configuring Apache really isn&rsquo;t rocket science. There are a wealth of great tutorials online, the documentation is very well documented, and the defaults work more or less out of the box. But it&rsquo;s one of those jobs that I do just infrequently enough that I always forget things in the interim, and end up making the same old mistakes.</p>
<p><strong>And it almost always has to do with permissions.</strong></p> <p><strong>And it almost always has to do with permissions.</strong></p>
<p>So, I&rsquo;m writing this post both as a means of christening this devlog (<a href="https://demos.ajstepien.xyz">Hi! I&rsquo;m Andrzej! Hire me!</a>) and also as a reminder to myself that <em>the home folder is not executable by default.</em></p> <p>So, I&rsquo;m writing this post both as a means of christening this devlog (<a href="https://demos.ajstepien.xyz">Hi! I&rsquo;m Andrzej! Hire me!</a>) and also as a reminder to myself that <em>the home folder is not executable by default.</em></p>

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>Post 1 | My New Hugo Site</title> <title>
Post 1 | My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>Post 2 | My New Hugo Site</title> <title>
Post 2 | My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>Post 3 | My New Hugo Site</title> <title>
Post 3 | My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>Blue | My New Hugo Site</title> <title>
Blue | My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>Green | My New Hugo Site</title> <title>
Green | My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>Tags | My New Hugo Site</title> <title>
Tags | My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>

View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-us" dir="ltr"> <html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script> <head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>Red | My New Hugo Site</title> <title>
Red | My New Hugo Site
<link rel="stylesheet" href="/css/main.css"> </title>
<link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>

View File

@ -1,5 +1,63 @@
:root {
/* Rosé Pine Dawn */
--rp-base: hsl(32deg, 57%, 95%);
--rp-surface: hsl(35deg, 100%, 98%);
--rp-overlay: hsl(33deg, 43%, 91%);
--rp-muted: hsl(257deg, 9%, 61%);
--rp-subtle: hsl(248deg, 12%, 52%);
--rp-text: hsl(248deg, 19%, 40%);
--rp-love: hsl(343deg, 35%, 55%);
--rp-gold: hsl(35deg, 81%, 56%);
--rp-rose: hsl(3deg, 53%, 67%);
--rp-pine: hsl(197deg, 53%, 34%);
--rp-foam: hsl(189deg, 30%, 48%);
--rp-iris: hsl(268deg, 21%, 57%);
--rp-highlight-low: hsl(25deg, 35%, 93%);
--rp-highlight-med: hsl(10deg, 9%, 86%);
--rp-highlight-high: hsl(315deg, 4%, 80%);
}
@media (prefers-color-scheme: dark) {
:root {
/* Rosé Pine */
--rp-base: hsl(249deg, 22%, 12%);
--rp-surface: hsl(247deg, 23%, 15%);
--rp-overlay: hsl(248deg, 25%, 18%);
--rp-muted: hsl(249deg, 12%, 47%);
--rp-subtle: hsl(248deg, 15%, 61%);
--rp-text: hsl(245deg, 50%, 91%);
--rp-love: hsl(343deg, 76%, 68%);
--rp-gold: hsl(35deg, 88%, 72%);
--rp-rose: hsl(2deg, 55%, 83%);
--rp-pine: hsl(197deg, 49%, 38%);
--rp-foam: hsl(189deg, 43%, 73%);
--rp-iris: hsl(267deg, 57%, 78%);
--rp-highlight-low: hsl(244deg, 18%, 15%);
--rp-highlight-med: hsl(249deg, 15%, 28%);
--rp-highlight-high: hsl(248deg, 13%, 36%);
/* Rosé Pine Moon */
/* --rp-base: hsl(246deg, 24%, 17%); */
/* --rp-surface: hsl(248deg, 24%, 20%); */
/* --rp-overlay: hsl(248deg, 21%, 26%); */
/* --rp-muted: hsl(249deg, 12%, 47%); */
/* --rp-subtle: hsl(248deg, 15%, 61%); */
/* --rp-text: hsl(245deg, 50%, 91%); */
/* --rp-love: hsl(343deg, 76%, 68%); */
/* --rp-gold: hsl(35deg, 88%, 72%); */
/* --rp-rose: hsl(2deg, 66%, 75%); */
/* --rp-pine: hsl(197deg, 48%, 47%); */
/* --rp-foam: hsl(189deg, 43%, 73%); */
/* --rp-iris: hsl(267deg, 57%, 78%); */
/* --rp-highlight-low: hsl(245deg, 22%, 20%); */
/* --rp-highlight-med: hsl(247deg, 16%, 30%); */
/* --rp-highlight-high: hsl(249deg, 15%, 38%); */
}
}
body { body {
color: #222; background-color: var(--rp-base);
color: var(--rp-text);
font-family: sans-serif; font-family: sans-serif;
line-height: 1.5; line-height: 1.5;
margin: 1rem; margin: 1rem;
@ -9,6 +67,7 @@ body {
header { header {
border-bottom: 1px solid #222; border-bottom: 1px solid #222;
margin-bottom: 1rem; margin-bottom: 1rem;
/* background-color: var(--rp-muted); */
} }
footer { footer {
@ -17,6 +76,40 @@ footer {
} }
a { a {
color: #00e; color: var(--rp-foam);
text-decoration: none; text-decoration: none;
} }
a:visited {
color: var(--rp-pine);
}
h1 {
color: var(--rp-gold);
/* background-color: var(--rp-overlay); */
background-image: linear-gradient(to bottom, var(--rp-overlay), var(--rp-overlay), var(--rp-base));
border-radius: 1rem 1rem 0 0;
padding: 1rem;
}
h2 {
color: var(--rp-gold);
}
code {
background: var(--rp-surface);
padding: 0.3em;
border-radius: 1em;
span {
background: var(--rp-surface);
}
}
.highlight {
padding: 1rem;
background-color: var(--rp-surface);
border-radius: 1rem;
}

View File

@ -0,0 +1,446 @@
:root {
/* Rosé Pine Dawn */
--rp-base: hsl(32deg, 57%, 95%);
--rp-surface: hsl(35deg, 100%, 98%);
--rp-overlay: hsl(33deg, 43%, 91%);
}
@media (prefers-color-scheme: dark) {
:root {
/* Rosé Pine */
--rp-base: hsl(249deg, 22%, 12%);
--rp-surface: hsl(247deg, 23%, 15%);
--rp-overlay: hsl(248deg, 25%, 18%);
}
}
/* Background */
.bg {
color: #e0def4;
background-color: var(--rp-surface);
}
/* PreWrapper */
.chroma {
color: #e0def4;
background-color: var(--rp-surface);
}
/* Other */
.chroma .x {}
/* Error */
.chroma .err {
color: #eb6f92
}
/* CodeLine */
.chroma .cl {}
/* LineLink */
.chroma .lnlinks {
outline: none;
text-decoration: none;
color: inherit
}
/* LineTableTD */
.chroma .lntd {
vertical-align: top;
padding: 0;
margin: 0;
border: 0;
}
/* LineTable */
.chroma .lntable {
border-spacing: 0;
padding: 0;
margin: 0;
border: 0;
}
/* LineHighlight */
.chroma .hl {
background-color: #39374a
}
/* LineNumbersTable */
.chroma .lnt {
white-space: pre;
-webkit-user-select: none;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f
}
/* LineNumbers */
.chroma .ln {
white-space: pre;
-webkit-user-select: none;
user-select: none;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
color: #7f7f7f
}
/* Line */
.chroma .line {
display: flex;
}
/* Keyword */
.chroma .k {
color: #3e8fb0
}
/* KeywordConstant */
.chroma .kc {
color: #3e8fb0
}
/* KeywordDeclaration */
.chroma .kd {
color: #3e8fb0
}
/* KeywordNamespace */
.chroma .kn {
color: #c4a7e7
}
/* KeywordPseudo */
.chroma .kp {
color: #3e8fb0
}
/* KeywordReserved */
.chroma .kr {
color: #3e8fb0
}
/* KeywordType */
.chroma .kt {
color: #3e8fb0
}
/* Name */
.chroma .n {
color: #ea9a97
}
/* NameAttribute */
.chroma .na {
color: #ea9a97
}
/* NameBuiltin */
.chroma .nb {
color: #ea9a97
}
/* NameBuiltinPseudo */
.chroma .bp {
color: #ea9a97
}
/* NameClass */
.chroma .nc {
color: #9ccfd8
}
/* NameConstant */
.chroma .no {
color: #f6c177
}
/* NameDecorator */
.chroma .nd {
color: #908caa
}
/* NameEntity */
.chroma .ni {
color: #ea9a97
}
/* NameException */
.chroma .ne {
color: #3e8fb0
}
/* NameFunction */
.chroma .nf {
color: #ea9a97
}
/* NameFunctionMagic */
.chroma .fm {
color: #ea9a97
}
/* NameLabel */
.chroma .nl {
color: #ea9a97
}
/* NameNamespace */
.chroma .nn {
color: #ea9a97
}
/* NameOther */
.chroma .nx {}
/* NameProperty */
.chroma .py {
color: #ea9a97
}
/* NameTag */
.chroma .nt {
color: #ea9a97
}
/* NameVariable */
.chroma .nv {
color: #ea9a97
}
/* NameVariableClass */
.chroma .vc {
color: #ea9a97
}
/* NameVariableGlobal */
.chroma .vg {
color: #ea9a97
}
/* NameVariableInstance */
.chroma .vi {
color: #ea9a97
}
/* NameVariableMagic */
.chroma .vm {
color: #ea9a97
}
/* Literal */
.chroma .l {
color: #f6c177
}
/* LiteralDate */
.chroma .ld {
color: #f6c177
}
/* LiteralString */
.chroma .s {
color: #f6c177
}
/* LiteralStringAffix */
.chroma .sa {
color: #f6c177
}
/* LiteralStringBacktick */
.chroma .sb {
color: #f6c177
}
/* LiteralStringChar */
.chroma .sc {
color: #f6c177
}
/* LiteralStringDelimiter */
.chroma .dl {
color: #f6c177
}
/* LiteralStringDoc */
.chroma .sd {
color: #f6c177
}
/* LiteralStringDouble */
.chroma .s2 {
color: #f6c177
}
/* LiteralStringEscape */
.chroma .se {
color: #3e8fb0
}
/* LiteralStringHeredoc */
.chroma .sh {
color: #f6c177
}
/* LiteralStringInterpol */
.chroma .si {
color: #f6c177
}
/* LiteralStringOther */
.chroma .sx {
color: #f6c177
}
/* LiteralStringRegex */
.chroma .sr {
color: #f6c177
}
/* LiteralStringSingle */
.chroma .s1 {
color: #f6c177
}
/* LiteralStringSymbol */
.chroma .ss {
color: #f6c177
}
/* LiteralNumber */
.chroma .m {
color: #f6c177
}
/* LiteralNumberBin */
.chroma .mb {
color: #f6c177
}
/* LiteralNumberFloat */
.chroma .mf {
color: #f6c177
}
/* LiteralNumberHex */
.chroma .mh {
color: #f6c177
}
/* LiteralNumberInteger */
.chroma .mi {
color: #f6c177
}
/* LiteralNumberIntegerLong */
.chroma .il {
color: #f6c177
}
/* LiteralNumberOct */
.chroma .mo {
color: #f6c177
}
/* Operator */
.chroma .o {
color: #908caa
}
/* OperatorWord */
.chroma .ow {
color: #908caa
}
/* Punctuation */
.chroma .p {
color: #908caa
}
/* Comment */
.chroma .c {
color: #6e6a86
}
/* CommentHashbang */
.chroma .ch {
color: #6e6a86
}
/* CommentMultiline */
.chroma .cm {
color: #6e6a86
}
/* CommentSingle */
.chroma .c1 {
color: #6e6a86
}
/* CommentSpecial */
.chroma .cs {
color: #6e6a86
}
/* CommentPreproc */
.chroma .cp {
color: #6e6a86
}
/* CommentPreprocFile */
.chroma .cpf {
color: #6e6a86
}
/* Generic */
.chroma .g {}
/* GenericDeleted */
.chroma .gd {
color: #eb6f92
}
/* GenericEmph */
.chroma .ge {
font-style: italic
}
/* GenericError */
.chroma .gr {}
/* GenericHeading */
.chroma .gh {}
/* GenericInserted */
.chroma .gi {
color: #9ccfd8
}
/* GenericOutput */
.chroma .go {}
/* GenericPrompt */
.chroma .gp {}
/* GenericStrong */
.chroma .gs {
font-weight: bold
}
/* GenericSubheading */
.chroma .gu {
color: #c4a7e7
}
/* GenericTraceback */
.chroma .gt {}
/* GenericUnderline */
.chroma .gl {}
/* TextWhitespace */
.chroma .w {}

View File

@ -4,6 +4,3 @@ date = 2023-01-01T08:00:00-07:00
draft = false draft = false
+++ +++
Laborum voluptate pariatur ex culpa magna nostrud est incididunt fugiat
pariatur do dolor ipsum enim. Consequat tempor do dolor eu. Non id id anim anim
excepteur excepteur pariatur nostrud qui irure ullamco.

View File

@ -1,5 +1,7 @@
<meta charset="utf-8"> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width" />
<title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title site.Title }}{{ end }}</title> <title>
{{ partialCached "head/css.html" . }} {{ if .IsHome }}{{ site.Title }}{{ else }}{{ printf "%s | %s" .Title
{{ partialCached "head/js.html" . }} site.Title }}{{ end }}
</title>
{{ partialCached "head/css.html" . }} {{ partialCached "head/js.html" . }}

View File

@ -1,9 +1,14 @@
{{- with resources.Get "css/main.css" }} {{- with resources.Get "css/main.css" }} {{- if eq hugo.Environment
{{- if eq hugo.Environment "development" }} "development" }}
<link rel="stylesheet" href="{{ .RelPermalink }}"> <link rel="stylesheet" href="{{ .RelPermalink }}" />
{{- else }}
{{- with . | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{- end }}
{{- end }}
{{- end }} {{- end }}
{{- with resources.Get "css/syntax.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" />
{{- else }} {{- with . | minify | fingerprint }}
<link
rel="stylesheet"
href="{{ .RelPermalink }}"
integrity="{{ .Data.Integrity }}"
crossorigin="anonymous"
/>
{{- end }} {{- end }} {{- end }}