diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Footer.astro | 39 | ||||
| -rw-r--r-- | src/components/GifButtons.astro | 4 | ||||
| -rw-r--r-- | src/components/Head.astro | 2 | ||||
| -rw-r--r-- | src/components/Nav.astro | 23 | ||||
| -rw-r--r-- | src/layouts/Base.astro | 10 | ||||
| -rw-r--r-- | src/styles/main.css | 6 | ||||
| -rw-r--r-- | src/styles/style.scss | 93 |
7 files changed, 48 insertions, 129 deletions
diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 1eaed7e..9995027 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -4,22 +4,25 @@ const commitSha = const repositoryUrl = "https://github.com/getchoo/website"; --- -<footer> - { - commitSha && ( - <p> - Site version - <a href={`${repositoryUrl}/commit/${commitSha}`}> - {commitSha.substring(0, 7)} - </a> - . - </p> - ) - } - <p>Content is All Rights Reserved.</p> - <p> - The <a href={repositoryUrl}>source code</a> is available under the <a - href="https://spdx.org/licenses/MIT.html">MIT License</a - >. - </p> +<footer class="footer footer-center footer-horizontal"> + <aside> + <p> + { + commitSha && ( + <p> + Site version + <a href={`${repositoryUrl}/commit/${commitSha}`}> + {commitSha.substring(0, 7)} + </a> + . + </p> + ) + } + Content is All Rights Reserved. + <br /> + The <a href={repositoryUrl}>source code</a> is available under the <a + href="https://spdx.org/licenses/MIT.html">MIT License</a + >. + </p> + </aside> </footer> diff --git a/src/components/GifButtons.astro b/src/components/GifButtons.astro index 3c88dbd..0fc76e3 100644 --- a/src/components/GifButtons.astro +++ b/src/components/GifButtons.astro @@ -38,7 +38,7 @@ const gifButtons = [ ]; --- -<div class="gif-buttons"> +<div class="flex flex-row flex-wrap items-center justify-center not-prose"> { gifButtons.map(({ buttonName, altText, link }) => { const imageTag = ( @@ -49,7 +49,7 @@ const gifButtons = [ ); return ( - <div class="gif-button"> + <div class="p-1"> {link ? <a href={link}>{imageTag}</a> : imageTag} </div> ); diff --git a/src/components/Head.astro b/src/components/Head.astro index d355012..7ec74ad 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -1,5 +1,5 @@ --- -import "@styles/style.scss"; +import "@styles/main.css"; import "@fontsource/noto-sans"; import notoSansWoff2 from "@fontsource/noto-sans/files/noto-sans-latin-400-normal.woff2"; diff --git a/src/components/Nav.astro b/src/components/Nav.astro index f122ee7..fc2599c 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -7,12 +7,19 @@ const navLinks = [ ]; --- -<nav> - { - navLinks.map(({ name, url }) => ( - <div> - <a href={url}>{name}</a> - </div> - )) - } +<nav class="navbar"> + <div class="navbar-start"></div> + <div class="navbar-center lg:flex"> + <ul class="menu menu-horizontal"> + { + navLinks.map(({ name, url }) => ( + <li> + <a class="btn btn-ghost text-xl" href={url}> + {name} + </a> + </li> + )) + } + </ul> + </div> </nav> diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index 2aa3d9e..ab5948e 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -9,13 +9,9 @@ const { title, description } = Astro.props.frontmatter || Astro.props; <!doctype html> <html lang="en"> <Head title={title} description={description} /> - <body> - <header> - <Nav /> - </header> - <div class="main-content"> - <slot /> - </div> + <body class="prose lg:prose-xl mx-auto max-w-3/4 lg:max-w-1/2"> + <Nav /> + <slot /> <Footer /> </body> </html> diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000..28a9282 --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,6 @@ +@import "tailwindcss"; +@plugin "@tailwindcss/typography"; + +@plugin "daisyui" { + themes: dracula --default; +} diff --git a/src/styles/style.scss b/src/styles/style.scss deleted file mode 100644 index 4d730e9..0000000 --- a/src/styles/style.scss +++ /dev/null @@ -1,93 +0,0 @@ -@import "@catppuccin/palette/scss/_mocha.scss"; - -a { - color: $blue; -} - -body { - font-family: - Noto Sans, - -apple-system, - BlinkMacSystemFont, - avenir next, - avenir, - segoe ui, - helvetica neue, - helvetica, - Cantarell, - Ubuntu, - roboto, - noto, - arial, - sans-serif; - color: $text; - background-color: $base; - max-width: 75%; - margin-left: auto; - margin-right: auto; - padding: 1.5rem; - - @media (min-width: 768px) { - max-width: 50%; - } -} - -nav { - align-items: center; - background-color: $surface0; - display: flex; - flex-wrap: wrap; - justify-content: center; - margin: auto; - padding: 0.5rem; - - a { - margin: 0.5rem; - } - - @media (min-width: 375px) { - a { - margin: 0.75rem; - } - } - - @media (min-width: 768px) { - a { - margin: 1rem; - } - } - - @media (min-width: 1024px) { - a { - font-size: 1.5rem; - } - } -} - -footer { - font-size: 0.6rem; - text-align: right; - - @media (min-width: 768px) { - font-size: 0.75rem; - } - - p { - margin: 0.25rem; - } -} - -.main-content { - padding: 1rem; -} - -.gif-buttons { - align-items: center; - display: flex; - flex-flow: row wrap; - justify-content: center; -} - -.gif-button { - padding: 0.25rem; -} |