Created a basic set of tools for making my sites.
This commit is contained in:
Zed A. Shaw
parent
3ab3103e84
commit
01fcb964be
6 changed files with 356 additions and 52 deletions
|
|
@ -6,43 +6,92 @@ body {
|
|||
}
|
||||
|
||||
main {
|
||||
@apply p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50;
|
||||
@apply flex flex-col gap-4 p-0 min-h-screen bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50;
|
||||
}
|
||||
|
||||
header {
|
||||
@apply flex flex-col justify-stretch;
|
||||
}
|
||||
|
||||
nav {
|
||||
@apply flex bg-gray-950 *:text-gray-50 *:flex-1 *:text-xl p-6;
|
||||
}
|
||||
|
||||
code {
|
||||
speak-as: literal-punctuation;
|
||||
@apply inline-block bg-gray-800 text-gray-50;
|
||||
}
|
||||
|
||||
pre {
|
||||
@apply bg-gray-950 rounded-lg border-1 border-gray-300 mb-4 p-1;
|
||||
}
|
||||
|
||||
pre > code {
|
||||
@apply !bg-gray-950 p-1;
|
||||
}
|
||||
|
||||
footer {
|
||||
@apply bg-gray-950 text-gray-50 text-lg flex p-6;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-6xl pb-4;
|
||||
@apply text-6xl mb-2 mt-4;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-5xl pb-4;
|
||||
@apply text-5xl mb-2 mt-4;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-4xl pb-4;
|
||||
@apply text-4xl mb-2 mt-4;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-3xl pb-4;
|
||||
@apply text-3xl mb-2 mt-4;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@apply text-2xl pb-4;
|
||||
@apply text-2xl mb-2 mt-4;
|
||||
}
|
||||
|
||||
details {
|
||||
@apply rounded-lg bg-gray-200 text-gray-950 p-2 text-xl;
|
||||
}
|
||||
|
||||
aside {
|
||||
@apply p-2 rounded-lg bg-gray-100 text-gray-950;
|
||||
}
|
||||
|
||||
aside > mark {
|
||||
@apply p-1 rounded-sm bg-gray-300;
|
||||
}
|
||||
|
||||
aside > mark.info {
|
||||
@apply bg-purple-300;
|
||||
}
|
||||
|
||||
aside > mark.warning {
|
||||
@apply bg-yellow-300;
|
||||
}
|
||||
|
||||
aside > mark.alert {
|
||||
@apply bg-red-300;
|
||||
}
|
||||
|
||||
card {
|
||||
@apply flex flex-col bg-gray-800 max-w-md rounded-xl shadow-lg outline;
|
||||
@apply flex flex-col bg-gray-200 dark:bg-gray-800 dark:text-gray-100 max-w-md rounded-lg shadow-lg outline;
|
||||
}
|
||||
|
||||
card > top {
|
||||
@apply text-3xl font-bold text-center text-gray-50;
|
||||
@apply text-3xl font-bold text-center dark:text-gray-50;
|
||||
}
|
||||
|
||||
card > top > img {
|
||||
@apply rounded-t-lg;
|
||||
}
|
||||
|
||||
card > top > shape {
|
||||
@apply rounded-t-lg;
|
||||
}
|
||||
|
||||
card > bottom {
|
||||
|
|
@ -50,11 +99,11 @@ card > bottom {
|
|||
}
|
||||
|
||||
card > middle {
|
||||
@apply flex flex-col text-xl bg-gray-800 p-6 gap-4;
|
||||
@apply flex flex-col text-xl p-4 gap-4;
|
||||
}
|
||||
|
||||
label {
|
||||
@apply font-bold text-gray-100;
|
||||
@apply font-bold text-gray-950 dark:text-gray-100;
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -70,19 +119,19 @@ button {
|
|||
}
|
||||
|
||||
@utility btn-hover {
|
||||
@apply bg-gray-900! text-gray-50!;
|
||||
@apply !bg-gray-900 !text-gray-50;
|
||||
}
|
||||
|
||||
@utility btn-alert {
|
||||
@apply bg-red-800! text-gray-50!;
|
||||
@apply !bg-red-800 !text-gray-50;
|
||||
}
|
||||
|
||||
@utility btn-warning {
|
||||
@apply bg-yellow-800! text-gray-50!;
|
||||
@apply !bg-yellow-800 !text-gray-50;
|
||||
}
|
||||
|
||||
@utility btn-primary {
|
||||
@apply bg-teal-300! text-gray-950!;
|
||||
@apply !bg-teal-300 !text-gray-950;
|
||||
}
|
||||
|
||||
shape {
|
||||
|
|
@ -122,7 +171,7 @@ shape.video {
|
|||
}
|
||||
|
||||
block {
|
||||
@apply flex flex-col pl-4 pr-4 pb-10 pt-4 gap-4;
|
||||
@apply flex flex-col p-4 mb-10 gap-4;
|
||||
}
|
||||
|
||||
bar {
|
||||
|
|
@ -130,7 +179,6 @@ bar {
|
|||
}
|
||||
|
||||
stack {
|
||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
|
|
@ -138,7 +186,6 @@ stack {
|
|||
}
|
||||
|
||||
stack > * {
|
||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
|
@ -157,6 +204,10 @@ hr {
|
|||
visibility: hidden;
|
||||
}
|
||||
|
||||
select {
|
||||
@apply text-red-50 bg-gray-800 rounded-lg border-1 border-gray-600 p-1;
|
||||
}
|
||||
|
||||
table {
|
||||
@apply bg-gray-200 dark:bg-gray-800 shadow-lg rounded-sm;
|
||||
}
|
||||
|
|
|
|||
132
static/style.css
132
static/style.css
|
|
@ -7,10 +7,16 @@
|
|||
'Noto Color Emoji';
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
|
||||
monospace;
|
||||
--color-red-50: oklch(97.1% 0.013 17.38);
|
||||
--color-red-300: oklch(80.8% 0.114 19.571);
|
||||
--color-red-500: oklch(63.7% 0.237 25.331);
|
||||
--color-red-800: oklch(44.4% 0.177 26.899);
|
||||
--color-orange-500: oklch(70.5% 0.213 47.604);
|
||||
--color-yellow-300: oklch(90.5% 0.182 98.111);
|
||||
--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-purple-300: oklch(82.7% 0.119 306.383);
|
||||
--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);
|
||||
|
|
@ -468,6 +474,9 @@
|
|||
.bg-green-400\! {
|
||||
background-color: var(--color-green-400) !important;
|
||||
}
|
||||
.\!p-4 {
|
||||
padding: calc(var(--spacing) * 4) !important;
|
||||
}
|
||||
.p-0 {
|
||||
padding: calc(var(--spacing) * 0);
|
||||
}
|
||||
|
|
@ -559,6 +568,12 @@
|
|||
.text-gray-950 {
|
||||
color: var(--color-gray-950);
|
||||
}
|
||||
.text-orange-500 {
|
||||
color: var(--color-orange-500);
|
||||
}
|
||||
.text-red-500 {
|
||||
color: var(--color-red-500);
|
||||
}
|
||||
.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);
|
||||
|
|
@ -631,7 +646,10 @@ body {
|
|||
}
|
||||
}
|
||||
main {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--spacing) * 4);
|
||||
background-color: var(--color-gray-100);
|
||||
padding: calc(var(--spacing) * 0);
|
||||
color: var(--color-gray-950);
|
||||
|
|
@ -643,6 +661,11 @@ main {
|
|||
}
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: stretch;
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
background-color: var(--color-gray-950);
|
||||
padding: calc(var(--spacing) * 6);
|
||||
|
|
@ -657,6 +680,25 @@ header {
|
|||
color: var(--color-gray-50);
|
||||
}
|
||||
}
|
||||
code {
|
||||
speak-as: literal-punctuation;
|
||||
display: inline-block;
|
||||
background-color: var(--color-gray-800);
|
||||
color: var(--color-gray-50);
|
||||
}
|
||||
pre {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
border-radius: var(--radius-lg);
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
border-color: var(--color-gray-300);
|
||||
background-color: var(--color-gray-950);
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
pre > code {
|
||||
background-color: var(--color-gray-950) !important;
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
background-color: var(--color-gray-950);
|
||||
|
|
@ -666,40 +708,79 @@ footer {
|
|||
color: var(--color-gray-50);
|
||||
}
|
||||
h1 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-6xl);
|
||||
line-height: var(--tw-leading, var(--text-6xl--line-height));
|
||||
}
|
||||
h2 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
||||
}
|
||||
h3 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-4xl);
|
||||
line-height: var(--tw-leading, var(--text-4xl--line-height));
|
||||
}
|
||||
h4 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-3xl);
|
||||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
}
|
||||
h5 {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-2xl);
|
||||
line-height: var(--tw-leading, var(--text-2xl--line-height));
|
||||
}
|
||||
details {
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: var(--color-gray-200);
|
||||
padding: calc(var(--spacing) * 2);
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||
color: var(--color-gray-950);
|
||||
}
|
||||
aside {
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: var(--color-gray-100);
|
||||
padding: calc(var(--spacing) * 2);
|
||||
color: var(--color-gray-950);
|
||||
}
|
||||
aside > mark {
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: var(--color-gray-300);
|
||||
padding: calc(var(--spacing) * 1);
|
||||
}
|
||||
aside > mark.info {
|
||||
background-color: var(--color-purple-300);
|
||||
}
|
||||
aside > mark.warning {
|
||||
background-color: var(--color-yellow-300);
|
||||
}
|
||||
aside > mark.alert {
|
||||
background-color: var(--color-red-300);
|
||||
}
|
||||
card {
|
||||
display: flex;
|
||||
max-width: var(--container-md);
|
||||
flex-direction: column;
|
||||
border-radius: var(--radius-xl);
|
||||
background-color: var(--color-gray-800);
|
||||
border-radius: var(--radius-lg);
|
||||
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);
|
||||
outline-style: var(--tw-outline-style);
|
||||
outline-width: 1px;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
background-color: var(--color-gray-800);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-gray-100);
|
||||
}
|
||||
}
|
||||
card > top {
|
||||
text-align: center;
|
||||
|
|
@ -707,7 +788,17 @@ card > top {
|
|||
line-height: var(--tw-leading, var(--text-3xl--line-height));
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-gray-50);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-gray-50);
|
||||
}
|
||||
}
|
||||
card > top > img {
|
||||
border-top-left-radius: var(--radius-lg);
|
||||
border-top-right-radius: var(--radius-lg);
|
||||
}
|
||||
card > top > shape {
|
||||
border-top-left-radius: var(--radius-lg);
|
||||
border-top-right-radius: var(--radius-lg);
|
||||
}
|
||||
card > bottom {
|
||||
display: flex;
|
||||
|
|
@ -723,15 +814,17 @@ card > middle {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: calc(var(--spacing) * 4);
|
||||
background-color: var(--color-gray-800);
|
||||
padding: calc(var(--spacing) * 6);
|
||||
padding: calc(var(--spacing) * 4);
|
||||
font-size: var(--text-xl);
|
||||
line-height: var(--tw-leading, var(--text-xl--line-height));
|
||||
}
|
||||
label {
|
||||
--tw-font-weight: var(--font-weight-bold);
|
||||
font-weight: var(--font-weight-bold);
|
||||
color: var(--color-gray-100);
|
||||
color: var(--color-gray-950);
|
||||
@media (prefers-color-scheme: dark) {
|
||||
color: var(--color-gray-100);
|
||||
}
|
||||
}
|
||||
input {
|
||||
border-radius: var(--radius-sm);
|
||||
|
|
@ -818,13 +911,11 @@ shape.video {
|
|||
width: 100%;
|
||||
}
|
||||
block {
|
||||
margin-bottom: calc(var(--spacing) * 10);
|
||||
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);
|
||||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
bar {
|
||||
display: flex;
|
||||
|
|
@ -833,14 +924,12 @@ bar {
|
|||
padding: calc(var(--spacing) * 4);
|
||||
}
|
||||
stack {
|
||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas: "cover";
|
||||
}
|
||||
stack > * {
|
||||
color: hsl(0, 0%, calc(var(--text) * var(--value-scale)));
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
|
@ -857,6 +946,15 @@ grid {
|
|||
hr {
|
||||
visibility: hidden;
|
||||
}
|
||||
select {
|
||||
border-radius: var(--radius-lg);
|
||||
border-style: var(--tw-border-style);
|
||||
border-width: 1px;
|
||||
border-color: var(--color-gray-600);
|
||||
background-color: var(--color-gray-800);
|
||||
padding: calc(var(--spacing) * 1);
|
||||
color: var(--color-red-50);
|
||||
}
|
||||
table {
|
||||
border-radius: var(--radius-sm);
|
||||
background-color: var(--color-gray-200);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue