git.krinitsin.com — krinitsin.com.git: e5ba958c8d4d863dceb132a759f68a4ec38999ff

Add some indices

Christian Krinitsin mail@krinitsin.com

Tue, 27 Jan 2026 13:36:19 +0100

commit

e5ba958c8d4d863dceb132a759f68a4ec38999ff

parent

45155a961723f78b9746d3be3af931e505b5eb35

7 files changed, 369 insertions(+), 365 deletions(-)

jump to

blog/build_blog.sh

blog/index.html

blog/posts/writing_a_blog.html

games/index.html

index.html

styles.css

M blog/build_blog.sh → blog/build_blog.sh

@@ -4,6 +4,6 @@ for f in md/*.md; do
   date=$(head -n 6 $f | grep date | sed "s/\-//g" | grep -o "[0-9]\+")
   name=${f##*/}
   output="posts/${name%.md}.html"
-  pandoc "$f" --css=../style.css --standalone --toc --highlight-style=zenburn -B header.html -o $output
+  pandoc "$f" --css=../../styles.css --standalone --toc --highlight-style=zenburn -B header.html -o $output
 done

M blog/index.html → blog/index.html

@@ -6,7 +6,7 @@ <meta name="generator" content="pandoc" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
   <meta name="author" content="chris" />
   <title>Blog</title>
-  <link rel="stylesheet" href="style.css" />
+  <link rel="stylesheet" href="../styles.css" />
 </head>
 <body>
 <a href=".." class="nav-link">home</a>

M blog/posts/writing_a_blog.html → blog/posts/writing_a_blog.html

@@ -24,7 +24,7 @@ vertical-align: middle;
     }
     .display.math{display: block; text-align: center; margin: 0.5rem auto;}
   </style>
-  <link rel="stylesheet" href="../style.css" />
+  <link rel="stylesheet" href="../../styles.css" />
 </head>
 <body>
 <a href=".." class="nav-link">all posts</a>

D blog/style.css

