first working version

2026-03-03 06:27:17 +01:00 · 2020-11-28 00:28:38 +01:00
parent 8762aef219
commit a17153759e
22 changed files with 1592 additions and 214 deletions
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -0,0 +1,180 @@
+:root {
+  --bg-color: #1b5e20;
+
+  --text-color: #fff;
+
+  --link-color: var(--text-color);
+  --link-color--hover: #000;
+
+  --calcard-color: #fff;
+  --calcard-bg-color: #c62828;
+  --calcard-bg-color__locked: #003300;
+
+  --door-bg-color: #4c8c4a;
+  --door-color: #fff;
+
+  --player-controls-bg-color: #1b5e20;
+
+  --door-hint-bg-color: #c62828;
+}
+
+html {
+  font-family: "Charm", cursive;
+  font-size: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 2rem 12rem;
+
+  color: var(--text-color);
+  background-color: var(--bg-color);
+
+  position: relative;
+}
+
+a {
+  color: var(--link-color);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--link-color--hover);
+  }
+}
+
+.hidden {
+  position: absolute;
+  left: -5000px;
+}
+
+.header {
+  display: flex;
+  width: 100%;
+
+  h1 {
+    flex-grow: 1;
+    font-size: 3rem;
+  }
+
+  .yay-gif-video {
+    max-height: 12rem;
+    max-width: 20rem;
+  }
+}
+
+.cal {
+  padding-left: 0;
+
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: repeat(4, 6vw);
+  grid-gap: 2rem;
+
+  .calcard {
+    color: var(--calcard-color);
+    background-color: var(--calcard-bg-color);
+
+    cursor: pointer;
+
+    border-radius: 6px;
+    box-shadow: 2px 2px 8px 3px #000;
+
+    display: flex;
+    justify-content: center;
+
+    &__locked {
+      background-color: var(--calcard-bg-color__locked);
+      cursor: not-allowed;
+    }
+
+    & .cardnumber {
+      font-size: 6vw;
+    }
+  }
+}
+
+.door-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.door {
+  background-color: var(--door-bg-color);
+  color: var(--door-color);
+
+  padding: 2rem;
+
+  text-align: center;
+  font-size: 1.7rem;
+
+  border-radius: 6px;
+  box-shadow: 2px 2px 8px 3px #000;
+
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  min-width: 30rem;
+
+  .solve {
+    font-size: 2rem;
+    margin-top: 24px;
+  }
+
+  .hint {
+    margin-top: 12px;
+    padding: 12px;
+
+    text-align: left;
+
+    background-color: var(--door-hint-bg-color);
+    border-radius: 3px;
+    box-shadow: 2px 2px 8px 3px #000;
+  }
+
+  .door-close {
+    font-size: 1.5rem;
+    position: absolute;
+
+    top: 0.5rem;
+    right: 1rem;
+  }
+
+  .player-controls {
+    display: inline-flex;
+
+    a {
+      width: 2rem;
+      margin-left: 16px;
+      padding: 0 6px;
+      background-color: var(--player-controls-bg-color);
+      border-radius: 3px;
+      box-shadow: 2px 2px 3px 2px #000;
+    }
+  }
+}
+
+.ad-nav {
+  & nav {
+    text-align: center;
+  }
+
+  & ul {
+    display: flex;
+  }
+
+  & nav > ul {
+    padding: 4px 16px;
+  }
+
+  & li {
+    display: flex;
+    padding: 6px 8px;
+  }
+}