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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
<!DOCTYPE html>
<html lang="en">
<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="A Collective" />
<link rel="canonical" href="https://urbanecologycollective.org/" />
<title>Urban Ecology Collective | Urban Ecology Collective</title>
<meta property="og:site_name" content="Urban Ecology Collective"/>
<meta property="og:title" content="Urban Ecology Collective | Urban Ecology Collective"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://urbanecologycollective.org/"/>
<meta property="og:description" content="A Collective"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" content="Urban Ecology Collective"/>
<meta name="twitter:description" content="A Collective"/>
<link rel="alternate" type="application/atom+xml" title="Urban Ecology Collective" href="https://urbanecologycollective.org/atom.xml">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap">
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
<noscript><link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap" rel="stylesheet"></noscript>
<style>
html{font-family:"Source Serif 4",Georgia,serif;font-size:1rem;line-height:1.7;margin:auto;max-width:70ch;padding:1.5rem 1em 3em}
img{max-width:100%}img:not([src$=".svg"]),article>div,blockquote,pre{border-radius:.4rem}img[src$="#pixelate"]{image-rendering:pixelated}
h1,h2,h3,h4,h5,h6{font-family:"Source Serif 4",Georgia,serif;font-weight:600;letter-spacing:-0.01em;margin:1.5rem 0 .75rem}
h1{font-size:1.75rem}h2{font-size:1.375rem}h3{font-size:1.125rem}
p{text-align:justify}p,ul,ol,article>footer,article>header{margin:0 0 1.5rem}
pre,blockquote{padding:1.5rem;margin:0 0 1.5rem}pre{overflow-x:auto;font-size:.875rem;line-height:1.5}pre code{background:0!important;padding:0;font-size:inherit}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.9em;padding:.15em .4em;border-radius:.25rem}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.125rem;height:1.125rem;vertical-align:middle;margin-bottom:.15rem}.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 strong{font-family:"Source Serif 4",Georgia,serif;font-weight:600;color:var(--accent)}.site-icon{width:2.25rem;height:2.25rem;vertical-align:middle;margin-right:1rem;color:var(--accent)}.header-brand{display:flex;align-items:center}.custom-icon{height:auto;max-height:3rem;width:auto;margin-right:1rem}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:-0.125em}
.tags{list-style:none;padding:0;margin:.75rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1rem}.tags li{display:inline}
nav{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-bottom:1.5rem}nav a{font-weight:500}nav img,nav svg{display:none}
.p{list-style:none;padding:0;margin:0 0 1.5rem}.p li{display:flex;gap:1.5rem;margin-bottom:.75rem;align-items:baseline}.p li:last-child{margin-bottom:0}.p time{opacity:.7;flex-shrink:0}
.profile-pic{width:8rem;height:8rem;border-radius:50%;object-fit:cover;display:block;margin:0 auto 1.5rem}
.projects .project{margin-bottom:1.5rem}.project header{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.75rem}.project header h2{margin:0;font-size:1.375rem}.project-emoji{font-size:1.5rem}.project-image{max-width:200px;aspect-ratio:1;object-fit:cover;float:right;margin:0 0 1.5rem 1.5rem;border-radius:.4rem}.project p{margin-bottom:.75rem}.project .tags{margin:0}
.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>
/* Light theme */
html.light{background:#FAF7F2;--tc:#FAF7F2;--accent:#B85450;--accent-hover:#7A3533;color:#1a1a1a}
html.light a{color:var(--accent);text-decoration:underline}
html.light a:visited{color:var(--accent)}
html.light a:hover{color:var(--accent-hover)}
html.light header>div>span>a{text-decoration:none}html.light header>div>span>a:hover{text-decoration:underline}
html.light p,html.light ul,html.light ol,html.light .desc{color:#3a3a3a}
html.light h1,html.light h2,html.light h3,html.light h4,html.light h5,html.light h6{color:#1a1a1a}
html.light strong{color:#1a1a1a}html.light header strong{color:var(--accent)}
html.light blockquote{border-left:3px solid var(--accent);color:#555}
html.light pre,html.light article>img,html.light article>p>img{background:#f0ebe3}
html.light code{background:#f0ebe3;color:#1a1a1a}
html.light hr{border-color:#e0d9ce}
/* Light syntax highlighting */
html.light .z-comment{color:#6a737d;font-style:italic}html.light .z-keyword{color:#d73a49}html.light .z-string{color:#22863a}html.light .z-number{color:#005cc5}html.light .z-function{color:#6f42c1}html.light .z-type{color:#005cc5}html.light .z-constant{color:#005cc5}html.light .z-variable{color:#e36209}html.light .z-attribute{color:#6f42c1}html.light .z-tag{color:#22863a}html.light .z-operator{color:#d73a49}html.light .z-punctuation{color:#24292e}html.light .z-builtin{color:#6f42c1}html.light .z-label{color:#005cc5}html.light .z-namespace{color:#e36209}
/* Dark theme */
html.dark{background:#141413;--tc:#141413;--accent:#E07A5F;--accent-hover:#F4A594;color:#e8e8e8}
html.dark a{color:var(--accent);text-decoration:underline}
html.dark a:visited{color:var(--accent)}
html.dark a:hover{color:var(--accent-hover)}
html.dark header>div>span>a{text-decoration:none}html.dark header>div>span>a:hover{text-decoration:underline}
html.dark p,html.dark ul,html.dark ol,html.dark .desc{color:#a0a0a0}
html.dark h1,html.dark h2,html.dark h3,html.dark h4,html.dark h5,html.dark h6{color:#fff}
html.dark strong{color:#fff}html.dark header strong{color:var(--accent)}
html.dark blockquote{border-left:3px solid var(--accent);color:#a0a0a0}
html.dark img[src$=".svg"],html.dark nav svg,html.dark .theme svg,html.dark footer svg{filter:invert(1)}
html.dark pre,html.dark article>img,html.dark article>p>img{background:#1e1e1d}
html.dark code{background:#1e1e1d;color:#e8e8e8}
html.dark hr{border-color:#2a2a29}
/* Dark syntax highlighting */
html.dark .z-comment{color:#8b949e;font-style:italic}html.dark .z-keyword{color:#ff7b72}html.dark .z-string{color:#a5d6ff}html.dark .z-number{color:#79c0ff}html.dark .z-function{color:#d2a8ff}html.dark .z-type{color:#79c0ff}html.dark .z-constant{color:#79c0ff}html.dark .z-variable{color:#ffa657}html.dark .z-attribute{color:#d2a8ff}html.dark .z-tag{color:#7ee787}html.dark .z-operator{color:#ff7b72}html.dark .z-punctuation{color:#c9d1d9}html.dark .z-builtin{color:#d2a8ff}html.dark .z-label{color:#79c0ff}html.dark .z-namespace{color:#ffa657}
/* Shared styles */
a.active{color:var(--accent)}
a:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}
hr{border:0;border-top:1px solid;clear:both;margin:1.5rem 0}
blockquote{border-left:3px solid var(--accent);padding-left:1.25rem;font-style:italic}
.skip-link{position:absolute;top:-100%;left:0;padding:.5rem 1rem;background:var(--accent);color:#fff;z-index:1000}.skip-link:focus{top:0}
</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>
<a href="#main" class="skip-link">Skip to content</a>
<header>
<div style="display:flex;justify-content:space-between;align-items:center">
<span class="header-brand"><a href="https://urbanecologycollective.org"><strong>Urban Ecology Collective</strong></a></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://urbanecologycollective.org/" class="active">home</a>
<a href="https://urbanecologycollective.org/posts/">posts</a>
<a href="https://urbanecologycollective.org/wiki/">wiki</a>
</nav>
</header>
<hr>
<main id="main">
<img src="urbeco.png" alt="Profile picture" class="profile-pic">
<article><p>Redbuds!</p>
</article>
</main>
<hr>
<footer class="s">
<span>Feeds: <a href="https://urbanecologycollective.org/atom.xml">Atom</a> · <a href="https://urbanecologycollective.org/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>
|