@@ -1,336 +0,0 @@
-:root {
-  --bg0: #fdf6e3;
-  --bg1: #f3ead3;
-  --bg2: #e9dfc2;
-  --fg: #5c6a72;
-  --red: #e67e80;
-  --orange: #f57d26;
-  --yellow: #dfa000;
-  --green: #8da101;
-  --aqua: #35a77c;
-  --blue: #3a94c5;
-  --purple: #df69ba;
-  --gray0: #a6b0a0;
-  --gray1: #939f91;
-  --gray2: #829181;
-  
-  --space-xs: 0.25rem;
-  --space-sm: 0.5rem;
-  --space-md: 1rem;
-  --space-lg: 2rem;
-  --space-xl: 4rem;
-  
-  --font-serif: Arial,  sans-serif;
-  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  --font-mono: 'Menlo', 'Monaco', 'Consolas', 'Lucida Console', monospace;
-  
-  --shadow-sm: 0 2px 8px rgba(92, 106, 114, 0.08);
-  --shadow-md: 0 4px 16px rgba(92, 106, 114, 0.12);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg0: #2b3339;
-    --bg1: #323c41;
-    --bg2: #3a454a;
-    --fg: #d3c6aa;
-    --red: #e67e80;
-    --orange: #e69875;
-    --yellow: #dbbc7f;
-    --green: #a7c080;
-    --aqua: #83c092;
-    --blue: #7fbbb3;
-    --purple: #d699b6;
-    --gray0: #859289;
-    --gray1: #7a8478;
-    --gray2: #6f7770;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-
-html {
-  color: var(--fg);
-  background-color: var(--bg0);
-  font-family: var(--font-serif);
-  line-height: 1.7;
-  font-size: 16px;
-}
-
-body {
-  margin: 0 auto;
-  max-width: 40em;
-  padding: var(--space-lg) var(--space-lg);
-  background-color: var(--bg0);
-  hyphens: auto;
-  overflow-wrap: break-word;
-  text-rendering: optimizeLegibility;
-  font-kerning: normal;
-}
-
-@media (max-width: 768px) {
-  body {
-    font-size: 17px;
-    padding: var(--space-md) var(--space-md);
-  }
-}
-
-@media (max-width: 600px) {
-  body {
-    font-size: 16px;
-    padding: var(--space-md);
-  }
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--font-sans);
-  font-weight: 600;
-  line-height: 1.3;
-  margin-top: 2em;
-  margin-bottom: 0.5em;
-  color: var(--fg);
-}
-
-h1 {
-  font-size: 1.7em;
-  color: var(--green);
-  border-bottom: 1px solid var(--bg2);
-  padding-bottom: 0.2em;
-  margin-top: 0;
-  margin-bottom: 0.5em;
-}
-
-h2 {
-  font-size: 1.5em;
-  color: var(--aqua);
-  border-bottom: 1px solid var(--bg2);
-  padding-bottom: 0.2em;
-  margin-top: 2em;
-  padding-top: 0.5em;
-}
-
-h3 {
-  font-size: 1.3em;
-  color: var(--blue);
-}
-
-a {
-  color: var(--blue);
-  text-decoration: none;
-  border-bottom: 1px solid transparent;
-  padding-bottom: 1px;
-}
-
-a:hover {
-  color: var(--aqua);
-  border-bottom: 1px solid var(--aqua);
-}
-
-p {
-  margin: 1.5em 0;
-  text-align: justify;
-}
-
-ul, ol {
-  padding-left: 1.8em;
-  margin: 1.5em 0;
-}
-
-li {
-  margin: 0.5em 0;
-}
-
-
-span.date {
-    font-size: 15px;
-    margin-right: 1.5em;
-    color: var(--gray0);
-}
-
-ul.posts {
-    margin: 0;
-}
-
-li.list-item {
-    list-style-type: none;
-    margin: 0;
-}
-
-code {
-  font-family: var(--font-mono);
-  font-size: 0.85em;
-  background-color: var(--bg1);
-  padding: 0.2em 0.4em;
-  border-radius: 4px;
-  color: var(--blue);
-}
-
-pre {
-  background-color: var(--bg1);
-  padding: 1.2em;
-  overflow-x: auto;
-  margin: 1.5em 0;
-  border-left: 2px solid var(--green);
-  box-shadow: var(--shadow-sm);
-  position: relative;
-  min-width: 100%;
-}
-
-pre code {
-  background-color: transparent;
-  padding: 0;
-  color: var(--fg);
-  font-size: 0.9em;
-  display: inline-block;
-  min-width: 100%;
-}
-
-hr {
-  border: none;
-  height: 2px;
-  background: var(--bg2);
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 2em 0;
-  background-color: var(--bg1);
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: var(--shadow-sm);
-}
-
-th {
-  background-color: var(--bg2);
-  color: var(--green);
-  font-weight: 600;
-  text-align: left;
-  padding: 0.8em 1em;
-  border-bottom: 2px solid var(--bg0);
-}
-
-td {
-  padding: 0.8em 1em;
-  border-bottom: 1px solid var(--bg2);
-}
-
-tr:last-child td {
-  border-bottom: none;
-}
-
-header#title-block-header {
-  text-align: left;
-  margin-bottom: var(--space-md);
-  padding-bottom: var(--space-sm);
-  border-bottom: 1px solid var(--bg2);
-}
-
-header .title {
-  font-size: 1.6em;
-  color: var(--green);
-  margin-bottom: 0.2em;
-  border-bottom: none;
-  font-weight: 600;
-  letter-spacing: -0.02em;
-}
-
-header .author {
-  display: inline;
-  font-style: italic;
-  font-size: 0.95em;
-  color: var(--gray1);
-  margin: 0;
-}
-
-header .date {
-  display: inline;
-  font-family: var(--font-serif);
-  font-size: 0.95em;
-  color: var(--gray1);
-  margin: 0;
-  margin-left: var(--space-sm);
-}
-
-header .date::before {
-  content: "•";
-  margin-right: var(--space-sm);
-  color: var(--gray2);
-  font-size: 0.8em;
-}
-
-nav#TOC {
-  margin: 1.5em 0 2em 0;
-  padding: 0.8em 1em;
-  background-color: transparent;
-  border-left: 2px solid var(--gray1);
-  border-radius: 0;
-  font-size: 0.9em;
-}
-
-nav#TOC::before {
-  content: "Table of Contents";
-  display: block;
-  font-family: var(--font-sans);
-  font-size: 0.85em;
-  font-weight: 600;
-  color: var(--gray1);
-  margin-bottom: 0.5em;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-nav#TOC ul {
-  list-style: none;
-  padding-left: 0;
-  margin: 0;
-}
-
-nav#TOC > ul {
-  padding-left: 0;
-}
-
-nav#TOC li {
-  margin: 0.3em 0;
-  position: relative;
-}
-
-nav#TOC a {
-  color: var(--fg);
-  text-decoration: none;
-  display: block;
-  padding: 0.1em 0.3em;
-  border-radius: 2px;
-  line-height: 1.4;
-}
-
-nav#TOC a:hover {
-  color: var(--aqua);
-}
-
-nav#TOC ul ul {
-  padding-left: 0.8em;
-  margin: 0.2em 0;
-  border-left: 1px solid var(--bg2);
-}
-
-nav#TOC ul ul a {
-  font-size: 0.95em;
-  color: var(--gray1);
-}
-
-nav#TOC ul ul a:hover {
-  color: var(--blue);
-}
-
-img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 8px;
-  margin: 1.5em auto;
-  display: block;
-  box-shadow: var(--shadow-md);
-}

