From f362d5a228a06e96c0752718707652e7d36d2456 Mon Sep 17 00:00:00 2001 From: Bobby Date: Fri, 30 Aug 2024 21:50:38 -0400 Subject: caches, mobile fixes, and i dont remember much of what i added --- static/css/input.css | 2 +- static/css/main.css | 192 ++++++++++++++++++++++++++++++++++++++++++--------- 2 files changed, 159 insertions(+), 35 deletions(-) (limited to 'static/css') diff --git a/static/css/input.css b/static/css/input.css index 0e05d6c..72124f8 100644 --- a/static/css/input.css +++ b/static/css/input.css @@ -16,7 +16,7 @@ * { font-family: "Karla", sans-serif; - box-sizing: border-box; + /* box-sizing: border-box; */ } main { diff --git a/static/css/main.css b/static/css/main.css index d235d15..1ff34f7 100644 --- a/static/css/main.css +++ b/static/css/main.css @@ -737,6 +737,14 @@ video { margin-top: 2rem; } +.mb-1 { + margin-bottom: 0.25rem; +} + +.box-border { + box-sizing: border-box; +} + .block { display: block; } @@ -753,6 +761,10 @@ video { display: inline-flex; } +.grid { + display: grid; +} + .hidden { display: none; } @@ -761,6 +773,10 @@ video { aspect-ratio: 16 / 9; } +.aspect-\[9\/13\] { + aspect-ratio: 9/13; +} + .size-3 { width: 0.75rem; height: 0.75rem; @@ -776,6 +792,11 @@ video { height: 1.5rem; } +.size-2 { + width: 0.5rem; + height: 0.5rem; +} + .h-24 { height: 6rem; } @@ -816,10 +837,30 @@ video { height: 100%; } +.h-3 { + height: 0.75rem; +} + +.h-\[42vw\] { + height: 42vw; +} + +.h-screen { + height: 100vh; +} + .max-h-24 { max-height: 6rem; } +.max-h-\[806px\] { + max-height: 806px; +} + +.max-h-screen { + max-height: 100vh; +} + .w-1\/2 { width: 50%; } @@ -869,24 +910,27 @@ video { width: max-content; } -.max-w-7xl { - max-width: 80rem; +.w-1\/3 { + width: 33.333333%; } -.max-w-max { - max-width: -moz-max-content; - max-width: max-content; +.w-3 { + width: 0.75rem; } -.max-w-fit { - max-width: -moz-fit-content; - max-width: fit-content; +.max-w-7xl { + max-width: 80rem; } .max-w-full { max-width: 100%; } +.max-w-max { + max-width: -moz-max-content; + max-width: max-content; +} + .origin-left { transform-origin: left; } @@ -943,6 +987,10 @@ video { list-style-position: inside; } +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + .flex-row { flex-direction: row; } @@ -1009,6 +1057,12 @@ video { margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } +.space-y-1 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); +} + .overflow-auto { overflow: auto; } @@ -1035,14 +1089,6 @@ video { white-space: nowrap; } -.text-wrap { - text-wrap: wrap; -} - -.text-nowrap { - text-wrap: nowrap; -} - .break-words { overflow-wrap: break-word; } @@ -1067,6 +1113,11 @@ video { border-radius: 0.75rem; } +.rounded-b-lg { + border-bottom-right-radius: 0.5rem; + border-bottom-left-radius: 0.5rem; +} + .border { border-width: 1px; } @@ -1366,8 +1417,8 @@ video { --tw-bg-opacity: 0.4; } -.bg-opacity-30 { - --tw-bg-opacity: 0.3; +.bg-opacity-50 { + --tw-bg-opacity: 0.5; } .bg-cover { @@ -1474,6 +1525,14 @@ video { padding-top: 0.25rem; } +.pt-\[140\%\] { + padding-top: 140%; +} + +.pb-\[140\%\] { + padding-bottom: 140%; +} + .text-center { text-align: center; } @@ -1513,10 +1572,18 @@ video { line-height: 1rem; } +.text-\[10px\] { + font-size: 10px; +} + .font-bold { font-weight: 700; } +.font-semibold { + font-weight: 600; +} + .uppercase { text-transform: uppercase; } @@ -1619,11 +1686,6 @@ video { color: rgb(21 128 61 / var(--tw-text-opacity)); } -.text-green-900 { - --tw-text-opacity: 1; - color: rgb(20 83 45 / var(--tw-text-opacity)); -} - .text-indigo-300 { --tw-text-opacity: 1; color: rgb(165 180 252 / var(--tw-text-opacity)); @@ -1808,11 +1870,6 @@ video { color: rgb(161 98 7 / var(--tw-text-opacity)); } -.text-green-800 { - --tw-text-opacity: 1; - color: rgb(22 101 52 / var(--tw-text-opacity)); -} - .opacity-25 { opacity: 0.25; } @@ -1834,11 +1891,6 @@ video { outline-offset: 2px; } -.blur { - --tw-blur: blur(8px); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } @@ -1898,7 +1950,7 @@ video { * { font-family: "Karla", sans-serif; - box-sizing: border-box; + /* box-sizing: border-box; */ } main { @@ -2207,10 +2259,54 @@ main { } @media (min-width: 640px) { + .sm\:block { + display: block; + } + + .sm\:size-3 { + width: 0.75rem; + height: 0.75rem; + } + + .sm\:size-4 { + width: 1rem; + height: 1rem; + } + + .sm\:w-1\/2 { + width: 50%; + } + + .sm\:w-1\/3 { + width: 33.333333%; + } + + .sm\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .sm\:gap-2 { + gap: 0.5rem; + } + + .sm\:p-2 { + padding: 0.5rem; + } + .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; } + + .sm\:text-sm { + font-size: 0.875rem; + line-height: 1.25rem; + } + + .sm\:text-xs { + font-size: 0.75rem; + line-height: 1rem; + } } @media (min-width: 768px) { @@ -2221,6 +2317,14 @@ main { .md\:w-64 { width: 16rem; } + + .md\:w-1\/4 { + width: 25%; + } + + .md\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } } @media (min-width: 1024px) { @@ -2232,6 +2336,14 @@ main { display: none; } + .lg\:h-\[42vw\] { + height: 42vw; + } + + .lg\:max-h-\[806px\] { + max-height: 806px; + } + .lg\:w-1\/2 { width: 50%; } @@ -2248,6 +2360,14 @@ main { width: 15rem; } + .lg\:w-1\/5 { + width: 20%; + } + + .lg\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + .lg\:flex-row { flex-direction: row; } @@ -2301,6 +2421,10 @@ main { width: 24rem; } + .xl\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + .xl\:flex-row { flex-direction: row; } -- cgit v1.2.3