Fix tailwind style issue, header bottom margin, hide experiments link

- custom base styles weren't always overriding tailwind's base styles
solomonhawk · Sep 2, 2022 · ec83171 · ec83171
1 parent 17b5a2b
commit ec83171
Show file tree

Hide file tree

Showing 13 changed files with 156 additions and 138 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -8,5 +8,12 @@ import mdx from '@astrojs/mdx';
 // https://astro.build/config
 export default defineConfig({
   site: 'https://solomonhawk.com',
-  integrations: [mdx(), react(), tailwind(), sitemap()]
+  integrations: [
+    mdx(),
+    react(),
+    sitemap(),
+    tailwind({
+      config: { applyBaseStyles: false },
+    })
+  ]
 });
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -1,5 +1,5 @@
 ---
-import "../styles/global.css";
+import "../styles/index.css";
 
 export interface Props {
 	title: string;

diff --git a/src/components/BlogPost.astro b/src/components/BlogPost.astro
@@ -10,7 +10,7 @@ export interface Props {
 const { title, publishDate, heroImage, alt, tags } = Astro.props;
 ---
 
-<article class="mt-8">
+<article>
 	<header>
 		{
 			heroImage && (

diff --git a/src/components/PageHeader.astro b/src/components/PageHeader.astro
@@ -10,13 +10,13 @@ import Logo from "./Logo.astro";
     Skip to Main Content</a
   >
 
-  <div class="my-4 flex gap-4 md:gap-6 items-center">
+  <div class="my-4 flex gap-4 md:gap-6 items-center font-mono">
     <a href="/" class="text-sm">
       <Logo class="w-8 h-8 block mx-auto" />
     </a>
 
     <a href="/writing" class="text-sm">Writing</a>
-    <a href="/experiments" class="text-sm">Experiments</a>
+    <!-- <a href="/experiments" class="text-sm">Experiments</a> -->
     <a href="mailto:shawkdsn@gmail.com" class="text-sm">Contact</a>
   </div>
 </header>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -25,9 +25,11 @@ const {
 		<PageHeader />
 
 		<main id="content" class="container mx-auto max-w-3xl px-4 my-4">
-			<BlogPost {title} {author} {heroImage} {publishDate} {alt} {tags}>
-				<slot />
-			</BlogPost>
+			<div class="mt-8 sm:mt-12 md:mt-16">
+				<BlogPost {title} {author} {heroImage} {publishDate} {alt} {tags}>
+					<slot />
+				</BlogPost>
+			</div>
 		</main>
 	</body>
 </html>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -15,7 +15,7 @@ const { title, description, permalink } = content;
     <PageHeader />
 
     <main id="content" class="container mx-auto max-w-3xl px-4 my-4">
-      <div class="flex flex-col md:flex-row">
+      <div class="flex flex-col md:flex-row mt-8 sm:mt-12 md:mt-16">
         <div class="grow">
           <slot name="main" />
         </div>

diff --git a/src/pages/experiments/index.astro b/src/pages/experiments/index.astro
@@ -7,14 +7,15 @@ let permalink = new URL(Astro.url.pathname, Astro.site);
 ---
 
 <PageLayout content={{ title, description, permalink }}>
-  <section class="mt-8" slot="main">
+  <section slot="main">
     <h2 class="h1 mb-heading-lg md:mb-heading-xl">
       <span class="text-green-500">.</span><span class="text-gray-500">0x</span
       >3XP3R1M3N75
     </h2>
 
     <div class="space-y-8">
-      <strong>Caution</strong>: this is the mad science zone.
+      <strong class="font-mono uppercase">Caution</strong>: this is the mad
+      science zone.
     </div>
   </section>
 </PageLayout>
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
@@ -6,7 +6,7 @@ export const description =
 export const permalink = "https://solomonhawk.com/";
 
 <PageLayout content={{ title, description, permalink }}>
-	<article class="mt-8" slot="main">
+	<article slot="main">
 		<h2 class="h1 mb-heading-lg md:mb-heading-xl">
 			<span class="text-green-500">.</span><span class="text-gray-500">0x</span>6R3371N65
 		</h2>

diff --git a/src/pages/writing/[...page].astro b/src/pages/writing/[...page].astro
@@ -23,7 +23,7 @@ const { page } = Astro.props;
 ---
 
 <PageLayout content={{ title, description, permalink }}>
-	<section class="mt-8" slot="main">
+	<section slot="main">
 		<h2 class="h1 mb-heading-lg md:mb-heading-xl">
 			<span class="text-green-500">.</span><span class="text-gray-500">0x</span
 			>WR171N6{page.currentPage > 1 ? `/${page.currentPage}` : ""}

diff --git a/src/pages/writing/tags/[tag]/[...page].astro b/src/pages/writing/tags/[tag]/[...page].astro
@@ -33,7 +33,7 @@ const { tag } = Astro.params;
 ---
 
 <PageLayout content={{ title, description, permalink }}>
-	<section class="mt-8" slot="main">
+	<section slot="main">
 		<h2 class="h1 mb-heading-lg md:mb-heading-xl">
 			<span class="text-green-500">.</span><span class="text-gray-500">0x</span
 			>WR171N6/{tag}{page.currentPage > 1 ? `/${page.currentPage}` : ""}

diff --git a/src/pages/writing/tags/index.astro b/src/pages/writing/tags/index.astro
@@ -12,7 +12,7 @@ const tags = groupTagsByCount(posts);
 ---
 
 <PageLayout content={{ title, description, permalink }}>
-	<section class="mt-8" slot="main">
+	<section slot="main">
 		<h2 class="h1 mb-heading-lg md:mb-heading-xl">
 			<span class="text-green-500">.</span><span class="text-gray-500">0x</span
 			>WR171N6/T465

diff --git a/src/styles/global.css b/src/styles/global.css
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -0,0 +1,131 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--user-font-scale: 1rem - 16px;
+	}
+
+	body {
+		@apply bg-black font-body text-gray-200 dark:antialiased;
+		font-size: 1rem;
+		font-size: clamp(0.875rem, 0.4626rem + 1.0309vw + var(--user-font-scale), 1.125rem);
+		line-height: 1.625;
+	}
+
+	a {
+		@apply text-green-400 font-bold hover:underline focus:underline;
+	}
+
+	blockquote {
+		@apply relative subpixel-antialiased font-callout border-l-4 border-green-500 text-green-500 px-4 py-2 md:px-6 text-xl md:text-2xl lg:text-3xl;
+	}
+}
+
+@layer components {
+	.h1, .h2, .h3, .h4, .h5, .h6,
+	.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
+		@apply font-mono font-normal text-white tracking-tight;
+	}
+
+	.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
+		@apply text-yellow-400 mt-[2.5rem] md:mt-[3rem];
+	}
+
+	.h1, .prose h1 {
+		@apply text-2xl md:text-3xl lg:text-4xl;
+	}
+
+	.h2, .prose h2 {
+		@apply text-xl md:text-2xl lg:text-3xl;
+	}
+
+	.h3, .prose h3 {
+		@apply text-lg md:text-xl lg:text-2xl;
+	}
+
+	.h4, .prose h4 {
+		@apply text-base md:text-lg lg:text-xl;
+	}
+
+	.h5, .prose h5 {
+		@apply text-base md:text-lg lg:text-xl uppercase;
+	}
+
+	.h6, .prose h6 {
+		@apply text-base md:text-lg lg:text-xl uppercase font-callout;
+	}
+
+	.mb-heading-base {
+		@apply mb-[1rem];
+	}
+
+	.mb-heading-md {
+		@apply mb-[1.5rem];
+	}
+
+	.mb-heading-lg {
+		@apply mb-[2rem];
+	}
+
+	.mb-heading-xl {
+		@apply mb-[3rem];
+	}
+
+	.pagination {
+		@apply border-t border-gray-800 py-4 my-8 flex;
+	}
+
+	.hr {
+		@apply text-xs before:content-['▙▘▟▝▖▛▍▞▃▉▗▚▜'] before:text-green-500 before:font-mono before:block before:mx-auto block my-8;
+	}
+
+	.prose > * + * {
+		@apply mt-[1.25rem] md:mt-[1.5rem];
+	}
+
+	.prose ol {
+		@apply list-decimal list-inside space-y-4;
+	}
+
+	.prose ul {
+		@apply list-disc list-inside space-y-4;
+	}
+
+	.prose strong {
+		@apply font-bold;
+	}
+
+	.prose hr {
+		@apply border-none overflow-visible text-xs before:content-['▙▘▟▝▖▛▍▞▃▉▗▚▜'] before:text-green-500 before:font-mono before:block block my-8;
+	}
+
+	.prose code {
+		@apply text-yellow-200 break-words;
+	}
+
+	.astro-code {
+		@apply p-2 md:p-4 rounded border-2 border-white/10;
+	}
+
+	.blog-tags {
+		@apply flex gap-1 flex-wrap;
+	}
+
+	.blog-tags.blog-tags-lg {
+		@apply gap-2;
+	}
+
+	.blog-tag {
+		@apply rounded-tr rounded-bl bg-transparent text-gray-500 font-mono font-bold text-xs px-1 py-0.5 hover:no-underline focus:no-underline;
+		@apply before:text-green-500 before:content-['#'];
+		@apply group-hover:bg-green-500 group-hover:text-black group-hover:before:text-black;
+		@apply hover:bg-green-500 hover:text-black hover:before:text-black;
+		@apply focus:bg-green-500 focus:text-black focus:before:text-black;
+	}
+
+	.blog-tags.blog-tags-lg .blog-tag {
+		@apply text-lg p-2;
+	}
+}