A games/index.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <meta name="author" content="chris" />
+  <title>games</title>
+  <link rel="stylesheet" href="../styles.css" />
+</head>
+<body>
+<a href=".." class="nav-link">home</a>
+<header id="title-block-header">
+<h1 class="title">games</h1>
+</header>
+<ul class="posts">
+    <li class="list-item">
+        <a href="./wick-dodge" class="link">Wick Dodge</a>
+    </li>
+    <li class="list-item">
+        <a href="./pac-survivors" class="link">Pac Survivors</a>
+    </li>
+    <li class="list-item">
+        <a href="./fruity-sorter" class="link">Fruity Sorter</a>
+    </li>
+</ul>
+</body>
+</html>

M index.html → index.html

@@ -1,15 +1,21 @@
 <!DOCTYPE html>
-<html lang="en">
+<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Krinitsin</title>
-    <link rel="stylesheet" href="styles.css">
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <meta name="author" content="chris" />
+  <title>krinitsin.com</title>
+  <link rel="stylesheet" href="styles.css" />
 </head>
 <body>
-    <div class="container">
-        <div class="symbol"> <i class="nf nf-dev-terminal"></i></div>
-        <h1>Under Construction</h1>
-    </div>
+<a href="./blog" class="nav-link">blog</a>
+•
+<a href="./games" class="nav-link">games</a>
+•
+<a href="https://git.krinitsin.com" class="nav-link">repos</a>
+<header id="title-block-header">
+<h1 class="title">krinitsin.com</h1>
+</header>
+
 </body>
 </html>

M styles.css → styles.css

@@ -1,29 +1,336 @@
-@import url("https://www.nerdfonts.com/assets/css/webfont.css");
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');
+:root {
+  --bg0: #fdf6e3;
+  --bg1: #f3ead3;
+  --bg2: #e9dfc2;
+  --fg: #5c6a72;
+  --red: #e67e80;
+  --orange: #f57d26;
+  --yellow: #dfa000;
+  --green: #8da101;
+  --aqua: #35a77c;
+  --blue: #3a94c5;
+  --purple: #df69ba;
+  --gray0: #a6b0a0;
+  --gray1: #939f91;
+  --gray2: #829181;
+  
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 2rem;
+  --space-xl: 4rem;
+  
+  --font-serif: Arial,  sans-serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'Menlo', 'Monaco', 'Consolas', 'Lucida Console', monospace;
+  
+  --shadow-sm: 0 2px 8px rgba(92, 106, 114, 0.08);
+  --shadow-md: 0 4px 16px rgba(92, 106, 114, 0.12);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg0: #2b3339;
+    --bg1: #323c41;
+    --bg2: #3a454a;
+    --fg: #d3c6aa;
+    --red: #e67e80;
+    --orange: #e69875;
+    --yellow: #dbbc7f;
+    --green: #a7c080;
+    --aqua: #83c092;
+    --blue: #7fbbb3;
+    --purple: #d699b6;
+    --gray0: #859289;
+    --gray1: #7a8478;
+    --gray2: #6f7770;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+html {
+  color: var(--fg);
+  background-color: var(--bg0);
+  font-family: var(--font-serif);
+  line-height: 1.7;
+  font-size: 16px;
+}
 
 body {
-    background-color: #2d353b; /* Dark background color */
-    color: #d3c6aa; /* Text color */
-    font-family: Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
+  margin: 0 auto;
+  max-width: 40em;
+  padding: var(--space-lg) var(--space-lg);
+  background-color: var(--bg0);
+  hyphens: auto;
+  overflow-wrap: break-word;
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
+}
+
+@media (max-width: 768px) {
+  body {
+    font-size: 17px;
+    padding: var(--space-md) var(--space-md);
+  }
 }
 
