opdavies/bootstrap-with-tailwind
1
0
Fork 0
Code Issues 1 Pull requests Actions Packages Projects Releases Wiki Activity

Add navbar and jumbotron styling

Browse source
This commit is contained in:
Oliver Davies 2023-01-09 12:00:00 +00:00
parent 192dcfebb4
commit 0c27dacd95
5 changed files with 83 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/components/Button.astro
View file

@ -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
src/components/Jumbotron.astro
View file

@ -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>
<div class="mt-3">
<slot />
</div>
</div>

20
src/components/Navbar.astro
View file

@ -6,18 +6,19 @@ interface Props {
const { title } = Astro.props as Props;
---
<div>
<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
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
class=""
fill="none"
stroke="currentColor"
stroke-width="2"
height="20"
stroke-linecap="round"
stroke-linejoin="round"
class="mr-2"
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"
@ -25,5 +26,6 @@ const { title } = Astro.props as Props;
<circle cx="12" cy="13" r="4"></circle>
</svg>
<p>{title}</p>
<p class="font-semibold text-xl tracking-wide">{title}</p>
</div>
</div>

10
src/pages/index.astro
View file

@ -12,19 +12,19 @@ import Navbar from "../components/Navbar.astro";
<meta name="generator" content={Astro.generator} />
<title>Astro</title>
</head>
<body>
<body class="font-sans">
<Navbar title="Album" />
<Jumbotron title="Album example">
<p>
<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 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>

18
tailwind.config.cjs
View file

@ -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: {},
extend: {
colors: {
gray: {
750: "#343a40",
...colors.neutral,
},
plugins: [],
}
},
},
plugins: [
plugin(({ addVariant }) => {
addVariant('hocus', ['&:hover', '&:focus'])
}),
],
}