Add CSS styling, bird anim, background

2026-04-19 20:40:50 +02:00
parent 239b1c034f
commit 485d2b2c76
6 changed files with 201 additions and 1 deletions
@@ -0,0 +1,100 @@
+body {
+    background-color: #faf4e8;
+    background-image: url(cream-paper.png);
+    color: #3d2f1f;
+
+    font-family: "Lusitana", serif;
+
+    min-height: 100vh;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    padding: 2rem 20rem 2rem 20rem;
+    box-sizing: border-box;
+}
+
+@media(max-width: 1024px) {
+    body {
+        padding: 2rem;
+    }
+}
+
+h1 {
+    font-size: 3rem;
+}
+
+h1 img {
+    height: 1em;
+}
+
+h2 {
+    margin-bottom: 0.5rem;
+}
+
+ul {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+p {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+footer {
+    position: fixed;
+    bottom: 1rem;
+    left: 1rem;
+    font-size: 0.8rem;
+    opacity: 0.4;
+}
+
+/* Corner Ribbon */
+
+.ribbon {
+    background-color: #3d2f1f;
+    color: #faf4e8;
+    position: fixed;
+    text-align: center;
+    padding: 0.25rem;
+
+    transform: rotate(-45deg);
+    top: 2rem;
+    left: -3rem;
+    width: 12rem;
+}
+
+/* Birdy */
+
+.bird-wrap {
+    position: relative;
+}
+
+.bar {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 10px;
+    animation: pop 0.8s ease-out var(--delay);
+    pointer-events: none;
+}
+
+#barTemplate {
+    display: none;
+}
+
+@keyframes pop {
+    0% {opacity: 0; transform: rotate(var(--angle)) translateY(var(--distance))}
+    50% {opacity: 1; }
+    100% {opacity: 0; transform: rotate(var(--angle)) translateY(calc(var(--distance) - 40px));}
+}
+
+#birdButton {
+    font-size: inherit;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+}