Creating Val event

_events/valentines_2026.html

@@ -0,0 +1,73 @@
+---
+layout: base
+title: Valentine's 2026
+subtitle: Spread love. Love All.
+open: Feb 1st - Feb 12th
+style: src/css/events/val_26.css
+started: false
+permalink: /events/valentines_2026.html
+---
+
+<div id="page">
+    <header class="bordered-1">
+        <hgroup class="bordered-2">
+            <h1>{{ page.title }}</h1>
+            <p class="subtitle">{{ page.subtitle }}</p>
+            <p>{{ page.open }}</p>
+        </hgroup>
+    </header>
+
+    <div class="twogrid">
+        <main class="bordered-1">
+            <section class="bordered-2">
+                <h2>Prompts:</h2>
+                <ol>
+                    <li>Make a postcard.</li>
+                    <li>Make a pixel stamp.</li>
+                    <li>
+                        Write a love letter to a piece of media or inanimate object
+                        that you adore, via blog post or web page.
+                    </li>
+                </ol>
+            </section>
+            <section class="bordered-2" style="margin-top: .5em;">
+                <h2>Submit Entry</h2>
+                <details class="bordered-2">
+                    <summary>Submission Form</summary>
+                    Hiya, this isn't open yet!
+                </details>
+            </section>
+        </main>
+
+        <aside class="examples">
+            <article tabindex="0" class="val-postcard">
+                <div class="front">
+                    (Insert Postcard Cover)
+                </div>
+                <div class="back">
+                    <div class="message">
+                        (Insert Message)
+                    </div>
+                    <div class="stamp">
+                        <img src={{ "src/img/val_26/blank_stamp_pink.png" | relative_url }} alt="Blank stamp">
+                    </div>
+                    <div class="address">
+                        <p>
+                            <strong>To:</strong>
+                            (Insert name)
+                        </p>
+                        <p>
+                            <strong>From:</strong>
+                            (Insert name)
+                        </p>
+                    </div>
+                </div>
+            </article>
+
+            <div class="stamps">
+                <img src={{ "src/img/val_26/blank_stamp.png" | relative_url }} alt="Blank stamp">
+                <img src={{ "src/img/val_26/blank_stamp_pink.png" | relative_url }} alt="Blank stamp (pink version)">
+            </div>
+        </aside>
+    </div>
+</div>

_pages/index.md

@@ -9,6 +9,7 @@ Hewwo! I'm [Rodrick](https://shroom.ink)!
 I'm an artist, game dev, and web dev.
 
 I'm *also* a 32-Bit Cafe [event planner](https://32bit.cafe/community/).
+You can find me in the Discord and on the [forum](https://discourse.32bit.cafe/u/rodfire8181/summary).
 
 Events:
 {% assign not_ready = 0 %}

src/css/events/val_26.css

@@ -0,0 +1,175 @@
+@import url(https://fonts.bunny.net/css?family=delius:400|delius-swash-caps:400);
+
+:root {
+    --font-size	    : calc(1rem + (5vw / 12));
+    --font-main     : 'Delius', sans-serif;
+    --font-heading  : 'Delius Swash Caps', handwriting;
+
+    --border-1      : url("../../img/val_26/border.png");
+    --border-2      : url("../../img/val_26/border2.png");
+    --bg-1          : url("../../img/val_26/gray-floral.png");
+    --bg-2          : url("../../img/val_26/mocha-grunge.png");
+}
+
+html, body {
+    background-color: black;
+    background-image: var(--bg-1), var(--bg-2);
+    background-attachment: fixed;
+    font-size: var(--font-size);
+    font-family: var(--font-main);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+}
+
+h1, h2 { margin: 0; }
+
+hgroup p { margin: 0 0 .5em 0; }
+
+.bordered-1 {
+    border-image: var(--border-1)  28 fill /  28px / 0 round;
+    border-width:  28px;
+    border-style:  solid;
+    margin: 5px 0;
+}
+
+.bordered-2 {
+    border-image: var(--border-2)  28 fill /  28px / 0 round;
+    border-width:  28px;
+    border-style:  solid;
+}
+
+header {
+    text-align: center;
+}
+
+.twogrid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    grid-gap: 5px;
+}
+
+@media only screen and (max-width: 800px) {
+    .twogrid {
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr 1fr;
+    }
+}
+
+summary { cursor: pointer; }
+
+
+/* Postcards */
+.examples {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.stamps {
+    display: flex;
+}
+.stamps img {
+    image-rendering: pixelated;
+    display: block;
+    margin: auto;
+    min-width: 25%;
+    max-width: 250px;
+}
+
+
+article.val-postcard {
+    display: block;
+    margin: auto;
+    aspect-ratio: 6 / 4 !important;
+    width: 400px;
+    box-sizing: border-box;
+    transform: rotateY(0deg);
+    font-size: 20px;
+}
+
+article.val-postcard:hover > .back,
+article.val-postcard:focus > .back {
+    transform: rotateY(0deg);
+}
+article.val-postcard:hover > .front,
+article.val-postcard:focus > .front {
+    transform: rotateY(180deg);
+}
+
+article.val-postcard > * {
+    z-index: 1;
+	margin: 0;
+    perspective: 600px;
+    transition: transform 0.5s;
+    transform-style: preserve-3d;
+    backface-visibility: hidden;
+}
+
+article.duplex::before,
+article.duplex::after {
+	display: block;
+	z-index: -1;
+}
+
+article.val-postcard .front {
+    position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+
+    background: pink;
+}
+
+article.val-postcard .back {
+    position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	box-sizing: border-box;
+    transform: rotateY(180deg);
+
+    display: grid;
+    grid-template-columns: 55% 20% 25%;
+    grid-template-rows: 25% 1fr;
+    grid-template-areas: "msg x stamp"
+                         "msg adr adr";
+
+    background: ivory;
+}
+
+/* article.val-postcard .message { grid-area: msg; } */
+article.val-postcard .message,
+article.val-postcard .address,
+article.val-postcard .stamp {
+    width: 100%;
+    height: 100%;
+}
+
+article.val-postcard .message {
+    grid-area: msg;
+    border-right: solid #00000044 2px;
+}
+
+article.val-postcard .stamp {
+    grid-area: stamp;
+    display: flex;
+    justify-content: end;
+}
+
+article.val-postcard .stamp img {
+    display: block;
+    image-rendering: pixelated;
+    height: 100%;
+    margin: 5px 5px;
+}
+
+article.val-postcard .address {
+    grid-area: adr;
+    padding-left: 5px;
+}