From a8a89b9366ea6734f180cbc0c9b5031fec440d25 Mon Sep 17 00:00:00 2001 From: 0ceanSlim Date: Tue, 30 Jan 2024 15:53:43 -0500 Subject: [PATCH] added some tailwind styling --- static/style/output.css | 128 ++++++++++++++++++++++++++++++++++++++++ templates/index.html | 20 ++++--- templates/monsters.html | 33 +++++++---- 3 files changed, 159 insertions(+), 22 deletions(-) diff --git a/static/style/output.css b/static/style/output.css index 374b9ac..bf4283e 100644 --- a/static/style/output.css +++ b/static/style/output.css @@ -544,11 +544,139 @@ video { position: static; } +.m-4 { + margin: 1rem; +} + +.ml-4 { + margin-left: 1rem; +} + +.mt-4 { + margin-top: 1rem; +} + +.mr-2 { + margin-right: 0.5rem; +} + +.mb-2 { + margin-bottom: 0.5rem; +} + +.mt-2 { + margin-top: 0.5rem; +} + +.flex { + display: flex; +} + +.grid { + display: grid; +} + +.h-fit { + height: -moz-fit-content; + height: fit-content; +} + +.h-auto { + height: auto; +} + +.w-fit { + width: -moz-fit-content; + width: fit-content; +} + +.w-auto { + width: auto; +} + +.w-full { + width: 100%; +} + +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.gap-2 { + gap: 0.5rem; +} + +.gap-1 { + gap: 0.25rem; +} + +.rounded-sm { + border-radius: 0.125rem; +} + +.rounded-md { + border-radius: 0.375rem; +} + +.border-2 { + border-width: 2px; +} + +.border-black { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} + +.border-teal-500 { + --tw-border-opacity: 1; + border-color: rgb(20 184 166 / var(--tw-border-opacity)); +} + +.bg-slate-700 { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity)); +} + +.bg-slate-800 { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity)); +} + +.p-2 { + padding: 0.5rem; +} + +.p-4 { + padding: 1rem; +} + +.font-mono { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + .font-bold { font-weight: 700; } +.font-black { + font-weight: 900; +} + .text-blue-500 { --tw-text-opacity: 1; color: rgb(59 130 246 / var(--tw-text-opacity)); } + +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} diff --git a/templates/index.html b/templates/index.html index 175523e..ef8a7ab 100644 --- a/templates/index.html +++ b/templates/index.html @@ -7,24 +7,26 @@ - -

Welcome to the Dragon Warrior Monsters 2 App

+ +

Welcome to the Dragon Warrior Monsters 2 App

-

Filter list by monster family
- Display monster stats in embed below

- - + - - +
+ diff --git a/templates/monsters.html b/templates/monsters.html index 1dff8aa..c40ba9b 100644 --- a/templates/monsters.html +++ b/templates/monsters.html @@ -6,30 +6,37 @@ Monster Information - +

Monster Information

{{ monster.name }}

Family: {{ monster.family }}

-

In Story: {{ monster.in_story }}

-

Stats:

- +
+

Stats:

+
    +
    +
  • {{ monster.maxlvl }}
    • +
  • {{ monster.exp }}
    • +
  • {{ monster.hp }}
    • +
  • {{ monster.atk }}
    • +
  • {{ monster.mp }}
    • +
  • {{ monster.def }}
    • +
  • {{ monster.agl }}
    • +
  • {{ monster.int }}
    • +
    +
+
+

Skills:

+
+

In Story: {{ monster.in_story }}

Spawn Locations:

+