migrate layout from old site

raygesualdo · Dec 26, 2023 · 147ca11 · 147ca11
1 parent 7b205f5
commit 147ca11
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 47 deletions.
diff --git a/src/components/IconGitHub.astro b/src/components/IconGitHub.astro
@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'svg'>
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  view-box="0 0 24 24"
+  {...Astro.props}
+>
+  <path
+    fill="currentColor"
+    d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.11.793-.26.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.09-.745.083-.73.083-.73 1.205.085 1.84 1.238 1.84 1.238 1.07 1.834 2.806 1.304 3.49.997.108-.776.42-1.306.763-1.605-2.665-.305-5.467-1.334-5.467-5.93 0-1.312.47-2.382 1.236-3.222-.125-.303-.536-1.524.116-3.176 0 0 1.008-.322 3.3 1.23A11.51 11.51 0 0 1 12 5.803c1.02.005 2.047.138 3.006.404 2.29-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.236 1.91 1.236 3.22 0 4.61-2.807 5.625-5.48 5.922.43.372.824 1.102.824 2.222v3.293c0 .32.192.694.8.576C20.567 21.796 24 17.3 24 12c0-6.627-5.373-12-12-12z"
+  ></path>
+</svg>
diff --git a/src/components/IconTwitter.astro b/src/components/IconTwitter.astro
@@ -0,0 +1,18 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'svg'>
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  view-box="0 0 24 24"
+  {...Astro.props}
+>
+  <path
+    fill="currentColor"
+    d="M24 4.557a9.83 9.83 0 0 1-2.828.775 4.932 4.932 0 0 0 2.165-2.724 9.864 9.864 0 0 1-3.127 1.195 4.916 4.916 0 0 0-3.594-1.555c-3.18 0-5.515 2.966-4.797 6.045A13.978 13.978 0 0 1 1.67 3.15a4.93 4.93 0 0 0 1.524 6.573 4.903 4.903 0 0 1-2.23-.616c-.053 2.28 1.582 4.415 3.95 4.89a4.935 4.935 0 0 1-2.224.084 4.928 4.928 0 0 0 4.6 3.42A9.9 9.9 0 0 1 0 19.54a13.94 13.94 0 0 0 7.548 2.212c9.142 0 14.307-7.72 13.995-14.646A10.025 10.025 0 0 0 24 4.556z"
+  ></path>
+</svg>
diff --git a/src/components/Link.astro b/src/components/Link.astro
@@ -0,0 +1,7 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+type Props = HTMLAttributes<'a'>
+---
+
+<a {...Astro.props} class="text-sky-600 underline"></a>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,51 +1,76 @@
 ---
+import Link from '../components/Link.astro'
+import IconGitHub from '../components/IconGitHub.astro'
+import IconTwitter from '../components/IconTwitter.astro'
+
 interface Props {
-	title: string;
+  title?: string
 }
 
-const { title } = Astro.props;
+const { title } = Astro.props
 ---
 
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="description" content="Astro description" />
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
-	</head>
-	<body>
-		<slot />
-	</body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="The personal site of Ray Gesualdo" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" href="/favicon.ico" />
+    <link href="//fonts.googleapis.com/css?family=Montserrat:400" rel="stylesheet" />
+    <title>{title ?? 'RayGesualdo.com'}</title>
+  </head>
+  <body class="font-body lg:text-lg dark:bg-[#070a13] dark:text-slate-200">
+    <a
+      href="#main"
+      class="absolute left-[50%] -translate-x-1/2 bg-indigo-700 font-semibold text-white py-1 px-3 rounded-b -translate-y-full focus:translate-y-0"
+    >
+      Skip to content
+    </a>
+    <header class="h-32 py-2 md:py-0 md:h-24 bg-slate-800 text-white font-display">
+      <div
+        class="h-full grid md:gap-x-2 justify-between items-center text-center md:text-left grid-cols-1 md:grid-cols-[1fr,max-content,max-content] Xmax-w-5xl mx-auto px-8"
+      >
+        <div>
+          <a href="/" class="text-xl py-1 uppercase">Ray Gesualdo</a>
+        </div>
+        <nav class="space-x-4 md:space-x-2 flex justify-center items-center">
+          <a href="/about" class="block p-1.5 md:p-2 rounded hover:bg-white/10"> About</a>
+          <a href="/talks" class="block p-1.5 md:p-2 rounded hover:bg-white/10"> Talks</a>
+          <a href="/rss.xml" class="block p-1.5 md:p-2 rounded hover:bg-white/10"> Feed</a>
+        </nav>
+        <div class="space-x-3 md:space-x-1 flex justify-center items-center">
+          <a
+            class="block px-1.5 md:px-2.5 py-1.5 md:py-3 rounded hover:bg-white/10"
+            href="https://twitter.com/RayGesualdo"
+          >
+            <span class="sr-only">My Twitter profile</span>
+            <IconTwitter class="inline text-inherit -mt-1" />
+          </a>
+          <a
+            class="block px-1.5 md:px-2.5 py-1.5 md:py-3 rounded hover:bg-white/10"
+            href="http://github.com/raygesualdo"
+          >
+            <span class="sr-only">My GitHub profile</span>
+            <IconGitHub class="inline text-inherit -mt-1" />
+          </a>
+        </div>
+      </div>
+    </header>
+    <div class="grid grid-cols-[0fr,100%,0fr] md:grid-cols-[1fr,67ch,1fr]">
+      <div></div>
+      <main id="main" class="mt-4 md:mt-12 p-4">
+        <slot />
+      </main>
+      <div></div>
+    </div>
+    <footer class="p-8 text-center text-gray-500 text-sm">
+      Copyright © Ray Gesualdo {new Date().getFullYear()} |{' '}
+      <Link href="https://github.com/raygesualdo/raygesualdo.com" class="text-sky-600 underline">
+        View source code
+      </Link>{' '}
+       |{' '}
+      <button class="text-sky-600 underline"> Toggle theme</button>
+    </footer>
+  </body>
 </html>
-<style is:global>
-	:root {
-		--accent: 136, 58, 234;
-		--accent-light: 224, 204, 250;
-		--accent-dark: 49, 10, 101;
-		--accent-gradient: linear-gradient(
-			45deg,
-			rgb(var(--accent)),
-			rgb(var(--accent-light)) 30%,
-			white 60%
-		);
-	}
-	html {
-		font-family: system-ui, sans-serif;
-		background: #13151a;
-		background-size: 224px;
-	}
-	code {
-		font-family:
-			Menlo,
-			Monaco,
-			Lucida Console,
-			Liberation Mono,
-			DejaVu Sans Mono,
-			Bitstream Vera Sans Mono,
-			Courier New,
-			monospace;
-	}
-</style>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -1,8 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {},
-	},
-	plugins: [],
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  darkMode: 'class',
+  theme: {
+    fontFamily: {
+      display: 'Montserrat, sans-serif',
+      body: 'Georgia, Cambria, serif',
+    },
+    extend: {},
+  },
+  plugins: [],
 }