andrzej
/
devlog
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: andrzej:60a5ea416616e8485e8f10a44c51bfd78974abe1
Branches Tags
andrzej:main
...
compare: andrzej:5c99bd886759fd000a75d416c93717509c87985f
Branches Tags
andrzej:main

2 Commits
60a5ea4166 ... 5c99bd8867

Author SHA1 Message Date
andrzej 5c99bd8867 fix code box overflow 2024-11-15 11:46:13 +01:00
andrzej 6a298cd833 add defaults 2024-11-15 11:46:00 +01:00
22 changed files with 230 additions and 97 deletions
Show Stats Expand all files Collapse all files

3
content/posts/hard-problem.md
View File

@ -53,7 +53,8 @@ Now, whenever we push a new commit, any CSS imports in `index.html` will be chan
```html ```html
<link rel="stylesheet" <link rel="stylesheet"
href="css/styles.css?ab10c24280844c10c10c1adfb8b85b03b316f72b" href="css/styles.css?=ab184
410c10c1adfb8b85b03b316f72b"
/> />
``` ```
Now I just need to add the build script to my Jenkinsfile, and the problem is solved. Now I just need to add the build script to my Jenkinsfile, and the problem is solved.

3
public/categories/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -16,7 +17,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="http://localhost:1313"><h1>CODING WITH ANDRZEJ</h1></a> <a href=http://localhost:1313/><h1>CODING WITH ANDRZEJ</h1></a>
<nav> <nav>
<ul> <ul>

62
public/css/defaults.css Normal file
View File

