Fixed up dark mode vs. not and added a linkedin mobil copy.
This commit is contained in:
Zed A. Shaw
parent
bf1426261d
commit
2477603190
12 changed files with 758 additions and 491 deletions
170
static/style.css
170
static/style.css
|
|
@ -8,8 +8,9 @@
|
|||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--color-red-800: oklch(44.4% 0.177 26.899);
|
||||
--color-yellow-900: oklch(42.1% 0.095 57.708);
|
||||
--color-green-400: oklch(79.2% 0.209 151.711);
|
||||
--color-teal-300: oklch(85.5% 0.138 181.071);
|
||||
--color-blue-400: oklch(70.7% 0.165 254.624);
|
||||
--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);
|
||||
|
|
@ -22,7 +23,6 @@
|
|||
--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;
|
||||
--container-xs: 20rem;
|
||||
--container-sm: 24rem;
|
||||
|
|
@ -45,7 +45,7 @@
|
|||
--text-5xl--line-height: 1;
|
||||
--text-6xl: 3.75rem;
|
||||
--text-6xl--line-height: 1;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-light: 300;
|
||||
--font-weight-bold: 700;
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.375rem;
|
||||
|
|
@ -212,6 +212,12 @@
|
|||
.static {
|
||||
position: static;
|
||||
}
|
||||
.top-3 {
|
||||
top: calc(var(--spacing) * 3);
|
||||
}
|
||||
.left-3 {
|
||||
left: calc(var(--spacing) * 3);
|
||||
}
|
||||
.block {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -230,6 +236,9 @@
|
|||
.table {
|
||||
display: table;
|
||||
}
|
||||
.table-row {
|
||||
display: table-row;
|
||||
}
|
||||
.aspect-video {
|
||||
aspect-ratio: var(--aspect-video);
|
||||
}
|
||||
|
|
@ -240,6 +249,15 @@
|
|||
.h-10 {
|
||||
height: calc(var(--spacing) * 10);
|
||||
}
|
||||
.h-15 {
|
||||
height: calc(var(--spacing) * 15);
|
||||
}
|
||||
.max-h-10 {
|
||||
max-height: calc(var(--spacing) * 10);
|
||||
}
|
||||
.max-h-15\! {
|
||||
max-height: calc(var(--spacing) * 15) !important;
|
||||
}
|
||||
.min-h-screen {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
|
@ -285,6 +303,9 @@
|
|||
.justify-evenly {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.gap-0\! {
|
||||
gap: calc(var(--spacing) * 0) !important;
|
||||
}
|
||||
.gap-4 {
|
||||
gap: calc(var(--spacing) * 4);
|
||||
}
|
||||
|
|
@ -297,11 +318,36 @@
|
|||
.gap-10 {
|
||||
gap: calc(var(--spacing) * 10);
|
||||
}
|
||||
.rounded-full {
|
||||
border-radius: calc(infinity * 1px);
|
||||
}
|
||||
.rounded-md {
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
.rounded-sm {
|
||||
border-radius: var(--radius-sm);
|
||||
.rounded-xl {
|
||||
border-radius: var(--radius-xl);
|
||||
}
|
||||
.table-row {
|
||||
:is(& > *) {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 2px;
|
||||
}
|
||||
:is(& > *) {
|
||||
border-color: var(--color-black);
|
||||
}
|
||||
:is(& > *) {
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-gray-950);
|
||||
}
|
||||
}
|
||||
}
|
||||
.border-1 {
|
||||
border-style: var(--tw-border-style);
|
||||
|
|
@ -311,6 +357,17 @@
|
|||
border-style: var(--tw-border-style);
|
||||
border-width: 2px;
|
||||
}
|
||||
.table-header {
|
||||
background-color: var(--color-gray-950);
|
||||
color: var(--color-gray-50);
|
||||
:is(& > *) {
|
||||
border-inline-style: var(--tw-border-style);
|
||||
border-inline-width: 1px;
|
||||
}
|
||||
:is(& > *) {
|
||||
border-color: var(--color-black);
|
||||
}
|
||||
}
|
||||
.border-b-1 {
|
||||
border-bottom-style: var(--tw-border-style);
|
||||
border-bottom-width: 1px;
|
||||
|
|
@ -329,9 +386,15 @@
|
|||
background-color: var(--color-teal-300) !important;
|
||||
color: var(--color-gray-950) !important;
|
||||
}
|
||||
.bg-blue-400 {
|
||||
background-color: var(--color-blue-400);
|
||||
}
|
||||
.bg-gray-50 {
|
||||
background-color: var(--color-gray-50);
|
||||
}
|
||||
.bg-gray-100 {
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
.bg-gray-200 {
|
||||
background-color: var(--color-gray-200);
|
||||
}
|
||||
|
|
@ -341,23 +404,29 @@
|
|||
.bg-gray-400 {
|
||||
background-color: var(--color-gray-400);
|
||||
}
|
||||
.bg-gray-400\! {
|
||||
background-color: var(--color-gray-400) !important;
|
||||
}
|
||||
.bg-gray-600 {
|
||||
background-color: var(--color-gray-600);
|
||||
}
|
||||
.bg-gray-800 {
|
||||
background-color: var(--color-gray-800);
|
||||
}
|
||||
.bg-gray-950 {
|
||||
background-color: var(--color-gray-950);
|
||||
}
|
||||
.bg-gray-950\! {
|
||||
background-color: var(--color-gray-950) !important;
|
||||
}
|
||||
.bg-green-400\! {
|
||||
background-color: var(--color-green-400) !important;
|
||||
}
|
||||
.p-0 {
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
.p-2 {
|
||||
padding: calc(var(--spacing) * 2);
|
||||
.p-0\! {
|
||||
padding: calc(var(--spacing) * 0) !important;
|
||||
}
|
||||
.p-2\! {
|
||||
padding: calc(var(--spacing) * 2) !important;
|
||||
}
|
||||
.p-3 {
|
||||
padding: calc(var(--spacing) * 3);
|
||||
|
|
@ -371,6 +440,9 @@
|
|||
.pt-4 {
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
.pb-0\! {
|
||||
padding-bottom: calc(var(--spacing) * 0) !important;
|
||||
}
|
||||
.pb-3 {
|
||||
padding-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
|
|
@ -406,6 +478,10 @@
|
|||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
.font-light {
|
||||
--tw-font-weight: var(--font-weight-light);
|
||||
font-weight: var(--font-weight-light);
|
||||
}
|
||||
.text-gray-50 {
|
||||
color: var(--color-gray-50);
|
||||
}
|
||||
|
|
@ -421,28 +497,6 @@
|
|||
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
|
||||
transition-duration: var(--tw-duration, var(--default-transition-duration));
|
||||
}
|
||||
.\*\:border-2 {
|
||||
:is(& > *) {
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
.\*\:border-x {
|
||||
:is(& > *) {
|
||||
border-inline-style: var(--tw-border-style);
|
||||
border-inline-width: 1px;
|
||||
}
|
||||
}
|
||||
.\*\:border-black {
|
||||
:is(& > *) {
|
||||
border-color: var(--color-black);
|
||||
}
|
||||
}
|
||||
.\*\:p-1 {
|
||||
:is(& > *) {
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
}
|
||||
.\*\:text-nowrap {
|
||||
:is(& > *) {
|
||||
text-wrap: nowrap;
|
||||
|
|
@ -464,13 +518,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-gray-100 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
background-color: var(--color-gray-100);
|
||||
}
|
||||
}
|
||||
}
|
||||
.hover\:bg-gray-950 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
|
|
@ -478,11 +525,14 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.hover\:text-gray-950 {
|
||||
&:hover {
|
||||
@media (hover: hover) {
|
||||
color: var(--color-gray-950);
|
||||
}
|
||||
.dark\:bg-gray-300 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--color-gray-300);
|
||||
}
|
||||
}
|
||||
.dark\:bg-gray-800 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--color-gray-800);
|
||||
}
|
||||
}
|
||||
.dark\:bg-gray-900 {
|
||||
|
|
@ -490,6 +540,11 @@
|
|||
background-color: var(--color-gray-900);
|
||||
}
|
||||
}
|
||||
.dark\:text-gray-50 {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-gray-50);
|
||||
}
|
||||
}
|
||||
}
|
||||
@layer theme;
|
||||
body {
|
||||
|
|
@ -587,10 +642,7 @@ card > middle {
|
|||
label {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-gray-950);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-white);
|
||||
}
|
||||
color: var(--color-gray-100);
|
||||
}
|
||||
input {
|
||||
border-radius: var(--radius-sm);
|
||||
|
|
@ -613,11 +665,17 @@ input::placeholder {
|
|||
}
|
||||
button {
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: var(--color-gray-300);
|
||||
background-color: var(--color-gray-600);
|
||||
padding: calc(var(--spacing) * 3);
|
||||
color: var(--color-gray-950);
|
||||
color: var(--color-gray-50);
|
||||
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px 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);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--color-gray-300);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-gray-950);
|
||||
}
|
||||
}
|
||||
shape {
|
||||
display: flex;
|
||||
|
|
@ -673,12 +731,13 @@ shape.video {
|
|||
block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--spacing) * 4);
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
padding-right: calc(var(--spacing) * 4);
|
||||
padding-bottom: calc(var(--spacing) * 10);
|
||||
padding-left: calc(var(--spacing) * 4);
|
||||
}
|
||||
block.horizontal {
|
||||
bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: calc(var(--spacing) * 4);
|
||||
|
|
@ -709,6 +768,15 @@ grid {
|
|||
hr {
|
||||
visibility: hidden;
|
||||
}
|
||||
table {
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: var(--color-gray-200);
|
||||
--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);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--color-gray-800);
|
||||
}
|
||||
}
|
||||
@property --tw-rotate-x {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue