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 { interface Props {
shape: "square" | "rounded";
text: string; 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; const { title } = Astro.props as Props;
--- ---
<div> <div class="max-w-2xl mx-auto px-4 py-24 text-center">
<h1>{title}</h1> <h1 class="text-4xl">{title}</h1>
<div class="mt-3">
<slot /> <slot />
</div> </div>
</div>

20
src/components/Navbar.astro
View file

@ -6,18 +6,19 @@ interface Props {
const { title } = Astro.props as 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 <svg
xmlns="http://www.w3.org/2000/svg" class=""
width="20"
height="20"
viewBox="0 0 24 24"
fill="none" fill="none"
stroke="currentColor" height="20"
stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="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 <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" 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> <circle cx="12" cy="13" r="4"></circle>
</svg> </svg>
<p>{title}</p> <p class="font-semibold text-xl tracking-wide">{title}</p>
</div>
</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} /> <meta name="generator" content={Astro.generator} />
<title>Astro</title> <title>Astro</title>
</head> </head>
<body> <body class="font-sans">
<Navbar title="Album" /> <Navbar title="Album" />
<Jumbotron title="Album example"> <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 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 creator, etc. Make it short and sweet, but not too short so folks don't
simply skip over it entirely. simply skip over it entirely.
</p> </p>
<div> <div class="mt-5 mx-auto max-w-md flex flex-col justify-center gap-2 sm:flex-row sm:gap-1">
<Button text="Main call to action" /> <Button shape="rounded" type="primary" text="Main call to action" />
<Button text="Secondary action" /> <Button shape="rounded" type="secondary" text="Secondary action" />
</div> </div>
</Jumbotron> </Jumbotron>
</body> </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} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: { theme: {
extend: {}, extend: {
colors: {
gray: {
750: "#343a40",
...colors.neutral,
}, },
plugins: [], }
},
},
plugins: [
plugin(({ addVariant }) => {
addVariant('hocus', ['&:hover', '&:focus'])
}),
],
} }