diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 3b9af18..0a5e895 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -1,51 +1,81 @@ diff --git a/src/components/Header.astro b/src/components/Header.astro index cb6a688..dd7727b 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -6,40 +6,40 @@ import { SITE_TITLE } from "../consts";
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro index 3dd439b..d60ab64 100644 --- a/src/components/HeaderLink.astro +++ b/src/components/HeaderLink.astro @@ -16,9 +16,10 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, ''); a { display: inline-block; text-decoration: none; + position: relative; } a.active { - font-weight: bolder; - text-decoration: underline; + font-weight: 700; + color: var(--link); } diff --git a/src/components/rad/RadCallout.astro b/src/components/rad/RadCallout.astro index 21fa6da..c0d39d7 100644 --- a/src/components/rad/RadCallout.astro +++ b/src/components/rad/RadCallout.astro @@ -7,8 +7,8 @@ display: block; padding: var(--default-padding); margin-bottom: var(--default-padding); - border-radius: var(--radius-3); + border-radius: var(--radius-2); background-color: var(--surface-2); - box-shadow: var(--shadow-2); + border: 1px solid var(--surface-3); } diff --git a/src/components/rad/RadPostTeaser.astro b/src/components/rad/RadPostTeaser.astro index 3b78ead..7053e90 100644 --- a/src/components/rad/RadPostTeaser.astro +++ b/src/components/rad/RadPostTeaser.astro @@ -29,10 +29,10 @@ const { collection, slug } = Astro.props.post;

-

+

{description}

- Read more → + Read more → @@ -45,21 +45,39 @@ const { collection, slug } = Astro.props.post; & .title { margin: 0; color: var(--text-1); - line-height: 1; + line-height: 1.2; + font-size: var(--font-size-3); + } + & .title a { + text-decoration: none; + color: inherit; + } + & .title a:hover { + color: var(--link); } & .date { - margin: 0; + margin: var(--size-1) 0 0; color: var(--text-2); + font-size: var(--font-size-1); + } + & .description { + color: var(--text-2); + font-size: var(--font-size-2); + line-height: 1.5; + } + & .read-more { + font-size: var(--font-size-1); + font-weight: 600; } & img { - margin: 0 0 var(--size-7) 0; + margin: 0 0 var(--size-5) 0; box-shadow: var(--box-shadow); - border-radius: 12px; + border-radius: var(--radius-2); aspect-ratio: 16 / 9; object-fit: cover; @media (min-width: 720px) { width: 35%; - margin: 0 0 0 var(--size-3); + margin: 0 0 0 var(--size-5); } } } diff --git a/src/layouts/Post.astro b/src/layouts/Post.astro index 9834459..30379f6 100644 --- a/src/layouts/Post.astro +++ b/src/layouts/Post.astro @@ -28,25 +28,27 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; width: 100%; max-width: 100%; margin: 0; - padding: var(--size-3); + padding: 0; } .hero-image { width: 100%; - margin-top: var(--size-7); + max-width: 900px; + margin: var(--size-7) auto 0; + padding: 0 var(--size-3); } .hero-image img { display: block; - margin: 0 auto; - border-radius: 12px; + width: 100%; + border-radius: var(--radius-3); box-shadow: var(--box-shadow); aspect-ratio: 16 / 9; object-fit: cover; } .prose { - width: 760px; + width: 720px; max-width: 100%; margin: auto; - padding: 1em; + padding: var(--size-3) var(--size-5); img { box-shadow: var(--box-shadow); } @@ -55,20 +57,33 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; } } .title { - margin-bottom: 1em; - padding: 1em 0; - text-align: center; - line-height: 1; + margin-bottom: var(--size-7); + padding: var(--size-5) 0 0; } .title h1 { - margin: 0 0 0.5em 0; + margin: 0 0 var(--size-3) 0; + font-size: var(--font-size-7); + letter-spacing: -0.03em; + line-height: 1.1; + @media (max-width: 720px) { + font-size: var(--font-size-6); + } } .date { - margin-bottom: 0.5em; color: var(--text-2); + font-size: var(--font-size-1); + text-transform: uppercase; + letter-spacing: 0.05em; } .last-updated-on { font-style: italic; + text-transform: none; + letter-spacing: normal; + } + .divider { + border: none; + border-top: 2px solid var(--surface-3); + margin: var(--size-5) 0 0; } @@ -86,19 +101,18 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; }
-
+

{ updatedDate && ( -

- Last updated on{" "} - -
+ + · Updated + ) } -
+

{title}

-
+
diff --git a/src/pages/index.astro b/src/pages/index.astro index f45e1f4..7652e14 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -25,7 +25,7 @@ const posts = await getSortedPosts(4);

BrianPerry.dev

-

A serious and professional website

+

A serious and professional website

I'm a web developer and a code { @@ -121,10 +146,16 @@ pre>code { } blockquote { - border-left: 4px solid var(--accent); - padding: 0 0 0 20px; - margin: 0px; - font-size: 1.333em; + border-left: 3px solid var(--accent); + padding: 0 0 0 var(--size-5); + margin: var(--size-5) 0; + font-size: 1.2em; + font-style: italic; + color: var(--text-2); +} + +blockquote p { + font-size: inherit; } hr { @@ -141,10 +172,6 @@ hr { main { padding: 1em; } - - :where(h1) { - font-size: var(--font-size-6); - } } .sr-only { @@ -155,13 +182,9 @@ hr { height: 1px; width: 1px; overflow: hidden; - /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */ clip: rect(1px 1px 1px 1px); - /* maybe deprecated but we need to support legacy browsers */ clip: rect(1px, 1px, 1px, 1px); - /* modern browsers, clip-path works inwards from each corner */ clip-path: inset(50%); - /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */ white-space: nowrap; } @@ -181,10 +204,6 @@ hr { display: block; } -:where(blockquote p) { - font-size: var(--font-size-4); -} - :where(blockquote, :not(blockquote)>cite) { border-inline-start-width: 0; } @@ -222,3 +241,8 @@ article iframe { width: 100%; margin-bottom: var(--size-7); } + +/* Transition helper */ +a, button { + transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; +}