From b2f80c3a92983071fda4c1524c896ea1a81e1f76 Mon Sep 17 00:00:00 2001 From: Tyler Perkins Date: Mon, 17 Jul 2023 23:17:11 -0400 Subject: [PATCH] Add parallax effect to background --- content/_index.md | 4 +- content/posts/test-1.md | 59 +++++++++++++++++++ content/posts/test-2.md | 54 +++++++++++++++++ data/header.json | 4 -- static/css/background.css | 21 +++---- static/css/footer.css | 12 ++-- static/css/styles.css | 19 +++--- themes/clortox/layouts/_default/baseof.html | 1 + themes/clortox/layouts/_default/list.html | 2 +- themes/clortox/layouts/partials/footer.html | 2 +- themes/clortox/layouts/partials/head.html | 2 +- .../static/js/{scramble.js => script.js} | 7 +++ 12 files changed, 155 insertions(+), 32 deletions(-) create mode 100644 content/posts/test-1.md create mode 100644 content/posts/test-2.md rename themes/clortox/static/js/{scramble.js => script.js} (78%) diff --git a/content/_index.md b/content/_index.md index d64f094..e2cc5b6 100644 --- a/content/_index.md +++ b/content/_index.md @@ -4,6 +4,6 @@ date: 2023-06-27 --- -# Hi, I'm Tyler +# Hi, I'm Tyler -I'm a software engineer that does a little bit of everything +Software engineer, aspiring postmath diff --git a/content/posts/test-1.md b/content/posts/test-1.md new file mode 100644 index 0000000..d1ed759 --- /dev/null +++ b/content/posts/test-1.md @@ -0,0 +1,59 @@ +--- +title: "My first post" +date: 2023-07-15 +banner: "https://s3.clortox.com/static-assets/boat.jpg" +--- + +This is my first test post This is my other test post. + +{{< figure src="https://s3.clortox.com/static-assets/boat.jpg" alt="Boat" +caption="My caption" class="figure-left">}} + +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post diff --git a/content/posts/test-2.md b/content/posts/test-2.md new file mode 100644 index 0000000..5e77d2c --- /dev/null +++ b/content/posts/test-2.md @@ -0,0 +1,54 @@ +--- +title: 'My other post' +date: 2023-07-15 +--- + +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post +This is my other test post diff --git a/data/header.json b/data/header.json index 16fa3e3..c4db523 100644 --- a/data/header.json +++ b/data/header.json @@ -15,10 +15,6 @@ { "name": "Utilities", "url": "/utilities/" - }, - { - "name": "About", - "url": "/about/" } ], "RightHandSide": [ diff --git a/static/css/background.css b/static/css/background.css index 123c22a..9c4a0b3 100644 --- a/static/css/background.css +++ b/static/css/background.css @@ -1,16 +1,13 @@ -@keyframes animatedBackground { - from { background-position: 0 0; } - to { background-position: 0 100%; } -} -@keyframes rotateBackground { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -body { +.background { background-image: url("/img/webb-dark.png"); + position: absolute; + width: 100%; + height: 100%; + z-index: -1; background-position: center; - background-repeat: cover; - background-attachment: fixed; + background-repeat: repeat; + background-attachment: auto; } + + diff --git a/static/css/footer.css b/static/css/footer.css index dcd632c..3afd724 100644 --- a/static/css/footer.css +++ b/static/css/footer.css @@ -6,10 +6,7 @@ footer { padding: 15px; text-align: center; padding-top: 3vh; -} - -.footer-fade { - background: linear-gradient(rgba(11,11,12,0.2) 0%, rgba(11,11,12,1) 35%); + z-index: 100; } .footer-sections { @@ -46,6 +43,7 @@ footer { .footer-header { margin-top: 5px; + max-width: 100%; } @@ -53,3 +51,9 @@ small { font-size: 0.8em; color: rgba(255,255,255,0.5); } + +@media only screen and (max-width: 768px) { + .footer-sections { + grid-template-columns: 1fr; + } +} diff --git a/static/css/styles.css b/static/css/styles.css index 81bba01..aa5f8f5 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -14,6 +14,7 @@ body { margin: 0; height: 100%; padding-bottom: 0px; + background-color: rgba(11,11,12,1); } h1, h2, h3, h4 { @@ -48,11 +49,6 @@ html { max-width: 100%; height: 100vh; - display: grid; - align-content: center; - justify-content: center; - justify-items: center; - align-items: center; } .top-fade { @@ -69,8 +65,12 @@ html { .intro-content { text-align: center; -} + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} .page-header { text-align: center; @@ -119,8 +119,13 @@ article a { padding: 50px; height: 30vh; padding-bottom: 25px; - background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(0,0,0,0) 100%); overflow: hidden; + background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(0,0,0,0) 100%); +} + +article a:hover { + background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 50%, rgba(32,42,68,0.5) 100%); + transition: 300ms linear; } .post { diff --git a/themes/clortox/layouts/_default/baseof.html b/themes/clortox/layouts/_default/baseof.html index 5f8e2ec..c0968d6 100644 --- a/themes/clortox/layouts/_default/baseof.html +++ b/themes/clortox/layouts/_default/baseof.html @@ -2,6 +2,7 @@ {{- partial "head.html" . -}} +
{{- partial "header.html" . -}}
{{- block "main" . }}{{- end }} diff --git a/themes/clortox/layouts/_default/list.html b/themes/clortox/layouts/_default/list.html index c47ee26..9caaf01 100644 --- a/themes/clortox/layouts/_default/list.html +++ b/themes/clortox/layouts/_default/list.html @@ -5,7 +5,7 @@
{{ range.Pages }}
- + {{ if .Params.banner }}
{{ else }} diff --git a/themes/clortox/layouts/partials/footer.html b/themes/clortox/layouts/partials/footer.html index 4043742..23b449e 100644 --- a/themes/clortox/layouts/partials/footer.html +++ b/themes/clortox/layouts/partials/footer.html @@ -1,4 +1,4 @@ -