diff --git a/README.md b/README.md index dcdee61..fc5169b 100644 --- a/README.md +++ b/README.md @@ -6,10 +6,9 @@ The latest iteration of my personal site and blog. ### Home -1. Update bio -2. Add projects setion -3. Add "Fun" Zone functionality. -4. Look into improving "Fun" Zone button styling. +1. Add projects setion +2. Add "Fun" Zone functionality. +3. Look into improving "Fun" Zone button styling. ### Posts @@ -29,5 +28,4 @@ The latest iteration of my personal site and blog. 1. Get things like og meta-stuff and manifest file sorted. 2. Add view transitions. -3. Update the footer. -4. Add proper nav bar +3. Add proper nav bar diff --git a/css/shared/base.css b/css/shared/base.css new file mode 100644 index 0000000..9e9418b --- /dev/null +++ b/css/shared/base.css @@ -0,0 +1,381 @@ +/* Global stylesheet */ +* { + box-sizing: border-box; +} + +html, +body { + padding: 0; + margin: 0 auto; + font-family: var(--font-family); + color: var(--text-colour); + background-color: var(--background-colour); +} + +p:last-child { + margin-bottom: 0; +} +p { + line-height: 1.5; +} + +li { + line-height: 1.5; +} + +a { + color: var(--text-colour-link); +} + +.fat-hover-link[href] { + color: var(--text-colour-header); + text-decoration: unset; + background-image: linear-gradient( + 120deg, + var(--hover-link-background-colour), + var(--hover-link-background-colour) + ); + background-size: 100% 0.05em; + background-position: 0 90%; + background-repeat: no-repeat; + transition: + background-size 0.1s ease-in, + color 0.1s ease-in; +} +.fat-hover-link[href]:hover, +.fat-hover-link[href]:active, +.fat-hover-link[href]:focus { + background-size: 100% 100%; + color: var(--hover-link-text-colour); + text-decoration: unset; +} + +header:after { + content: ""; + display: table; + clear: both; +} + +.links-nextprev { + display: flex; + list-style: none; + border-top: 2px solid var(--border-colour); + padding: 1em 0; +} +.links-nextprev a { + font-weight: 500; +} +.links-nextprev a:last-of-type { + margin: 0 0 0 auto; +} + +table { + margin: 1em 0; +} +table td, +table th { + padding-right: 1em; +} + +pre, +code { + font-family: var(--font-family-monospace); +} +pre:not([class*="language-"]) { + margin: 0.5em 0; + line-height: 1.375; /* 22px /16 */ + -moz-tab-size: var(--syntax-tab-size); + -o-tab-size: var(--syntax-tab-size); + tab-size: var(--syntax-tab-size); + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; +} +code { + word-break: break-all; +} + +header { + display: flex; + justify-content: center; + background-color: var(--header-colour); +} +.header-content { + display: flex; + flex-direction: column; + width: 100%; + margin: 8vw; + max-width: 900px; +} + +nav { + display: flex; + flex-direction: column; + padding: 0; + margin: 0 0 0 auto; + list-style: none; +} +.nav-item { + display: flex; + padding: 0.75rem; + max-width: fit-content; + background-color: var(--colour-orange); + border: 2px solid var(--colour-black); + transition: background-color 0.2s ease-out; + + & svg { + width: 2rem; + height: 2rem; + } +} +.nav-item:last-of-type { + margin-top: -2px; + background-color: var(--colour-purple); +} +.nav-item[href]:hover, +.nav-item[href]:focus { + background-color: var(--colour-black); + fill: var(--colour-white); +} +.nav-item[href]:not(:hover) { + text-decoration: none; +} + +footer { + display: flex; + justify-content: center; + font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem); + font-weight: 500; + margin: 12vw 8vw 6vw 8vw; + + & p { + font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem); + font-weight: 500; + margin: 0; + line-height: 1.5; + color: var(--subtle-text-colour); + } +} +.footer-content { + max-width: 900px; + display: flex; + align-items: center; + width: 100%; +} +.footer-links { + display: flex; + gap: 0.75rem; + margin: 0 0 0 auto; + + & a { + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem; + border-radius: 50%; + background-color: transparent; + border: 2px solid transparent; + transition: + background-color 0.25s ease, + border-color 0.25s ease, + transform 0.25s ease; + + & svg { + width: 2rem; + height: 2rem; + fill: var(--icon-fill-colour); + transition: fill 0.25s ease; + } + + &:hover, + &:focus-visible { + transform: translateY(-3px); + border-color: var(--colour-black); + } + } + + & a:nth-child(1):hover, + & a:nth-child(1):focus-visible { + background-color: var(--colour-purple); + + & svg { + fill: var(--icon-fill-colour); + } + } + & a:nth-child(2):hover, + & a:nth-child(2):focus-visible { + background-color: var(--colour-orange); + + & svg { + fill: var(--icon-fill-colour); + } + } + & a:nth-child(3):hover, + & a:nth-child(3):focus-visible { + background-color: rgb(15, 115, 255); + + & svg { + fill: var(--colour-white); + } + } + & a:nth-child(4):hover, + & a:nth-child(4):focus-visible { + background-color: var(--colour-black); + + & svg { + fill: var(--colour-white); + } + } + & a:nth-child(5):hover, + & a:nth-child(5):focus-visible { + background-color: rgb(10, 102, 194); + + & svg { + fill: var(--colour-white); + } + } +} + +@media (max-width: 768px) { + .footer-content { + flex-direction: column; + gap: 1.5rem; + } + .footer-links { + margin: 0 auto; + } +} + +.postlist { + padding: 0; + margin: 0; + display: grid; + gap: clamp(1.88rem, 1.32rem + 3.2vw, 3.12rem); + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} +.postlist-item { + display: flex; + flex-direction: column; + padding: clamp(1.25rem, 0.6855rem + 3.2258vw, 2.5rem); + border: 2px solid var(--colour-black); + text-decoration: unset; + transition: box-shadow 0.1s ease-out; +} +.postlist-item:hover, +.postlist-item:focus { + text-decoration: none; +} +.postlist-item:nth-child(4n-7) { + background-color: var(--colour-green); + box-shadow: 10px 10px 0px 0px var(--postlist-item-background-one-colour); + + &:hover, + &:focus { + box-shadow: none; + } +} +.postlist-item:nth-child(4n-6) { + background-color: var(--colour-purple); + box-shadow: 10px 10px 0px 0px var(--postlist-item-background-two-colour); + + &:hover, + &:focus { + box-shadow: none; + } +} +.postlist-item:nth-child(4n-5) { + background-color: var(--colour-blue); + box-shadow: 10px 10px 0px 0px var(--postlist-item-background-three-colour); + + &:hover, + &:focus { + box-shadow: none; + } +} +.postlist-item:nth-child(4n-4) { + background-color: var(--colour-red); + box-shadow: 10px 10px 0px 0px var(--postlist-item-background-four-colour); + + &:hover, + &:focus { + box-shadow: none; + } +} +.post-title { + display: -webkit-box; + line-clamp: 2; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + font-size: clamp(1rem, 0.6048rem + 2.2581vw, 1.875rem); + font-weight: 500; + margin: 0; +} +.post-date { + margin: 1.25rem 0 0 auto; + font-weight: 400; + font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem); +} + +/* Tags */ +.post-tag { + text-transform: capitalize; + font-weight: 500; + border: 2px solid black; + padding: 0.5rem 1rem; + border-radius: 30px; + text-decoration: unset; + background-color: var(--colour-purple); + transition: background-color 0.2s ease-out; +} +.post-tag:hover, +.post-tag:focus { + background-color: var(--colour-black); + color: var(--colour-white); +} +.postlist-item > .post-tag { + align-self: center; +} + +/* Tags list */ +.post-metadata { + display: inline-flex; + flex-wrap: wrap; + gap: 1.2em; + list-style: none; + padding: 0; + margin: 0; + margin-bottom: 2rem; +} +.post-metadata time { + margin-right: 1em; +} + +/* Direct Links / Markdown Headers */ +.header-anchor { + text-decoration: none; + font-style: normal; + font-size: 1em; + margin-left: 0.1em; +} +a[href].header-anchor, +a[href].header-anchor:visited { + color: transparent; +} +a[href].header-anchor:focus, +a[href].header-anchor:hover { + text-decoration: underline; +} +a[href].header-anchor:focus, +:hover > a[href].header-anchor { + color: var(--colour-black); +} + +h2 + .header-anchor { + font-size: 1.5em; +} diff --git a/css/shared/index.css b/css/shared/index.css deleted file mode 100644 index 66f45b9..0000000 --- a/css/shared/index.css +++ /dev/null @@ -1,373 +0,0 @@ -@font-face { - font-family: "Lora"; - src: url("/fonts/Lora-VariableFont_wght.ttf") format("truetype"); - font-display: fallback; -} - -@font-face { - font-family: "Gorton"; - src: url("/fonts/GortonPerfectedVF.woff2") format("woff2"); - font-display: fallback; -} - -/* Defaults */ -:root { - --syntax-tab-size: 2; - --font-family: "Gorton"; - --secondary-font-family: "Lora"; - --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, - Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, - Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, - Courier, monospace; -} - -/* Theme colors */ -:root { - --colour-black: hsla(0, 0%, 0%, 1); - --colour-yellow: hsla(61, 76%, 72%, 1); - --colour-blue: hsla(165, 56%, 71%, 1); - --colour-purple: hsla(300, 60%, 82%, 1); - --colour-green: hsla(94, 48%, 80%, 1); - --colour-red: hsla(0, 97%, 77%, 1); - --colour-white: hsla(60, 51%, 91%, 1); - --colour-orange: hsla(17, 89%, 60%, 1); - - --background-colour: var(--colour-white); - --header-colour: var(--colour-yellow); - --border-colour: var(--colour-black); - - --text-colour: var(--colour-black); - --subtle-text-colour: var(--colour-black); - --text-colour-link: var(--colour-black); - --text-colour-header: var(--colour-black); - - --hover-link-background-colour: var(--colour-black); - --hover-link-text-colour: var(--colour-yellow); - - --icon-fill-colour: var(--colour-black); - - --postlist-item-background-one-colour: var(--colour-black); - --postlist-item-background-two-colour: var(--colour-black); - --postlist-item-background-three-colour: var(--colour-black); - --postlist-item-background-four-colour: var(--colour-black); - - color-scheme: light; -} - -/* Global stylesheet */ -* { - box-sizing: border-box; -} - -html, -body { - padding: 0; - margin: 0 auto; - font-family: var(--font-family); - color: var(--text-colour); - background-color: var(--background-colour); -} - -/* https://www.a11yproject.com/posts/how-to-hide-content/ */ -.visually-hidden { - clip: rect(0 0 0 0); - clip-path: inset(50%); - height: 1px; - overflow: hidden; - position: absolute; - white-space: nowrap; - width: 1px; -} - -p:last-child { - margin-bottom: 0; -} -p { - line-height: 1.5; -} - -li { - line-height: 1.5; -} - -a { - color: var(--text-colour-link); -} - -.fat-hover-link[href] { - color: var(--text-colour-header); - text-decoration: unset; - background-image: linear-gradient( - 120deg, - var(--hover-link-background-colour), - var(--hover-link-background-colour) - ); - background-size: 100% 0.05em; - background-position: 0 90%; - background-repeat: no-repeat; - transition: background-size 0.1s ease-in, color 0.1s ease-in; -} -.fat-hover-link[href]:hover, -.fat-hover-link[href]:active, -.fat-hover-link[href]:focus { - background-size: 100% 100%; - color: var(--hover-link-text-colour); - text-decoration: unset; -} - -header:after { - content: ""; - display: table; - clear: both; -} - -.links-nextprev { - display: flex; - list-style: none; - border-top: 2px solid var(--border-colour); - padding: 1em 0; -} -.links-nextprev a { - font-weight: 500; -} -.links-nextprev a:last-of-type { - margin: 0 0 0 auto; -} - -table { - margin: 1em 0; -} -table td, -table th { - padding-right: 1em; -} - -pre, -code { - font-family: var(--font-family-monospace); -} -pre:not([class*="language-"]) { - margin: 0.5em 0; - line-height: 1.375; /* 22px /16 */ - -moz-tab-size: var(--syntax-tab-size); - -o-tab-size: var(--syntax-tab-size); - tab-size: var(--syntax-tab-size); - -webkit-hyphens: none; - -ms-hyphens: none; - hyphens: none; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; -} -code { - word-break: break-all; -} - -/* Header */ -header { - display: flex; - justify-content: center; - background-color: var(--header-colour); -} -.header-content { - display: flex; - flex-direction: column; - width: 100%; - margin: 8vw; - max-width: 900px; -} - -/* Nav */ -nav { - display: flex; - flex-direction: column; - padding: 0; - margin: 0 0 0 auto; - list-style: none; -} -.nav-item { - display: flex; - padding: 0.75rem; - max-width: fit-content; - background-color: var(--colour-orange); - border: 2px solid var(--colour-black); - transition: background-color 0.2s ease-out; -} -.nav-item:last-of-type { - margin-top: -2px; - background-color: var(--colour-purple); - color: var(--icon-fill-colour); - fill: none; -} -.nav-item[href]:hover, -.nav-item[href]:focus { - background-color: var(--colour-black); - fill: var(--colour-white); -} -.nav-item[href]:not(:hover) { - text-decoration: none; -} - -/* Footer */ -footer { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem); - font-weight: 500; - margin: 10vw auto 6vw auto; - max-width: 900px; -} -footer p { - font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem); - font-weight: 500; - margin: 0; - line-height: 1.5; - color: var(--subtle-text-colour); -} -footer .footer-links { - display: flex; - gap: 1.25rem; -} -footer .switcher { - border: unset; - border-bottom: 1px solid var(--border-colour); - background-color: var(--background-colour); - font-family: "gorton"; - font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem); - font-weight: 500; - color: var(--subtle-text-colour); - margin-top: 1.25rem; -} - -/* Posts list */ -.postlist { - padding: 0; - margin: 0; - display: grid; - gap: clamp(1.88rem, 1.32rem + 3.2vw, 3.12rem); - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); -} -.postlist-item { - display: flex; - flex-direction: column; - padding: clamp(1.25rem, 0.6855rem + 3.2258vw, 2.5rem); - border: 2px solid var(--colour-black); - text-decoration: unset; - transition: box-shadow 0.1s ease-out; -} -.postlist-item:hover, -.postlist-item:focus { - text-decoration: none; -} -.postlist-item:nth-child(4n-7) { - background-color: var(--colour-green); - box-shadow: 10px 10px 0px 0px var(--postlist-item-background-one-colour); - - &:hover, - &:focus { - box-shadow: none; - } -} -.postlist-item:nth-child(4n-6) { - background-color: var(--colour-purple); - box-shadow: 10px 10px 0px 0px var(--postlist-item-background-two-colour); - - &:hover, - &:focus { - box-shadow: none; - } -} -.postlist-item:nth-child(4n-5) { - background-color: var(--colour-blue); - box-shadow: 10px 10px 0px 0px var(--postlist-item-background-three-colour); - - &:hover, - &:focus { - box-shadow: none; - } -} -.postlist-item:nth-child(4n-4) { - background-color: var(--colour-red); - box-shadow: 10px 10px 0px 0px var(--postlist-item-background-four-colour); - - &:hover, - &:focus { - box-shadow: none; - } -} -.post-title { - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - font-size: clamp(1rem, 0.6048rem + 2.2581vw, 1.875rem); - font-weight: 500; - margin: 0; -} -.post-date { - margin: 1.25rem 0 0 auto; - font-weight: 400; - font-size: clamp(0.875rem, 0.8185rem + 0.3226vw, 1rem); -} - -/* Tags */ -.post-tag { - text-transform: capitalize; - font-weight: 500; - border: 2px solid black; - padding: 0.5rem 1rem; - border-radius: 30px; - text-decoration: unset; - background-color: var(--colour-purple); - transition: background-color 0.2s ease-out; -} -.post-tag:hover, -.post-tag:focus { - background-color: var(--colour-black); - color: var(--colour-white); -} -.postlist-item > .post-tag { - align-self: center; -} - -/* Tags list */ -.post-metadata { - display: inline-flex; - flex-wrap: wrap; - gap: 1.2em; - list-style: none; - padding: 0; - margin: 0; - margin-bottom: 2rem; -} -.post-metadata time { - margin-right: 1em; -} - -/* Direct Links / Markdown Headers */ -.header-anchor { - text-decoration: none; - font-style: normal; - font-size: 1em; - margin-left: 0.1em; -} -a[href].header-anchor, -a[href].header-anchor:visited { - color: transparent; -} -a[href].header-anchor:focus, -a[href].header-anchor:hover { - text-decoration: underline; -} -a[href].header-anchor:focus, -:hover > a[href].header-anchor { - color: var(--colour-black); -} - -h2 + .header-anchor { - font-size: 1.5em; -} diff --git a/css/shared/prism-diff.css b/css/shared/prism-diff.css index 9f7e676..ac2975b 100644 --- a/css/shared/prism-diff.css +++ b/css/shared/prism-diff.css @@ -1,7 +1,3 @@ -/* - * New diff- syntax - */ - pre[class*="language-diff-"] { --eleventy-code-padding: 1.25em; padding-left: var(--eleventy-code-padding); diff --git a/css/shared/utilities.css b/css/shared/utilities.css new file mode 100644 index 0000000..2fb5f0f --- /dev/null +++ b/css/shared/utilities.css @@ -0,0 +1,10 @@ +/* https://www.a11yproject.com/posts/how-to-hide-content/ */ +.visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; +} diff --git a/css/shared/variables.css b/css/shared/variables.css new file mode 100644 index 0000000..773e602 --- /dev/null +++ b/css/shared/variables.css @@ -0,0 +1,55 @@ +@font-face { + font-family: "Lora"; + src: url("/fonts/Lora-VariableFont_wght.ttf") format("truetype"); + font-display: fallback; +} + +@font-face { + font-family: "Gorton"; + src: url("/fonts/GortonPerfectedVF.woff2") format("woff2"); + font-display: fallback; +} + +/* Defaults */ +:root { + --syntax-tab-size: 2; + --font-family: "Gorton"; + --secondary-font-family: "Lora"; + --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, + Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, + Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, + Courier, monospace; +} + +/* Theme colors */ +:root { + --colour-black: hsla(0, 0%, 0%, 1); + --colour-yellow: hsla(61, 76%, 72%, 1); + --colour-blue: hsla(165, 56%, 71%, 1); + --colour-purple: hsla(300, 60%, 82%, 1); + --colour-green: hsla(94, 48%, 80%, 1); + --colour-red: hsla(0, 97%, 77%, 1); + --colour-white: hsla(60, 51%, 91%, 1); + --colour-orange: hsla(17, 89%, 60%, 1); + + --background-colour: var(--colour-white); + --header-colour: var(--colour-yellow); + --border-colour: var(--colour-black); + + --text-colour: var(--colour-black); + --subtle-text-colour: var(--colour-black); + --text-colour-link: var(--colour-black); + --text-colour-header: var(--colour-black); + + --hover-link-background-colour: var(--colour-black); + --hover-link-text-colour: var(--colour-yellow); + + --icon-fill-colour: var(--colour-black); + + --postlist-item-background-one-colour: var(--colour-black); + --postlist-item-background-two-colour: var(--colour-black); + --postlist-item-background-three-colour: var(--colour-black); + --postlist-item-background-four-colour: var(--colour-black); + + color-scheme: light; +} diff --git a/layouts/archive.11ty.js b/layouts/archive.11ty.js deleted file mode 100644 index 3dced4a..0000000 --- a/layouts/archive.11ty.js +++ /dev/null @@ -1,23 +0,0 @@ -export const data = { - layout: "base.11ty.js", -}; - -export function render(data) { - return ` -
-
- Home -

Archive

-

- An RSS feed and a - list of tags are also - available. -

-
-
- -
- ${data.content} -
- `; -} diff --git a/layouts/base.11ty.js b/layouts/base.11ty.js index 1facd20..3decee4 100644 --- a/layouts/base.11ty.js +++ b/layouts/base.11ty.js @@ -2,22 +2,23 @@ import { getFilePath } from "../utils/getFilePath.js"; import { inlineCSS } from "../utils/inlineCSS.js"; export const data = { - sharedCSS: [getFilePath("../css/shared/index.css")], - pageCSS: [], + sharedCSS: [ + getFilePath("../css/shared/variables.css"), + getFilePath("../css/shared/utilities.css"), + getFilePath("../css/shared/base.css"), + ], + pageCSS: [], }; export function render(data) { - const title = data.title !== undefined ? data.title : data.meta.title; - const description = - data.description !== undefined - ? data.description - : data.meta.description; + const title = data.title !== undefined ? data.title : data.meta.title; + const description = + data.description !== undefined ? data.description : data.meta.description; - const cssFiles = [...data.sharedCSS, ...data.pageCSS]; - const css = inlineCSS(cssFiles); - const isHome = data.page.url === "/"; + const cssFiles = [...data.sharedCSS, ...data.pageCSS]; + const css = inlineCSS(cssFiles); - return ` + return ` @@ -30,21 +31,37 @@ export function render(data) { + + - + ${data.content} +
+ © Ethan Anderson 2026 +
+ + + + + + + + + + + + + + + +
+
+ `; diff --git a/layouts/home.11ty.js b/layouts/home.11ty.js deleted file mode 100644 index eb22c7f..0000000 --- a/layouts/home.11ty.js +++ /dev/null @@ -1,7 +0,0 @@ -export const data = { - layout: "base.11ty.js", -}; - -export function render(data) { - return data.content; -} diff --git a/layouts/landing.11ty.js b/layouts/landing.11ty.js deleted file mode 100644 index b4afe1e..0000000 --- a/layouts/landing.11ty.js +++ /dev/null @@ -1,22 +0,0 @@ -export const data = { - layout: "base.11ty.js", -}; - -export function render(data) { - return ` -
-
- Hi, I'm Ethan -

- A frontend developer with an interest in design, specialising in web - technology.
Working at - PebblePad. -

-
-
- -
- ${data.content} -
- `; -} diff --git a/public/icons.svg b/public/icons.svg new file mode 100644 index 0000000..4d234dd --- /dev/null +++ b/public/icons.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/utils/components/iconNav.js b/utils/components/iconNav.js index 2d503cd..c0026e2 100644 --- a/utils/components/iconNav.js +++ b/utils/components/iconNav.js @@ -1,12 +1,11 @@ export function iconNav() { - return ` -`; + return ` + `; } diff --git a/utils/components/postsList.js b/utils/components/postsList.js index 9a6789d..bfe212d 100644 --- a/utils/components/postsList.js +++ b/utils/components/postsList.js @@ -1,24 +1,24 @@ import { readableDate, htmlDateString } from "../dates.js"; export function postsList({ posts, currentUrl, counterStart }) { - const start = (counterStart ?? posts.length) + 1; - const items = [...posts] - .reverse() - .map((post) => { - const isActive = post.url === currentUrl; - const title = post.data.title - ? post.data.title - : `${post.url}`; - return ` + const start = (counterStart ?? posts.length) + 1; + const items = [...posts] + .reverse() + .map((post) => { + const isActive = post.url === currentUrl; + const title = post.data.title + ? post.data.title + : `${post.url}`; + return `

${title}

`; - }) - .join(""); + }) + .join(""); - return ` - -
${items} -
`; + return ` + +
${items}
+ `; } diff --git a/views/404.11ty.js b/views/404.11ty.js index 2ee1564..82569fb 100644 --- a/views/404.11ty.js +++ b/views/404.11ty.js @@ -1,7 +1,7 @@ import { getFilePath } from "../utils/getFilePath.js"; export const data = { - layout: "home.11ty.js", + layout: "base.11ty.js", permalink: "404.html", eleventyExcludeFromCollections: true, title: "Ethan Anderson - 404", diff --git a/views/blog.11ty.js b/views/blog.11ty.js index ae17c3c..47a44d8 100644 --- a/views/blog.11ty.js +++ b/views/blog.11ty.js @@ -1,7 +1,7 @@ import { getFilePath } from "../utils/getFilePath.js"; export const data = { - layout: "archive.11ty.js", + layout: "base.11ty.js", title: "Ethan Anderson - Archive", eleventyNavigation: { key: "Archive", @@ -40,8 +40,22 @@ export function render(data) { .join(""); return ` -
- ${sections} -
+
+
+ Home +

Archive

+

+ An RSS feed and a + list of tags are also + available. +

+
+
+ +
+
+ ${sections} +
+
`; } diff --git a/views/index.11ty.js b/views/index.11ty.js index 0829f9d..09dd9d0 100644 --- a/views/index.11ty.js +++ b/views/index.11ty.js @@ -5,7 +5,7 @@ import { postsList } from "../utils/components/postsList.js"; const NUMBER_OF_LATEST_POSTS = 4; export const data = { - layout: "landing.11ty.js", + layout: "base.11ty.js", title: "Ethan Anderson - Home", pageCSS: [getFilePath("../css/views/home.css")], }; @@ -17,15 +17,28 @@ export function render(data) { const latestPosts = posts.slice(-NUMBER_OF_LATEST_POSTS); return ` -
-
-

- Latest Post${latestCount !== 1 ? "s" : ""} -

- ${iconNav()} +
+
+ Hi, I'm Ethan +

+ A frontend developer with an interest in design, specialising in web + technology.
Working at + PebblePad. +

- - ${postsList({ posts: latestPosts, currentUrl: data.page.url, counterStart: postsCount })} -
+ + +
+
+
+

+ Latest Post${latestCount !== 1 ? "s" : ""} +

+ ${iconNav()} +
+ + ${postsList({ posts: latestPosts, currentUrl: data.page.url, counterStart: postsCount })} +
+
`; } diff --git a/views/tags-list.11ty.js b/views/tags-list.11ty.js index 7de8769..5764b6d 100644 --- a/views/tags-list.11ty.js +++ b/views/tags-list.11ty.js @@ -3,7 +3,7 @@ import { getAllTags, filterTagList } from "../utils/tags.js"; import { slugify } from "../utils/slugify.js"; export const data = { - layout: "home.11ty.js", + layout: "base.11ty.js", permalink: "/tags/", title: "Ethan Anderson - Tags", pageCSS: [ diff --git a/views/tags.11ty.js b/views/tags.11ty.js index b5d170e..897fbf1 100644 --- a/views/tags.11ty.js +++ b/views/tags.11ty.js @@ -3,7 +3,7 @@ import { slugify } from "../utils/slugify.js"; import { postsList } from "../utils/components/postsList.js"; export const data = { - layout: "home.11ty.js", + layout: "base.11ty.js", pagination: { data: "collections", size: 1,