Bringing in icons to use and the theme turned into gray only.
This commit is contained in:
Zed A. Shaw
parent
0b40ef0125
commit
25c96a8c3a
873 changed files with 14231 additions and 21 deletions
137
static/style.css
137
static/style.css
|
|
@ -9,16 +9,18 @@
|
|||
monospace;
|
||||
--color-red-800: oklch(44.4% 0.177 26.899);
|
||||
--color-yellow-900: oklch(42.1% 0.095 57.708);
|
||||
--color-gray-50: oklch(98.5% 0.002 247.839);
|
||||
--color-gray-100: oklch(96.7% 0.003 264.542);
|
||||
--color-gray-200: oklch(92.8% 0.006 264.531);
|
||||
--color-gray-300: oklch(87.2% 0.01 258.338);
|
||||
--color-gray-400: oklch(70.7% 0.022 261.325);
|
||||
--color-gray-500: oklch(55.1% 0.027 264.364);
|
||||
--color-gray-700: oklch(37.3% 0.034 259.733);
|
||||
--color-gray-800: oklch(27.8% 0.033 256.848);
|
||||
--color-gray-900: oklch(21% 0.034 264.665);
|
||||
--color-gray-950: oklch(13% 0.028 261.692);
|
||||
--color-teal-300: oklch(85.5% 0.138 181.071);
|
||||
--color-gray-50: oklch(98.5% 0.0 247.839);
|
||||
--color-gray-100: oklch(96.7% 0.0 264.542);
|
||||
--color-gray-200: oklch(92.8% 0.0 264.531);
|
||||
--color-gray-300: oklch(87.2% 0.0 258.338);
|
||||
--color-gray-400: oklch(70.7% 0.0 261.325);
|
||||
--color-gray-500: oklch(55.1% 0.0 264.364);
|
||||
--color-gray-600: oklch(44.6% 0.0 256.802);
|
||||
--color-gray-700: oklch(37.3% 0.0 259.733);
|
||||
--color-gray-800: oklch(27.8% 0.0 256.848);
|
||||
--color-gray-900: oklch(21% 0.0 264.665);
|
||||
--color-gray-950: oklch(13% 0.0 261.692);
|
||||
--color-black: #000;
|
||||
--color-white: #fff;
|
||||
--spacing: 0.25rem;
|
||||
|
|
@ -33,6 +35,8 @@
|
|||
--text-lg--line-height: calc(1.75 / 1.125);
|
||||
--text-xl: 1.25rem;
|
||||
--text-xl--line-height: calc(1.75 / 1.25);
|
||||
--text-2xl: 1.5rem;
|
||||
--text-2xl--line-height: calc(2 / 1.5);
|
||||
--text-3xl: 1.875rem;
|
||||
--text-3xl--line-height: calc(2.25 / 1.875);
|
||||
--text-4xl: 2.25rem;
|
||||
|
|
@ -44,6 +48,7 @@
|
|||
--font-weight-medium: 500;
|
||||
--font-weight-bold: 700;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
--radius-xl: 0.75rem;
|
||||
--aspect-video: 16 / 9;
|
||||
--default-transition-duration: 150ms;
|
||||
|
|
@ -238,6 +243,9 @@
|
|||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
.w-fit {
|
||||
width: fit-content;
|
||||
}
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -265,18 +273,65 @@
|
|||
.items-center {
|
||||
align-items: center;
|
||||
}
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.justify-end {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.justify-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.gap-5 {
|
||||
gap: calc(var(--spacing) * 5);
|
||||
}
|
||||
.gap-8 {
|
||||
gap: calc(var(--spacing) * 8);
|
||||
}
|
||||
.gap-10 {
|
||||
gap: calc(var(--spacing) * 10);
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.rounded-sm {
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.border-1 {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
}
|
||||
.border-2 {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 2px;
|
||||
}
|
||||
.border-b-1 {
|
||||
border-bottom-style: var(--tw-border-style);
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
.border-gray-300 {
|
||||
border-color: var(--color-gray-300);
|
||||
}
|
||||
.border-gray-500 {
|
||||
border-color: var(--color-gray-500);
|
||||
}
|
||||
.btn-alert {
|
||||
background-color: var(--color-red-800) !important;
|
||||
color: var(--color-gray-50) !important;
|
||||
}
|
||||
.btn-primary {
|
||||
background-color: var(--color-teal-300) !important;
|
||||
color: var(--color-gray-950) !important;
|
||||
}
|
||||
.bg-gray-50 {
|
||||
background-color: var(--color-gray-50);
|
||||
}
|
||||
.bg-gray-200 {
|
||||
background-color: var(--color-gray-200);
|
||||
}
|
||||
|
|
@ -286,8 +341,8 @@
|
|||
.bg-gray-400 {
|
||||
background-color: var(--color-gray-400);
|
||||
}
|
||||
.bg-gray-700 {
|
||||
background-color: var(--color-gray-700);
|
||||
.bg-gray-600 {
|
||||
background-color: var(--color-gray-600);
|
||||
}
|
||||
.bg-gray-800 {
|
||||
background-color: var(--color-gray-800);
|
||||
|
|
@ -301,6 +356,9 @@
|
|||
.p-0 {
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
.p-2 {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
.p-3 {
|
||||
padding: calc(var(--spacing) * 3);
|
||||
}
|
||||
|
|
@ -310,17 +368,47 @@
|
|||
.p-6 {
|
||||
padding: calc(var(--spacing) * 6);
|
||||
}
|
||||
.pt-4 {
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.pb-3 {
|
||||
padding-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
.pb-4 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.pb-5 {
|
||||
padding-bottom: calc(var(--spacing) * 5);
|
||||
}
|
||||
.pb-6 {
|
||||
padding-bottom: calc(var(--spacing) * 6);
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.text-2xl {
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
.text-3xl {
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
}
|
||||
.text-sm {
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--tw-leading, var(--text-sm--line-height));
|
||||
}
|
||||
.text-xl\! {
|
||||
font-size: var(--text-xl) !important;
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.text-gray-50 {
|
||||
color: var(--color-gray-50);
|
||||
}
|
||||
.text-gray-950 {
|
||||
color: var(--color-gray-950);
|
||||
}
|
||||
|
|
@ -355,6 +443,11 @@
|
|||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
}
|
||||
.\*\:text-nowrap {
|
||||
:is(& > *) {
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
.hover\:btn-alert {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
|
|
@ -398,6 +491,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
@layer theme;
|
||||
body {
|
||||
color: var(--color-gray-950);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -442,11 +536,16 @@ h3 {
|
|||
font-size: var(--text-4xl);
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
}
|
||||
h5 {
|
||||
h4 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
}
|
||||
h5 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
card {
|
||||
display: flex;
|
||||
max-width: var(--container-md);
|
||||
|
|
@ -630,6 +729,11 @@ hr {
|
|||
syntax: "*";
|
||||
inherits: false;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-font-weight {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
|
|
@ -699,11 +803,6 @@ hr {
|
|||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
@property --tw-border-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: solid;
|
||||
}
|
||||
@property --tw-outline-style {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
|
|
@ -717,6 +816,7 @@ hr {
|
|||
--tw-rotate-z: initial;
|
||||
--tw-skew-x: initial;
|
||||
--tw-skew-y: initial;
|
||||
--tw-border-style: solid;
|
||||
--tw-font-weight: initial;
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-color: initial;
|
||||
|
|
@ -732,7 +832,6 @@ hr {
|
|||
--tw-ring-offset-width: 0px;
|
||||
--tw-ring-offset-color: #fff;
|
||||
--tw-ring-offset-shadow: 0 0 #0000;
|
||||
--tw-border-style: solid;
|
||||
--tw-outline-style: solid;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue