From 00fa1c07f8eba5abfe4dcf2dca2a2770280bd14d Mon Sep 17 00:00:00 2001 From: syntaxbullet Date: Fri, 7 Feb 2025 12:50:32 +0100 Subject: [PATCH] chore: add some basic styling --- astro.config.mjs | 5 + src/components/Footer.astro | 23 +--- src/components/Header.astro | 43 +----- src/components/HeaderLink.astro | 10 -- src/consts.ts | 2 +- src/layouts/BlogPost.astro | 39 ------ src/layouts/Layout.astro | 9 -- src/styles/global.css | 232 +++++++++++++------------------- 8 files changed, 105 insertions(+), 258 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index 363ae85..e08efea 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -6,4 +6,9 @@ import mdx from "@astrojs/mdx"; export default defineConfig({ site: "https://w.ayau.me", integrations: [mdx()], + markdown: { + shikiConfig: { + theme: 'github-light-default', + } + }, }); diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 6e37134..e59ad6f 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -4,25 +4,4 @@ const today = new Date(); - + \ No newline at end of file diff --git a/src/components/Header.astro b/src/components/Header.astro index 6076664..cf1eca0 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -12,45 +12,4 @@ import { SITE_TITLE } from "../consts"; About - - + \ No newline at end of file diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro index b07618c..6202e60 100644 --- a/src/components/HeaderLink.astro +++ b/src/components/HeaderLink.astro @@ -12,13 +12,3 @@ const isActive = href === pathname || href === "/" + (subpath?.[0] || ""); - diff --git a/src/consts.ts b/src/consts.ts index f6a0b93..5841dc2 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -1,2 +1,2 @@ -export const SITE_TITLE = "Foo"; +export const SITE_TITLE = "Miraris"; export const SITE_DESCRIPTION = "Bar"; diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro index 791dca2..0a900cf 100644 --- a/src/layouts/BlogPost.astro +++ b/src/layouts/BlogPost.astro @@ -13,45 +13,6 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props; - diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index e455c61..a25b9e6 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -11,12 +11,3 @@ - - diff --git a/src/styles/global.css b/src/styles/global.css index 1f39f4f..2c77fe5 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,154 +1,116 @@ -/* - The CSS in this style tag is based off of Bear Blog's default CSS. - https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css - License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md - */ - :root { - --accent: #2337ff; - --accent-dark: #000d8a; - --black: 15, 18, 25; - --gray: 96, 115, 159; - --gray-light: 229, 233, 240; - --gray-dark: 34, 41, 57; - --gray-gradient: rgba(var(--gray-light), 50%), #fff; - --box-shadow: 0 2px 6px rgba(var(--gray), 25%), - 0 8px 24px rgba(var(--gray), 33%), 0 16px 32px rgba(var(--gray), 33%); + --max-page-width: 960px; + --max-prose-width: 960px; + --text-size--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem); + --text-size--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem); + --text-size-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem); + --text-size-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem); + --text-size-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem); + --text-size-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem); + --text-size-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem); + --text-size-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem); } -@font-face { - font-family: "Atkinson"; - src: url("/fonts/atkinson-regular.woff") format("woff"); - font-weight: 400; - font-style: normal; - font-display: swap; -} -@font-face { - font-family: "Atkinson"; - src: url("/fonts/atkinson-bold.woff") format("woff"); - font-weight: 700; - font-style: normal; - font-display: swap; -} -body { - font-family: "Atkinson", sans-serif; + +html, body { + padding: 24px; margin: 0; - padding: 0; - text-align: left; - background: linear-gradient(var(--gray-gradient)) no-repeat; - background-size: 100% 600px; - word-wrap: break-word; - overflow-wrap: break-word; - color: rgb(var(--gray-dark)); - font-size: 20px; - line-height: 1.7; + box-sizing: border-box; + max-width: var(--max-page-width); + margin: 0 auto; } -main { - width: 720px; - max-width: calc(100% - 2em); - margin: auto; - padding: 3em 1em; -} -h1, -h2, -h3, -h4, -h5, -h6 { - margin: 0 0 0.5rem 0; - color: rgb(var(--black)); - line-height: 1.2; +.prose { + max-width: var(--max-prose-width) !important; + margin: 0 auto; + font-size: var(--text-size-0); } + h1 { - font-size: 3.052em; + font-size: var(--text-size-3); } h2 { - font-size: 2.441em; + font-size: var(--text-size-2); } h3 { - font-size: 1.953em; + font-size: var(--text-size-1); } -h4 { - font-size: 1.563em; +main { + display: flex; + flex-direction: column; } -h5 { - font-size: 1.25em; + +header { + padding: 24px 0; + display: flex; + align-items: center; } -strong, -b { - font-weight: 700; +.astro-code { + background: #eee !important; + padding: 8px; + font-size: var(--text-size--1); } -a { - color: var(--accent); -} -a:hover { - color: var(--accent); -} -p { - margin-bottom: 1em; -} -.prose p { - margin-bottom: 2em; -} -textarea { - width: 100%; - font-size: 16px; -} -input { - font-size: 16px; -} -table { - width: 100%; -} -img { - max-width: 100%; - height: auto; - border-radius: 8px; -} -code { - padding: 2px 5px; - background-color: rgb(var(--gray-light)); - border-radius: 2px; -} -pre { - padding: 1.5em; - border-radius: 8px; -} -pre > code { - all: unset; -} -blockquote { - border-left: 4px solid var(--accent); - padding: 0 0 0 20px; - margin: 0px; - font-size: 1.333em; -} -hr { - border: none; - border-top: 1px solid rgb(var(--gray-light)); -} -@media (max-width: 720px) { - body { - font-size: 18px; +nav { + display: flex; + align-items: baseline; + gap: 24px; + color: #000; + + h2 { + font-size: var(--text-size-1); } - main { - padding: 1em; + + a { + color: #000; + font-weight: 500; + text-decoration: none; + } + a.active { + text-decoration: underline !important; } } -.sr-only { - border: 0; - padding: 0; - margin: 0; - position: absolute !important; - 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 separate lines and some screen readers do not understand line feeds as a space */ - white-space: nowrap; +.internal-links { + display: flex; + gap: 16px; + font-size: var(--text-size-0); +} + +body :not(:is(h1,h2,h3,h4,h5,h6)) { + line-height: 1.5; +} + +:is(h1,h2,h3,h4,h5,h6) { + line-height: 1.1; +} +footer { + margin-top: 240px; +} +p.date { + color: #aaa !important; + font-size: var(--text-size--1); +} +h4.title { + font-size: var(--text-size-0) !important; + margin-bottom: 4px !important; +} +main section ul { + gap: 16px !important; +} +main section ul li{ + margin: 0 !important; + border-bottom: 1px solid #eee; + width: 100% !important; + padding: 8px 0; +} +main section ul li img{ + display: none; +} +main section ul li h4 { + color: black; + text-align: left !important; + font-size: var(--text-size-0) !important; +} +main section ul li a { + color: black; + text-align: left !important; + font-size: var(--text-size-0) !important; }