1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
<!DOCTYPE html>
<html lang="en" prefix="og: https://ogp.me/ns#">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="Recovering scientist. Hacker. ๐ณ๏ธโ๐. He/him." />
<meta name="keywords"
content="" />
<title>
In the Wild: Digitale Gracht // Grisha's awesome website</title>
<meta property="og:site_name" content="Grisha's awesome website"/>
<meta property="og:title" content="Grisha's awesome website | In the Wild: Digitale Gracht"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://oxapentane.com/pics/itw-digitale-gracht/"/>
<meta property="og:description" content="Recovering scientist. Hacker. ๐ณ๏ธโ๐. He/him."/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="In the Wild: Digitale Gracht"/>
<meta name="twitter:description" content="Recovering scientist. Hacker. ๐ณ๏ธโ๐. He/him."/>
<link rel="alternate" type="application/atom+xml" title="Grisha's awesome website" href="https://oxapentane.com/atom.xml">
<style>
html{font-family:monospace;font-size:1rem;line-height:1.5;margin:auto;max-width:70ch;padding:1.5rem 1em 3em}
img{max-width:100%}img:not([src$=".svg"]),article>div,blockquote,pre{border-radius:.3rem}img[src$="#pixelate"]{image-rendering:pixelated}
h1,h2,h3,h4,h5,h6{font-size:inherit;margin:2rem 0 1em}
h1::before{content:'# '}
h2::before{content:'## '}
h3::before{content:'### '}
p{text-align:justify}p,ul,ol,.g,article>footer,article>header{margin:0 0 2em}
pre,blockquote{padding:1.5rem;margin:0 0 1.5rem}pre{overflow-x:auto}pre code{background:0!important}blockquote>*:last-child{margin-bottom:0}
article>img,article>p>img,article>div{display:block;margin-bottom:1.5rem;width:100%}
.yt{aspect-ratio:16/9;width:100%;overflow:hidden}.yt iframe{width:100%;height:100%;border:0}
.s{font-size:.85rem}
.theme{display:inline-block;width:1.5rem;height:1.5rem}.theme img,.theme svg{width:100%;height:100%}
html.light .theme img:first-child,html.light .theme svg:first-child,html.dark .theme img:last-child,html.dark .theme svg:last-child{display:none}
header>div{margin-bottom:1.5rem}footer{margin-top:1.5rem}body>footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
body>footer img,body>footer svg{width:1em;height:1em;vertical-align:middle}
.tags{padding:.5rem 0 0 0}.tags li{display:inline}.tags li+li::before{content:' ยท '}
nav{display:flex;gap:.5rem;margin:1.5rem 0}nav a{flex:1;display:flex;flex-direction:column;align-items:center;overflow:hidden;font-weight:bold}nav img,nav svg{width:2rem;height:2rem;margin-bottom:.25rem}nav a .s{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.5rem}.g a{aspect-ratio:1;display:flex;align-items:center;justify-content:center}.g img{object-fit:contain;max-height:100%;max-width:100%}
.p{list-style:none;padding:0}.p ul{margin:0}.p>li{display:flex;gap:1rem;margin-bottom:1rem}.p time{display:flex;flex-direction:column;align-items:center;min-width:3rem;margin:.25rem 0}.p time span:first-child{font-size:1.5em;line-height:1}
.lb{position:fixed;inset:0;background:#000d;display:flex;align-items:center;justify-content:center;z-index:999;cursor:pointer}.lb img{max-width:95vw;max-height:95vh}
@media(max-width:30em){header .desc{display:none}}
</style>
<style>
html.light{background:oklch(0.9602 0.0811 96.96);--tc:#f5e6b3;color:#000}
html.light a{color:oklch(0.53 0.2448 257.69) }
html.light a:visited{color:oklch(0.48 0.24 290.93)}
html.light a.active,html.light a:active,html.light a:hover{color:oklch(0.53 0.2687 324.53) }
html.light p,html.light ul,html.light ol, html.light .desc {color:oklch(0.4 0.1082 58.76) }
html.light blockquote,html.light pre,html.light code,html.light article>img,html.light article>p>img,html.light .g img{background:oklch(0.94 0.1 93.24)}
html.light code{color:#000}
html.dark{background:#000;--tc:#000;color:#fff}
html.dark a{color:oklch(0.87 0.24 165.59)}
html.dark a:visited{color:oklch(0.79 0.13 297.29)}
html.dark a.active,html.dark a:active,html.dark a:hover{color:oklch(0.76 0.25 344.92)}
html.dark p,html.dark ul,html.dark ol, html.dark .desc {color: oklch(0.92 0.15 94.86)}
html.dark img[src$=".svg"],html.dark nav svg,html.dark .theme svg,html.dark footer svg{filter:invert(1)}
html.dark blockquote,html.dark pre,html.dark code,html.dark article>img,html.dark article>p>img,html.dark .g img{background:#222}
html.dark code{color:#fff}
a.active,a:active,a:hover{text-decoration-style:wavy}
.tags a{text-decoration-style:dotted}
hr{border:0;border-top:1px dashed;clear:both;margin-bottom:1.5rem}
</style>
<meta name="theme-color" id="tc"><script>(function(){var m=matchMedia('(prefers-color-scheme:dark)'),t=localStorage.theme||(m.matches?'dark':'light'),h=document.documentElement,c=document.getElementById('tc');h.className=t;function u(){c.content=getComputedStyle(h).getPropertyValue('--tc')}u();window.T=function(){t=t==='dark'?'light':'dark';localStorage.theme=t;h.className=t;u()}})()</script>
</head>
<body>
<header>
<div class="s" style="display:flex;justify-content:space-between;align-items:center">
<span><strong>Grisha's awesome website</strong><span class="desc"> ยท Recovering scientist. Hacker. ๐ณ๏ธโ๐. He/him.</span></span>
<a href="#" onclick="T();return false" class="theme" aria-label="Toggle theme" title="Toggle theme"><img src="/icons/light.svg" alt="Light mode"><img src="/icons/asleep.svg" alt="Dark mode"></a>
</div>
<hr>
<nav>
<a href="https://oxapentane.com/" aria-label="Hallo ^^"><span class="s">Hallo ^^</span></a>
</nav>
</header>
<hr>
<main>
<article>
<header>
<h1>In the Wild: Digitale Gracht</h1>
<time class="s" datetime="2026-01-07">07 Jan 2026</time>
</header>
<p>This year I want to try to bring you some pictures of the infrastructure in our natural habitat, so welcome to the first edition of "In the Wild"!</p>
<p>I'll start by dumping some old pics to kick things off. And today we are looking at Amsterdam's "Pilot stadsgeluid" (Pilot city soundscapes).</p>
<p>According to <a rel="external" href="https://sensorenregister.amsterdam.nl/">sensorenregister</a></p>
</article>
</main>
<hr>
<footer class="s">
<span>ยฉ Grisha's awesome website 2026</span>
<span><img src="/icons/rss.svg" alt=""> Feeds: <a href="https://oxapentane.com/atom.xml">Atom</a> ยท <a href="https://oxapentane.com/rss.xml">RSS</a></span>
</footer>
<script>document.querySelectorAll('article img[srcset]').forEach(i=>{if(i.closest('a'))return;i.style.cursor='pointer';i.onclick=()=>{let d=document.createElement('div'),s=i.srcset.split(',').pop().trim().split(' ')[0];d.className='lb';d.innerHTML='<img src="'+s+'">';document.body.style.overflow='hidden';d.onclick=()=>{d.remove();document.body.style.overflow=''};document.body.appendChild(d)}})</script>
</body>
</html>
|
