Refactored main layout and nav
This commit is contained in:
Vendored
+95
-81
@@ -8,6 +8,8 @@
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||
"Courier New", monospace;
|
||||
--color-red-600: oklch(57.7% 0.245 27.325);
|
||||
--color-green-600: oklch(62.7% 0.194 149.214);
|
||||
--color-blue-50: oklch(97% 0.014 254.604);
|
||||
--color-blue-100: oklch(93.2% 0.032 255.585);
|
||||
--color-blue-200: oklch(88.2% 0.059 254.128);
|
||||
--color-blue-300: oklch(80.9% 0.105 251.813);
|
||||
@@ -26,6 +28,8 @@
|
||||
--color-black: #000;
|
||||
--color-white: #fff;
|
||||
--spacing: 0.25rem;
|
||||
--text-xs: 0.75rem;
|
||||
--text-xs--line-height: calc(1 / 0.75);
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: calc(1.25 / 0.875);
|
||||
--text-lg: 1.125rem;
|
||||
@@ -245,6 +249,9 @@
|
||||
.m-0 {
|
||||
margin: 0;
|
||||
}
|
||||
.mx-1 {
|
||||
margin-inline: var(--spacing);
|
||||
}
|
||||
.mx-auto {
|
||||
margin-inline: auto;
|
||||
}
|
||||
@@ -269,12 +276,18 @@
|
||||
.mb-6 {
|
||||
margin-bottom: calc(var(--spacing) * 6);
|
||||
}
|
||||
.ml-auto {
|
||||
margin-left: auto;
|
||||
}
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
.h-3 {
|
||||
height: calc(var(--spacing) * 3);
|
||||
}
|
||||
.h-5 {
|
||||
height: calc(var(--spacing) * 5);
|
||||
}
|
||||
@@ -287,18 +300,12 @@
|
||||
.h-10 {
|
||||
height: calc(var(--spacing) * 10);
|
||||
}
|
||||
.h-12 {
|
||||
height: calc(var(--spacing) * 12);
|
||||
}
|
||||
.h-14 {
|
||||
height: calc(var(--spacing) * 14);
|
||||
.h-16 {
|
||||
height: calc(var(--spacing) * 16);
|
||||
}
|
||||
.h-20 {
|
||||
height: calc(var(--spacing) * 20);
|
||||
}
|
||||
.min-h-\[3\.5rem\] {
|
||||
min-height: 3.5rem;
|
||||
}
|
||||
.min-h-\[4\.5rem\] {
|
||||
min-height: 4.5rem;
|
||||
}
|
||||
@@ -308,9 +315,6 @@
|
||||
.w-5 {
|
||||
width: calc(var(--spacing) * 5);
|
||||
}
|
||||
.w-6 {
|
||||
width: calc(var(--spacing) * 6);
|
||||
}
|
||||
.w-8 {
|
||||
width: calc(var(--spacing) * 8);
|
||||
}
|
||||
@@ -326,6 +330,9 @@
|
||||
.w-full {
|
||||
width: 100%;
|
||||
}
|
||||
.w-px {
|
||||
width: 1px;
|
||||
}
|
||||
.min-w-full {
|
||||
min-width: 100%;
|
||||
}
|
||||
@@ -359,6 +366,12 @@
|
||||
.justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.justify-center {
|
||||
justify-content: center;
|
||||
}
|
||||
.gap-0\.5 {
|
||||
gap: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.gap-2 {
|
||||
gap: calc(var(--spacing) * 2);
|
||||
}
|
||||
@@ -368,6 +381,9 @@
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
.gap-6 {
|
||||
gap: calc(var(--spacing) * 6);
|
||||
}
|
||||
.space-y-1 {
|
||||
:where(& > :not(:last-child)) {
|
||||
--tw-space-y-reverse: 0;
|
||||
@@ -389,9 +405,6 @@
|
||||
border-color: var(--color-gray-200);
|
||||
}
|
||||
}
|
||||
.overflow-hidden {
|
||||
overflow: hidden;
|
||||
}
|
||||
.overflow-x-auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
@@ -427,8 +440,11 @@
|
||||
.border-\[\#0087ff\] {
|
||||
border-color: #0087ff;
|
||||
}
|
||||
.border-\[\#d6d5d5\] {
|
||||
border-color: #d6d5d5;
|
||||
.border-gray-100 {
|
||||
border-color: var(--color-gray-100);
|
||||
}
|
||||
.border-gray-200 {
|
||||
border-color: var(--color-gray-200);
|
||||
}
|
||||
.border-gray-300 {
|
||||
border-color: var(--color-gray-300);
|
||||
@@ -445,9 +461,6 @@
|
||||
.bg-\[\#6b9ed2\] {
|
||||
background-color: #6b9ed2;
|
||||
}
|
||||
.bg-\[\#f7f7f7\] {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
.bg-\[\#ffffe0\] {
|
||||
background-color: #ffffe0;
|
||||
}
|
||||
@@ -457,21 +470,24 @@
|
||||
background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-black\/40 {
|
||||
background-color: color-mix(in srgb, #000 40%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-blue-600 {
|
||||
background-color: var(--color-blue-600);
|
||||
}
|
||||
.bg-gray-50 {
|
||||
background-color: var(--color-gray-50);
|
||||
}
|
||||
.bg-gray-50\/50 {
|
||||
background-color: color-mix(in srgb, oklch(98.5% 0.002 247.839) 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-gray-50) 50%, transparent);
|
||||
}
|
||||
}
|
||||
.bg-gray-100 {
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
.bg-gray-300 {
|
||||
background-color: var(--color-gray-300);
|
||||
}
|
||||
.bg-white {
|
||||
background-color: var(--color-white);
|
||||
}
|
||||
@@ -494,10 +510,6 @@
|
||||
--tw-gradient-from: var(--color-blue-100);
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-\[\#3a0647\] {
|
||||
--tw-gradient-to: #3a0647;
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
}
|
||||
.to-\[\#020f26\] {
|
||||
--tw-gradient-to: #020f26;
|
||||
--tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
|
||||
@@ -518,6 +530,9 @@
|
||||
.bg-no-repeat {
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.p-2 {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
}
|
||||
.p-3 {
|
||||
padding: calc(var(--spacing) * 3);
|
||||
}
|
||||
@@ -557,14 +572,14 @@
|
||||
.py-5 {
|
||||
padding-block: calc(var(--spacing) * 5);
|
||||
}
|
||||
.pt-4 {
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
.py-6 {
|
||||
padding-block: calc(var(--spacing) * 6);
|
||||
}
|
||||
.pb-2 {
|
||||
padding-bottom: calc(var(--spacing) * 2);
|
||||
.pr-1 {
|
||||
padding-right: var(--spacing);
|
||||
}
|
||||
.pb-4 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
.pl-2 {
|
||||
padding-left: calc(var(--spacing) * 2);
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
@@ -588,18 +603,13 @@
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||
}
|
||||
.text-\[0\.9rem\] {
|
||||
font-size: 0.9rem;
|
||||
.text-xs {
|
||||
font-size: var(--text-xs);
|
||||
line-height: var(--tw-leading, var(--text-xs--line-height));
|
||||
}
|
||||
.text-\[0\.65rem\] {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
.text-\[1\.1rem\] {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
.text-\[1\.15rem\] {
|
||||
font-size: 1.15rem;
|
||||
}
|
||||
.font-bold {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
@@ -632,15 +642,9 @@
|
||||
--tw-tracking: var(--tracking-wider);
|
||||
letter-spacing: var(--tracking-wider);
|
||||
}
|
||||
.text-ellipsis {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.whitespace-nowrap {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.text-\[\#d7d7d7\] {
|
||||
color: #d7d7d7;
|
||||
}
|
||||
.text-blue-300 {
|
||||
color: var(--color-blue-300);
|
||||
}
|
||||
@@ -671,6 +675,9 @@
|
||||
.text-gray-900 {
|
||||
color: var(--color-gray-900);
|
||||
}
|
||||
.text-green-600 {
|
||||
color: var(--color-green-600);
|
||||
}
|
||||
.text-red-600 {
|
||||
color: var(--color-red-600);
|
||||
}
|
||||
@@ -699,6 +706,10 @@
|
||||
--tw-shadow: 0 -1px 2px var(--tw-shadow-color, rgba(0,0,0,0.2));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-inner {
|
||||
--tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
.shadow-lg {
|
||||
--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
@@ -817,14 +828,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.checked\:bg-white\/50 {
|
||||
&:checked {
|
||||
background-color: color-mix(in srgb, #fff 50%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-\[\#3b6ea2\] {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -832,6 +835,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-blue-50 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-blue-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-blue-700 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -846,6 +856,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-gray-100 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-white\/10 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -856,6 +873,13 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-blue-600 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-blue-600);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-white {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
@@ -863,13 +887,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:underline {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active\:bg-\[\#6b9ed2\] {
|
||||
&:active {
|
||||
background-color: #6b9ed2;
|
||||
@@ -885,9 +902,9 @@
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.sm\:ml-6 {
|
||||
.sm\:mx-2 {
|
||||
@media (width >= 40rem) {
|
||||
margin-left: calc(var(--spacing) * 6);
|
||||
margin-inline: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
.sm\:block {
|
||||
@@ -900,11 +917,6 @@
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.sm\:h-\[calc\(100vh-3\.5rem\)\] {
|
||||
@media (width >= 40rem) {
|
||||
height: calc(100vh - 3.5rem);
|
||||
}
|
||||
}
|
||||
.sm\:h-\[calc\(100vh-4\.5rem\)\] {
|
||||
@media (width >= 40rem) {
|
||||
height: calc(100vh - 4.5rem);
|
||||
@@ -925,9 +937,9 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
}
|
||||
.sm\:justify-end {
|
||||
.sm\:gap-4 {
|
||||
@media (width >= 40rem) {
|
||||
justify-content: flex-end;
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
}
|
||||
.sm\:overflow-y-auto {
|
||||
@@ -935,11 +947,21 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
.sm\:px-6 {
|
||||
@media (width >= 40rem) {
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
.sm\:px-8 {
|
||||
@media (width >= 40rem) {
|
||||
padding-inline: calc(var(--spacing) * 8);
|
||||
}
|
||||
}
|
||||
.lg\:flex {
|
||||
@media (width >= 64rem) {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.\[\&\.active\]\:border-blue-400 {
|
||||
&.active {
|
||||
border-color: var(--color-blue-400);
|
||||
@@ -953,14 +975,6 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.\[\&\.active\]\:bg-white\/\[0\.37\] {
|
||||
&.active {
|
||||
background-color: color-mix(in srgb, #fff 37%, transparent);
|
||||
@supports (color: color-mix(in lab, red, red)) {
|
||||
background-color: color-mix(in oklab, var(--color-white) 37%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
.\[\&\.active\]\:text-white {
|
||||
&.active {
|
||||
color: var(--color-white);
|
||||
|
||||
Reference in New Issue
Block a user