web

rtfd/public/web/style/debug.css

@@ -0,0 +1,5 @@
+* {
+border-color: magenta;
+border-style: dashed;
+border-width: 1px;
+}

rtfd/public/web/style/main.css

@@ -0,0 +1,162 @@
+/*
+16 1
+17 1.0625
+18 1.125
+19 1.1875
+20 1.25
+21 1.3125
+22 1.375
+phone: 480 px
+tablet: 768 px
+laptop: 1024 px
+desktop: 1366 px
+
+block-size ← height
+(border|padding)-block[-start|end]
+(border|padding)-inline[-start|end]
+inline-size ← width
+margin-block ← vspace
+*/
+
+/**/
+@import "debug.css";
+/**/
+@import "reset.css";
+
+html {
+}
+
+body {
+background-color: #111;
+background-image: url("../images/logo.svg");
+background-position: center;
+background-size: cover;
+color: #777;
+font-family: monospace;
+line-height: 1.125;
+margin-block: 0;
+margin-inline: auto;
+max-inline-size: 160ch;
+text-align: start;
+}
+
+header {
+background-color: #300;
+display: flex;
+gap: 1em;
+justify-content: space-between;
+padding: 1em 2em;
+}
+
+.columns {
+display: grid;
+gap: 1em;
+@media (width > 40rem) {
+grid-template-columns: 1fr 2fr;
+}
+}
+
+.sectionless {
+background-color: #630;
+padding: .5em 1em;
+}
+
+.sectionless .thing {
+font-size: 1.5em;
+}
+
+.wrapper {
+display: flex;
+}
+
+main {
+}
+
+h1, h2, h3, h4, h5, h6 {
+background-color: #222;
+}
+
+h1 {
+border-color: #fff;
+border-radius: .25em;
+border-style: solid;
+border-width: .1em;
+color: #f77;
+font-size: 3rem;
+text-align: center;
+}
+
+img {
+display: block;
+max-inline-size: 100%;
+}
+
+p {
+background-color: #330;
+}
+
+section {
+background-color: #033;
+margin-block: 1em;
+margin-inline: 1em;
+max-inline-size: 40ch;
+}
+
+strong {
+color: red;
+}
+
+ol, ul {
+background-color: #303;
+}
+ol {
+list-style: decimal;
+}
+ul {
+list-style: disc;
+}
+li {
+margin-block: .25em;
+}
+ul li::marker {
+content: "×";
+}
+
+header nav a {
+text-decoration: none;
+}
+header nav a:focus-visible,
+header nav a:hover {
+background-color: blue;
+}
+header nav ul {
+display: flex;
+font-size: 1.5rem;
+gap: 1em;
+list-style: none;
+padding: 0;
+}
+header nav li::marker {
+content: none;
+}
+
+a {
+color: inherit;
+}
+a:visited {
+}
+a:focus-visible,
+a:hover {
+}
+a:active {
+}
+
+h2 {
+color: #f77;
+}
+
+footer {
+background-color: #003;
+padding: 1em 2em;
+text-align: end;
+}

rtfd/public/web/style/reset.css

@@ -0,0 +1,42 @@
+*::after,
+*::before,
+* {
+box-sizing: border-box;
+}
+
+* {
+font: inherit;
+/*
+margin: 0;
+padding: 0;
+/**/
+}
+
+html {
+color-scheme: dark light;
+font-size: 1rem;
+}
+
+body {
+hanging-punctuation: first last;
+min-height: 100svh;
+}
+
+h1, h2, h3, h4, h5, h6 {
+text-wrap: balance;
+}
+
+figcaption,
+li,
+p {
+max-width: 79ch;
+text-wrap: pretty;
+}
+
+img,
+picture,
+svg,
+video {
+display: block;
+max-width: 100%;
+}