diff --git a/blog/let-it-snow-2018-12-17.markdown b/blog/let-it-snow-2018-12-17.markdown new file mode 100644 index 0000000..3c008bb --- /dev/null +++ b/blog/let-it-snow-2018-12-17.markdown @@ -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. diff --git a/css/snow.css b/css/snow.css new file mode 100644 index 0000000..6a7fa23 --- /dev/null +++ b/css/snow.css @@ -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} +} diff --git a/static/img/snow/snow1.png b/static/img/snow/snow1.png new file mode 100644 index 0000000..10291d9 Binary files /dev/null and b/static/img/snow/snow1.png differ diff --git a/static/img/snow/snow2.png b/static/img/snow/snow2.png new file mode 100644 index 0000000..e5a3aee Binary files /dev/null and b/static/img/snow/snow2.png differ diff --git a/templates/base.html b/templates/base.html index c42feed..27264cb 100644 --- a/templates/base.html +++ b/templates/base.html @@ -6,6 +6,7 @@ + @@ -53,16 +54,21 @@ {{ template "styles" . }} - + {{ template "scripts" . }}

Christine Dodrill - Blog - Contact - Resume

- {{ template "content" . }} + +
+ {{ template "content" . }} +
+ +