From 21d70b4a8a50725b7d9f3c1bdd2dceac3cdeb932 Mon Sep 17 00:00:00 2001 From: Tyler Perkins Date: Sat, 15 Jul 2023 20:59:44 -0400 Subject: [PATCH] Add post list --- data/header.json | 10 +- static/css/footer.css | 2 - static/css/header.css | 6 +- static/css/styles.css | 129 ++++++++++++++++++ themes/clortox/layouts/_default/list.html | 30 +++- themes/clortox/layouts/_default/single.html | 15 +- .../clortox/layouts/partials/.header.html.swp | Bin 12288 -> 0 bytes themes/clortox/layouts/partials/head.html | 1 + themes/clortox/static/js/scramble.js | 14 +- 9 files changed, 181 insertions(+), 26 deletions(-) delete mode 100644 themes/clortox/layouts/partials/.header.html.swp diff --git a/data/header.json b/data/header.json index 23ebcb3..16fa3e3 100644 --- a/data/header.json +++ b/data/header.json @@ -9,8 +9,12 @@ "url": "/resume/" }, { - "name": "Blog", - "url": "/blog/" + "name": "Posts", + "url": "/posts/" + }, + { + "name": "Utilities", + "url": "/utilities/" }, { "name": "About", @@ -19,7 +23,7 @@ ], "RightHandSide": [ { - "name": "Login", + "name": "User Portal", "url": "https://auth.clortox.com/" } ] diff --git a/static/css/footer.css b/static/css/footer.css index 6dfd815..dcd632c 100644 --- a/static/css/footer.css +++ b/static/css/footer.css @@ -41,9 +41,7 @@ footer { } .footer-list a:hover { - text-decoration: underline 0.1em rgba(255,255,255,1); background: rgba(33,33,36,1); - } .footer-header { diff --git a/static/css/header.css b/static/css/header.css index 4f00985..2850c86 100644 --- a/static/css/header.css +++ b/static/css/header.css @@ -8,6 +8,7 @@ border-bottom: 5px; overflow: hidden; + z-index: 1000; -ms-overflow-style: none; scrollbar-width: none; @@ -26,11 +27,6 @@ text-align: center; padding: 10px 10px; text-decoration: underline 0.1em rgba(255,255,255,0); - transition: text-decoration 300ms; -} - -.navbar a:hover { - text-decoration: underline 0.1em rgba(255,255,255,1); } .navbar-right { diff --git a/static/css/styles.css b/static/css/styles.css index 1adb084..81bba01 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -33,11 +33,16 @@ p, a, li, tr, td, span, noscript, figcaption { html { scroll-behavior: smooth; + overflow-x: hidden; width: 100vw; -ms-overflow-style: none; scrollbar-width: none; } +::-webkit-scrollbar { + display: none; +} + .centered { width: 100vw; max-width: 100%; @@ -58,6 +63,130 @@ html { border-bottom: 5px dashed white; } +.light-dashed-bottom { + border-bottom: 2px dashed #e6e6e6; +} + .intro-content { text-align: center; } + + +.page-header { + text-align: center; + padding: 50px; + background: linear-gradient(rgba(11,11,12,1) 0%, rgba(11,11,12,0.9) 40%, rgba(0,0,0,0) 100%) +} + +.post-list-title { + text-align: left; + font-size: 40px; + margin: 0px; +} + +.post-list-image-container { + position: relative; + width: 20%; + padding-bottom: 20%; + overflow: hidden; + float: right; + margin-left: auto; +} + +.post-list-body-container { + width: 80%; + float: left; + padding: 0px 20px; +} + +.full-width { + width: 100% !important; +} + + +.post-list-image { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: contain; +} + +article a { + text-decoration: none; + display: flex; + 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; +} + +.post { + margin: 10px; +} + +img { + max-width: 100%; + height: auto; +} + +figure { + border: 2px dashed #e6e6e6; + padding: 2vw; + margin: auto; + max-width: 70%; + margin-bottom: 20px; + background: rgba(22, 22, 22, 0.9); +} + +.figure-left { + float: left; + margin-right: 10px; + max-width: 55%; +} + +.figure-right { + float: right; + margin-left: 10px; + max-width: 55%; +} + +.clearfix::after { + content: ""; + clear: both; + display: table; +} + +@media only screen and (max-width: 768px) { + .post-list-image-container { + display: none; + } + + .post-list-title{ + text-align: center; + } + + .post-list-body-container { + width: 100%; + float: none; + padding: 0px; + } + + article a { + padding: 0px; + height: 100%; + flex-direction: column; + text-align: center; + } + + figure { + border: 2px dashed #e6e6e6; + padding: 2vw; + margin: auto; + max-width: 100%; + background: rgba(22, 22, 22, 0.9); + margin-bottom: 20px; + } +} diff --git a/themes/clortox/layouts/_default/list.html b/themes/clortox/layouts/_default/list.html index 45981cf..c47ee26 100644 --- a/themes/clortox/layouts/_default/list.html +++ b/themes/clortox/layouts/_default/list.html @@ -1,8 +1,26 @@ {{ define "main" }} -

{{ .Title }}

- {{ range .Pages }} -
-

{{ .Title }}

-
- {{ end }} +
+

Posts

+

Ideas, projects, and other musings.

+
+{{ range.Pages }} +
+ + {{ if .Params.banner }} +
+ {{ else }} +
+ {{ end }} +

{{ .Title }}

+ {{ .Date.Format "January 2, 2006" }} +

{{ .Summary }}

+
+ {{ if .Params.banner }} +
+ {{ .Title }} +
+ {{ end }} + +
+{{ end }} {{ end }} diff --git a/themes/clortox/layouts/_default/single.html b/themes/clortox/layouts/_default/single.html index 0fb79de..59af212 100644 --- a/themes/clortox/layouts/_default/single.html +++ b/themes/clortox/layouts/_default/single.html @@ -1,8 +1,11 @@ {{ define "main" }} -
-

{{ .Title }}

-
- {{ .Content }} -
-
+
+

{{ .Title }}

+ {{ .Date.Format "January 2, 2006" }} +
+
+
+ {{ .Content }} +
+
{{ end }} diff --git a/themes/clortox/layouts/partials/.header.html.swp b/themes/clortox/layouts/partials/.header.html.swp deleted file mode 100644 index cec9d51ae211e0f8247e02494e88d518b00c5488..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 12288 zcmeI&K}*9h6bJA(@hXabff!F-mZ>M9D|l1Ti#YFT8|^S%MjD5uonFM7pI{%v&*L{S zt=(l5rbp%fAcVa4+L9miP?~6PdvV21`vdZ^Lv;AQNRsN67WYK1(8|{NHK8W6Vogg^ zer|3kVv{HlYh#^x>c=J%E>)SzmnorTVIEyBrqa5x)VWBNOqA`XF4I4G40<2{flh%f zIypXSUiAaM&-Qjlon1&m00Izz00bZa0SG_<0{>IMO?&j>x3DM2AytTEmt|K4-0SG_<0uX=z z1Rwwb2tWV=5cst~(4K4$iTMa5ORc&a^0H)H$jG087o1hhDm}WsWb-)>&+23#WY+~N ft>-3FO=s|ZdY;8v=J}9M + diff --git a/themes/clortox/static/js/scramble.js b/themes/clortox/static/js/scramble.js index 5c80093..0bb1cce 100644 --- a/themes/clortox/static/js/scramble.js +++ b/themes/clortox/static/js/scramble.js @@ -6,12 +6,16 @@ window.onload = function() { }); } -function scramble(event) { +function scramble(event){ + scrambleLetters(event.target); +} + +function scrambleLetters(element) { let iterations = 0; - const originalValue = event.target.dataset.value; + const originalValue = element.dataset.value; let interval = setInterval(() => { - event.target.innerText = event.target.innerText.split("") + element.innerText = element.innerText.split("") .map((letter, index) => { if(index < iterations){ return originalValue[index]; @@ -23,7 +27,9 @@ function scramble(event) { if(iterations > originalValue.length){ clearInterval(interval); - event.target.innerText = originalValue; + element.innerText = originalValue; } }, 30); } + +