Initial commit

2026-07-08 22:36:54 +02:00
commit 08f7d9c6a9
13 changed files with 414 additions and 0 deletions
@@ -0,0 +1,210 @@
+:root {
+  --gold: #EBD08A;
+  --gold-dim: #C9A15B;
+  --gold-mid: #A67C3D;
+  --gold-dark: #6E501F;
+  --gold-very-dark: #5f451d;
+  --muted: #57575d;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  min-width: 100svw;
+  min-height: 100svh;
+  color: white;
+  font-family: sans-serif;
+}
+
+html {
+  background: transparent;
+}
+
+body {
+  background-image: url('background.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  min-height: 100svh;
+
+  & > * {
+    flex: 0 0 auto;
+  }
+}
+
+h1 {
+  margin: 1.5rem 0;
+  font-size: 2.3rem;
+  letter-spacing: 0.05em;
+  color: var(--gold);
+}
+
+.subtitle {
+  color: var(--gold-mid);
+  letter-spacing: 1px;
+  font-size: 0.8em;
+}
+
+p {
+  margin: 0;
+}
+
+a {
+  &:link, &:visited {
+    color: var(--gold-dim);
+  }
+
+  &:hover,
+  &:active {
+    color: var(--gold);
+  }
+}
+
+main {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+
+  & > * {
+    flex: 1 0 auto;
+  }
+}
+
+footer {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-between;
+  color: var(--muted);
+  letter-spacing: 0.1em;
+  font-family: serif;
+  font-size: 0.9em;
+  padding: 1rem;
+  gap: 0.5rem;
+
+  & > * {
+    flex: 0 1 auto;
+    display: inline-block;
+    width: auto;
+    margin: 0;
+  }
+}
+
+.build {
+  &:link, &:hover, &:active, &:visited {
+    display: inline-block;
+    text-decoration: none;
+    border-radius: 2px;
+    padding: calc(0.5em - 0.3rem) calc(1em - 0.3rem);
+    border: 0.3rem solid white;
+  }
+
+  &.recommended {
+    font-size: 1.2rem;
+    margin: 5rem 0;
+    font-family: serif;
+    font-variant: small-caps;
+    display: inline-flex;
+    padding: 0.3rem;
+    border: none;
+    border-radius: 5px;
+    background: linear-gradient(152deg, var(--gold) 0%, var(--gold-mid) 28%, var(--gold-very-dark) 54%, var(--gold-mid) 76%, var(--gold) 100%);
+
+    &:hover,
+    &:active {
+      background: var(--gold);
+    }
+
+    & > * {
+      display: block;
+      padding: 1rem 2rem;
+      border-radius: 3px;
+      background: #17131a;
+      color: var(--gold);
+      font: 600 19px/1 var(--serif);
+      letter-spacing: 0.1em;
+
+      &:hover,
+      &:active {
+        background: #211e29;
+        color: white;
+      }
+    }
+  }
+
+  &.other {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+    border: 1px solid var(--gold-very-dark);
+    color: var(--gold-dim);
+    letter-spacing: 0;
+    background: #101010;
+
+    & .architecture {
+      color: var(--muted);
+    }
+
+    &:hover {
+      border-color: var(--gold-dim);
+      color: var(--gold);
+    }
+  }
+}
+
+.other-builds {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: 1em;
+  color: var(--muted);
+  font-family: serif;
+  letter-spacing: 0.1em;
+  justify-content: center;
+  font-size: 0.9em;
+
+  & > * {
+    flex: 0 0 auto;
+  }
+}
+
+.version {
+  text-align: center;
+}
+
+.divider {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.divider::before,
+.divider::after {
+  content: '';
+  width: 5rem;
+  height: 2px;
+}
+
+.divider::before {
+  background: linear-gradient(90deg, transparent, var(--gold-dark));
+}
+
+.divider::after {
+  background: linear-gradient(90deg, var(--gold-dark), transparent);
+}
+
+.divider-gem {
+  width: 0.8rem;
+  height: 0.8rem;
+  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
+  transform: rotate(45deg);
+}