commit 5491939ecaca86bdf5d9faed65a5a35550658a0b
Author: Lucas Gabriel Vuotto <lucas@lgv5.net>
Date:   Thu Apr 10 11:23:03 2025 +0000

    Initial import

diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..e3b63f6
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,208 @@
+/*
+ * Copyright (c) 2025 Lucas Gabriel Vuotto <lucas@lgv5.net>
+ *
+ * Permission to use, copy, modify, and distribute this software for any
+ * purpose with or without fee is hereby granted, provided that the above
+ * copyright notice and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+ * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+ * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+ * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+ */
+
+:root {
+  --dark-theme-bg: #000000;
+  --dark-theme-text: #ffffff;
+  --dark-theme-accent: #ec57bc;
+  --dark-theme-accent-hover: #f7be00;
+
+  --light-theme-bg: #ffffff;
+  --light-theme-text: #000000;
+  --light-theme-accent: #4997ce;
+  --light-theme-accent-hover: #f7be00;
+
+  --bg: var(--light-theme-bg);
+  --text: var(--light-theme-text);
+  --accent: var(--light-theme-accent);
+  --accent-hover: var(--light-theme-accent-hover);
+
+  --gap: 1.5rem;
+  --viewport-width: 60rem;
+
+  --border-thin: 0.0625rem solid var(--accent);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+dl,
+h1,
+h2,
+h3,
+ol,
+p,
+ul {
+  margin: 0;
+}
+
+body {
+  margin: 0 auto;
+  min-height: 100vh;
+  background-color: var(--bg);
+  color: var(--text);
+  font-family: monospace;
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+dl,
+h1,
+h2,
+h3,
+ol,
+p,
+ul {
+  margin-bottom: var(--gap);
+}
+
+h1 {
+  text-align: center;
+  font-size: 3rem;
+  line-height: 2;
+}
+
+h2 {
+  font-size: 2.5rem;
+  line-height: 1.2;
+}
+
+h3 {
+  font-size: 2rem;
+  line-height: 1.5;
+}
+
+dd {
+  margin-left: calc(var(--gap) * 2);
+}
+
+dt {
+  font-weight: bold;
+}
+
+ol,
+ul {
+  padding-left: calc(var(--gap) * 2);
+}
+
+a,
+a:link,
+a:visited {
+  color: var(--accent);
+}
+
+a:hover,
+a:active {
+  color: var(--accent-hover);
+}
+
+body > header {
+  border-bottom: var(--border-thin);
+  font-size: 1.25rem;
+  line-height: 2.4;
+}
+
+body > header > nav {
+  gap: 0 var(--gap);
+}
+
+body > header > nav > a {
+  font-weight: bold;
+  text-decoration: none;
+}
+
+body > footer {
+  border-top: var(--border-thin);
+  line-height: 3;
+}
+
+body > footer > p {
+  margin-bottom: 0;
+}
+
+main {
+  border-top: var(--border-thin);
+  border-bottom: var(--border-thin);
+  padding-top: var(--gap);
+  margin-top: 0.1875rem;
+  margin-bottom: 0.1875rem;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.layout-viewport {
+  margin-left: auto;
+  margin-right: auto;
+  width: var(--viewport-width);
+}
+
+.layout-flex-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.layout-flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.layout-flex-item-fullsize {
+  flex: auto;
+}
+
+@media screen and (min-width: 15rem) {
+  :root {
+    --viewport-width: 15rem;
+  }
+}
+
+@media screen and (min-width: 30rem) {
+  :root {
+    --viewport-width: 30rem;
+  }
+}
+
+@media screen and (min-width: 45rem) {
+  :root {
+    --viewport-width: 45rem;
+  }
+}
+
+@media screen and (min-width: 60rem) {
+  :root {
+    --viewport-width: 60rem;
+  }
+}
+
+@media screen and (min-width: 90rem) {
+  :root {
+    --viewport-width: 90rem;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: var(--dark-theme-bg);
+    --text: var(--dark-theme-text);
+    --accent: var(--dark-theme-accent);
+    --accent-hover: var(--dark-theme-accent-hover);
+  }
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5408def
--- /dev/null
+++ b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
+  <title>test</title>
+  <link rel="stylesheet" href="/css/style.css">
+</head>
+<body class="layout-flex-column">
+  <header>
+    <nav class="layout-viewport layout-flex-row">
+      <a href="#">lgv5</a>
+      <a href="#">links</a>
+      <a href="#">left</a>
+      <span class="layout-flex-item-fullsize"><!-- spacer --></span>
+      <a href="#">and</a>
+      <a href="#">right</a>
+    </nav>
+  </header>
+  <main class="layout-flex-item-fullsize layout-flex-column">
+    <div class="layout-viewport layout-flex-item-fullsize layout-flex-column">
+      <h1>Main title</h1>
+
+      <h2>Demo</h2>
+
+      <h3>Paragraph</h3>
+      <p>some text</p>
+
+      <h3>Definition list</h3>
+      <dl>
+        <dt>term</dt>
+        <dd>one definition</dd>
+        <dd>another definition</dd>
+        <dt>another term</dt>
+        <dd>its only definition</dd>
+      </dl>
+
+      <h3>Unordered list</h3>
+      <ul>
+        <li>some</li>
+        <li>item</li>
+      </ul>
+
+      <p>it's full-height!</p>
+    </div>
+  </main>
+  <footer>
+    <p class="layout-viewport text-center">
+    Powered by <a href="//www.openbsd.org/">OpenBSD</a> /
+    <a href="//www.haproxy.org/">HAProxy</a>.
+    </p>
+  </footer>
+</body>
+</html>