most of the new year event layout

Gemfile

@@ -3,3 +3,11 @@ source "https://rubygems.org"
 gem "jekyll", "~> 4.2.2"
 
 gem "webrick", "~> 1.8"
+
+gem "csv", "~> 3.3"
+
+gem "logger", "~> 1.7"
+
+gem "base64", "~> 0.3.0"
+
+gem "bigdecimal", "~> 3.3"

Gemfile.lock

@@ -3,12 +3,17 @@ GEM
   specs:
     addressable (2.8.7)
       public_suffix (>= 2.0.2, < 7.0)
+    base64 (0.3.0)
+    bigdecimal (3.3.1)
     colorator (1.1.0)
     concurrent-ruby (1.3.5)
+    csv (3.3.5)
     em-websocket (0.5.3)
       eventmachine (>= 0.12.9)
       http_parser.rb (~> 0)
+    eventmachine (1.2.7)
     eventmachine (1.2.7-x86-mingw32)
+    ffi (1.17.2-x64-mingw-ucrt)
     ffi (1.17.2-x86-mingw32)
     forwardable-extended (2.6.0)
     http_parser.rb (0.8.0)
@@ -41,6 +46,7 @@ GEM
     listen (3.9.0)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
+    logger (1.7.0)
     mercenary (0.4.0)
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
@@ -59,10 +65,15 @@ GEM
     webrick (1.9.1)
 
 PLATFORMS
+  x64-mingw-ucrt
   x86-mingw32
 
 DEPENDENCIES
+  base64 (~> 0.3.0)
+  bigdecimal (~> 3.3)
+  csv (~> 3.3)
   jekyll (~> 4.2.2)
+  logger (~> 1.7)
   webrick (~> 1.8)
 
 BUNDLED WITH

_events/new_year_2026.html

@@ -0,0 +1,132 @@
+---
+layout: base
+title: New Year, New You?
+subtitle: Burst From Your Cocoon!
+open: Jan 1st - Jan 22nd
+style: src/css/events/ny-26.css
+started: false
+permalink: /events/new_year_2026.html
+---
+
+<div id="page">
+    <header>
+        <hgroup>
+            <h1>{{ page.title }}</h1>
+            <p class="subtitle">{{ page.subtitle }}</p>
+            <p>{{ page.open }}</p>
+        </hgroup>
+    </header>
+
+    <main>
+        <hgroup>
+            <h2>Prompts</h2>
+            <p>You can do one or both of them!</p>
+        </hgroup>
+        <div class="grid">
+            <div>
+                <h3>Blog / Page</h3>
+                <p>
+                    Make a page or write a blog post that explores
+                    a reflection on past decisions (good or bad),
+                    or brainstorms / shares plans for the future.
+                </p>
+            </div>
+            <div>
+                <h3>Pixel Art</h3>
+                <p>
+                    Customize your own Butterfly or Moth!
+                </p>
+                <p>
+                    You can make them static or animated.
+                    Why not put a jar for it on your site too!
+                </p>
+                <p>
+                    Get the assets and code <a href="#tutorial">here</a>
+                </p>
+            </div>
+        </div>
+
+        <a class="note" href="#submit">Submit<br>Entry</a>
+        <details>
+            <summary>Credits</summary>
+            <ul>
+                <li>
+                    <a target="_blank" href="https://pixabay.com/photos/grass-wheat-field-grain-agriculture-7216163/">Background Image</a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://pixabay.com/photos/rope-cord-line-491195/">Rope Image</a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://pixabay.com/photos/hardwood-lumber-softwood-timber-1853416/">Wood Image</a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://pixabay.com/photos/tree-stump-tree-mushroom-forest-4834978/">Tree Stump Image</a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://pixabay.com/photos/shabby-paper-block-torn-leaf-3350615/">Paper Image</a>
+                </li>
+                <li>
+                    <a target="_blank" href="https://pixabay.com/photos/paper-memo-adhesive-tape-brown-3309927/">Taped Note Image</a>
+                </li>
+            </ul>
+        </details>
+    </main>
+</div>
+
+<aside id="stump">
+    <div id="jar">
+        <div class="insect moth">
+            <img class="body" src={{ "src/img/new_year_26/Moth_Body.png" | relative_url }} alt="Moth Body">
+            <div class="wings">
+                <div class="left">
+                    <img class="top wing" src={{ "src/img/new_year_26/Moth_Wing_Top_Left.png" | relative_url }} alt="Moth Wing">
+                    <img class="bottom wing" src={{ "src/img/new_year_26/Moth_Wing_Bottom_Left.png" | relative_url }} alt="Moth Wing">
+                </div>
+                <div class="right">
+                    <img class="top wing" src={{ "src/img/new_year_26/Moth_Wing_Top_Right.png" | relative_url }} alt="Moth Wing">
+                    <img class="bottom wing" src={{ "src/img/new_year_26/Moth_Wing_Bottom_Right.png" | relative_url }} alt="Moth Wing">
+                </div>
+            </div>
+        </div>
+
+        <div class="insect butterfly">
+            <img class="body" src={{ "src/img/new_year_26/Butterfly_Body.png" | relative_url }} alt="Butterfly">
+            <div class="wings">
+                <div class="left">
+                    <img class="top wing" src={{ "src/img/new_year_26/Butterfly_Wing_Top_Left.png" | relative_url }} alt="Butterfly Wing">
+                    <img class="bottom wing" src={{ "src/img/new_year_26/Butterfly_Wing_Bottom_Left.png" | relative_url }} alt="Butterfly Wing">
+                </div>
+                <div class="right">
+                    <img class="top wing" src={{ "src/img/new_year_26/Butterfly_Wing_Top_Right.png" | relative_url }} alt="Butterfly Wing">
+                    <img class="bottom wing" src={{ "src/img/new_year_26/Butterfly_Wing_Bottom_Right.png" | relative_url }} alt="Butterfly Wing">
+                </div>
+            </div>
+        </div>
+
+        <img class="insect moth" src={{ "src/img/new_year_26/Moth.png" | relative_url }} alt="Moth">
+        <img class="insect butterfly" src={{ "src/img/new_year_26/Butterfly.png" | relative_url }} alt="Butterfly">
+    </div>
+</aside>
+
+<aside id="submit">
+    <div class="paper">
+        <div class="inner">
+            <div class="form">
+                <!-- <iframe data-tally-src="https://tally.so/embed/A7zNWy?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1" loading="lazy" width="100%" height="100" frameborder="0" marginheight="0" marginwidth="0" title="New Year, New You?"></iframe>
+<script>var d=document,w="https://tally.so/widgets/embed.js",v=function(){"undefined"!=typeof Tally?Tally.loadEmbeds():d.querySelectorAll("iframe[data-tally-src]:not([src])").forEach((function(e){e.src=e.dataset.tallySrc}))};if("undefined"!=typeof Tally)v();else if(d.querySelector('script[src="'+w+'"]')==null){var s=d.createElement("script");s.src=w,s.onload=v,s.onerror=v,d.body.appendChild(s);}</script> -->
+            </div>
+            <a class="note" href="#">Close</a>
+        </div>
+    </div>
+</aside>
+
+<aside id="tutorial">
+    <div class="paper">
+        <div class="inner">
+            <div class="tutorial">
+
+            </div>
+            <a class="note" href="#">Close</a>
+        </div>
+    </div>
+</aside>

