From 0c27dacd95520630aba35230f408d10d8a37f978 Mon Sep 17 00:00:00 2001 From: Oliver Davies Date: Mon, 9 Jan 2023 12:00:00 +0000 Subject: [PATCH] Add navbar and jumbotron styling --- src/components/Button.astro | 19 +++++++++++++-- src/components/Jumbotron.astro | 8 ++++--- src/components/Navbar.astro | 40 +++++++++++++++++--------------- src/pages/index.astro | 42 +++++++++++++++++----------------- tailwind.config.cjs | 24 +++++++++++++++---- 5 files changed, 83 insertions(+), 50 deletions(-) diff --git a/src/components/Button.astro b/src/components/Button.astro index aeb79bf..7ebaa78 100644 --- a/src/components/Button.astro +++ b/src/components/Button.astro @@ -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; --- -{text} + + {text} + diff --git a/src/components/Jumbotron.astro b/src/components/Jumbotron.astro index 5551194..1ac3d71 100644 --- a/src/components/Jumbotron.astro +++ b/src/components/Jumbotron.astro @@ -6,8 +6,10 @@ interface Props { const { title } = Astro.props as Props; --- -
-

{title}

+
+

{title}

- +
+ +
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index b1348a5..39fc024 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -6,24 +6,26 @@ interface Props { const { title } = Astro.props as Props; --- -
- - - - +
+
+ + + + -

{title}

+

{title}

+
diff --git a/src/pages/index.astro b/src/pages/index.astro index 00f0816..53c011d 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -5,27 +5,27 @@ import Navbar from "../components/Navbar.astro"; --- - - - - - - Astro - - - + + + + + + Astro + + + - -

- 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. -

+ +

+ 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. +

-
-
- - +
+
+ + diff --git a/tailwind.config.cjs b/tailwind.config.cjs index f5368a7..5d3bc79 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -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']) + }), + ], }