diff --git a/assets/cloud-night.png b/assets/cloud-night.png deleted file mode 100644 index bf420b7..0000000 Binary files a/assets/cloud-night.png and /dev/null differ diff --git a/assets/cloud.png b/assets/cloud.png deleted file mode 100644 index 23751a1..0000000 Binary files a/assets/cloud.png and /dev/null differ diff --git a/assets/site.css b/assets/site.css index de466ca..eec4ad9 100644 --- a/assets/site.css +++ b/assets/site.css @@ -16,8 +16,9 @@ body { --c-highlight: hsl(0 0% 100% / 87.5%); --c-dark: hsl(217 17% 21%); - --c-accent: hsl(14 62% 53%); - --c-light: #859cc4; + --c-accent: white; + /* --c-accent: hsl(14 62% 53%); */ + --c-body-background: hsl(0 0% 85%); --c-text-background-light: hsl(0 0% 95% / 60%); --c-text-light: var(--c-highlight); @@ -37,142 +38,42 @@ body { --s5: calc(var(--s4) * var(--ratio)); --content-width: clamp(75vw, 40rem, 100vw - 3rem); --inset: calc(50vw - var(--content-width) / 2); - --cloudyHeaderBottom: max(35vh, 10rem); - background-size: 100% 80vh; - background-position: top; - background-repeat: no-repeat; - background-color: var(--c-light); - background-image: linear-gradient(to bottom, #4379ef, #859cc4); -} -body[data-theme="dark"] { - background: var(--c-light); } +body[data-theme="dark"] { + background-color: var(--c-body-background); +} [data-theme="dark"] { - --c-highlight: hsl(60 20% 60% / 50%); + --c-highlight: hsl(60 20% 30% / 50%); --c-dark: hsl(217 9% 8%); --c-accent: hsl(220 20% 35%); - --c-light: hsl(220 50% 10%); + --c-body-background: hsl(220 50% 5%); --c-text-background-light: hsl(220 40% 10% / 40%); --c-text-light: hsl(60 50% 86.67%); --c-text-dark: hsl(60 50% 86.67%); } -@media screen { - .scene { - --durationSeconds: 120; - --duration: calc(var(--durationSeconds) * 1s); - --viewPointDelta: min( - 1px * var(--scrollLengthPx, 0), - var(--cloudyHeaderBottom) - ); - --travelDistance: 90vh; - z-index: -2; - position: fixed; - top: 0; - left: 0; - right: 0; - height: 100lvh; - overflow: hidden; - perspective: calc(0.25 * var(--cloudyHeaderBottom) + 0.75 * 35vmax); - perspective-origin: 50vw calc(15vh + 1.2 * var(--viewPointDelta)); - } +@media (prefers-color-scheme: dark) { - .sky { - transform-style: preserve-3d; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; + body[data-theme="auto"] { + background-color: var(--c-body-background); } + [data-theme="auto"] { + --c-highlight: hsl(60 20% 30% / 50%); + --c-dark: hsl(217 9% 8%); + --c-accent: hsl(220 20% 35%); + --c-body-background: hsl(220 50% 5%); - .cloud { - --height: 90vh; - pointer-events: none; - position: absolute; - left: -205vw; - right: -205vw; - top: calc(8vh - var(--viewPointDelta)); - height: var(--height); - background-image: url("/cloud.png"); - background-size: auto 100%; - background-repeat: repeat-x; - background-position: calc(50% + cos(230 * var(--n)) * var(--height)) 50%; - animation-name: zoom; - animation-duration: var(--duration); - animation-timing-function: steps(calc(var(--durationSeconds) * 30)); - animation-delay: calc(-0.1 * var(--duration) * var(--n)); - animation-iteration-count: infinite; - -webkit-backface-visibility: hidden; - backface-visibility: hidden; - @media (prefers-reduced-motion: reduce) { - & { - animation-play-state: paused; - } - } - [data-theme="dark"] & { - background-image: url("/cloud-night.png"); - } - } -} - -@media screen { - #brand { - position: absolute; - left: var(--inset); - right: var(--inset); - padding: 0.5rem; - bottom: calc(-1 * var(--cloudyHeaderBottom)); - transform: translateY(calc(-1 * var(--viewPointDelta))); - will-change: translateY; - } - [data-theme="dark"] #brand > * { - text-shadow: 0 0 0.5em currentColor; - } -} - -@keyframes zoom { - 0% { - opacity: 0; - transform: translate3d( - 0, - calc(4 * var(--viewPointDelta)), - calc(-0.66667 * var(--travelDistance)) - ); - } - - 20% { - opacity: 1; - } - - 56.6% { - opacity: 1; - } - - 66.66667% { - opacity: 0; - } - - 76.6% { - opacity: 1; - } - - 90% { - opacity: 1; - } - - 100% { - opacity: 0; - transform: translate3d( - 0, - calc(-1 * var(--viewPointDelta) + calc(var(--cloudyHeaderBottom) - 35vh)), - calc(0.33333 * var(--travelDistance)) - ); + --c-text-background-light: hsl(220 40% 10% / 40%); + --c-text-light: hsl(60 50% 86.67%); + --c-text-dark: hsl(60 50% 86.67%); } } ::selection { - background: var(--c-accent); - color: var(--c-text-light); + background: var(--c-highlight); + color: var(--c-text-dark); } *, @@ -182,7 +83,6 @@ body[data-theme="dark"] { font-family: inherit; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); text-decoration-thickness: 0.1rem; - transition: color ease 0.1s; } body { @@ -194,92 +94,26 @@ body { padding: 0; margin: 0; font-family: Inter, sans-serif; - background-color: var(--c-light); + background-color: var(--c-body-background); color: var(--c-text-dark); } -@media screen { - body { - border: 0.5rem solid var(--c-accent); - &::before { - content: ""; - z-index: -1; - position: absolute; - pointer-events: none; - inset: -0.5rem; - bottom: calc(1px - 0.5rem); - border-radius: 1.3rem 1.3rem 1rem 1rem; - border: 0.5rem solid var(--c-accent); - outline: 0.5rem solid var(--c-accent); - } - } - body > footer { - position: relative; - z-index: 1; - background-color: var(--c-accent); - color: var(--c-text-light); - padding: 0 1ch 0; - border-radius: 0.5rem 0.5rem 0 0; - } - body > footer::before { - content: ""; - z-index: -1; - position: absolute; - height: calc(1rem - 1px); - width: 1rem; - margin: 0 0 -0.5rem -0.5rem; - border-bottom-left-radius: 1rem; - bottom: 1px; - border: 0.5rem solid var(--c-accent); - left: 100%; - border-width: 0 0 0.5rem 0.5rem; - } - body > footer::after { - content: ""; - z-index: -1; - position: absolute; - height: calc(1rem - 1px); - width: 1rem; - margin: 0 -0.5rem -0.5rem 0; - border-bottom-right-radius: 1rem; - bottom: 1px; - border: 0.5rem solid var(--c-accent); - right: 100%; - border-width: 0 0.5rem 0.5rem 0; - } -} - a { color: inherit; } a[href] { text-decoration-line: underline; + box-decoration-break: clone; } a[href]:hover, a[href]:focus-visible, label:hover, label:focus-visible, -label:has(input:focus-visible) { - text-decoration-color: var(--c-accent); -} - -main { - position: relative; - @media screen { - margin-top: var(--cloudyHeaderBottom); - &::before { - content: ""; - position: absolute; - z-index: -2; - top: -1rem; - bottom: -1rem; - left: calc(var(--inset) - 1rem); - right: calc(var(--inset) - 1rem); - border-radius: 1rem; - background-color: var(--c-text-background-light); - } - margin-bottom: 4rem; - } +label:has(input:focus-visible), +.nav-toggle-button:has(input[type="radio"]:checked) { + background-color: var(--c-accent); + text-decoration: none; + box-shadow: 0 0 0 0.2rem var(--c-accent); } main p img { @@ -300,16 +134,13 @@ section { } .footnotes-sep { - margin-top: 4rem; + position: relative; + z-index: -1; + margin: 4rem -1rem -4rem; + height: 4.1rem; border: none; - height: 0.1rem; - background-image: repeating-linear-gradient( - to right, - var(--c-accent), - var(--c-accent) 0.5em, - transparent 0.5em, - transparent 1em - ); + background-image: radial-gradient(ellipse farthest-side at 50% 0%, var(--c-highlight), transparent); + opacity: 0.5; } @keyframes ping { @@ -352,9 +183,21 @@ p { } } blockquote { + position: relative; margin: 1lh 0; padding: 0 1em; - border-left: 0.2rem solid var(--c-accent); + border-left: 1px solid var(--c-accent); + &::after { + content: ''; + position: absolute; + z-index: -1; + top: -0.5lh; + bottom: -0.5lh; + left: -0.1em; + width: 10rem; + background: radial-gradient(ellipse farthest-side at 0% 50%, var(--c-highlight), transparent); + opacity: 0.5; + } } sup { @@ -375,6 +218,12 @@ body > header > nav { flex-wrap: wrap; gap: 1ch; } +.nav-categories > a { + white-space: nowrap; + & + a { + margin-left: 0.5em; + } +} .nav-toggles { margin-left: auto; font-size: var(--s-1); @@ -386,7 +235,7 @@ body > header > nav { body { --c-highlight: white --c-dark: white; --c-accent: black; - --c-light: white; + --c-body-background: white; --c-text-light: black; --c-text-dark: black; @@ -414,6 +263,7 @@ body > footer { text-align: center; font-size: var(--s-1); margin: auto var(--inset) 0 auto; + padding-top: 4rem; } .header-meta { @@ -427,46 +277,6 @@ body > footer { } } -.nav-categories { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 1ch; - - position: relative; - z-index: 1; - background-color: var(--c-accent); - color: var(--c-text-light); - padding: 0 1ch 0.25rem; - border-radius: 0 0 0.5rem 0.5rem; - &::before { - content: ""; - z-index: -1; - position: absolute; - height: calc(1rem - 1px); - width: 1rem; - margin: -0.5rem 0 0 -0.5rem; - border-top-left-radius: 1rem; - top: 0; - border: 0.5rem solid var(--c-accent); - left: 100%; - border-width: 0.5rem 0 0 0.5rem; - } - &::after { - content: ""; - z-index: -1; - position: absolute; - height: calc(1rem - 1px); - width: 1rem; - margin: -0.5rem -0.5rem 0 0; - border-top-right-radius: 1rem; - top: 0; - border: 0.5rem solid var(--c-accent); - right: 100%; - border-width: 0.5rem 0.5rem 0 0; - } -} - label { cursor: pointer; text-decoration-line: underline; @@ -478,23 +288,9 @@ label { } .nav-toggle-button { margin-left: 0.5ch; + margin-right: 0.5ch; position: relative; z-index: 0; - &:has(input[type="radio"]:checked) { - padding-inline: 0.25rem; - color: var(--c-text-dark); - &::before { - content: ""; - z-index: -1; - position: absolute; - top: -0.25rem; - right: 0; - bottom: -0.25rem; - left: 0; - border-radius: 0.25rem; - background-color: var(--c-highlight); - } - } } [data-language="aurebesh"] { @@ -512,12 +308,25 @@ h1, h2, h3, h4 { + position: relative; font-weight: 700; - margin: 1rem calc(-0.5rem - var(--inset)) 0; - padding: 0 calc(0.5rem + var(--inset)); + text-shadow: 0 0 0.2em var(--c-highlight); &:hover .header-anchor { opacity: 1; } + &::after { + opacity: 0.5; + content: ''; + position: absolute; + z-index: -1; + bottom: 0; + left: -4rem; + height: 4em; + width: 30rem; + max-width: 100%; + /* outline: 1px solid red; */ + background: radial-gradient(ellipse farthest-side at 50% 100%, var(--c-highlight), transparent); + } } main { h1, @@ -525,12 +334,6 @@ main { h3, h4 { clear: both; - background-image: linear-gradient( - 50deg, - var(--c-highlight) 0%, - var(--c-highlight) calc(var(--inset) * 0.25), - transparent calc(var(--inset) + 12rem) - ); margin-bottom: 0.25lh; } padding: 0 var(--inset); diff --git a/site/_includes/-header.njk b/site/_includes/-header.njk index f4b29af..3ee0275 100644 --- a/site/_includes/-header.njk +++ b/site/_includes/-header.njk @@ -9,8 +9,9 @@ /books
- - + + + / @@ -18,9 +19,7 @@ const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); const defaultPrefs = { language: 'english', - theme: darkModeMediaQuery.matches - ? 'dark' - : 'light' + theme: 'auto' }; Object.entries(defaultPrefs).forEach(([key, defaultPref]) => { const currentPref = localStorage.getItem(key) ?? defaultPref; @@ -31,18 +30,6 @@ }) }) }); - darkModeMediaQuery.addEventListener('change', e => { - if (localStorage.getItem('theme') != null) { - return; - } - applyPreference( - 'theme', - e.matches - ? 'dark' - : 'light', - false - ); - }) function applyPreference(key, value, shouldSave) { document.body.setAttribute(`data-${key}`, value); document.querySelectorAll(`input[name=${key}]`).forEach(input => { @@ -57,29 +44,13 @@
-
-
-
-

{{ tag | capitalize if tag else title }}

-
- {%- if author -%} - {{ author }} - {%- endif -%} - {%- if date -%} - {{ date | formatDate("MMMM D, YYYY") }} - {%- endif -%} -
-
-
-
-
-
-
-
-
-
-
-
-
+

{{ tag | capitalize if tag else title }}

+
+ {%- if author -%} + {{ author }} + {%- endif -%} + {%- if date -%} + {{ date | formatDate("MMMM D, YYYY") }} + {%- endif -%}
- + \ No newline at end of file diff --git a/site/_includes/base.njk b/site/_includes/base.njk index 7563d8d..618bebf 100644 --- a/site/_includes/base.njk +++ b/site/_includes/base.njk @@ -8,8 +8,6 @@ title: Joshua's Homepage - - {{ computedTitle }} - {{ site.title }} diff --git a/site/pages/home.md b/site/pages/home.md index ead9e8d..3a7bd46 100644 --- a/site/pages/home.md +++ b/site/pages/home.md @@ -6,6 +6,6 @@ permalink: / I'm Joshua Seigler, a homeschooled kid born in the 80s. I've watched technology advance from dial-up and Geocities pages, to federated social media and decentralized autonomous organizations. -I am currently looking for a new software engineering role! I have fifteen years of engineering experience, with a specialization in front-end development for web and mobile. See [my professional timeline](/timeline) for more information. +At the moment I work for a risk analysis startup called QI Path. I have been a software engineer since 2010, and my focus has been on front-end development for web and mobile. See [my professional timeline](/timeline) for more information. -If you would like to reach me, you can [send me electronic mail](mailto:joshua@seigler.net?subject=found+your+website) or [book an "unoffice hours" chat](https://appointments.apps.seigler.net)[?](https://interconnected.org/home/2020/09/24/unoffice_hours) +If you would like to connect, you can [send me electronic mail](mailto:joshua@seigler.net?subject=found+your+website) or [book an "unoffice hours" chat](https://appointments.apps.seigler.net)[?](https://interconnected.org/home/2020/09/24/unoffice_hours)