feat: add CSS variables

fbuireu · Dec 10, 2023 · 91d424a · 91d424a
1 parent 4d7dedc
commit 91d424a
Show file tree

Hide file tree

Showing 18 changed files with 207 additions and 333 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -7,7 +7,6 @@ import netlify from "@astrojs/netlify/functions";
 
 export default defineConfig({
   site: 'https://biancafiore.me',
-  trailingSlash: 'always',
   integrations: [mdx(), sitemap(), react(), partytown()],
   output: "server",
   adapter: netlify(),

diff --git a/package.json b/package.json
@@ -21,6 +21,8 @@
     "@astrojs/react": "^3.0.7",
     "@astrojs/rss": "^4.0.1",
     "@astrojs/sitemap": "^3.0.3",
+    "@fontsource-variable/literata": "^5.0.19",
+    "@fontsource/zilla-slab": "^5.0.8",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "astro": "^4.0.3",

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -1,7 +1,7 @@
 ---
-// Import the global.css file here so that it is included on
-// all pages through the use of the <BaseHead /> component.
-import '../styles/global.css';
+import '../styles/index.css'
+import '@fontsource/zilla-slab';
+import '@fontsource-variable/literata';
 
 interface Props {
 	title: string;
@@ -10,36 +10,22 @@ interface Props {
 }
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
-//
 const { title, description, image = '/blog-placeholder-1.jpg' } = Astro.props;
 ---
 
-<!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <meta name="generator" content={Astro.generator} />
-
-<!-- Font preloads -->
-<link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin />
-<link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin />
-
-<!--&lt;!&ndash; Canonical URL &ndash;&gt;-->
 <link rel="canonical" href={canonicalURL} />
-
- <!--Primary Meta Tags-->
 <title>{title}</title>
 <meta name="title" content={title} />
 <meta name="description" content={description} />
-
- <!--Open Graph / Facebook-->
 <meta property="og:type" content="website" />
 <meta property="og:url" content={Astro.url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
 <meta property="og:image" content={new URL(image, Astro.url)} />
-
- <!--Twitter-->
 <meta property="twitter:card" content="summary_large_image" />
 <meta property="twitter:url" content={Astro.url} />
 <meta property="twitter:title" content={title} />

diff --git a/src/components/layouts/BlogPost.astro b/src/components/layouts/BlogPost.astro
@@ -0,0 +1,46 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import BaseHead from '../BaseHead.astro';
+import Header from '../Header.astro';
+import Footer from '../Footer.astro';
+import FormattedDate from '../FormattedDate.astro';
+
+type Props = CollectionEntry<'blog'>['data'];
+
+const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
+---
+
+<html lang="en">
+	<head>
+		<BaseHead title={title} description={description} />
+	</head>
+
+	<body>
+		<Header />
+		<main>
+			<article>
+				<div class="hero-image">
+					{heroImage && <img width={1020} height={510} src={heroImage} alt="" />}
+				</div>
+				<div class="prose">
+					<div class="title">
+						<div class="date">
+							<FormattedDate date={pubDate} />
+							{
+								updatedDate && (
+									<div class="last-updated-on">
+										Last updated on <FormattedDate date={updatedDate} />
+									</div>
+								)
+							}
+						</div>
+						<h1>{title}</h1>
+						<hr />
+					</div>
+					<slot />
+				</div>
+			</article>
+		</main>
+		<Footer />
+	</body>
+</html>
diff --git a/src/consts.ts b/src/consts.ts
@@ -1,5 +1,2 @@
-// Place any global data in this file.
-// You can import this data from anywhere in your site by using the `import` keyword.
-
-export const SITE_TITLE = 'Astro Blog';
+export const SITE_TITLE = 'Bianca Fiore';
 export const SITE_DESCRIPTION = 'Welcome to my website!';
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
diff --git a/src/pages/about.astro b/src/pages/about.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from '../layouts/BlogPost.astro';
+import Layout from '../components/layouts/BlogPost.astro';
 ---
 
 <Layout

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -1,6 +1,6 @@
 ---
 import { type CollectionEntry, getCollection } from 'astro:content';
-import BlogPost from '../../layouts/BlogPost.astro';
+import BlogPost from '../../components/layouts/BlogPost.astro';
 
 export async function getStaticPaths() {
 	const posts = await getCollection('blog');

diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
@@ -15,75 +15,6 @@ const posts = (await getCollection('blog')).sort(
 <html lang="en">
 	<head>
 		<BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
-		<style>
-			main {
-				width: 960px;
-			}
-			ul {
-				display: flex;
-				flex-wrap: wrap;
-				gap: 2rem;
-				list-style-type: none;
-				margin: 0;
-				padding: 0;
-			}
-			ul li {
-				width: calc(50% - 1rem);
-			}
-			ul li * {
-				text-decoration: none;
-				transition: 0.2s ease;
-			}
-			ul li:first-child {
-				width: 100%;
-				margin-bottom: 1rem;
-				text-align: center;
-			}
-			ul li:first-child img {
-				width: 100%;
-			}
-			ul li:first-child .title {
-				font-size: 2.369rem;
-			}
-			ul li img {
-				margin-bottom: 0.5rem;
-				border-radius: 12px;
-			}
-			ul li a {
-				display: block;
-			}
-			.title {
-				margin: 0;
-				color: rgb(var(--black));
-				line-height: 1;
-			}
-			.date {
-				margin: 0;
-				color: rgb(var(--gray));
-			}
-			ul li a:hover h4,
-			ul li a:hover .date {
-				color: rgb(var(--accent));
-			}
-			ul a:hover img {
-				box-shadow: var(--box-shadow);
-			}
-			@media (max-width: 720px) {
-				ul {
-					gap: 0.5em;
-				}
-				ul li {
-					width: 100%;
-					text-align: center;
-				}
-				ul li:first-child {
-					margin-bottom: 0;
-				}
-				ul li:first-child .title {
-					font-size: 1.563em;
-				}
-			}
-		</style>
 	</head>
 	<body>
 		<Header />

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -4,7 +4,6 @@ import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
 import { ViewTransitions } from 'astro:transitions';
-
 ---
 
 <!doctype html>
@@ -17,6 +16,7 @@ import { ViewTransitions } from 'astro:transitions';
 		<Header title={SITE_TITLE} />
 		<main>
 			<h1>🧑‍🚀 Hello, Astronaut!</h1>
+            <input type="search" placeholder="heheheh">
 			<p>
 				Welcome to the official <a href="https://astro.build/">Astro</a> blog starter template. This
 				template serves as a lightweight, minimally-styled starting point for anyone looking to

diff --git a/src/styles/base/index.css b/src/styles/base/index.css
@@ -0,0 +1,38 @@
+
+*::selection {
+    background-color: var(--primary-main);
+    color: var(--white);
+}
+
+html,
+body {
+    overflow: hidden auto;
+    scroll-behavior: smooth;
+    scrollbar-gutter: stable;
+
+    @media (prefers-reduced-motion: reduce) {
+        scroll-behavior: auto;
+    }
+}
+
+body {
+    -webkit-font-smoothing: antialiased;
+    -webkit-tap-highlight-color: var(--base-font-size);
+    -webkit-touch-callout: none;
+    text-rendering: optimizeLegibility;
+}
+
+
+a {
+    -webkit-tap-highlight-color: transparent;
+    color: inherit;
+    cursor: pointer;
+}
+
+summary {
+    -webkit-tap-highlight-color: transparent;
+}
+
+svg {
+    -webkit-tap-highlight-color: transparent;
+}