creating holiday post

This commit is contained in:
yequari 2024-01-03 11:32:45 -07:00
parent ab60651148
commit ccae7a4566
7 changed files with 166 additions and 1 deletions

View File

@ -42,4 +42,3 @@ menu:
class: email class: email
url: mailto:yequari@32bit.cafe url: mailto:yequari@32bit.cafe
weight: 30 weight: 30

View File

@ -0,0 +1,24 @@
---
title: "Reflecting on 2023"
date: 2023-12-19T22:15:29-07:00
draft: true
layout: winter
context: "This page is an entry into the 32-Bit Cafe's [2023 holiday event](https://32bit.cafe/holidays2023/)."
---
## Things that happened
- Returned to the gym
- Did some stuff at the 32-bit cafe
- Changed jobs
- Programming projects
## Goals for 2024
- Fitness and diet goals
- Code more
- Contribute to open source

View File

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title>{{ .Page.Title }}</title>
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=b612-mono:400|asar:400|bungee:400|nova-mono:400|krub:400|lalezar:400" rel="stylesheet" />
<link rel="stylesheet" href="/css/winter.css">
<link rel="icon" type="image/png" href="/favicon.png">
<script src="/js/quotes.js"></script>
<link rel="webmention" href="https://webmention.io/yequari.com/webmention" />
<link rel="pingback" href="https://webmention.io/yequari.com/xmlrpc" />
<script src="/js/webmention.js" async></script>
{{ range .AlternativeOutputFormats -}}
{{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
{{ end -}}
</head>
<body>
<div class="big">
<div class="column">
<main>
{{- block "main" . }}{{- end }}
</main>
</div>
</div>
</body>
</html>

20
layouts/blog/winter.html Normal file
View File

@ -0,0 +1,20 @@
{{ define "main" }}
<div id="winter"></div>
<article class="h-entry content">
<h1 class="p-name">{{ .Title }}</h1>
<p><a href="/">&lt;-- Return to yequari.com</a></p>
<a class="p-author h-card hidden" href="https://yequari.com">yequari</a>
<time class="dt-published" datetime={{.PublishDate }}>{{ .PublishDate.Format "Mon, Jan 02, 2006" }}</time>
<a class="u-url permalink" href={{ .RelPermalink }}>Permalink</a>
{{ partial "tags.html" .}}
{{ if .Params.context }}
<p class="context">{{ .Params.context | markdownify }}</p>
{{ end }}
<div class="e-content">
{{ .Content }}
</div>
{{ partial "webmentions.html" }}
<div id="webmentions"></div>
</article>
<script src="/js/winter.js"></script>
{{ end }}

57
static/css/winter.css Normal file
View File

@ -0,0 +1,57 @@
@keyframes fall {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
top: 100vh;
opacity: 1;
}
}
@keyframes sway {
0% {
margin-left: 0;
}
25% {
margin-left: 50px;
}
50% {
margin-left: -50px;
}
75% {
margin-left: 50px;
}
100% {
margin-left: 0;
}
}
#winter {
z-index: -1;
height: 100vh;
overflow: hidden;
position: absolute;
top: 0;
transition: opacity 500ms;
width: 100%;
}
.snow {
animation: fall ease-in infinite, sway ease-in-out infinite;
color: skyblue;
position: absolute;
}
.content {
max-width: fit-content;
margin: 0 auto;
}
.context {
font-style: italic;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.1 KiB

37
static/js/winter.js Normal file
View File

@ -0,0 +1,37 @@
console.log("winter");
const snowContent = ['&#10052', '&#10053', '&#10054']
const snowflake = '&#x25CF; '
const snowContainer = document.getElementById('winter');
const random = (num) => {
return Math.floor(Math.random() * num);
}
const getRandomStyles = () => {
const top = random(100);
const left = random(100);
const dur = random(10) + 10;
const size = random(15) + 15;
return `
top: -${top}%;
left: ${left}%;
font-size: ${size}px;
animation-duration: ${dur}s;
`;
}
const createSnow = (num) => {
for (var i = num; i > 0; i--) {
var snow = document.createElement("div");
snow.className = "snow";
snow.style.cssText = getRandomStyles();
snow.innerHTML = snowContent[random(2)];
// snow.innerHTML = snowflake;
snowContainer.append(snow);
}
}
window.addEventListener("load", () => {
createSnow(30)
});