285 lines
11 KiB
HTML
285 lines
11 KiB
HTML
---
|
|
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: true
|
|
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">
|
|
<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>
|
|
<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">
|
|
<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>
|
|
|
|
<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;
|
|
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>
|
|
<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 {
|
|
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>
|
|
</div>
|
|
</aside>
|