my website at https://anirudh.fi
4
fork

Configure Feed

Select the types of activity you want to include in your feed.

css: improved styling and dark mode (finally!)

+65 -23
+1 -1
config.yaml
··· 1 - title: anirudh 1 + title: Anirudh Oppiliappan 2 2 # note the trailing slash! 3 3 url: "https://anirudh.fi/" 4 4 description: ""
+2 -2
pages/_index.md
··· 1 1 --- 2 - title: anirudh.fi 3 - subtitle: Anirudh Oppiliappan 2 + title: Anirudh Oppiliappan 3 + subtitle: Writing, photography and more by Anirudh Oppiliappan. 4 4 template: index.html 5 5 --- 6 6
+60 -19
static/style.css
··· 7 7 --dark: #444; 8 8 --darker: #222; 9 9 --white: #fff; 10 + --cyan-trans: rgba(80, 156, 147, 0.3); 11 + 12 + --font-content: -apple-system, BlinkMacSystemFont, "Inter", "Roboto", "Segoe UI", sans-serif; 13 + } 14 + 15 + @media (prefers-color-scheme: dark) { 16 + :root { 17 + --light: #222; 18 + --cyan: #509c93; 19 + --light-gray: #444; 20 + --medium-gray: #666; 21 + --gray: #ccc; 22 + --dark: #ddd; 23 + --darker: #fff; 24 + --white: #000; 25 + } 26 + 27 + html { 28 + background: var(--light); 29 + color: var(--gray); 30 + } 31 + 32 + main a { 33 + color: var(--gray); 34 + border-bottom: 1.5px solid var(--medium-gray); 35 + } 36 + 37 + a:hover { 38 + border-bottom: 1.5px solid var(--gray); 39 + } 40 + 41 + blockquote p { 42 + border-left: 1.5px solid var(--gray); 43 + } 44 + 45 + pre { 46 + background-color: var(--dark); 47 + } 48 + 49 + .logo, .footimgs { 50 + filter: invert(1); 51 + svg { 52 + fill: var(--gray); 53 + } 54 + } 10 55 } 11 56 12 57 html { ··· 15 60 } 16 61 17 62 ::selection { 18 - background: var(--medium-gray); 19 - opacity: 0.3; 63 + background: var(--cyan-trans); 64 + color: var(--darker); 20 65 } 21 66 22 67 del { ··· 31 76 32 77 main, 33 78 footer { 34 - font-family: 35 - "Geist", 36 - -apple-system, 37 - BlinkMacSystemFont, 38 - "Roboto", 39 - "Segoe UI", 40 - sans-serif; 79 + font-family: var(--font-content); 41 80 font-size: 1.05rem; 42 81 padding: 0; 43 82 line-height: 160%; 44 83 font-weight: 400; 45 - font-feature-settings: "ss03" 1, "ss04" 1, "ss0h" 1, "ss06" 1, "ss07" 1, "ss08" 1, "ss09" 1; 46 - font-variant-ligatures: discretionary-ligatures 47 - font-variant-ligatures: common-ligatures; 48 84 } 49 85 50 86 main article, ··· 55 91 h1, 56 92 h2, 57 93 h3 { 58 - font-family: "Instrument Serif", serif; 59 94 font-weight: 400 !important; 60 95 } 61 96 ··· 65 100 66 101 main h1 { 67 102 font-size: 30px; 68 - padding: 10px 0 20px 0; 103 + padding: 40px 0 20px 0; 69 104 } 70 105 71 106 main h2 { 72 - font-size: 25px; 73 107 color: var(--dark); 74 108 } 75 109 ··· 81 115 .logo img { 82 116 max-height: 2.5rem; 83 117 max-width: 2.5rem; 84 - vertical-align: middle; 85 - transform: translateY(-5%); 118 + transform: translateY(-10%); 86 119 } 87 120 88 121 .logo { 122 + flex-grow: 1; 123 + margin-right: 1rem; 89 124 text-decoration: none; 90 125 border-bottom: unset; 91 126 background: unset !important; ··· 123 158 } 124 159 125 160 a:hover { 126 - border-bottom: 1.5px solid var(--gray); 161 + border-bottom: 1.5px solid var(--cyan-trans); 127 162 } 128 163 129 164 .footer { ··· 180 215 margin-top: 3px !important; 181 216 margin-bottom: 5px; 182 217 color: var(--gray); 183 - font-style: italic; 218 + line-height: 1.5; 184 219 } 185 220 186 221 .muted { ··· 279 314 border-left: 1.5px solid var(--medium-gray); 280 315 } 281 316 317 + nav { 318 + display: flex; 319 + align-items: center; 320 + } 321 + 282 322 nav ul { 323 + flex-shrink: 1; 283 324 padding: 0; 284 325 margin: 0; 285 326 list-style: none;
+1
templates/partials/head.html
··· 11 11 <meta name="HandheldFriendly" content="true" /> 12 12 <link rel="icon" type="image/png" sizes="16x16" href="/favicon.png" /> 13 13 <meta name="theme-color" content="#ffffff" /> 14 + <meta name="theme-color" content="#222222" media="(prefers-color-scheme: dark)" /> 14 15 <link href="https://h.icyphox.sh/u/icy" rel="me" />
+1 -1
templates/partials/nav.html
··· 1 1 <nav> 2 + <a href="/" class="logo"><img src=/static/white.svg></a> 2 3 <ul> 3 - <li><a href="/" class="logo"><img src=/static/white.svg></a><li> 4 4 <li><a href="/blog">blog</a></li> 5 5 <li><a href="/reading">reading</a></li> 6 6 <li><a href="/uses">uses</a></li>