diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/_includes/components/headerbar.njk | 19 | ||||
| -rw-r--r-- | src/_includes/layouts/base.njk | 2 | ||||
| -rw-r--r-- | src/_includes/layouts/index.njk | 54 | ||||
| -rw-r--r-- | src/guzzle.sass | 122 | ||||
| -rw-r--r-- | src/index.md | 4 |
5 files changed, 85 insertions, 116 deletions
diff --git a/src/_includes/components/headerbar.njk b/src/_includes/components/headerbar.njk index e1601c4..54ea25a 100644 --- a/src/_includes/components/headerbar.njk +++ b/src/_includes/components/headerbar.njk @@ -1,12 +1,13 @@ <div class="headerbar"> - <div id="links"> - <p>|| - <a href="/">home</a> - | - <a href="/blog">blog</a> - | - <a href="https://github.com/getchoo">github</a> - || - </p> + <div id="links" class="flex gap-3"> + <button onclick="window.location.href='/'"> + home + </button> + <button onclick="window.location.href='/blog'"> + blog + </button> + <button onclick="window.location.href='https://github.com/getchoo'"> + github + </button> </div> </div>
\ No newline at end of file diff --git a/src/_includes/layouts/base.njk b/src/_includes/layouts/base.njk index b0c9294..42e03ba 100644 --- a/src/_includes/layouts/base.njk +++ b/src/_includes/layouts/base.njk @@ -7,7 +7,7 @@ <meta name="description" content="{{ description }}"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="/guzzle.css"/> - <script type="module" src="/js/chrisApp.js"></script> + </head> <body> diff --git a/src/_includes/layouts/index.njk b/src/_includes/layouts/index.njk index feccdfc..7bf9545 100644 --- a/src/_includes/layouts/index.njk +++ b/src/_includes/layouts/index.njk @@ -7,30 +7,34 @@ layout: "layouts/base.njk" {{ content | safe }} </div> <div id="gifs"> - <img src="/imgs/gifs/legalize.gif" width="88" height="31" loading="lazy" decoding="async" alt="legalize now!"/> - <img src="/imgs/gifs/acab.gif" width="88" height="31" loading="lazy" decoding="async" alt="acab"/> - <img src="/imgs/gifs/poweredbyfedora.gif" width="88" height="31" loading="lazy" decoding="async" alt="powered by fedora"/> - <img src="/imgs/gifs/capitalism.gif" width="88" height="31" loading="lazy" decoding="async" alt="let's crush capitalism!"/> - <br> - <img src="/imgs/gifs/anybrowser.gif" width="88" height="31" loading="lazy" decoding="async" alt="best viewed with any browser"/> - <img src="/imgs/gifs/weezer.gif" width="88" height="31" loading="lazy" decoding="async" alt="weezer fan"/> - <a href="https://dnsense.pub/"> - <img src="/imgs/gifs/steam.gif" width="88" height="31" loading="lazy" decoding="async" alt="play with steam"/> - </a> - <img src="/imgs/gifs/vi.gif" width="88" height="31" loading="lazy" decoding="async" alt="made with vi"/> - <img src="/imgs/gifs/pride.gif" width="88" height="31" loading="lazy" decoding="async" alt="pride"/> - <img src="/imgs/gifs/imagine.gif" width="88" height="31" loading="lazy" decoding="async" alt="imagination"/> - <br> - <img src="/imgs/gifs/moz.gif" width="88" height="31" loading="lazy" decoding="async" alt="mozilla is cool"/> - <img src="/imgs/gifs/free.gif" width="88" height="31" loading="lazy" decoding="async" alt="completely free software"/> - <img src="/imgs/gifs/gimp.gif" width="88" height="31" loading="lazy" decoding="async" alt="graphics by gimp"/> - <img src="/imgs/gifs/explorer.gif" width="88" height="31" loading="lazy" decoding="async" alt="marijuana mind explorer"/> - <img src="/imgs/gifs/jsfree.gif" width="88" height="31" loading="lazy" decoding="async" alt="javascript free"/> - <img src="/imgs/gifs/web3.gif" width="88" height="31" loading="lazy" decoding="async" alt="keep the web free! say no to web3!"/> - <img src="/imgs/gifs/tired.gif" width="88" height="31" loading="lazy" decoding="async" alt="tired"/> - <img src="/imgs/gifs/arnold.gif" width="88" height="31" loading="lazy" decoding="async" alt="hey arnold!"/> - <img src="/imgs/gifs/bob.gif" width="88" height="31" loading="lazy" decoding="async" alt="powered by bob"/> - <img src="/imgs/gifs/counterstrike.gif" width="88" height="31" loading="lazy" decoding="async" alt="counter-strike player"/> - <img src="/imgs/gifs/chris.gif" width="88" height="31" loading="lazy" decoding="async" alt="chris troll" id="chris_gif"/> + <div id="gif"> + <img src="/imgs/gifs/legalize.gif" width="88" height="31" loading="lazy" decoding="async" alt="legalize now!"/> + <img src="/imgs/gifs/acab.gif" width="88" height="31" loading="lazy" decoding="async" alt="acab"/> + <img src="/imgs/gifs/poweredbyfedora.gif" width="88" height="31" loading="lazy" decoding="async" alt="powered by fedora"/> + <img src="/imgs/gifs/capitalism.gif" width="88" height="31" loading="lazy" decoding="async" alt="let's crush capitalism!"/> + </div> + <div id="gif"> + <img src="/imgs/gifs/anybrowser.gif" width="88" height="31" loading="lazy" decoding="async" alt="best viewed with any browser"/> + <img src="/imgs/gifs/weezer.gif" width="88" height="31" loading="lazy" decoding="async" alt="weezer fan"/> + <a href="https://dnsense.pub/"> + <img src="/imgs/gifs/steam.gif" width="88" height="31" loading="lazy" decoding="async" alt="play with steam"/> + </a> + <img src="/imgs/gifs/vi.gif" width="88" height="31" loading="lazy" decoding="async" alt="made with vi"/> + <img src="/imgs/gifs/pride.gif" width="88" height="31" loading="lazy" decoding="async" alt="pride"/> + <img src="/imgs/gifs/imagine.gif" width="88" height="31" loading="lazy" decoding="async" alt="imagination"/> + </div> + <div id="gif"> + <img src="/imgs/gifs/moz.gif" width="88" height="31" loading="lazy" decoding="async" alt="mozilla is cool"/> + <img src="/imgs/gifs/free.gif" width="88" height="31" loading="lazy" decoding="async" alt="completely free software"/> + <img src="/imgs/gifs/gimp.gif" width="88" height="31" loading="lazy" decoding="async" alt="graphics by gimp"/> + <img src="/imgs/gifs/explorer.gif" width="88" height="31" loading="lazy" decoding="async" alt="marijuana mind explorer"/> + <img src="/imgs/gifs/jsfree.gif" width="88" height="31" loading="lazy" decoding="async" alt="javascript free"/> + <img src="/imgs/gifs/web3.gif" width="88" height="31" loading="lazy" decoding="async" alt="keep the web free! say no to web3!"/> + <img src="/imgs/gifs/tired.gif" width="88" height="31" loading="lazy" decoding="async" alt="tired"/> + <img src="/imgs/gifs/arnold.gif" width="88" height="31" loading="lazy" decoding="async" alt="hey arnold!"/> + <img src="/imgs/gifs/bob.gif" width="88" height="31" loading="lazy" decoding="async" alt="powered by bob"/> + <img src="/imgs/gifs/counterstrike.gif" width="88" height="31" loading="lazy" decoding="async" alt="counter-strike player"/> + <img src="/imgs/gifs/chris.gif" width="88" height="31" loading="lazy" decoding="async" alt="chris troll" id="chris_gif"/> + </div> </div> </div>
\ No newline at end of file diff --git a/src/guzzle.sass b/src/guzzle.sass index e9e0415..2939c8a 100644 --- a/src/guzzle.sass +++ b/src/guzzle.sass @@ -1,106 +1,68 @@ @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;700&display=swap') @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap') -$fonts: "Noto Sans", "Fira Code", monospace -$background-color: #1e1e2e -$foreground-color: #b4befe -$overlay: #7f849c -$text: #1e1e2e -$subtext: #cdd6f4 +@tailwind base +@tailwind components +@tailwind utilities +@tailwind variants -body - background-color: $background-color - font-family: $fonts - color: $text - - padding: 10px +html + font-family: "Noto Sans", sans-serif - p,li - font-size: 16px +h1 + @apply text-2xl - h1 - font-size: 24px +p,li + @apply text-base -footer - font-size: 12px - color: $subtext +a + @apply underline - display: flex - align-items: center - justify-content: center - -.container - background-color: $foreground-color +button + @apply rounded-xl bg-yellow p-2 text-center - display: flex - flex: 1 1 auto - flex-direction: column - align-items: center - justify-content: center - - width: fit-content - min-width: 33% +body + @apply bg-base p-10 - margin-left: auto - margin-right: auto - margin-top: 2% +footer + @apply text-xs flex items-center justify-center - border-radius: 3% +.container + @apply bg-lavender + @apply flex flex-auto flex-col + @apply items-center justify-center + @apply w-fit mx-auto + @apply rounded-lg .content - display: inline-block - text-align: center - - margin: 5px - padding: 5px + @apply inline-block text-center p-5 + img + // this is dumb + @apply mx-auto .headerbar - background-color: $foreground-color - - display: flex - flex-direction: column - align-items: center - justify-content: center - - width: fit-content - height: 30px - - margin-left: auto - margin-right: auto - margin-top: 2% - - border-radius: 5px - padding: 10px + @apply flex flex-col + @apply items-center justify-center + @apply mx-auto rounded p-3 #blogpost - min-width: 50% + @apply w-full items-center #commitText - width: fix-content - - padding: 5px + @apply text-subtext1 p-2 #indexHeader - background-color: $background-color - color: $subtext - - border-radius: 5px - padding: 5px + @apply bg-base w-fit h-fit mx-auto rounded p-5 text-text #gifs - background-color: $background-color - display: inline-block - text-align: center - - margin: 20px - margin-top: 0 - padding: 20px + @apply bg-base + @apply hidden min-[1280px]:flex flex-col gap-2 + @apply text-center items-center justify-center + @apply m-20 mt-0 mb-5 p-10 + @apply rounded-lg drop-shadow-2xl - box-shadow: 7px 10px 1px $overlay - border-radius: 5px +#gif + @apply flex gap-2 #vidya - display: flex - justify-content: center - padding: 5px - margin: 5px + @apply flex justify-center p-5 diff --git a/src/index.md b/src/index.md index 9f876b4..277fbe7 100644 --- a/src/index.md +++ b/src/index.md @@ -4,7 +4,9 @@ title: guzzle guzzle description: getchoo's website --- -<h1 id="indexHeader">getchoo's website 🦕</h1> +<script type="module" src="/js/chrisApp.js"></script> +<h1 id="indexHeader"><b>getchoo's website 🦕</b></h1> +<br \> this is under construction. i'm experimenting with lume  |