Work in progress nethack dungeon generator background for the nethack page

2023-01-29 08:05:54 -08:00 · 2023-01-29 08:05:54 -08:00 · 186929921b
commit 186929921b
parent d524a7dd9e
5 changed files with 342 additions and 0 deletions
--- a/assets/styles/nethack.css
+++ b/assets/styles/nethack.css
@ -0,0 +1,120 @@
+/* Eryn Wells <eryn@erynwells.me> */
+
+:root {
+    --logentry-background-color: var(--tag-background-color);
+    --logentry-foreground-color: var(--tag-text-color);
+}
+
+:root {
+  --separator-color: rgb(var(--dk-gray));
+  --box-shadow-color: rgba(var(--dk-gray), 0.8);
+  --body-code-background-color: rgb(var(--dk-gray));
+
+  --heading-color: rgb(var(--white));
+  --header-series-arrow-foreground-color: rgb(var(--super-dk-gray));
+
+  --html-background-color: rgb(var(--black));
+  --html-color: rgba(var(--white), 0.8);
+
+  --platter-background-color: rgba(var(--black), var(--platter-background-opacity));
+  --platter-backdrop-filter: brightness(0.66) blur(10px);
+
+  --tag-foreground-color: rgb(var(--sub-lt-gray));
+  --tag-background-color: rgb(var(--dk-gray));
+  --tag-spacer-foreground-color: rgb(var(--super-dk-gray));
+  --tag-hover-background-color: rgb(var(--super-dk-gray));
+  --tag-hover-foreground-color: rgb(var(--mid-gray));
+
+  --twitter-icon: url(/icons/twitter-dark.svg);
+  --github-icon: url(/icons/github-dark.svg);
+  --instagram-icon: url(/icons/instagram-dark.svg);
+  --feed-icon: url(/icons/rss-dark.svg);
+}
+
+main {
+  background: black;
+}
+
+#dungeon-background {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  filter: brightness(0.3);
+}
+
+.logfile {
+    margin-block-start: 0;
+    margin-inline-start: 0;
+    padding-inline-start: 0;
+}
+
+.logfile > li {
+    align-items: first baseline;
+    color: var(--logentry-foreground-color);
+    background-color: var(--logentry-background-color);
+    border-radius: 6px;
+    display: grid;
+    grid-template-columns: 32px auto auto;
+    row-gap: 1rem;
+    margin-block-start: 2rem;
+    margin-inline-start: 0;
+    padding: 3rem;
+}
+
+.logfile > li > .date {
+    grid-column-start: 2;
+    grid-row-start: 1;
+}
+
+.logfile > li > h4.date {
+    margin: 0;
+    padding: 0;
+}
+
+.logfile > li > .character-descriptor {
+    color: #aaa;
+    font-size: 1.5rem;
+    font-weight: 700;
+    grid-column-start: 3;
+    grid-row-start: 1;
+    text-align: right;
+    text-transform: uppercase;
+}
+
+.logfile > li > p {
+    grid-column-start: 2;
+    grid-column-end: 4;
+    grid-row-start: 2;
+    margin: 0;
+}
+
+.logfile > li > table.stats {
+    border: 0;
+    grid-column-start: 2;
+    grid-column-end: 4;
+    grid-row-start: 3;
+    margin-block-end: 0;
+    width: 100%;
+    -webkit-border-horizontal-spacing: 0;
+    -webkit-border-vertical-spacing: 0;
+}
+
+.logfile > li > table.stats > tbody > tr > td {
+    border: 0;
+    color: #aaa;
+    font-size: 1.5rem;
+    font-weight: 700;
+    padding: 0;
+    text-transform: uppercase;
+    vertical-align: bottom;
+}
+
+.logfile > li > table.stats > tbody > tr > td.score,
+.logfile > li > table.stats > tbody > tr > td.hp,
+.logfile > li > table.stats > tbody > tr > td.level {
+    width: 16rem;
+    text-align: right;
+}