_events/new_year_2026.md

@@ -1,9 +0,0 @@
----
-layout: base
-title: New Year, New You?
-subtitle: Burst From Your Cocoon!
-style: ny-26
-started: false
----
-
-to be announced

_layouts/base.html

@@ -3,7 +3,11 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        {% if page.style %}
+        <link rel="stylesheet" href={{ page.style | relative_url }}>
+        {% else %}
         <link rel="stylesheet" href={{ "src/css/main.css" | relative_url }}>
+        {% endif %}
         <link rel="shortcut icon" href={{ "favicon.ico" | relative_url }}>
         <title>{{ page.title }}</title>
     </head>

_layouts/event.html

@@ -1,7 +1,7 @@
 ---
 layout: base
 ---
-<div>
+<div class="page">
     <header>
         <hgroup>
             <h1>{{ page.title }}</h1>

_pages/index.md

@@ -3,6 +3,7 @@ layout: default
 title: ~rodrick
 style: default
 extra: saved-theme="dark"
+permalink: /
 ---
 
 Hewwo! I'm [Rodrick](https://shroom.ink)!

src/css/events/ny-26.css

@@ -0,0 +1,281 @@
+@import url(https://fonts.bunny.net/css?family=indie-flower:400|pangolin:400);
+
+:root {
+    --font          : 'Pangolin', handwriting;
+    --font-heading  : 'Pangolin', handwriting;
+    --font-color    : #3C2B2A;
+    --font-size	    : calc(1rem + (1vw / 12));
+    --img-rope      : url("../../img/new_year_26/rope.webp");
+    --img-sign-b    : url("../../img/new_year_26/sign_bottom.webp");
+    --img-sign-t    : url("../../img/new_year_26/sign_top.webp");
+    --img-stump     : url("../../img/new_year_26/tree_stump.webp");
+    --img-forest    : url("../../img/new_year_26/forest.webp");
+    --img-jar       : url("../../img/new_year_26/jar.png");
+    --img-paper     : url("../../img/new_year_26/paper.webp");
+    --img-note      : url("../../img/new_year_26/note.webp");
+    --bg-gradient   : linear-gradient(180deg,rgba(53, 7, 99, .3) 28%, rgba(207, 106, 29, .3) 100%);
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading);
+    text-align: center;
+}
+
+a { color: rgba(53, 7, 99); }
+a:hover { color: rgba(207, 106, 29); }
+
+.note {
+    background-image: var(--img-note);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    color: white;
+
+    display: block;
+    width: 100%;
+    height: calc(100px - 1em);
+    text-align: center;
+    padding: 1em 0 0 0;
+    font-size: 1.3em;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.note:hover { color: #ffffff88; }
+
+html, body {
+    margin: 0;
+    font-size: var(--font-size);
+    font-family: var(--font);
+    color: var(--font-color);
+    text-shadow: 0 1px 0 #F9EDD4, 0 -1px 0 black;
+}
+
+html {
+    display: grid;
+    grid-auto-rows: 1fr;
+    height: 100%;
+}
+
+body {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: "main jar";
+
+    background-image: var(--bg-gradient), var(--img-forest);
+    background-position: center, bottom;
+    background-size: cover;
+}
+
+#page {
+    grid-area: main;
+    display: grid;
+    grid-template-rows: 28% 59% 13%;
+    width: 80%;
+    height: calc(100% - 2em);
+    max-height: 100%;
+    margin: auto;
+    padding-top: 2em;
+
+    background-image: var(--img-rope), var(--img-rope);
+    background-repeat: no-repeat;
+    background-size: auto 100%;
+    background-position: left, right;
+}
+
+header {
+    background-image: var(--img-sign-t);
+    background-repeat: no-repeat;
+    background-size: 100%;
+}
+
+hgroup {
+    margin: 5px;
+    text-align: center;
+}
+
+h1 {
+    margin: .3em 0 5px 0;
+}
+
+hgroup p {
+    font-size: 1.4em;
+    margin-top: 5px;
+}
+
+main {
+    background-image: var(--img-sign-b);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    padding: .5em;
+    height: 100%;
+    max-height: 500px;
+    overflow: auto;
+    scrollbar-color: white #B48976;
+    scrollbar-gutter: stable;
+}
+
+main hgroup h2,
+main hgroup p {
+    margin: 0;
+}
+
+.grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 1em;
+    padding: 0 .5em;
+}
+
+.grid h3 { margin-bottom: 0; }
+.grid p {
+    line-height: 1.6;
+    margin-top: 5px;
+}
+
+#stump {
+    grid-area: jar;
+    display: grid;
+    justify-items: center;
+    align-items: start;
+    background-image: var(--img-stump);
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: center bottom;
+}
+
+#jar {
+    border-image: var(--img-jar) 32
+  fill / 96px / 32px;
+    height: 60%;
+    width: 50%;
+    margin-top: 3em;
+    padding-top: 2em;
+    image-rendering: pixelated;
+
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    overflow: auto;
+    scrollbar-color: white #B48976;
+}
+
+#submit,
+#tutorial {
+    display: none;
+    position:absolute;
+    z-index: 12;
+    width: 100%;
+    height: 100%;
+    background: var(--bg-gradient);
+    justify-items: center;
+    align-items: center;
+}
+
+#submit:target,
+#tutorial:target {
+    display: grid;
+}
+
+.paper {
+    display: block;
+    aspect-ratio: 4 / 3;
+    min-width: 50%;
+    margin: auto;
+
+    background-image: var(--img-paper);
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+}
+
+.paper .inner {
+    display: block;
+    padding: 18% 15% 15% 18%;
+    height: calc(100% - (3em + 2em));
+}
+
+.paper .inner {
+    display: grid;
+    grid-template-rows: 90% 10%;
+}
+
+.paper .form {
+    height: 100%;
+    overflow: auto;
+    scrollbar-color: white #B48976;
+}
+
+/* Butterflies and Moths */
+
+.insect {
+    image-rendering: pixelated;
+    overflow: hidden;
+    width: 100%;
+}
+
+.insect img { margin: 0; }
+
+.moth { aspect-ratio: 74 / 36 !important; }
+.moth .wing { aspect-ratio: 37 / 36 !important; }
+.butterfly { aspect-ratio: 76 / 47 !important; }
+.butterfly .wing { aspect-ratio: 38 / 47 !important; }
+
+
+.insect .body {
+    z-index: 6;
+    width: 100%;
+}
+
+.insect .wings {
+    position: relative;
+    top: -106%;
+
+    display: grid;
+    width: 100%;
+    height: 100%;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr;
+}
+
+.insect .left,
+.insect .right {
+    display: grid;
+    width: 100%;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+}
+
+.insect .wing {
+    width: 100%;
+}
+.insect .top {
+    z-index: 8;
+    position: relative;
+}
+.insect .bottom {
+    z-index: 7;
+    position: relative;
+    top: calc(100% * -1);
+}
+
+.insect .left .wing { transform-origin: right center;}
+.insect .right .wing { transform-origin: left center; }
+.insect .top {
+    animation: flutter 300ms infinite;
+}
+.insect .bottom {
+    animation: flutter_offset 300ms infinite;
+}
+
+@keyframes flutter {
+  0% { transform: rotateY(0); }
+  45% { transform: rotateY(70deg); }
+  95%, 100% { transform: rotateY(0); }
+}
+
+@keyframes flutter_offset {
+  0%, 5% { transform: rotateY(0); }
+  50% { transform: rotateY(70deg); }
+  100% { transform: rotateY(0); }
+}