new build system and structure using pandoc

static/reset.css

@@ -0,0 +1,74 @@
+/* https://piccalil.li/blog/a-more-modern-css-reset/ */
+
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body, h1, h2, h3, h4, p,
+figure, blockquote, dl, dd {
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1, h2, h3, h4,
+button, input, label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1, h2,
+h3, h4 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  /*color: currentColor;*/
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input, button,
+textarea, select {
+  font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}

static/styles.css

@@ -0,0 +1,183 @@
+/* https: //gist.github.com/Albert221/753d7f8955eeb6f5e50486fce048e39f */
+@font-face {
+    font-family: 'JetBrains Mono';
+    src: url('/static/JetBrainsMono-Regular.woff2') format('woff2'),
+         url('/static/JetBrainsMono-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    font-size: 1.2rem;
+    font-weight: 500;
+    line-height: 1.8;
+
+    max-width: 900px;
+    margin: 0 auto;
+
+    background-color: #1E1F22; /* Dark background */
+    color: #CED2D7; /* Main text color */
+}
+
+header, footer {
+    color: #fff;
+    padding: 10px;
+    font-size: .9em;
+    font-weight: bold;
+}
+
+header {
+    /* border-bottom: 3px solid #333; */
+    border-bottom: 3px solid transparent;
+    border-image: linear-gradient(0.25turn, #1E1F22, #333, #1E1F22);
+    border-image-slice: 1;
+}
+
+footer {
+    /* border-top: 3px solid #333; */
+    border-top: 3px solid transparent;
+    border-image: linear-gradient(0.25turn, #1E1F22, #333, #1E1F22);
+    border-image-slice: 1;
+    text-align: center;
+    padding-bottom: 20px;
+}
+
+nav ul {
+    list-style-type: none;
+    text-align: center;
+}
+
+nav ul li {
+    display: inline;
+    margin-right: 20px;
+}
+
+nav ul li a, footer a {
+    color: #fff;
+    text-decoration: none;
+}
+
+main {
+    padding: 20px;
+}
+
+body.index main {
+    padding-top: 0;
+}
+
+main p {
+    margin-left: 1rem;
+}
+
+main a {
+    color: #ff5277;
+    text-decoration: none;
+    position: relative;
+}
+
+/* https: //tobiasahlin.com/blog/css-trick-animating-link-underlines/ */
+main a::before {
+    content: "";
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 1px;
+    bottom: 0;
+    left: 0;
+    background-color: #ff5277;
+    transform: scaleX(0);
+    transform-origin: top left;
+    transition: transform 0.2s ease;
+}
+
+main a:hover::before {
+    transform: scaleX(1);
+}
+
+main a:visited {
+    color: #BF6C6C;
+}
+
+body.index main ul {
+    list-style: none;
+    padding-left: 0;
+}
+
+body.index main ul li em {
+    font-style: normal;
+    font-size: 0.7rem;
+    color: #888;
+    background-color: #2d2d2d;
+    border-radius: 0.2rem;
+    padding: 2px 5px;
+}
+
+body.index .header {
+    background: rgb(30, 31, 34);
+    background: linear-gradient(0.25turn, rgba(30, 31, 34, 1) 0%, rgba(51, 51, 51, 1) 35%, rgba(30, 31, 34, 1) 100%);
+    text-align: center;
+    padding: 3rem;
+}
+
+body.index .header img {
+    margin: 0 auto;
+    border-radius: 100%;
+}
+
+a:hover {
+    color: #ff5277;
+}
+
+div.sourceCode, pre {
+    background-color: #333;
+}
+
+pre {
+    padding: 1rem;
+}
+
+pre, code, tt {
+    font-family: 'JetBrains Mono';
+}
+
+p code {
+    background-color: #2d2d2d;
+    color: #c4c399;
+    border-radius: 0.2rem;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    background: #ffffff;
+    background: linear-gradient(to bottom, #ffffff 0%, #00dda6 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    text-shadow: 0px 0px 2px rgba(0,0,0,0.2);
+}
+
+main div.subtitle {
+    margin-top: 0px;
+    color: #555;
+    font-size: .8em;
+}
+
+figure * {
+    margin: 0 auto;
+    font-size: 0.9rem;
+    text-align: center;
+}
+
+/* Responsive Styles */
+@media only screen and (max-width: 900px) {
+    header, footer {
+        width: 100%; /* Full width on mobile */
+    }
+
+    main {
+        width: 100%; /* Full width on mobile */
+        max-width: none; /* Remove max-width on mobile */
+    }
+}