Add navbar and jumbotron styling
This commit is contained in:
parent
192dcfebb4
commit
0c27dacd95
|
|
@ -1,9 +1,24 @@
|
|||
---
|
||||
interface Props {
|
||||
shape: "square" | "rounded";
|
||||
text: string;
|
||||
type: "primary" | "secondary";
|
||||
}
|
||||
|
||||
const { text } = Astro.props as Props;
|
||||
const { shape, text, type } = Astro.props as Props;
|
||||
---
|
||||
|
||||
<a href="#0">{text}</a>
|
||||
<a
|
||||
class:list={[
|
||||
"text-lg py-2 px-5 transition-colors ease-in-out duration-200",
|
||||
{
|
||||
"bg-blue-500 text-white hocus:bg-blue-600": type == "primary",
|
||||
"bg-gray-500 text-white hocus:bg-gray-600": type == "secondary",
|
||||
"rounded-md": shape == "rounded",
|
||||
"rounded-none": shape == "square",
|
||||
},
|
||||
]}
|
||||
href="#0"
|
||||
>
|
||||
{text}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@ interface Props {
|
|||
const { title } = Astro.props as Props;
|
||||
---
|
||||
|
||||
<div>
|
||||
<h1>{title}</h1>
|
||||
<div class="max-w-2xl mx-auto px-4 py-24 text-center">
|
||||
<h1 class="text-4xl">{title}</h1>
|
||||
|
||||
<slot />
|
||||
<div class="mt-3">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,24 +6,26 @@ interface Props {
|
|||
const { title } = Astro.props as Props;
|
||||
---
|
||||
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="mr-2"
|
||||
>
|
||||
<path
|
||||
d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
|
||||
></path>
|
||||
<circle cx="12" cy="13" r="4"></circle>
|
||||
</svg>
|
||||
<div class="px-4 py-3.5 bg-gray-750 text-white">
|
||||
<div class="max-w-6xl mx-auto px-6 flex items-center gap-3">
|
||||
<svg
|
||||
class=""
|
||||
fill="none"
|
||||
height="20"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"
|
||||
></path>
|
||||
<circle cx="12" cy="13" r="4"></circle>
|
||||
</svg>
|
||||
|
||||
<p>{title}</p>
|
||||
<p class="font-semibold text-xl tracking-wide">{title}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,27 +5,27 @@ import Navbar from "../components/Navbar.astro";
|
|||
---
|
||||
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body>
|
||||
<Navbar title="Album" />
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>Astro</title>
|
||||
</head>
|
||||
<body class="font-sans">
|
||||
<Navbar title="Album" />
|
||||
|
||||
<Jumbotron title="Album example">
|
||||
<p>
|
||||
Something short and leading about the collection below—its contents, the
|
||||
creator, etc. Make it short and sweet, but not too short so folks don't
|
||||
simply skip over it entirely.
|
||||
</p>
|
||||
<Jumbotron title="Album example">
|
||||
<p class="text-base leading-relaxed text-gray-500 sm:text-lg">
|
||||
Something short and leading about the collection below—its contents, the
|
||||
creator, etc. Make it short and sweet, but not too short so folks don't
|
||||
simply skip over it entirely.
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<Button text="Main call to action" />
|
||||
<Button text="Secondary action" />
|
||||
</div>
|
||||
</Jumbotron>
|
||||
</body>
|
||||
<div class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1">
|
||||
<Button shape="rounded" type="primary" text="Main call to action" />
|
||||
<Button shape="rounded" type="secondary" text="Secondary action" />
|
||||
</div>
|
||||
</Jumbotron>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,22 @@
|
|||
const colors = require('tailwindcss/colors');
|
||||
const plugin = require("tailwindcss/plugin");
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
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}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
gray: {
|
||||
750: "#343a40",
|
||||
...colors.neutral,
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
plugin(({ addVariant }) => {
|
||||
addVariant('hocus', ['&:hover', '&:focus'])
|
||||
}),
|
||||
],
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue