From fe6ff7509f4fadd2cd8301c28c033af335c2d3be Mon Sep 17 00:00:00 2001 From: seth Date: Sun, 2 Apr 2023 16:38:56 -0400 Subject: feat: move to tailwind --- src/_includes/components/headerbar.njk | 19 ++--- src/_includes/layouts/base.njk | 2 +- src/_includes/layouts/index.njk | 54 ++++++++------- src/guzzle.sass | 122 ++++++++++++--------------------- src/index.md | 4 +- 5 files changed, 85 insertions(+), 116 deletions(-) (limited to 'src') 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 @@

|| - home - | - blog - | - github - || -

+ + +

\ 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 @@ - + 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 }}

-
-

- -

-
-

+ +

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

getchoo's website 🦕

+ +

getchoo's website 🦕

+
this is under construction. i'm experimenting with lume ![construction](/imgs/gifs/obras.gif) -- cgit v1.2.3