From 2a8c3194d19d8bd183e6ad16ea22742be4ec09fb Mon Sep 17 00:00:00 2001 From: Barrett Ruth Date: Sat, 15 Jun 2024 14:35:39 -0500 Subject: [PATCH] refactor: make styles, js common for posts --- index.html | 2 + posts/from-github-pages-to-aws.html | 20 ++++++++-- scripts/common.js | 30 +++++++++++++++ scripts/index.js | 25 ------------ styles/common.css | 59 +++++++++++++++++++++++++++++ styles/index.css | 58 ---------------------------- styles/post.css | 36 ++++++++++++++++++ 7 files changed, 143 insertions(+), 87 deletions(-) create mode 100644 scripts/common.js create mode 100644 styles/common.css create mode 100644 styles/post.css diff --git a/index.html b/index.html index fd36621..5fe8569 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,7 @@ + Barrett Ruth @@ -51,6 +52,7 @@ Email + diff --git a/posts/from-github-pages-to-aws.html b/posts/from-github-pages-to-aws.html index 3b3e704..6ece2bc 100644 --- a/posts/from-github-pages-to-aws.html +++ b/posts/from-github-pages-to-aws.html @@ -4,13 +4,25 @@ - + + Barrett Ruth -
main
- - +
+ +
+ barrett@ruth:~$ + +
+ +
+
+ +
+ diff --git a/scripts/common.js b/scripts/common.js new file mode 100644 index 0000000..73774d6 --- /dev/null +++ b/scripts/common.js @@ -0,0 +1,30 @@ +const TERMINAL_PROMPT = "barrett@ruth:~$ "; +let clearing = false; + +function clearPrompt(delay, callback) { + if (clearing) return; + clearing = true; + + const terminalPrompt = document.querySelector(".terminal-prompt"); + const topicLength = terminalPrompt.innerHTML.length - TERMINAL_PROMPT.length; + let i = 0; + + function removeChar() { + if (i++ < topicLength) { + terminalPrompt.textContent = terminalPrompt.textContent.slice(0, -1); + setTimeout(removeChar, delay / topicLength); + } else { + i = 0; + clearing = false; + callback && callback(); + } + } + + removeChar(); +} + +function goHome(e) { + e.preventDefault(); + + clearPrompt(500, () => (window.location.href = "/")); +} diff --git a/scripts/index.js b/scripts/index.js index f1f2062..ae7c312 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -19,31 +19,6 @@ const postMapping = new Map([ ["Algorithms", [{ name: "two pointers" }, { name: "convex hull" }]], ]); -const TERMINAL_PROMPT = "barrett@ruth:~$ "; -let clearing = false; - -function clearPrompt(delay, callback) { - if (clearing) return; - clearing = true; - - const terminalPrompt = document.querySelector(".terminal-prompt"); - const topicLength = terminalPrompt.innerHTML.length - TERMINAL_PROMPT.length; - let i = 0; - - function removeChar() { - if (i++ < topicLength) { - terminalPrompt.textContent = terminalPrompt.textContent.slice(0, -1); - setTimeout(removeChar, delay / topicLength); - } else { - i = 0; - clearing = false; - callback && callback(); - } - } - - removeChar(); -} - function refresh(e) { e.preventDefault(); diff --git a/styles/common.css b/styles/common.css new file mode 100644 index 0000000..2ce186b --- /dev/null +++ b/styles/common.css @@ -0,0 +1,59 @@ +@font-face { + font-family: "Signifier"; + src: url("public/signifier/Signifier-Regular.ttf"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Signifier"; + src: url("public/signifier/Signifier-Italic.ttf"); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: "Signifier"; + src: url("public/signifier/Signifier-Bold.ttf"); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: "Signifier"; + src: url("public/signifier/Signifier-BoldItalic.ttf"); + font-weight: bold; + font-style: italic; +} + +.graph { + background-image: linear-gradient( + to right, + rgba(200, 200, 200, 0.4) 1px, + transparent 1px + ), + linear-gradient(to bottom, rgba(200, 200, 200, 0.4) 1px, transparent 1px); + background-size: 3vw 3vw; +} + +.terminal-cursor { + display: inline-block; + width: 10px; + height: 1em; + background-color: white; + border: 1px solid black; + vertical-align: text-top; + animation: blink 1s step-start infinite; +} + +@keyframes blink { + 50% { + background-color: transparent; + border-color: transparent; + } +} + +.terminal-container { + font-family: "Courier New", monospace; +} + diff --git a/styles/index.css b/styles/index.css index ffb8c16..8b24017 100644 --- a/styles/index.css +++ b/styles/index.css @@ -1,31 +1,3 @@ -@font-face { - font-family: "Signifier"; - src: url("public/signifier/Signifier-Regular.ttf"); - font-weight: normal; - font-style: normal; -} - -@font-face { - font-family: "Signifier"; - src: url("public/signifier/Signifier-Italic.ttf"); - font-weight: normal; - font-style: italic; -} - -@font-face { - font-family: "Signifier"; - src: url("public/signifier/Signifier-Bold.ttf"); - font-weight: bold; - font-style: normal; -} - -@font-face { - font-family: "Signifier"; - src: url("public/signifier/Signifier-BoldItalic.ttf"); - font-weight: bold; - font-style: italic; -} - html, body { font-family: "Signifier", serif; @@ -36,15 +8,6 @@ body { display: flex; flex-direction: column; } -.graph { - background-image: linear-gradient( - to right, - rgba(200, 200, 200, 0.4) 1px, - transparent 1px - ), - linear-gradient(to bottom, rgba(200, 200, 200, 0.4) 1px, transparent 1px); - background-size: 3vw 3vw; -} header, footer { @@ -61,27 +24,6 @@ footer { justify-content: flex-end; } -.terminal-cursor { - display: inline-block; - width: 10px; - height: 1em; - background-color: white; - border: 1px solid black; - vertical-align: text-top; - animation: blink 1s step-start infinite; -} - -@keyframes blink { - 50% { - background-color: transparent; - border-color: transparent; - } -} - -.terminal-container { - font-family: "Courier New", monospace; -} - .main { flex: 1; display: flex; diff --git a/styles/post.css b/styles/post.css new file mode 100644 index 0000000..880353b --- /dev/null +++ b/styles/post.css @@ -0,0 +1,36 @@ +@font-face { + font-family: "Signifier"; + src: url("public/signifier/Signifier-Regular.ttf"); + font-weight: normal; + font-style: normal; +} + +@font-face { + font-family: "Signifier"; + src: url("public/signifier/Signifier-Italic.ttf"); + font-weight: normal; + font-style: italic; +} + +@font-face { + font-family: "Signifier"; + src: url("public/signifier/Signifier-Bold.ttf"); + font-weight: bold; + font-style: normal; +} + +@font-face { + font-family: "Signifier"; + src: url("public/signifier/Signifier-BoldItalic.ttf"); + font-weight: bold; + font-style: italic; +} + +html, +body { + font-family: "Signifier", serif; + overflow: hidden; + margin: 0; + padding: 0; + height: 100%; +}