-.container {
-    text-align: center;
+@media (max-width: 600px) {
+  body {
+    font-size: 16px;
+    padding: var(--space-md);
+  }
 }
 
-.symbol {
-    font-size: 7em;
-    margin-bottom: 30px;
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-sans);
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 2em;
+  margin-bottom: 0.5em;
+  color: var(--fg);
 }
 
 h1 {
-    font-family: "Roboto Slab";
-    font-size: 3em;
+  font-size: 1.7em;
+  color: var(--green);
+  border-bottom: 1px solid var(--bg2);
+  padding-bottom: 0.2em;
+  margin-top: 0;
+  margin-bottom: 0.5em;
+}
+
+h2 {
+  font-size: 1.5em;
+  color: var(--aqua);
+  border-bottom: 1px solid var(--bg2);
+  padding-bottom: 0.2em;
+  margin-top: 2em;
+  padding-top: 0.5em;
+}
+
+h3 {
+  font-size: 1.3em;
+  color: var(--blue);
+}
+
+a {
+  color: var(--blue);
+  text-decoration: none;
+  border-bottom: 1px solid transparent;
+  padding-bottom: 1px;
+}
+
+a:hover {
+  color: var(--aqua);
+  border-bottom: 1px solid var(--aqua);
+}
+
+p {
+  margin: 1.5em 0;
+  text-align: justify;
+}
+
+ul, ol {
+  padding-left: 1.8em;
+  margin: 1.5em 0;
+}
+
+li {
+  margin: 0.5em 0;
+}
+
+
+span.date {
+    font-size: 15px;
+    margin-right: 1.5em;
+    color: var(--gray0);
+}
+
+ul.posts {
     margin: 0;
 }
 
+li.list-item {
+    list-style-type: none;
+    margin: 0;
+}
+
+code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  background-color: var(--bg1);
+  padding: 0.2em 0.4em;
+  border-radius: 4px;
+  color: var(--blue);
+}
+
+pre {
+  background-color: var(--bg1);
+  padding: 1.2em;
+  overflow-x: auto;
+  margin: 1.5em 0;
+  border-left: 2px solid var(--green);
+  box-shadow: var(--shadow-sm);
+  position: relative;
+  min-width: 100%;
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+  color: var(--fg);
+  font-size: 0.9em;
+  display: inline-block;
+  min-width: 100%;
+}
+
+hr {
+  border: none;
+  height: 2px;
+  background: var(--bg2);
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 2em 0;
+  background-color: var(--bg1);
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+th {
+  background-color: var(--bg2);
+  color: var(--green);
+  font-weight: 600;
+  text-align: left;
+  padding: 0.8em 1em;
+  border-bottom: 2px solid var(--bg0);
+}
+
+td {
+  padding: 0.8em 1em;
+  border-bottom: 1px solid var(--bg2);
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+header#title-block-header {
+  text-align: left;
+  margin-bottom: var(--space-md);
+  padding-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--bg2);
+}
+
+header .title {
+  font-size: 1.6em;
+  color: var(--green);
+  margin-bottom: 0.2em;
+  border-bottom: none;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+header .author {
+  display: inline;
+  font-style: italic;
+  font-size: 0.95em;
+  color: var(--gray1);
+  margin: 0;
+}
+
+header .date {
+  display: inline;
+  font-family: var(--font-serif);
+  font-size: 0.95em;
+  color: var(--gray1);
+  margin: 0;
+  margin-left: var(--space-sm);
+}
+
+header .date::before {
+  content: "•";
+  margin-right: var(--space-sm);
+  color: var(--gray2);
+  font-size: 0.8em;
+}
+
+nav#TOC {
+  margin: 1.5em 0 2em 0;
+  padding: 0.8em 1em;
+  background-color: transparent;
+  border-left: 2px solid var(--gray1);
+  border-radius: 0;
+  font-size: 0.9em;
+}
+
+nav#TOC::before {
+  content: "Table of Contents";
+  display: block;
+  font-family: var(--font-sans);
+  font-size: 0.85em;
+  font-weight: 600;
+  color: var(--gray1);
+  margin-bottom: 0.5em;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+nav#TOC ul {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+nav#TOC > ul {
+  padding-left: 0;
+}
+
+nav#TOC li {
+  margin: 0.3em 0;
+  position: relative;
+}
+
+nav#TOC a {
+  color: var(--fg);
+  text-decoration: none;
+  display: block;
+  padding: 0.1em 0.3em;
+  border-radius: 2px;
+  line-height: 1.4;
+}
+
+nav#TOC a:hover {
+  color: var(--aqua);
+}
+
+nav#TOC ul ul {
+  padding-left: 0.8em;
+  margin: 0.2em 0;
+  border-left: 1px solid var(--bg2);
+}
+
+nav#TOC ul ul a {
+  font-size: 0.95em;
+  color: var(--gray1);
+}
+
+nav#TOC ul ul a:hover {
+  color: var(--blue);
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  margin: 1.5em auto;
+  display: block;
+  box-shadow: var(--shadow-md);
+}

index — krinitsin.com @ e5ba958c8d4d863dceb132a759f68a4ec38999ff

personal website