1 files changed, 278 insertions, 0 deletions
diff --git a/assets/css/blog.css b/assets/css/blog.css
new file mode 100644
index 0000000..de80799
--- /dev/null
+++ b/assets/css/blog.css
@@ -0,0 +1,278 @@
+:root
+{
+    --term-fg: #b5aba8;
+    --term-bg: #2b2b2b;
+    --term-black: #515151;
+    --term-red: #cc6666;
+    --term-green: #b5bd68;
+    --term-yellow: #f0c674;
+    --term-blue: #81a2be;
+    --term-magenta: #b294bb;
+    --term-cyan: #8abeb7;
+	--term-white: #b5aba8;
+}
+
+@font-face {
+	font-family: "jetbrains-mono";
+	src: url("/assets/font/JetBrainsMono-Regular.woff2");
+}
+
+html {
+	font-family: "jetbrains-mono", serif;
+	font-variant-ligatures: none;
+}
+
+header, .icon-text {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+}
+
+.icon-text {
+    margin-top: 0.2rem;
+    margin-bottom: 0.2rem;
+}
+
+.icon-text > :first-child {
+    margin-right: 0.3rem;
+}
+
+header {
+    margin-top: 0rem;
+    margin-bottom 1rem;
+}
+
+header div {
+    flex: 1;
+}
+
+header span {
+    flex: 0.2;
+}
+
+.blog-title {
+    margin-top: 0rem;
+}
+
+.ascii-art {
+    font-size: 0.6rem;
+    white-space: pre;
+}
+
+hr {
+    width: 90%;
+	color: var(--term-black);
+}
+
+.nobr,
+.icon-text p,
+.icon-text span {
+    white-space: nowrap;
+}
+
+.force-wrap p, .force-wrap {
+    word-wrap: break-word;
+}
+
+.code-block,
+.code-block-wrap {
+    border-style: solid;
+    border-color: var(--term-white);
+    border-width: 0.1rem;
+    padding: 0.7rem;
+}
+
+.code-block {
+    overflow-x: auto;
+}
+
+figure {
+    margin-left: 0;
+    margin-right: 0;
+}
+
+figcaption {
+    text-align: center;
+    color: var(--term-fg);
+}
+
+h1 {
+    font-size: 2rem;
+    margin-top: 2rem;
+}
+
+h2 {
+    font-size: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+h3 {
+    font-size: 1.2rem;
+    margin-top: 1.2rem;
+}
+
+p {
+    font-size: 1rem;
+    margin-top: 0.8rem;
+}
+
+.code-block p,
+.code-block-wrap p {
+    margin: 0;
+}
+
+.code-block p {
+    white-space: pre;
+}
+
+body {
+    background-color: var(--term-bg);
+}
+
+p, h1, h2, h3 {
+    color: var(--term-fg);
+    margin-bottom: 0.8rem;
+}
+
+h2.index-title {
+    margin-top: 0.8rem;
+}
+
+img
+{
+	max-width: 100%;
+	max-height: 100%;
+	border-style: solid;
+    border-color: var(--term-black);
+    border-width: 0.1rem;
+    width: 100%;
+}
+
+.svg-icon {
+	max-width: 1.5rem;
+	max-height: 1.5rem;
+	border: none;
+    width: 1.5rem;
+	height: 1.5rem;
+}
+
+a.dont-bother {
+	color: var(--term-fg);
+	font-weight: normal;
+}
+
+a.dont-bother:hover {
+	text-decoration: none; 
+}
+
+strong {
+    color: var(--term-yellow);
+}
+
+a {
+	font-weight: bold;
+	color: var(--term-blue);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a.posts-listing-link:hover :is(h2, h3)
+{
+	text-decoration: underline;
+}
+
+@media (min-width: 768px) {
+    main {
+        border-width: 0.15rem;
+        border-color: var(--term-black);
+        border-style: none solid none solid;
+    }
+}
+
+main :is(h1, h2, h3) {
+    color: var(--term-yellow);
+    margin-top: 2rem;
+}
+
+.other_post {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    margin: 2rem 0rem;
+    gap: 1rem;
+}
+
+.other_post div {
+    flex: 1;
+}
+
+.other_post img {
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.first-element {
+    margin-top: 0;
+}
+
+.last-element {
+    margin-bottom: 0;
+}
+
+div.huge-vertical-spacer-at-the-bottom {
+    height: 10rem;
+}
+
+@media (max-width: 767px) {
+    div.sidebar-spacing {
+        height: 10rem;
+    }
+}
+
+div.blog-content-spacer {
+    height: 2rem;
+}
+
+/* Extra "terminal" colors */
+.fg {
+	color: var(--term-fg);
+}
+
+.bg {
+    color: var(--term-bg);
+}
+
+.black {
+	color: var(--term-black);
+}
+
+.red {
+	color: var(--term-red);
+}
+
+.green {
+	color: var(--term-green);
+}
+
+.yellow {
+	color: var(--term-yellow);
+}
+
+.blue {
+	color: var(--term-blue);
+}
+
+.magenta {
+	color: var(--term-magenta);
+}
+
+.cyan {
+	color: var(--term-cyan);
+}
+
+.white {
+	color: var(--term-white);
+}