diff --git a/src/components/Card.astro b/src/components/Card.astro deleted file mode 100644 index bd6d597..0000000 --- a/src/components/Card.astro +++ /dev/null @@ -1,61 +0,0 @@ ---- -interface Props { - title: string; - body: string; - href: string; -} - -const { href, title, body } = Astro.props; ---- - -
  • - -

    - {title} - → -

    -

    - {body} -

    -     -
    • - diff --git a/src/components/Footer.astro b/src/components/Footer.astro new file mode 100644 index 0000000..74608bc --- /dev/null +++ b/src/components/Footer.astro @@ -0,0 +1,172 @@ +--- + +--- + + + diff --git a/src/components/ImageSection.astro b/src/components/ImageSection.astro new file mode 100644 index 0000000..9c9b9bf --- /dev/null +++ b/src/components/ImageSection.astro @@ -0,0 +1,17 @@ +--- +interface SectionProps { + imgUrl: string; + imgAlt: string; + title: string; + description: string; + note: string; +} +const { imgUrl, imgAlt, title, description, note } = Astro.props; +--- + +
    +

    {title}

    + {imgAlt} +

    {description}

    +

    {note}

    +
    diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro new file mode 100644 index 0000000..2590f0d --- /dev/null +++ b/src/components/NavBar.astro @@ -0,0 +1,111 @@ + + diff --git a/src/components/wrapping_objects.module.css b/src/components/wrapping_objects.module.css deleted file mode 100644 index c571384..0000000 --- a/src/components/wrapping_objects.module.css +++ /dev/null @@ -1,194 +0,0 @@ -.navMenu { - display: flex; - flex-direction: column; - background-color: rgba(0, 0, 0, 0.4); - backdrop-filter: blur(5px); - position: sticky; - border-radius: 5px; -} - -.logo { - width: 32px; - height: 32px; - border-radius: 100%; - max-width: initial; - max-height: initial; - margin: .35rem; -} - -.navElem { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - transition: .5s; -} - - -.navElem:hover { - color: rgb(96 59 255) !important; -} - -.navElemR { - transition: .5s; -} - -.navElemR:hover { - color: rgb(96 59 255) !important; -} - - -.logoWtxt { - display: flex; - align-items: center; - margin: 0; - padding: 0; -} - -.pad3px { - padding: 3px; -} - -.textBx { - display: flex; - align-items: center; -} - -.footer { - align-items: center; - margin: 100px 1px 0 0; - background-color: rgba(0, 0, 0, 0.4); - backdrop-filter: blur(5px); - bottom: 0; - width: 100%; - padding: 5px; -} - -.footerImageNote { - font-size: 0.75rem; -} - -.footerIcon { - display: block; - text-align: center; -} - -.footerImage { - max-width: initial; - max-height: initial; - width: 48px; - margin: 0.5rem auto; -} - -.footerNotice { - margin: 0 auto; - text-align: center; - font-size: 0.75rem; -} - -.footerTable { - padding: 20px 0; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 20px; -} - -.footerTable div { -} - -.footerTable h3 { - margin-bottom: 8px; -} - -.footerLinks { - display: flex; - flex-direction: column; - align-items: baseline; -} - - -.table { - align-items: center; - width: 100%; -} - -.table th { - padding: 4px 7px; - text-decoration: underline; -} - -.table td { - padding: 4px 7px; -} - -.footerLinks a { - position: relative; - color: #ffffff; - text-decoration: none; -} - -.footerLinks a:hover { - color: #ffffff; -} - - -.footerLinks a::before { - content: ""; - position: absolute; - display: block; - width: 100%; - height: 2px; - bottom: 0; - left: 0; - transform: scaleX(0); - transform-origin: left; - background-color: #ffffff; - transition: transform 0.3s ease; -} - - -.footerLinks a:hover::before { - transform: scaleX(1); -} - -@media (min-width: 768px) { - .footer { - display: grid; - grid-template-columns: 1fr 1fr 1fr 1fr; - column-gap: 0px; - margin: 0 auto; - } - - .grid { - display: grid; - /*grid-template-columns: repeat(6, 1fr);*/ - grid-template-columns: repeat(8, 1fr); - } - - .navElem { - grid-column: span 1; - margin: 0.5rem 0.5rem 0.5rem 0.5rem; - align-items: center; - text-align: center; - } - - .navElemR { - grid-column: 8; - margin: 0.5rem 0.5rem 0.5rem 0.5rem; - align-items: center; - text-align: center; - } - - .footerIcon { - grid-column: span 1; - justify-self: center; - } - - .footerTable { - grid-column: span 3; - } - - .footerNotice { - grid-column: span 4; - } -} diff --git a/src/components/wrapping_objects.tsx b/src/components/wrapping_objects.tsx deleted file mode 100644 index 3ef5306..0000000 --- a/src/components/wrapping_objects.tsx +++ /dev/null @@ -1,96 +0,0 @@ -import styles from "./wrapping_objects.module.css" - -export function NavBar(){ - return( - - ) -} - -export function Footer() { - return ( - <> - - - ) -} - -export function Notice() { - return ( -
    -

    This website is NOT affiliated with Nintendo or any other party. All product names, logos, and brands are property of their respective owners.

    -

    li'l Judd © 2023 moonleay

    -
    - ) -} diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 1d43b49..d275ad6 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,5 +1,6 @@ --- -import { Footer, NavBar } from "@components/wrapping_objects"; +import Footer from "@components/Footer.astro"; +import NavBar from "@components/NavBar.astro"; ---