cadey/xesite
cadey
/
xesite
1
0
Fork 1
Code Issues Pull Requests 1 Projects Releases Wiki Activity

snow :D

This commit is contained in:
Cadey Ratio 2018-12-17 23:59:15 -08:00
parent a1d8b435f5
commit 267e02c337
5 changed files with 35 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
blog/let-it-snow-2018-12-17.markdown Normal file
View File

@ -0,0 +1,11 @@
---
title: Let it Snow
date: 2018-12-17
for: the lols
---
# Let it Snow
I have very terribly added snow to this website for the holidays. See [the CSS](/css/snow.css) for how I did this, it's really low-tech. Feel free to steal this trick, it is low-effort for maximum niceness. I have the `background-color` of the `snowframe` class identical to the `background-color` of the main page. This and `opacity: 1.0` seems to be the ticket.
Happy holidays, all.

16
css/snow.css Normal file
View File

@ -0,0 +1,16 @@
.snow {
background-image:
url(/static/img/snow/snow1.png),
url(/static/img/snow/snow2.png);
animation: snow 30s linear infinite;
}
.snowframe {
opacity: 1.0;
background-color: #282828;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px}
}

BIN
static/img/snow/snow1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
static/img/snow/snow2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.3 KiB

10
templates/base.html
View File

@ -6,6 +6,7 @@
<meta name="go-import" content="christine.website git https://github.com/Xe/site">
<link rel="stylesheet" href="/css/hack.css" />
<link rel="stylesheet" href="/css/gruvbox-dark.css" />
<link rel="stylesheet" href="/css/snow.css" />
<link rel="manifest" href="/static/manifest.json" />
<link rel="alternate" type="application/rss+xml" href="https://christine.website/blog.rss" />
@ -53,16 +54,21 @@
</style>
{{ template "styles" . }}
</head>
<body class="hack gruvbox-dark">
<body class="snow hack gruvbox-dark">
{{ template "scripts" . }}
<div class="container">
<header>
<p><a href="/">Christine Dodrill</a> - <a href="/blog">Blog</a> - <a href="/contact">Contact</a> - <a href="/resume">Resume</a></p>
</header>
{{ template "content" . }}
<div class="snowframe">
{{ template "content" . }}
</div>
<footer>
<blockquote>Copyright 2018 Christine Dodrill. Any and all opinions listed here are my own and not representative of my employer.</blockquote>
</footer>
<script>
if (navigator.serviceWorker.controller) {
console.log("Active service worker found, no need to register");