Working more on event

_events/new_year_2026.html

@@ -124,7 +124,113 @@ permalink: /events/new_year_2026.html
     <div class="paper">
         <div class="inner">
             <div class="tutorial">
+                <h3>Pixel Art Instructions</h3>
+                <h4>Static</h4>
+                <p>
+                    If you want to make a static little bug, just right click
+                    and save one or both of these templates.
+                </p>
+                <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>
+<textarea name="name" rows="8" cols="80">
+<div class="insect [moth OR butterfly]">
+    <img class="body" src="INSECT BODY">
+    <div class="wings">
+        <div class="left">
+            <img class="top wing" src="TOP LEFT WING">
+            <img class="bottom wing" src="BOTTOM LEFT WING">
+        </div>
+        <div class="right">
+            <img class="top wing" src="TOP RIGHT WING">
+            <img class="bottom wing" src="BOTTOM RIGHT WING">
+        </div>
+    </div>
+</div>
+</textarea>
 
+<textarea name="name" rows="8" cols="80">
+.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); }
+}
+</textarea>
+                <h4>Jar</h4>
+                <img src={{ "src/img/new_year_26/jar.png" | relative_url }} alt="Jar Border Image">
+<textarea name="jar" rows="8" cols="80">
+#jar {
+    border-image: url("YOUR IMAGE HERE") 32 fill / 96px / 32px;
+    padding-top: 2em;
+    image-rendering: pixelated;
+}
+</textarea>
             </div>
             <a class="note" href="#">Close</a>
         </div>

src/css/events/ny-26.css

@@ -6,13 +6,13 @@
     --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-sign       : #EACDBD;
+    --bg-sign-2     : #E7B99F;
     --bg-gradient   : linear-gradient(180deg,rgba(53, 7, 99, .3) 28%, rgba(207, 106, 29, .3) 100%);
 }
 
@@ -65,13 +65,27 @@ body {
 
     background-image: var(--bg-gradient), var(--img-forest);
     background-position: center, bottom;
+    background-attachment: fixed;
     background-size: cover;
 }
+@media only screen and (max-width: 1000px) {
+    body {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto 1fr;
+        grid-template-areas: "main" "jar";
+    }
+
+    #stump {
+        height: 800px;
+        grid-template-rows: 1fr calc(25vw);
+    }
+}
 
 #page {
     grid-area: main;
     display: grid;
-    grid-template-rows: 28% 59% 13%;
+    grid-template-rows: 28% 4% 59% 9%;
+    grid-template-areas: "header" "x" "main" "y";
     width: 80%;
     height: calc(100% - 2em);
     max-height: 100%;
@@ -84,10 +98,15 @@ body {
     background-position: left, right;
 }
 
+header,
+main {
+    background: var(--bg-sign);
+    outline: 5px outset var(--bg-sign-2);
+    border-radius: 5px;
+}
+
 header {
-    background-image: var(--img-sign-t);
-    background-repeat: no-repeat;
-    background-size: 100%;
+    grid-area: header;
 }
 
 hgroup {
@@ -105,9 +124,7 @@ hgroup p {
 }
 
 main {
-    background-image: var(--img-sign-b);
-    background-repeat: no-repeat;
-    background-size: 100%;
+    grid-area: main;
     padding: .5em;
     height: 100%;
     max-height: 500px;
@@ -137,8 +154,9 @@ main hgroup p {
 #stump {
     grid-area: jar;
     display: grid;
+    grid-template-rows: 1fr calc(13vw);
     justify-items: center;
-    align-items: start;
+    align-items: end;
     background-image: var(--img-stump);
     background-repeat: no-repeat;
     background-size: 100%;
@@ -146,11 +164,9 @@ main hgroup p {
 }
 
 #jar {
-    border-image: var(--img-jar) 32
-  fill / 96px / 32px;
-    height: 60%;
+    border-image: var(--img-jar) 32 fill / 96px / 32px;
+    height: calc(90% - 2em);
     width: 50%;
-    margin-top: 3em;
     padding-top: 2em;
     image-rendering: pixelated;
 
@@ -189,15 +205,11 @@ main hgroup p {
     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%;
+    padding: 18% 15% 15% 18%;
+    height: calc(100% - (3em + 2em));
 }
 
 .paper .form {
@@ -206,6 +218,16 @@ main hgroup p {
     scrollbar-color: white #B48976;
 }
 
+.paper .tutorial {
+    overflow: auto;
+}
+
+textarea {
+    display: block;
+    width: 90%;
+    margin: .5em auto;
+}
+
 /* Butterflies and Moths */
 
 .insect {