my website
0
fork

Configure Feed

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

bunch of restructuring

chfour 001132a8 0837dd4d

+95 -34
+1
src/discord.html
··· 14 14 p { 15 15 margin: auto; 16 16 padding: 2em; 17 + max-width: 30em; 17 18 } 18 19 </style> 19 20 </head>
+84 -29
src/index.html
··· 6 6 <title>website of chfour official website</title> 7 7 <link rel="stylesheet" href="style.css"> 8 8 <style> 9 - img { filter: drop-shadow(0 0 5px #ccc); } 9 + #fops { 10 + height: auto; 11 + max-width: 100%; 12 + margin-block: 2em; 13 + filter: drop-shadow(0 0 5px #ccc); 14 + } 10 15 @media (prefers-color-scheme: dark) { 11 - img { filter: drop-shadow(0 0 5px #f2f2f277); } 16 + #fops { filter: drop-shadow(0 0 5px #f2f2f277); } 12 17 } 13 18 :root { 14 19 display: flex; 15 20 align-items: flex-end; 16 21 min-height: 100vh; 17 22 } 18 - #src { 23 + body { line-height: initial; } 24 + 25 + #timenow { font-feature-settings: "tnum"; } 26 + 27 + footer a { 19 28 text-decoration: none; 20 - color: inherit; 21 - opacity: 0.5; 29 + color: inherit !important; 30 + opacity: 0.7; 22 31 transition: opacity 200ms; 23 32 } 24 - #src:is(:hover, :focus-visible) { 33 + footer a:is(:hover, :focus-visible) { 25 34 opacity: 1; 26 35 } 27 - #src code { 36 + footer a code { 28 37 white-space: normal; 29 38 word-break: break-all; 30 39 font: inherit; 31 40 } 32 - #timenow { font-feature-settings: "tnum"; } 41 + 42 + #links { 43 + display: flex; 44 + flex-wrap: wrap; 45 + gap: 1em; 46 + } 47 + #links > * > div { 48 + display: inline-flex; 49 + flex-direction: column; 50 + } 51 + #links > * > div > * { width: max-content; } 52 + #links a { font-weight: bold; } 53 + #links > * > div > :nth-child(2) { font-size: 0.8em; } 33 54 </style> 34 55 </head> 35 56 <body> 36 57 <article> 37 - <img src="platinum_fop_45_o.svg" alt="" width="250" height="250" style="margin-block: 2em; max-width: 100%; height: auto;"> 38 - <p>from PCBs to webdev: jack of Too Many trades, master of none</p> 39 - <p>(linux stuff, nix, c, python, html+css+js, AVRs...)</p> 40 - <p>+ trains, very amateur photography, and radio</p> 41 - <p>high ambitions, low energy, hoarder of junk</p> 42 - <p>exceptionally uncreative</p> 43 - <p>gender outage (any pronouns)</p> 44 - <p>furry, &Theta;&Delta; [platinum] fox</p> 45 - <p>19 years old and counting</p> 46 - <p>from Silesia, Poland<span id="timenow"></span></p> 47 - <ul class="inline-list"> 48 - <li style="display: block;">known as <b>chfour</b></li> 49 - <li><a rel="me" href="https://wetdry.world/@chfour">fediverse</a></li> 50 - <li><a href="https://github.com/chfour">github</a></li> 51 - <li><a href="https://matrix.to/#/@chfour:eeep.ee">matrix</a></li> 52 - <li><a href="discord.html">discord</a></li> 53 - <li><a href="https://files.eeep.ee/">file dump</a></li> 54 - </ul> 58 + <img id="fops" src="platinum_fop_45_o.svg" alt="" width="250" height="250"> 59 + <main> 60 + <ul class="inline-list slashed" style="max-width: 30rem; line-height: 1.5; text-align: justify;"> 61 + <li>Linux, Nix & NixOS</li> 62 + <li>C, Python, HTML+CSS and co</li> 63 + <li>electronics, "embedded" & test gear</li> 64 + <li>RF (incl. amateur radio)</li> 65 + <li>time and frequency metrology</li> 66 + <li>trains and almost everything surrounding trains</li> 67 + <li>very amateur photography</li> 68 + </ul> 69 + 70 + <p>high ambitions, low energy, hoarder of junk</p> 71 + <p>exceptionally uncreative</p> 72 + <p>gender outage (any pronouns). some flavor of queer. taken <3</p> 73 + <p>&Theta;&Delta; [platinum]&nbsp;fox, furry</p> 74 + <p>19 years old and counting</p> 75 + <p>from Silesia, Poland<span id="timenow"></span></p> 76 + 77 + <p>known as <b>chfour</b></p> 78 + 79 + <ul class="inline-list" id="links"> 80 + <li> 81 + <div> 82 + <a rel="me" href="https://wetdry.world/@chfour">fediverse</a> 83 + <span>@chfour@wetdry.world</span> 84 + </div> 85 + </li> 86 + <li> 87 + <div> 88 + <a href="https://signal.me/#eu/uwW5t81nJulRdHjWEkNUE2omPv9HzXhzUzar2yvP14ULx50MgdZBwpxrhWX3RfA3">signal</a> 89 + <span>chfour.32</span> 90 + </div> 91 + </li> 92 + <li> 93 + <div> 94 + <a href="discord.html">discord</a> 95 + <span>ch4</span> 96 + </div> 97 + </li> 98 + <li> 99 + <div> 100 + <a href="https://github.com/chfour" title="chfour">github</a> 101 + <span>chfour</span> 102 + </div> 103 + </li> 104 + <li> 105 + <div> 106 + <a href="https://files.eeep.ee/">file dump</a> 107 + <span>files.eeep.ee</span> 108 + </div> 109 + </li> 110 + </ul> 111 + </main> 55 112 <footer> 56 113 <a id="src" href="https://github.com/chfour/website3" aria-label="website source" title="website source"> 57 114 <code>/nix/store/VERY5p3c14lsecretv4luereplaceme0-chfour-website</code> ··· 63 120 const formatter = new Intl.DateTimeFormat("pl-PL", {timeZone: "Europe/Warsaw", timeStyle: "short"}); 64 121 // won't be *totally perfectly exact* 65 122 // but with window.requestAnimationFrame() it made my cpu usage go up by some 10% no joke 66 - const update = () => { 67 - timenow.textContent = ` (${formatter.format(new Date())}\u00a0right\u00a0now)`; 68 - } 123 + const update = () => timenow.textContent = ` (${formatter.format(new Date())})`; 69 124 update(); setInterval(update, 5000); 70 125 </script> 71 126 </body>
+10 -5
src/style.css
··· 18 18 } 19 19 /* todo: non-fast variants and generating this from the nix stuff too maybe lol */ 20 20 21 + :root { color-scheme: light dark; } 22 + 21 23 body { 22 24 background-color: #f2f2f2; 23 25 color: black; 26 + 24 27 font-family: 'Inter', sans-serif; 25 28 font-optical-sizing: auto; 29 + line-height: 1.5; 30 + 26 31 margin: 0; 27 32 } 28 33 ··· 36 41 @media (prefers-color-scheme: dark) { 37 42 body { 38 43 background-color: #1a1a1a; 39 - color: #f2f2f2; 44 + color: white; 40 45 } 41 46 a { color: #aaf; } 42 47 a:visited { color: #fbf; } ··· 48 53 list-style-type: none; 49 54 padding-left: 0; 50 55 } 51 - .inline-list > * { 52 - display: inline; 53 - white-space: nowrap; 56 + .inline-list > * { display: inline; } 57 + .inline-list.slashed > :not(:first-child)::before { 58 + content: ' / '; 59 + padding-inline: 0.25em; 54 60 } 55 -