alexander.nutz/website-build
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Alexander Nutz
2025-08-29 15:28:30 +02:00
parent 83b8df17fe
commit 591ea99899
143 changed files with 7773 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
build/article-favicon.typ.min.html Normal file
View File

@@ -0,0 +1,232 @@
<!DOCTYPE html>
<html>
<head>
<title>The making of the favicon</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" sizes="512x512" href="res/favicon.png">
<link rel="image_src" type="image/png" href="res/favicon.png">
<link type="application/atom+xml" rel="alternate" title="alexs168's blog" href="atom.xml">
</head>
<body>
<style>
@font-face {
font-family: 'DejaVu Sans Mono';
src:local('DejaVu Sans Mono'),
url('res/DejaVuSansMono.woff2') format('woff2'),
local('Courier New'),
local(Courier),
local(monospace);
font-weight: normal;
font-style: normal;
font-display: swap;
}
/*
@font-face {
font-family: 'DejaVu Sans Mono';
src:local('DejaVu Sans Mono'),
url('res/DejaVuSansMono-Bold.woff2') format('woff2'),
local('Courier New'),
local(Courier),
local(monospace);
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DejaVu Sans';
src:local('DejaVu Sans'),
url('res/DejaVuSans-Bold.woff2') format('woff2'),
local('Courier New');
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'DejaVu Sans';
src:local('DejaVu Sans'),
url('res/DejaVuSans.woff2') format('woff2'),
local('Courier New');
font-weight: normal;
font-style: normal;
font-display: swap;
}*/
body {
font-family: DejaVu Sans Mono;
font-size: 10pt;
}
td {
width: 100%;
display: inline;
vertical-align: top;
}
h1,h2,h3,h4 {
margin-top: 1%;
margin-bottom: 0.75%;
}
p {
margin-top: 0.75%;
margin-bottom: 0.75%;
}
ul {
margin-top: 0%;
}
.current {
font-weight: bold;
}
pre {
margin-top: 0px;
margin-bottom: 0px;
display: inline;
}
a {
color: #3f51b5;
text-decoration: none;
}
a:visited {
color: #3f51b5;
text-decoration: none;
}
</style>
<div style="
">
<p><br></p>
<h1>The making of the favicon</h1>
<p><span style="font-size: 9pt"><p>Git revision <a href="https://github.com/alex-s168/website/tree/c80eb6ef20acd402096f38d45bb40779fa15149b">#c80eb6ef</a></p><p><br>Modified at 26. July 2025 15:04</p><p>Written by <a href="https://alex.vxcc.dev">alex_s168</a></p></span></p>
</div>
<div style="
">
<p><br>The favicon of my website currently is:</p>
<img src="res/favicon.png" alt="image" style="width:38%;">
</div>
<div style="
">
<p><br>This represents an <a href="https://www.sciencedirect.com/science/article/pii/S0890540197926432">interaction combinator</a></p>
<p>tree, that can be interpreted as a <a href="https://en.wikipedia.org/wiki/Lambda_calculus">lambda calculus</a></p>
<p>expression.</p>
</div>
<div style="
">
<p><br><span style="text-decoration: underline"><h2>Step 0: Designing the Circuit</h2></span> I ended up with this:</p>
<img src="res/article-favicon/step0.png" alt="image" style="width:32%;">
<p>(this is the second attempt at layouting the circuit)</p>
</div>
<div style="
">
<p><br><span style="text-decoration: underline"><h2>Step 1: Sketching</h2></span> While starting doing this, I realised that one wire always overlaps with one node triangle, unless I cheated. Here is a visual representation of this (inaccurate):</p>
<img src="res/article-favicon/step1_0.png" alt="image" style="width:18%;">
<p><br>This means that I have to modify the layouting from step 0 a bit, which is unfortunate, but in retrospect, I think that it makes the result look better:</p>
<img src="res/article-favicon/step1_1.png" alt="image" style="width:25%;">
<p><br>That however takes up too much space, so I did another variation:</p>
<img src="res/article-favicon/step1_2.png" alt="image" style="width:25%;">
<p><br>I also did another variation here, but decided to not use that.</p>
</div>
<div style="
">
<p><br><span style="text-decoration: underline"><h2>Step 2: Preparation for coloring</h2></span> I colored the back side of the piece of paper which contains the sketeches with a pencil, put a white piece of paper behind it, and then re-traced the line, to get a lighter version of the sketch onto the white paper.</p>
<img src="res/article-favicon/step2.png" alt="image" style="width:25%;">
<p><br>Then I used modern technology (a copier) to copy that piece of paper multiple times, and also scale it up (to allow for more details).</p>
</div>
<div style="
">
<p><br><span style="text-decoration: underline"><h2>Step 3: Coloring</h2></span> It was a disaster…</p>
<img src="res/article-favicon/step3_0.png" alt="image" style="width:70%;">
<p><br></p>
<img src="res/article-favicon/step3_1.png" alt="image" style="width:70%;">
<p><br>Some variants actually look nice, but only parts of it.</p>
</div>
<div style="
">
<p><br><span style="text-decoration: underline"><h2>Step 4: Outsourcing the coloring</h2></span> After some time, I just gave up, and decided to ask my sister for help…</p>
<img src="res/article-favicon/step4_0.png" alt="image" style="width:70%;">
<p><br>I only told her (translated):</p>
<div class style="margin-top:4pt;"><span style="
border:1pt solid black;
border-radius:2pt;
padding:1.6pt;display:inline-block"><pre><code>Can you please color this?<br>It's supposed to be a circuit, and it will be a small logo for a website.<br>The website is mainly black and white, but this (context: persian blue) blue would work too.</code></pre></span></div>
<p>And less than half a minute later, she came up with this:</p>
<img src="res/article-favicon/step4_1.png" alt="image" style="width:38%;">
<p><br>We considered that the logo will end up being quite small, so “we” wanted it to look good when zoomed out. This is a pretty nice idea, because the different colored wires end up blending together nicely.</p>
<p><br>I put that into the scanner, and meanwhile she experimented with different filling styles.</p>
<p><br>Then she came up with this (the final version):</p>
<img src="res/article-favicon/step4_2.png" alt="image" style="width:38%;">
<p>Filling the drawing only took her about 20 seconds!</p>
</div>
<div style="
"><br><span style="text-decoration: underline"><h2>Step 5: Digital Modifications</h2></span> As last step, I removed some of the sketch lines and some minor imperfections digitally.</div>
<div style="
">
<p><br><span style="text-decoration: underline"><h2>Conclusion</h2></span> I like the final result a lot (as small logo), but it’s a bit too detailed as favicon.</p>
<p>I will re-visit this topic in the future.</p>
</div>
<script>
function gotoVariant(variant) {
window.location.href = window.location.href.replace(/\.\w+.html/g, variant);
}
window.addEventListener('beforeprint', (event) => {
gotoVariant('.min.pdf');
});
</script>
<script src="coffee.js" async>
</script>
</body>
</html>