@ -0,0 +1,62 @@
*,
*::before,
*::after {
box-sizing: border-box;
}
img {
display: block;
max-width: 100%;
}
menu:not(article menu),
ol:not(article ol),
ul:not(article ul) {
list-style: none;
}
menu,
ol,
ul {
padding-left: 0;
}
article ol,
article ul {
list-style-position: inside;
}
a {
/* Places underlines below the descenders */
text-underline-position: under;
/* Sets the thickness as a percentage of the font size */
text-decoration-thickness: 8;
}
/* <html> = the root */
html {
font-size: 62.5%;
/* (62.5/100) * 16px = 10px */
-webkit-text-size-adjust: none;
/* for iOS Safari */
text-size-adjust: none;
/* for other mobile browsers */
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
label,
button,
select,
summary,
[type=radio],
[type=submit],
[type=checkbox] {
cursor: pointer;
}

23
public/css/main.css
View File

@ -18,6 +18,9 @@
--rp-highlight-low: hsl(25deg, 35%, 93%); --rp-highlight-low: hsl(25deg, 35%, 93%);
--rp-highlight-med: hsl(10deg, 9%, 86%); --rp-highlight-med: hsl(10deg, 9%, 86%);
--rp-highlight-high: hsl(315deg, 4%, 80%); --rp-highlight-high: hsl(315deg, 4%, 80%);
/* consts */
--const-lilac: #907aa9
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -62,21 +65,33 @@ body {
background-color: var(--rp-base); background-color: var(--rp-base);
color: var(--rp-text); color: var(--rp-text);
font-family: sans-serif; font-family: sans-serif;
font-size: 1.6rem;
line-height: 1.5; line-height: 1.5;
width: 100vw; width: 100vw;
/* FLEX */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
/* Margins, padding etc */
padding: 1rem;
margin: 0;
} }
header { header {
align-self: flex-start; align-self: flex-start;
width: 100vw; width: 100%;
} }
main { main {
max-width: 100%;
@media screen and (min-width:600px) {
max-width: 800px; max-width: 800px;
}
} }
strong { strong {
@ -110,8 +125,8 @@ a:visited {
h1 { h1 {
color: var(--rp-gold); color: var(--rp-gold);
/* background-color: var(--rp-overlay); */ background-color: var(--const-lilac);
background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base)); /* background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base)); */
border-radius: 1rem 1rem 0 0; border-radius: 1rem 1rem 0 0;
padding: 1rem; padding: 1rem;
text-shadow: 1px 1px 2px black; text-shadow: 1px 1px 2px black;
@ -136,7 +151,7 @@ code {
.highlight { .highlight {
padding: 1rem; padding-left: 2rem;
background-color: var(--rp-surface); background-color: var(--rp-surface);
border-radius: 1rem; border-radius: 1rem;
} }

4
public/css/syntax.css
View File

@ -1,6 +1,3 @@
/* TODO: map all these hexes to media var */
/* Background */ /* Background */
.bg { .bg {
color: #e0def4; color: #e0def4;
@ -11,6 +8,7 @@
.chroma { .chroma {
color: #e0def4; color: #e0def4;
background-color: hsl(247deg, 23%, 15%); background-color: hsl(247deg, 23%, 15%);
overflow: scroll;
} }

1
public/index.html
View File

@ -10,6 +10,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>

16
public/posts/hard-problem/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -37,15 +38,11 @@
<main> <main>
<h1>Hard Problem? Invalidating the browser cache</h1>
<time datetime="2024-11-13T14:24:21&#43;01:00">November 13, 2024</time>
<h1>Hard Problem? Invalidating the browser cache</h1> <p><strong>I had a bit of an issue with my <a href="https://demos.ajstepien.xyz">website</a> recently.</strong></p>
<time datetime="2024-11-13T14:24:21&#43;01:00">November 13, 2024</time>
<p><strong>I had a bit of an issue with my <a href="https://demos.ajstepien.xyz">website</a> recently.</strong></p>
<p>I pushed some changes incorporating images for the first time (I know &ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site&hellip; in Firefox, the images were not styled. Stranger still, they <em>were</em> styled when I loaded the same page in Chrome.</p> <p>I pushed some changes incorporating images for the first time (I know &ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site&hellip; in Firefox, the images were not styled. Stranger still, they <em>were</em> styled when I loaded the same page in Chrome.</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 immediate problem for me, on my machine. But what about other people&rsquo;s machines? <strong>I needed to cache-bust.</strong></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 immediate problem for me, on my machine. But what about other people&rsquo;s machines? <strong>I needed to cache-bust.</strong></p>
<p>Post-processors such as Tailwind use fancy &lsquo;fingerprinting&rsquo; techniques for this, but I want something simpler than that for this project. Something I can code myself, without losing sight of what&rsquo;s happening under the hood.</p> <p>Post-processors such as Tailwind use fancy &lsquo;fingerprinting&rsquo; techniques for this, but I want something simpler than that for this project. Something I can code myself, without losing sight of what&rsquo;s happening under the hood.</p>
@ -68,15 +65,14 @@
<p>Then, <code>sed -i &quot;s/css?=\w*/css?${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?${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" 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> <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></span><span class="line"><span class="cl"><span class="na">href</span><span class="o">=</span><span class="s">&#34;css/styles.css?ab10c24280844c10c10c1adfb8b85b03b316f72b&#34;</span> </span></span><span class="line"><span class="cl"><span class="na">href</span><span class="o">=</span><span class="s">&#34;css/styles.css?=ab184
</span></span></span><span class="line"><span class="cl"><span class="s">410c10c1adfb8b85b03b316f72b&#34;</span>
</span></span><span class="line"><span class="cl"><span class="p">/&gt;</span> </span></span><span class="line"><span class="cl"><span class="p">/&gt;</span>
</span></span></code></pre></div><p>Now I just need to add the build script to my Jenkinsfile, and the problem is solved.</p> </span></span></code></pre></div><p>Now I just need to add the build script to my Jenkinsfile, and the problem is solved.</p>
<p>Pretty neat, huh?</p> <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&hellip;</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&hellip;</p>
</main> </main>
<footer> <footer>
<p>Copyright 2024. All rights reserved.</p> <p>Copyright 2024. All rights reserved.</p>

7
public/posts/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -16,7 +17,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="http://localhost:1313"><h1>CODING WITH ANDRZEJ</h1></a> <a href=http://localhost:1313/><h1>CODING WITH ANDRZEJ</h1></a>
<nav> <nav>
<ul> <ul>
@ -42,8 +43,8 @@
<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>
<p><strong>I had a bit of an issue with my <a href="https://demos.ajstepien.xyz">website</a> recently.</strong></p> <p><strong>I had a bit of an issue with my <a href="https://demos.ajstepien.xyz">website</a> recently.</strong></p>
<p>I pushed some changes incorporating images for the first time (I know, very swish), and everything seemed to be working just fine, but when I loaded the production site in Firefox, the images were not styled. Stranger still, they <em>were</em> styled when I loaded the same page in Chrome.</p> <p>I pushed some changes incorporating images for the first time (I know &ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site&hellip; in Firefox, the images were not styled. Stranger still, they <em>were</em> styled when I loaded the same page in Chrome.</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? I need to cache-bust.</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 immediate problem for me, on my machine. But what about other people&rsquo;s machines? <strong>I needed to cache-bust.</strong></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>
<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>

2
public/posts/index.xml
View File

@ -13,7 +13,7 @@
<link>http://localhost:1313/posts/hard-problem/</link> <link>http://localhost:1313/posts/hard-problem/</link>
<pubDate>Wed, 13 Nov 2024 14:24:21 +0100</pubDate> <pubDate>Wed, 13 Nov 2024 14:24:21 +0100</pubDate>
<guid>http://localhost:1313/posts/hard-problem/</guid> <guid>http://localhost:1313/posts/hard-problem/</guid>
<description>&lt;p&gt;&lt;strong&gt;I had a bit of an issue with my &lt;a href=&#34;https://demos.ajstepien.xyz&#34;&gt;website&lt;/a&gt; recently.&lt;/strong&gt;&lt;/p&gt;&#xA;&lt;p&gt;I pushed some changes incorporating images for the first time (I know, very swish), and everything seemed to be working just fine, but when I loaded the production site in Firefox, the images were not styled. Stranger still, they &lt;em&gt;were&lt;/em&gt; styled when I loaded the same page in Chrome.&lt;/p&gt;&#xA;&lt;p&gt;The experienced computer touchers amongst you will be saying &amp;ldquo;this is obviously a cache problem&amp;rdquo;, and you&amp;rsquo;re right, it is obviously a cache problem. Pressing &lt;code&gt;CTR + SHIFT + R&lt;/code&gt; (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&amp;rsquo;s machines? I need to cache-bust.&lt;/p&gt;</description> <description>&lt;p&gt;&lt;strong&gt;I had a bit of an issue with my &lt;a href=&#34;https://demos.ajstepien.xyz&#34;&gt;website&lt;/a&gt; recently.&lt;/strong&gt;&lt;/p&gt;&#xA;&lt;p&gt;I pushed some changes incorporating images for the first time (I know &amp;ndash; very swish, very modern), and everything seemed to be working just fine, but when I loaded the production site&amp;hellip; in Firefox, the images were not styled. Stranger still, they &lt;em&gt;were&lt;/em&gt; styled when I loaded the same page in Chrome.&lt;/p&gt;&#xA;&lt;p&gt;The experienced computer touchers amongst you will be saying &amp;ldquo;this is obviously a cache problem&amp;rdquo;, and you&amp;rsquo;re right, it is obviously a cache problem. Pressing &lt;code&gt;CTR + SHIFT + R&lt;/code&gt; (which forces Firefox to clear the cache and do a full reload) proved this thesis, and solved the immediate problem for me, on my machine. But what about other people&amp;rsquo;s machines? &lt;strong&gt;I needed to cache-bust.&lt;/strong&gt;&lt;/p&gt;</description>
</item> </item>
<item> <item>
<title>Permissions Strike Again</title> <title>Permissions Strike Again</title>

13
public/posts/permissions-strike-again/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -37,15 +38,11 @@
<main> <main>
<h1>Permissions Strike Again</h1>
<time datetime="2024-11-13T11:53:13&#43;01:00">November 13, 2024</time>
<h1>Permissions Strike Again</h1> <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>
<time datetime="2024-11-13T11:53:13&#43;01:00">November 13, 2024</time>
<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><em><strong>And it almost always has to do with permissions.</strong></em></p> <p><em><strong>And it almost always has to do with permissions.</strong></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> <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>Please, Andrzej. Please. The next time you&rsquo;re building a website, be it for a client or for yourself, and you find yourself scratching your head, wondering what error you may have made in the <code>.confs</code>, checking the permissions of your symlink again and again, ask yourself: is my symlink pointing to a directory in the home folder? Because Apache can&rsquo;t open the home folder until you change the permissions!</p> <p>Please, Andrzej. Please. The next time you&rsquo;re building a website, be it for a client or for yourself, and you find yourself scratching your head, wondering what error you may have made in the <code>.confs</code>, checking the permissions of your symlink again and again, ask yourself: is my symlink pointing to a directory in the home folder? Because Apache can&rsquo;t open the home folder until you change the permissions!</p>
@ -64,8 +61,6 @@
</code></pre><p>IT&rsquo;S THAT EASY.</p> </code></pre><p>IT&rsquo;S THAT EASY.</p>
</main> </main>
<footer> <footer>
<p>Copyright 2024. All rights reserved.</p> <p>Copyright 2024. All rights reserved.</p>

13
public/posts/post-1/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -37,18 +38,13 @@
<main> <main>
<h1>Post 1</h1>
<time datetime="2023-01-15T09:00:00-07:00">January 15, 2023</time>
<h1>Post 1</h1> <p>Tempor proident minim aliquip reprehenderit dolor et ad anim Lorem duis sint eiusmod. Labore ut ea duis dolor. Incididunt consectetur proident qui occaecat incididunt do nisi Lorem. Tempor do laborum elit laboris excepteur eiusmod do. Eiusmod nisi excepteur ut amet pariatur adipisicing Lorem.</p>
<time datetime="2023-01-15T09:00:00-07:00">January 15, 2023</time>
<p>Tempor proident minim aliquip reprehenderit dolor et ad anim Lorem duis sint eiusmod. Labore ut ea duis dolor. Incididunt consectetur proident qui occaecat incididunt do nisi Lorem. Tempor do laborum elit laboris excepteur eiusmod do. Eiusmod nisi excepteur ut amet pariatur adipisicing Lorem.</p>
<p>Occaecat nulla excepteur dolore excepteur duis eiusmod ullamco officia anim in voluptate ea occaecat officia. Cillum sint esse velit ea officia minim fugiat. Elit ea esse id aliquip pariatur cupidatat id duis minim incididunt ea ea. Anim ut duis sunt nisi. Culpa cillum sit voluptate voluptate eiusmod dolor. Enim nisi Lorem ipsum irure est excepteur voluptate eu in enim nisi. Nostrud ipsum Lorem anim sint labore consequat do.</p> <p>Occaecat nulla excepteur dolore excepteur duis eiusmod ullamco officia anim in voluptate ea occaecat officia. Cillum sint esse velit ea officia minim fugiat. Elit ea esse id aliquip pariatur cupidatat id duis minim incididunt ea ea. Anim ut duis sunt nisi. Culpa cillum sit voluptate voluptate eiusmod dolor. Enim nisi Lorem ipsum irure est excepteur voluptate eu in enim nisi. Nostrud ipsum Lorem anim sint labore consequat do.</p>
<div> <div>
<div>Tags:</div> <div>Tags:</div>
<ul> <ul>
@ -56,7 +52,6 @@
</ul> </ul>
</div> </div>
</main> </main>
<footer> <footer>
<p>Copyright 2024. All rights reserved.</p> <p>Copyright 2024. All rights reserved.</p>

13
public/posts/post-2/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -37,18 +38,13 @@
<main> <main>
<h1>Post 2</h1>
<time datetime="2023-02-15T10:00:00-07:00">February 15, 2023</time>
<h1>Post 2</h1> <p>Anim eiusmod irure incididunt sint cupidatat. Incididunt irure irure irure nisi ipsum do ut quis fugiat consectetur proident cupidatat incididunt cillum. Dolore voluptate occaecat qui mollit laborum ullamco et. Ipsum laboris officia anim laboris culpa eiusmod ex magna ex cupidatat anim ipsum aute. Mollit aliquip occaecat qui sunt velit ut cupidatat reprehenderit enim sunt laborum. Velit veniam in officia nulla adipisicing ut duis officia.</p>
<time datetime="2023-02-15T10:00:00-07:00">February 15, 2023</time>
<p>Anim eiusmod irure incididunt sint cupidatat. Incididunt irure irure irure nisi ipsum do ut quis fugiat consectetur proident cupidatat incididunt cillum. Dolore voluptate occaecat qui mollit laborum ullamco et. Ipsum laboris officia anim laboris culpa eiusmod ex magna ex cupidatat anim ipsum aute. Mollit aliquip occaecat qui sunt velit ut cupidatat reprehenderit enim sunt laborum. Velit veniam in officia nulla adipisicing ut duis officia.</p>
<p>Exercitation voluptate irure in irure tempor mollit Lorem nostrud ad officia. Velit id fugiat occaecat do tempor. Sit officia Lorem aliquip eu deserunt consectetur. Aute proident deserunt in nulla aliquip dolore ipsum Lorem ut cupidatat consectetur sit sint laborum. Esse cupidatat sit sint sunt tempor exercitation deserunt. Labore dolor duis laborum est do nisi ut veniam dolor et nostrud nostrud.</p> <p>Exercitation voluptate irure in irure tempor mollit Lorem nostrud ad officia. Velit id fugiat occaecat do tempor. Sit officia Lorem aliquip eu deserunt consectetur. Aute proident deserunt in nulla aliquip dolore ipsum Lorem ut cupidatat consectetur sit sint laborum. Esse cupidatat sit sint sunt tempor exercitation deserunt. Labore dolor duis laborum est do nisi ut veniam dolor et nostrud nostrud.</p>
<div> <div>
<div>Tags:</div> <div>Tags:</div>
<ul> <ul>
@ -57,7 +53,6 @@
</ul> </ul>
</div> </div>
</main> </main>
<footer> <footer>
<p>Copyright 2024. All rights reserved.</p> <p>Copyright 2024. All rights reserved.</p>

13
public/posts/post-3/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -37,19 +38,14 @@
<main> <main>
<h1>Post 3</h1>
<time datetime="2023-03-15T11:00:00-07:00">March 15, 2023</time>
<h1>Post 3</h1> <p>Occaecat aliqua consequat laborum ut ex aute aliqua culpa quis irure esse magna dolore quis. Proident fugiat labore eu laboris officia Lorem enim. Ipsum occaecat cillum ut tempor id sint aliqua incididunt nisi incididunt reprehenderit. Voluptate ad minim sint est aute aliquip esse occaecat tempor officia qui sunt. Aute ex ipsum id ut in est velit est laborum incididunt. Aliqua qui id do esse sunt eiusmod id deserunt eu nostrud aute sit ipsum. Deserunt esse cillum Lorem non magna adipisicing mollit amet consequat.</p>
<time datetime="2023-03-15T11:00:00-07:00">March 15, 2023</time>
<p>Occaecat aliqua consequat laborum ut ex aute aliqua culpa quis irure esse magna dolore quis. Proident fugiat labore eu laboris officia Lorem enim. Ipsum occaecat cillum ut tempor id sint aliqua incididunt nisi incididunt reprehenderit. Voluptate ad minim sint est aute aliquip esse occaecat tempor officia qui sunt. Aute ex ipsum id ut in est velit est laborum incididunt. Aliqua qui id do esse sunt eiusmod id deserunt eu nostrud aute sit ipsum. Deserunt esse cillum Lorem non magna adipisicing mollit amet consequat.</p>
<p><img src="bryce-canyon.jpg" alt="Bryce Canyon National Park"></p> <p><img src="bryce-canyon.jpg" alt="Bryce Canyon National Park"></p>
<p>Sit excepteur do velit veniam mollit in nostrud laboris incididunt ea. Amet eu cillum ut reprehenderit culpa aliquip labore laborum amet sit sit duis. Laborum id proident nostrud dolore laborum reprehenderit quis mollit nulla amet veniam officia id id. Aliquip in deserunt qui magna duis qui pariatur officia sunt deserunt.</p> <p>Sit excepteur do velit veniam mollit in nostrud laboris incididunt ea. Amet eu cillum ut reprehenderit culpa aliquip labore laborum amet sit sit duis. Laborum id proident nostrud dolore laborum reprehenderit quis mollit nulla amet veniam officia id id. Aliquip in deserunt qui magna duis qui pariatur officia sunt deserunt.</p>
<div> <div>
<div>Tags:</div> <div>Tags:</div>
<ul> <ul>
@ -59,7 +55,6 @@
</ul> </ul>
</div> </div>
</main> </main>
<footer> <footer>
<p>Copyright 2024. All rights reserved.</p> <p>Copyright 2024. All rights reserved.</p>

3
public/tags/blue/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -16,7 +17,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="http://localhost:1313"><h1>CODING WITH ANDRZEJ</h1></a> <a href=http://localhost:1313/><h1>CODING WITH ANDRZEJ</h1></a>
<nav> <nav>
<ul> <ul>

3
public/tags/green/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -16,7 +17,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="http://localhost:1313"><h1>CODING WITH ANDRZEJ</h1></a> <a href=http://localhost:1313/><h1>CODING WITH ANDRZEJ</h1></a>
<nav> <nav>
<ul> <ul>

3
public/tags/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -16,7 +17,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="http://localhost:1313"><h1>CODING WITH ANDRZEJ</h1></a> <a href=http://localhost:1313/><h1>CODING WITH ANDRZEJ</h1></a>
<nav> <nav>
<ul> <ul>

3
public/tags/red/index.html
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="/css/main.css" /> <link rel="stylesheet" href="/css/main.css" />
<link rel="stylesheet" href="/css/syntax.css" /> <link rel="stylesheet" href="/css/syntax.css" />
<link rel="stylesheet" href="/css/defaults.css" />
<script src="/js/main.js"></script> <script src="/js/main.js"></script>
@ -16,7 +17,7 @@
</head> </head>
<body> <body>
<header> <header>
<a href="http://localhost:1313"><h1>CODING WITH ANDRZEJ</h1></a> <a href=http://localhost:1313/><h1>CODING WITH ANDRZEJ</h1></a>
<nav> <nav>
<ul> <ul>

62
themes/cuqui/assets/css/defaults.css Normal file
View File

@ -0,0 +1,62 @@
*,
*::before,
*::after {
box-sizing: border-box;
}
img {
display: block;
max-width: 100%;
}
menu:not(article menu),
ol:not(article ol),
ul:not(article ul) {
list-style: none;
}
menu,
ol,
ul {
padding-left: 0;
}
article ol,
article ul {
list-style-position: inside;
}
a {
/* Places underlines below the descenders */
text-underline-position: under;
/* Sets the thickness as a percentage of the font size */
text-decoration-thickness: 8;
}
/* <html> = the root */
html {
font-size: 62.5%;
/* (62.5/100) * 16px = 10px */
-webkit-text-size-adjust: none;
/* for iOS Safari */
text-size-adjust: none;
/* for other mobile browsers */
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
label,
button,
select,
summary,
[type=radio],
[type=submit],
[type=checkbox] {
cursor: pointer;
}

23
themes/cuqui/assets/css/main.css
View File

@ -18,6 +18,9 @@
--rp-highlight-low: hsl(25deg, 35%, 93%); --rp-highlight-low: hsl(25deg, 35%, 93%);
--rp-highlight-med: hsl(10deg, 9%, 86%); --rp-highlight-med: hsl(10deg, 9%, 86%);
--rp-highlight-high: hsl(315deg, 4%, 80%); --rp-highlight-high: hsl(315deg, 4%, 80%);
/* consts */
--const-lilac: #907aa9
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -62,21 +65,33 @@ body {
background-color: var(--rp-base); background-color: var(--rp-base);
color: var(--rp-text); color: var(--rp-text);
font-family: sans-serif; font-family: sans-serif;
font-size: 1.6rem;
line-height: 1.5; line-height: 1.5;
width: 100vw; width: 100vw;
/* FLEX */
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: start; justify-content: start;
align-items: center; align-items: center;
/* Margins, padding etc */
padding: 1rem;
margin: 0;
} }
header { header {
align-self: flex-start; align-self: flex-start;
width: 100vw; width: 100%;
} }
main { main {
max-width: 100%;
@media screen and (min-width:600px) {
max-width: 800px; max-width: 800px;
}
} }
strong { strong {
@ -110,8 +125,8 @@ a:visited {
h1 { h1 {
color: var(--rp-gold); color: var(--rp-gold);
/* background-color: var(--rp-overlay); */ background-color: var(--const-lilac);
background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base)); /* background-image: linear-gradient(to bottom, var(--rp-highlight-high), var(--rp-overlay), var(--rp-base)); */
border-radius: 1rem 1rem 0 0; border-radius: 1rem 1rem 0 0;
padding: 1rem; padding: 1rem;
text-shadow: 1px 1px 2px black; text-shadow: 1px 1px 2px black;
@ -136,7 +151,7 @@ code {
.highlight { .highlight {
padding: 1rem; padding-left: 2rem;
background-color: var(--rp-surface); background-color: var(--rp-surface);
border-radius: 1rem; border-radius: 1rem;
} }

4
themes/cuqui/assets/css/syntax.css
View File

@ -1,6 +1,3 @@
/* TODO: map all these hexes to media var */
/* Background */ /* Background */
.bg { .bg {
color: #e0def4; color: #e0def4;
@ -11,6 +8,7 @@
.chroma { .chroma {
color: #e0def4; color: #e0def4;
background-color: hsl(247deg, 23%, 15%); background-color: hsl(247deg, 23%, 15%);
overflow: scroll;
} }

16
themes/cuqui/layouts/_default/single.html
View File

@ -1,13 +1,9 @@
{{ define "main" }} {{ define "main" }}
<h1>{{ .Title }}</h1>
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }} {{
$dateHuman := .Date | time.Format ":date_long" }}
<time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
{{ .Content }} {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} {{
<h1>{{ .Title }}</h1> end }}
{{ $dateMachine := .Date | time.Format "2006-01-02T15:04:05-07:00" }}
{{ $dateHuman := .Date | time.Format ":date_long" }}
<time datetime="{{ $dateMachine }}">{{ $dateHuman }}</time>
{{ .Content }}
{{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }}
{{ end }}

3
themes/cuqui/layouts/partials/head/css.html
View File

@ -4,6 +4,9 @@
{{- end }} {{- end }}
{{- with resources.Get "css/syntax.css" }} {{- with resources.Get "css/syntax.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" /> <link rel="stylesheet" href="{{ .RelPermalink }}" />
{{- end }}
{{- with resources.Get "css/defaults.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" />
{{- else }} {{- with . | minify | fingerprint }} {{- else }} {{- with . | minify | fingerprint }}
<link <link
rel="stylesheet" rel="stylesheet"