Event started

_events/new_year_2026.html

@@ -4,7 +4,7 @@ title: New Year, New You?
 subtitle: Burst From Your Cocoon!
 open: Jan 1st - Jan 22nd
 style: src/css/events/ny-26.css
-started: false
+started: true
 permalink: /events/new_year_2026.html
 ---
 
@@ -112,8 +112,8 @@ permalink: /events/new_year_2026.html
     <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>
+                <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> -->
+<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>
@@ -133,6 +133,36 @@ permalink: /events/new_year_2026.html
                 <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">
                 <h4>Animated</h4>
+                <p>
+                    If you want an animated bug, you gotta download multiple images.
+                    They're each named after the part they represent.
+                </p>
+
+                <div>
+                    <div>
+                        <p>Moth's parts.</p>
+                        <img src={{ "src/img/new_year_26/Moth_Body.png" | relative_url }}>
+                        <img src={{ "src/img/new_year_26/Moth_Wing_Top_Left.png" | relative_url }}>
+                        <img src={{ "src/img/new_year_26/Moth_Wing_Bottom_Left.png" | relative_url }}>
+                        <img src={{ "src/img/new_year_26/Moth_Wing_Top_Right.png" | relative_url }}>
+                        <img src={{ "src/img/new_year_26/Moth_Wing_Bottom_Right.png" | relative_url }}>
+                    </div>
+                    <div>
+                        <p>Butterfly's parts.</p>
+                        <img src={{ "src/img/new_year_26/Butterfly_Body.png" | relative_url }}>
+                        <img src={{ "src/img/new_year_26/Butterfly_Wing_Top_Left.png" | relative_url }}>
+                        <img src={{ "src/img/new_year_26/Butterfly_Wing_Bottom_Left.png" | relative_url }}>
+                        <img src={{ "src/img/new_year_26/Butterfly_Wing_Top_Right.png" | relative_url }}>
+                        <img src={{ "src/img/new_year_26/Butterfly_Wing_Bottom_Right.png" | relative_url }}>
+                    </div>
+                </div>
+                <p>
+                    After you got your bug parts downloaded, you gotta add the following code to your site
+                    and properly link the sources of your bug parts. For the outer div,
+                    make sure to only use the "moth" class or the "butterfly" class. It's because
+                    they're different sizes.
+                </p>
+
 <textarea name="name" rows="8" cols="80">
 <div class="insect [moth OR butterfly]">
     <img class="body" src="INSECT BODY">
@@ -149,6 +179,10 @@ permalink: /events/new_year_2026.html
 </div>
 </textarea>
 
+                <p>
+                    And lastly, you have to add this CSS to the page holding your bugs.
+                </p>
+
 <textarea name="name" rows="8" cols="80">
 .insect {
     image-rendering: pixelated;
@@ -223,6 +257,18 @@ permalink: /events/new_year_2026.html
 }
 </textarea>
                 <h4>Jar</h4>
+                <p>
+                    Finally, we have the jar. If you want a jar like the one on this page, download
+                    the jar image and add the CSS to your site.
+                </p>
+                <p>
+                    Create a div, or other element, to be your jar. Don't forget the ID. The jar works as a
+                    <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-image">border-image</a>.
+                    It'll resize with your div.
+                </p>
+                <p>
+                    Feel free to edit the jar image and CSS to fit your style.
+                </p>
                 <img src={{ "src/img/new_year_26/jar.png" | relative_url }} alt="Jar Border Image">
 <textarea name="jar" rows="8" cols="80">
 #jar {

_pages/404.md

@@ -0,0 +1,8 @@
+---
+layout: default
+title: 404
+extra: saved-theme="dark"
+permalink: /404.html
+---
+
+YOU'RE LOST!

_pages/index.md

@@ -14,7 +14,7 @@ Events:
 {% assign not_ready = 0 %}
 {% for event in site.events %}
 {% if event.started %}
-- [{{ event.title }}]({{ event.url }})
+- [{{ event.title }}]({{ event.url | relative_url }})
 {% else %}
 {% assign not_ready = not_ready | plus: 1 %}
 {% endif %}    
@@ -22,3 +22,5 @@ Events:
 {% unless not_ready == 0 %}
 - {{ not_ready }} being planned.    
 {% endunless %}
+
+<iframe src="https://shroom.ink/guard.html/?site=&shroom=18" height="250px" width="200px" scrolling="no" frameborder="0"></iframe>

src/css/events/ny-26.css

@@ -21,7 +21,7 @@ h1, h2, h3, h4, h5, h6 {
     text-align: center;
 }
 
-a { color: rgba(53, 7, 99); }
+a { color: rgb(54, 88, 142); }
 a:hover { color: rgba(207, 106, 29); }
 
 .note {
@@ -197,6 +197,7 @@ main hgroup p {
     display: block;
     aspect-ratio: 4 / 3;
     min-width: 50%;
+    max-width: 500px;
     margin: auto;
 
     background-image: var(--img-paper);
@@ -220,6 +221,7 @@ main hgroup p {
 
 .paper .tutorial {
     overflow: auto;
+    scrollbar-color: white #B48976;
 }
 
 textarea {