diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Head.astro | 1 | ||||
| -rw-r--r-- | src/components/Nav.astro | 2 | ||||
| -rw-r--r-- | src/env.d.ts | 2 | ||||
| -rw-r--r-- | src/layouts/Index.astro | 170 | ||||
| -rw-r--r-- | src/pages/404.astro | 20 | ||||
| -rw-r--r-- | src/pages/index.astro | 10 | ||||
| -rw-r--r-- | src/styles/global.sass | 6 |
7 files changed, 139 insertions, 72 deletions
diff --git a/src/components/Head.astro b/src/components/Head.astro index 1ccc6fa..0cce769 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -8,4 +8,5 @@ const { title, description } = Astro.props; <title>{title}</title> <meta name="description" content={description} /> <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="sitemap" href="/sitemap-index.xml" /> </head> diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 135027f..2761ca6 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -21,7 +21,7 @@ const links: Links = { --- <nav> - <div class="flex flex-column justify-center mx-auto p-5"> + <div class="flex flex-column justify-center mx-auto p-7"> <ul class="inline"> { Object.entries(links).map(([link, url]) => ( diff --git a/src/env.d.ts b/src/env.d.ts index f964fe0..9231795 100644 --- a/src/env.d.ts +++ b/src/env.d.ts @@ -1 +1 @@ -/// <reference types="astro/client" /> +/// <reference types="@astrojs/image/client" /> diff --git a/src/layouts/Index.astro b/src/layouts/Index.astro index 0aa436e..a5909b7 100644 --- a/src/layouts/Index.astro +++ b/src/layouts/Index.astro @@ -1,5 +1,6 @@ --- import Base from "@layouts/Base.astro"; +import { Image } from "@astrojs/image/components"; const { title, description } = Astro.props; --- @@ -18,18 +19,22 @@ const { title, description } = Astro.props; class="bg-base hidden min-[1280px]:flex flex-col gap-2 text-center items-center justify-center m-20 mt-0 mb-5 p-5 rounded-lg drop-shadow-2xl" > <div id="gif"> - <img + <Image src="/imgs/gifs/legalize.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="legalize now!" /> - <img + <Image src="/imgs/gifs/acab.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="acab" @@ -40,161 +45,198 @@ const { title, description } = Astro.props; To view the source visit: https://github.com/sakecode/Sake-s-SVGs To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/4.0/ --> - <img + <Image src="/imgs/gifs/poweredbynix.svg" - width="88" - height="31" - loading="lazy" + width={88} + height={31} + format="svg" + quality={90} decoding="async" alt="powered by fedora" /> </a> - <img + <Image src="/imgs/gifs/capitalism.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="let's crush capitalism!" /> </div> <div id="gif"> - <img + <Image src="/imgs/gifs/anybrowser.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="best viewed with any browser" /> - <img + <Image src="/imgs/gifs/weezer.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="weezer fan" /> <a href="https://dnsense.pub/"> - <img + <Image src="/imgs/gifs/steam.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="play with steam" /> </a> - <img + <Image src="/imgs/gifs/vi.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="made with vi" /> - <img + <Image src="/imgs/gifs/pride.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="pride" /> - <img + <Image src="/imgs/gifs/imagine.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="imagination" /> </div> <div id="gif"> - <img + <Image src="/imgs/gifs/moz.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="mozilla is cool" /> - <img + <Image src="/imgs/gifs/free.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="completely free software" /> - <img + <Image src="/imgs/gifs/gimp.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="graphics by gimp" /> - <img + <Image src="/imgs/gifs/explorer.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="marijuana mind explorer" /> - <img + <Image src="/imgs/gifs/jsfree.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="javascript free" /> - <img + <Image src="/imgs/gifs/web3.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="keep the web free! say no to web3!" /> - <img + <Image src="/imgs/gifs/tired.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="tired" /> - <img + <Image src="/imgs/gifs/arnold.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="hey arnold!" /> - <img + <Image src="/imgs/gifs/bob.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="powered by bob" /> - <img + <Image src="/imgs/gifs/counterstrike.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="counter-strike player" /> - <img + <Image src="/imgs/gifs/chris.gif" - width="88" - height="31" + width={88} + height={31} + format="webp" + quality={90} loading="lazy" decoding="async" alt="chris troll" diff --git a/src/pages/404.astro b/src/pages/404.astro new file mode 100644 index 0000000..a34ff13 --- /dev/null +++ b/src/pages/404.astro @@ -0,0 +1,20 @@ +--- +import Page from "@layouts/Page.astro"; +import { Image } from "@astrojs/image/components"; +const title = "404!"; +const description = title; +--- + +<Page title={title} description={description}> + <h1>404! :(</h1> + <Image + src="/imgs/tapwater.png" + width={500} + height={515} + class="mx-auto" + format="webp" + quality={90} + decoding="async" + alt="can i get you some tapwater?" + /> +</Page> diff --git a/src/pages/index.astro b/src/pages/index.astro index cbf7d69..019375f 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,6 +1,6 @@ --- import Index from "@layouts/Index.astro"; -import "@styles/global.sass"; +import { Image } from "@astrojs/image/components"; const title = "guzzle guzzle"; const description = title; --- @@ -15,13 +15,17 @@ const description = title; <p>this is under construction. i'm experimenting with astro</p> - <img + <Image src="/imgs/gifs/obras.gif" + width={106} + height={119} class="mx-auto" + format="webp" + quality={90} loading="lazy" decoding="async" alt="construction" /> - <a href="/lul">click here</a> + <a href="/lul">hehe funny click me</a> </Index> diff --git a/src/styles/global.sass b/src/styles/global.sass index e03270c..a6d45e2 100644 --- a/src/styles/global.sass +++ b/src/styles/global.sass @@ -10,13 +10,13 @@ html font-family: "Noto Sans", sans-serif h1 - @apply text-2xl + @apply text-base text-2xl h2 - @apply text-xl + @apply text-base text-xl h3 - @apply text-lg + @apply text-base text-lg p,li @apply text-base |