init

2025-02-02 19:27:37 +01:00 · 2025-02-02 19:27:37 +01:00 · 4f8fc3d3d5
commit 4f8fc3d3d5
3 changed files with 210 additions and 0 deletions
--- a/css/style.css
+++ b/css/style.css
@ -0,0 +1,167 @@
+/* welcome, F12 enjoyer! Get comfortable! I know *nothing* about the frontend,
+ * eldrich horrors of my own making await! On a serious note, if you can
+ * recommend something from accessibility side plz get in touch */
+/* heavily inspired by simple.css */
+:root {
+    /* Set sans-serif & mono fonts */
+    --sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
+    "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
+    "Helvetica Neue", sans-serif;
+    --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    --standard-border-radius: 5px;
+
+    /* theme is inspired by^W^W stolen from evergreen vim theme */
+    /* https://github.com/sainnhe/everforest */
+    --bg: #fffbef;
+    --accent-bg: #fffbef;
+    --border: #f2efdf;
+    --blue: #3a94c5;
+    --purple: #df69ba;
+    --fg: #222;
+    --bg-red: #ffe7de;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #272e33;
+        --accent-bg: #374145;
+        --border: #1e2326;
+        --blue: #7fbbb3;
+        --purple: #d699b6;
+        --fg: #d3c6aa;
+    }
+}
+
+body {
+    background-color: var(--bg);
+    color: var(--fg);
+}
+
+html {
+  /* Set the font globally */
+  font-family: var(--sans-font);
+  scroll-behavior: smooth;
+}
+
+/* Make the body a nice central block */
+body {
+  color: var(--fg);
+  background-color: var(--bg);
+  font-size: 1rem;
+  line-height: 1.3;
+  display: grid;
+  grid-template-columns: 1fr min(45rem, 90%) 1fr;
+  margin: 0;
+}
+body > * {
+  grid-column: 2;
+}
+
+/* Make the header bg full width, but the content inline with body */
+body > header {
+  background-color: var(--accent-bg);
+  border-bottom: 1px solid var(--border);
+  text-align: center;
+  padding: 0 0.5rem 0.2rem 0.5rem;
+  grid-column: 1 / -1;
+}
+
+body > header > *:only-child {
+  margin-block-start: 2rem;
+}
+
+body > header h1 {
+  max-width: 1200px;
+  margin: 1rem auto;
+}
+
+body > header p {
+  max-width: 40rem;
+  margin: 1rem auto;
+}
+
+/* Add a little padding to ensure spacing is correct between content and header > nav */
+main {
+  padding-top: 1.5rem;
+}
+
+body > footer {
+  margin-top: 4rem;
+  padding: 2rem 1rem 1.5rem 1rem;
+  color: var(--fg-light);
+  font-size: 0.9rem;
+  text-align: center;
+  border-top: 1px solid var(--border);
+}
+
+/* Format headers */
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.5rem;
+}
+
+h3 {
+  font-size: 1rem;
+}
+
+h4 {
+  font-size: 1rem;
+}
+
+h1, h2, h3, h4 {
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+}
+
+p {
+  margin: 0.3rem 0;
+}
+
+/* Prevent long strings from overflowing container */
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+/* Fix line height when title wraps */
+h1,
+h2,
+h3 {
+  line-height: 1.1;
+}
+
+/* Reduce header size on mobile */
+@media only screen and (max-width: 720px) {
+  h1 {
+    font-size: 2.5rem;
+  }
+
+  h2 {
+    font-size: 2.1rem;
+  }
+
+  h3 {
+    font-size: 1.75rem;
+  }
+
+  h4 {
+    font-size: 1.25rem;
+  }
+}
+
+
+/* Format links & buttons */
+a {
+  color: var(--blue);
+  text-decoration: underline;
+}
+
+a:visited {
+  color: var(--purple);
+}
+
+a:hover {
+  text-decoration-style: dotted;
+}
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>Grisha || 0xa || oxapentane</title>
+        <link rel="stylesheet" type="text/css" href="./css/style.css">
+    </head>
+    <body>
+        <header>
+            <h1>0xa's Shitpostologicon</h1>
+            <p>¯\_(ツ)_/¯</p>
+        </header>
+        <h1>Welcome to my corner of the interwebs!</h1>
+        <p>People call me Grisha, 0xa, or oxapentane, take your pick.</p>
+        <p>During the day I'm tinkering around the labs of Institute of Physics, <a href="https://uva.nl">University of Amsterdam</a>.
+        Outside of this I like to play with radio and look at the large-scale infrastructure.
+        For example look at the <a href="https://tlm.solutions">traffic light thing we did</a> couple of years ago.
+        Also, I like build, break, and rebuild again my home <a href="https://github.com/gshipunov/nix-config">infrastructure</a>, which is now is running on NixOS again.</p>
+
+        <p>If you haven't got it yet, most of the time you'll find me staring into my 'puter</p>
+
+        <h2>Where to Find Me</h2>
+        <h3>Online</h3>
+        <p>In general I go by oxapentane or 0xa online. Below are some ways of getting a hold of me:</p>
+        <ul>
+            <li><a href="https://c3d2.social/@oxapentane">Mastodon</a>, the only social I actively use</li>
+            <li><a href="https://github.com/gshipunov">github</a> and <a href="https://codeberg.org/0xa">codeberg</a></li>
+            <li>@oxapentane:matrix.org on matrix</li>
+            <li>For email inclined: hi at the domain you're reading it at</li>
+            <li>oxapentane.75 on Signal</li>
+        </ul>
+        <h3>Offline</h3>
+        <ul>
+            <li>Most of the time: Amsterdam, in and around</li>
+            <li>8-12 Aug: <a href="https://why2025.org">WHY2025</a>, Geestmerambacht, NL</li>
+            <li>19-21 Sep: <a href="https://datenspuren.de/2025/">Datenspuren</a>, Dresden, DE</li>
+            <li>End Dec: 39c3, ??, DE</li>
+        </ul>
+
+        <p></p>
+        <footer>Legal note: All Rites Reversed. Tip your bartender.</footer>
+    </body>
+</html>