all: big redesign
Anirudh Oppiliappan x@icyphox.sh
Sun, 22 Dec 2024 18:46:53 +0200
10 files changed,
279 insertions(+),
187 deletions(-)
M
flake.lock
→
flake.lock
@@ -2,11 +2,11 @@ {
"nodes": { "nixpkgs": { "locked": { - "lastModified": 1731852624, - "narHash": "sha256-hfR6InYghPqZo5Lvojj6LqpJumh7G62oD0RN8VfBnkU=", + "lastModified": 1734875733, + "narHash": "sha256-DbgZN1Oz9CqhDZkZ2EC0RmFutIvGqICGyuYvxyLZvok=", "owner": "nixos", "repo": "nixpkgs", - "rev": "8447f0f3e60462c5889a709af429b12b47c29ac5", + "rev": "4f334ebd098a48c6e07c449f5e5321d4abe7a0df", "type": "github" }, "original": {@@ -41,11 +41,11 @@ "inputs": {
"nixpkgs": "nixpkgs_2" }, "locked": { - "lastModified": 1731853533, - "narHash": "sha256-0KTyWOBy6Eub2hT3EN2Qri6l09vlxeg69XZlexwzl2s=", + "lastModified": 1734875705, + "narHash": "sha256-VV65oVrxxgFIbAbu7Ox9FqftLuOubbv+NK1Xvs/JqsY=", "owner": "icyphox", "repo": "go-vite", - "rev": "81b8a3faf63f5b53e9d6e95aa09149941c4a2f11", + "rev": "f18dcbc513dfef8f521ecf3c4bd7ea02ee124aa1", "type": "github" }, "original": {
M
pages/about.md
→
pages/about.md
@@ -27,17 +27,6 @@ - Electric skateboarding and PEVs.
- 35mm film photography. - Veganism, ethics and plant-based nutrition. -Some of my links: -- Bluesky [@icyphox.sh](https://bsky.app/profile/icyphox.sh) -- Lobsters [@icy](https://lobste.rs/u/icy) -- Hacker News [@icy](https://news.ycombinator.com/user?id=icy) -- Steam [@icyphox](https://steamcommunity.com/id/icyphox) -- GitHub [@icyphox](https://github.com/icyphox) -- Fediverse [@icy@icyphox.sh](https://h.icyphox.sh/@icy) - -If you're interested in **hiring me** -- here's my -[résumé](https://cdn.icyphox.sh/resume.pdf). - ## contact Send mail to [anirudh@oppiliappan.com](mailto:anirudh@oppiliappan.com).@@ -50,12 +39,24 @@ I'm available on IRC as `icy` on [libera.chat](https://libera.chat) and
[rizon.net](https://rizon.net) but I'm likely to miss messages as I don't get notified. Use the above methods instead. +Some other ways to find me: +- Bluesky [@icyphox.sh](https://bsky.app/profile/icyphox.sh) +- Lobsters [@icy](https://lobste.rs/u/icy) +- Hacker News [@icy](https://news.ycombinator.com/user?id=icy) +- Steam [@icyphox](https://steamcommunity.com/id/icyphox) +- GitHub [@icyphox](https://github.com/icyphox) +- Fediverse [@icy@icyphox.sh](https://h.icyphox.sh/@icy) + +If you're interested in **hiring me** -- here's my +[résumé](https://cdn.icyphox.sh/resume.pdf). + ## colophon -This site is built using [vite](https://git.icyphox.sh/vite) -- a static -site generator written in Go. The source for this site is -[here](https://git.icyphox.sh/site), licensed under MIT. All content on -this site is available under the Creative Commons BY-NC-SA license. +The website is built using [vite](https://git.icyphox.sh/vite) -- a +static site generator written in Go and [hosted at +home](/uses#homelab-k3s-cluster) on +[Garage](https://garagehq.deuxfleurs.fr/). -This site is [hosted at home](/uses#homelab-k3s-cluster) on -[Garage](https://garagehq.deuxfleurs.fr/). +The source code is available [here](https://git.icyphox.sh/site), +licensed under MIT. All content is published under the [Creative Commons +BY-NC-SA](https://creativecommons.org/licenses/by-nc-sa/4.0/) license.
M
pages/blog/_index.md
→
pages/blog/_index.md
@@ -1,5 +1,5 @@
--- template: blog.html -title: blog +title: writing subtitle: Computers, security & computer security. ---
M
static/style.css
→
static/style.css
@@ -1,32 +1,37 @@
:root { - --light: #f4f4f4; --cyan: #509c93; - --light-gray: #eee; - --medium-gray: #ddd; - --gray: #6a6a6a; - --dark: #444; - --darker: #222; - --white: #fff; - --cyan-trans: rgba(80, 156, 147, 0.3); + --light: #fff9eb; + --light-gray: #fceccc; + --medium-gray: #e6dcd1; + --mediumer-gray: #d8cbbe; + --gray: #776e63; + --dark: #4a443d; + --darker: #2a261f; + --bg: #fffdf5; + --fg: #100f0f; + --selection: rgba(143, 105, 213, 0.2); - --font-content: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif; + --font-content: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", + "Segoe UI", sans-serif; } @media (prefers-color-scheme: dark) { :root { - --light: #222; --cyan: #509c93; - --light-gray: #444; - --medium-gray: #666; - --gray: #ccc; - --dark: #ddd; - --darker: #fff; - --white: #000; + --light: #2a261f; + --light-gray: #4a443d; + --medium-gray: #6b635a; + --gray: #d3cec1; + --fg: #fff6e3; + --dark: #e6dcd1; + --darker: #fff9eb; + --bg: #100f0f; + --selection: rgba(80, 156, 147, 0.2); } html { - background: var(--light); - color: var(--gray); + background: var(--bg); + color: var(--fg); } main a {@@ -34,29 +39,23 @@ color: var(--gray);
border-bottom: 1.5px solid var(--medium-gray); } - blockquote p { - border-left: 1.5px solid var(--gray); - } - - pre { - background-color: var(--dark); + hr { + background: var(--light); } - .logo, .footimgs { - filter: invert(1); - svg { - fill: var(--gray); - } + blockquote p { + border-left: 1.5px solid var(--gray); } } html { - background: var(--white); + background: var(--bg); + color: var(--fg); -webkit-text-size-adjust: none; } ::selection { - background: var(--cyan-trans); + background: var(--selection); color: var(--darker); }@@ -96,7 +95,7 @@ }
main h1 { font-size: 30px; - padding: 20px 0 20px 0; + padding: 30px 0 30px 0; } main h2 {@@ -108,10 +107,11 @@ h3 {
margin: 40px 0 20px 0; } -.logo img { +.logo svg { max-height: 2.5rem; max-width: 2.5rem; transform: translateY(-10%); + fill: var(--fg); } .logo {@@ -154,19 +154,13 @@ border-bottom: 1.5px solid var(--medium-gray);
} a:hover { - border-bottom: unset; - border-bottom: 1.5px solid var(--dark); -} - -.footer { - column-count: 2; - column-gap: 12px; + border-bottom: 1.5px solid var(--gray); } body { max-width: 655px; - padding: 0 13px; - margin: 40px auto; + padding: 2rem 1rem 20rem; + margin: 1rem auto; } main article img {@@ -235,18 +229,79 @@ .tagline {
padding: 50px 0 50px 0; } +.book-posts { + padding-top: 2rem; + a { + text-decoration: none; + } + ul { + list-style-type: none; + padding: 0; + margin: 0; + } + ul > li { + display: flex; + align-items: baseline; + } + li > .post { + flex-grow: 1; + } + + .author { + flex-shrink: 1; + white-space: nowrap; + vertical-align: baseline; + color: var(--gray); + } + + .status { + flex-shrink: 1; + white-space: nowrap; + vertical-align: baseline; + } +} + +.posts { + padding-top: 2rem; + h2 { + margin: 0rem 0 2rem 0; + } + + ul { + list-style-type: none; + padding: 0; + margin: 0; + } + ul > li { + display: flex; + align-items: baseline; + } + li > .post { + flex-grow: 1; + } + + li > .index-date { + flex-shrink: 1; + white-space: nowrap; + vertical-align: baseline; + color: var(--gray); + text-transform: lowercase; + float: right; + } +} + pre { overflow-x: auto; overflow-y: hidden; padding: 10px; min-width: 0; - background-color: var(--light-gray) !important; + background-color: var(--light) !important; margin-bottom: 10px; } code { font-size: 0.9rem; - background-color: var(--light-gray); + background-color: var(--light); } .post-date {@@ -255,6 +310,10 @@ color: var(--gray);
text-transform: lowercase; } +.header { + padding-bottom: 20px; +} + table { table-layout: fixed; width: 100%;@@ -264,37 +323,12 @@ table a {
text-decoration: none; } -td { - padding: 7px 11px 7px 11px; -} - -td p#subtitle { - color: var(--gray); -} - -td:first-child { - padding-left: 0; -} - -td:last-child { - padding-right: 0; -} - -.index-date { - white-space: nowrap; - vertical-align: baseline; - color: var(--gray); - text-transform: lowercase; -} - -header { - padding-bottom: 20px; -} - hr { max-width: 100%; - text-align: left; - margin: 20px 0 20px 0; + border: 0; + height: 1px; + margin: 1.5rem 0; + background: var(--light-gray); } footer {@@ -312,9 +346,13 @@ padding-left: 20px;
border-left: 1.5px solid var(--medium-gray); } +ul li::marker { + color: var(--mediumer-gray); +} + nav { - display: flex; - align-items: center; + display: flex; + align-items: center; } nav ul {@@ -331,27 +369,14 @@ display: inline-block;
} ol { - list-style: none; counter-reset: counter; } ol li { counter-increment: counter; } -ol li:not(.footnotes)::before { - content: counter(counter); - border-radius: 50%; - text-align: center; - line-height: 1.2rem; - color: var(--darker); - background: var(--medium-gray); - width: 18px; - height: 18px; - font-size: 11px; - margin-right: 0.5rem; - box-sizing: content-box; - display: inline-block; - transform: translate(-1.9rem, 0.7rem); - position: absolute; + +ol li:not(.footnotes)::marker { + color: var(--gray); } .footnote-ref a {@@ -365,6 +390,12 @@ width: 0.8rem;
height: 0.8rem; font-size: 0.6rem; display: inline-block; + border-bottom: unset; +} + +.footnotes > ol { + list-style-type: none; + counter-reset: counter; } .footnotes > ol li::before {@@ -381,7 +412,7 @@ margin-right: 0.5rem;
box-sizing: content-box; display: inline-block; position: relative; - transform: unset; + transform: translateY(-2px); } .footnotes ol li:not(:last-child) {@@ -390,16 +421,10 @@ }
.draft { color: red; - font-weight: bold; - font-family: sans; font-size: 1rem; } @media (max-width: 400px) { - .footer { - column-count: 1; - } - .image-grid { column-count: 1; }
M
templates/blog.html
→
templates/blog.html
@@ -16,24 +16,26 @@ {{ template "partials/nav.html" }}
</div> <h1>{{ index .Meta "title" }}</h1> {{ .Body }} - <table> - {{ $posts := .Extra }} - {{ range $posts }} - <tr> - <td align="left"> - {{ if .Meta.draft }} - <p><a href=/blog/{{ .Meta.slug }}>{{ .Meta.title }}</a> <span class="draft">[draft]</span></p> - {{ else }} - <p><a href=/blog/{{ .Meta.slug }}>{{ .Meta.title }}</a></p> + + <section class="posts"> + <ul> + {{ $posts := .Extra }} + {{ range $posts }} + <li> + <div class="post"> + <a href=/blog/{{ .Meta.slug }}>{{ .Meta.title }}</a> + {{ if .Meta.draft }} + (<span class="draft">draft</span>) + {{ end }} + <p class="subtitle">{{ .Meta.subtitle }}</p> + </div> + {{ $dateStr := .Meta.date }} + {{ $date := parsedate $dateStr }} + <div class="index-date">{{ $date.Format "02 Jan, 2006" }}</div> + </li> {{ end }} - <p id="subtitle">{{ .Meta.subtitle }}</p> - </td> - {{ $dateStr := .Meta.date }} - {{ $date := parsedate $dateStr }} - <td align="right" class="index-date">{{ $date.Format "02 Jan, 2006" }}</td> - </tr> - {{ end }} - </table> + </ul> + </section> </main> <footer> {{ template "partials/footer.html" }}
M
templates/index.html
→
templates/index.html
@@ -12,8 +12,34 @@ <main>
<div class="sidenav"> {{ template "partials/nav.html" }} </div> - <article class="tagline"> + <article> + <section class="tagline"> {{ .Body }} + </section> + + <hr> + + <section class="posts"> + <h2>writing</h2> + <ul> + {{ $posts := .Extra.blog }} + {{ range slice $posts 0 3 }} + <li> + <div class="post"> + <a href=/blog/{{ .Meta.slug }}>{{ .Meta.title }}</a> + {{ if .Meta.draft }} + (<span class="draft">draft</span>) + {{ end }} + <p class="subtitle">{{ .Meta.subtitle }}</p> + </div> + {{ $dateStr := .Meta.date }} + {{ $date := parsedate $dateStr }} + <div class="index-date">{{ $date.Format "02 Jan, 2006" }}</div> + </li> + {{ end }} + </ul> + <a style="border-bottom: unset;" href="/blog"><span>more →</span></a> + </section> </article> </main> <footer>
M
templates/photoindex.html
→
templates/photoindex.html
@@ -27,17 +27,22 @@ </div>
<article align="left"> <h1>{{ .Meta.title }}</h1> {{ .Body }} - <table> + <section class="posts"> + <ul> {{ $posts := .Extra }} {{ range $posts }} - <tr> - <td align="left"> - <a href=/photos/{{ .Meta.slug }}>{{ .Meta.title }} — {{ .Meta.season }}</a> - <p id="subtitle"> {{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }}</p> - </td> - </tr> + <li> + <div class="post"> + <a href=/photos/{{ .Meta.slug }}>{{ .Meta.title }} — {{ .Meta.season }}</a> + <p class="subtitle">{{ .Meta.camera }} · {{ .Meta.lens }} · {{ .Meta.film }}</p> + </div> + {{ $dateStr := .Meta.date }} + {{ $date := parsedate $dateStr }} + <div class="index-date">{{ $date.Format "02 Jan, 2006" }}</div> + </li> {{ end }} - </table> + </ul> + </section> </article> </main> <footer>
M
templates/reading.html
→
templates/reading.html
@@ -20,17 +20,19 @@ {{- $books := .Yaml.books }}
{{- range $i, $yearMap := $books }} {{- range $year, $books := $yearMap }} <h2>{{ $year }}</h2> - <table> - <tbody> - {{- range $book := $books }} - <tr> - <td><a href="{{ $book.link }}">{{ $book.name }}</a></td> - <td>{{ $book.author }}</td> - <td>{{ $book.status }}</td> - </tr> - {{- end }} - </tbody> - </table> + <section class="book-posts"> + <ul> + {{- range $book := $books }} + <li> + <div class="post"> + <a href="{{ $book.link }}">{{ $book.name }}</a> + <p class="subtitle author">{{ $book.author }}</p> + </div> + <span class="status">{{ $book.status }}</span> + </li> + {{- end }} + </ul> + </section> {{- end }} {{- end }} </article>