Records on my fingers
⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠟⠛⠛⠛⠋⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠙⠛⠛⠛⠿⠻⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠋⠀⠀⠀⠀⠀⡀⠠⠤⠒⢂⣉⣉⣉⣑⣒⣒⠒⠒⠒⠒⠒⠒⠒⠀⠀⠐⠒⠚⠻⠿⠿⣿⣿⣿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⠏⠀⠀⠀⠀⡠⠔⠉⣀⠔⠒⠉⣀⣀⠀⠀⠀⣀⡀⠈⠉⠑⠒⠒⠒⠒⠒⠈⠉⠉⠉⠁⠂⠀⠈⠙⢿⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⠇⠀⠀⠀⠔⠁⠠⠖⠡⠔⠊⠀⠀⠀⠀⠀⠀⠀⠐⡄⠀⠀⠀⠀⠀⠀⡄⠀⠀⠀⠀⠉⠲⢄⠀⠀⠀⠈⣿⣿⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⠋⠀⠀⠀⠀⠀⠀⠀⠊⠀⢀⣀⣤⣤⣤⣤⣀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠜⠀⠀⠀⠀⣀⡀⠀⠈⠃⠀⠀⠀⠸⣿⣿⣿⣿ ⣿⣿⣿⣿⡿⠥⠐⠂⠀⠀⠀⠀⡄⠀⠰⢺⣿⣿⣿⣿⣿⣟⠀⠈⠐⢤⠀⠀⠀⠀⠀⠀⢀⣠⣶⣾⣯⠀⠀⠉⠂⠀⠠⠤⢄⣀⠙⢿⣿⣿ ⣿⡿⠋⠡⠐⠈⣉⠭⠤⠤⢄⡀⠈⠀⠈⠁⠉⠁⡠⠀⠀⠀⠉⠐⠠⠔⠀⠀⠀⠀⠀⠲⣿⠿⠛⠛⠓⠒⠂⠀⠀⠀⠀⠀⠀⠠⡉⢢⠙⣿ ⣿⠀⢀⠁⠀⠊⠀⠀⠀⠀⠀⠈⠁⠒⠂⠀⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡇⠀⠀⠀⠀⠀⢀⣀⡠⠔⠒⠒⠂⠀⠈⠀⡇⣿ ⣿⠀⢸⠀⠀⠀⢀⣀⡠⠋⠓⠤⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠄⠀⠀⠀⠀⠀⠀⠈⠢⠤⡀⠀⠀⠀⠀⠀⠀⢠⠀⠀⠀⡠⠀⡇⣿ ⣿⡀⠘⠀⠀⠀⠀⠀⠘⡄⠀⠀⠀⠈⠑⡦⢄⣀⠀⠀⠐⠒⠁⢸⠀⠀⠠⠒⠄⠀⠀⠀⠀⠀⢀⠇⠀⣀⡀⠀⠀⢀⢾⡆⠀⠈⡀⠎⣸⣿ ⣿⣿⣄⡈⠢⠀⠀⠀⠀⠘⣶⣄⡀⠀⠀⡇⠀⠀⠈⠉⠒⠢⡤⣀⡀⠀⠀⠀⠀⠀⠐⠦⠤⠒⠁⠀⠀⠀⠀⣀⢴⠁⠀⢷⠀⠀⠀⢰⣿⣿ ⣿⣿⣿⣿⣇⠂⠀⠀⠀⠀⠈⢂⠀⠈⠹⡧⣀⠀⠀⠀⠀⠀⡇⠀⠀⠉⠉⠉⢱⠒⠒⠒⠒⢖⠒⠒⠂⠙⠏⠀⠘⡀⠀⢸⠀⠀⠀⣿⣿⣿ ⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠑⠄⠰⠀⠀⠁⠐⠲⣤⣴⣄⡀⠀⠀⠀⠀⢸⠀⠀⠀⠀⢸⠀⠀⠀⠀⢠⠀⣠⣷⣶⣿⠀⠀⢰⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣧⠀⠀⠀⠀⠀⠀⠀⠁⢀⠀⠀⠀⠀⠀⡙⠋⠙⠓⠲⢤⣤⣷⣤⣤⣤⣤⣾⣦⣤⣤⣶⣿⣿⣿⣿⡟⢹⠀⠀⢸⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣧⡀⠀⠀⠀⠀⠀⠀⠀⠑⠀⢄⠀⡰⠁⠀⠀⠀⠀⠀⠈⠉⠁⠈⠉⠻⠋⠉⠛⢛⠉⠉⢹⠁⢀⢇⠎⠀⠀⢸⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣦⣀⠈⠢⢄⡉⠂⠄⡀⠀⠈⠒⠢⠄⠀⢀⣀⣀⣰⠀⠀⠀⠀⠀⠀⠀⠀⡀⠀⢀⣎⠀⠼⠊⠀⠀⠀⠘⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣄⡀⠉⠢⢄⡈⠑⠢⢄⡀⠀⠀⠀⠀⠀⠀⠉⠉⠉⠉⠉⠉⠉⠉⠉⠉⠁⠀⠀⢀⠀⠀⠀⠀⠀⢻⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣦⣀⡈⠑⠢⢄⡀⠈⠑⠒⠤⠄⣀⣀⠀⠉⠉⠉⠉⠀⠀⠀⣀⡀⠤⠂⠁⠀⢀⠆⠀⠀⢸⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣦⣄⡀⠁⠉⠒⠂⠤⠤⣀⣀⣉⡉⠉⠉⠉⠉⢀⣀⣀⡠⠤⠒⠈⠀⠀⠀⠀⣸⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣶⣤⣄⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿ ⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣶⣶⣶⣤⣤⣤⣤⣀⣀⣤⣤⣤⣶⣾⣿⣿⣿⣿⣿
This commit is contained in:
parent
18251d7f00
commit
22ad0a0a11
GPG key ID:
B61CC9ADABE2D952
13 changed files with 572 additions and 161 deletions
|
|
@ -1,53 +1,122 @@
|
|||
@use "tailwind/border-radius";
|
||||
@use "tailwind/colors";
|
||||
@use "tailwind/spacing";
|
||||
@use "tailwind/transition";
|
||||
@use "tailwind/text";
|
||||
|
||||
html {
|
||||
color-scheme: light dark;
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
/* These need switchable client-side */
|
||||
:root {
|
||||
/* Foreground */
|
||||
--color-fg-base: #{colors.$slate-700};
|
||||
--color-fg-deemphasized: #{colors.$slate-600};
|
||||
--color-fg-headings: #{colors.$slate-900};
|
||||
|
||||
/* Background */
|
||||
--color-bg-base: #{colors.$slate-100};
|
||||
--color-bg-raised-1: #{colors.$slate-200};
|
||||
--color-bg-raised-2: #{colors.$slate-300};
|
||||
|
||||
/* Borders */
|
||||
--color-bd-base: #{colors.$slate-300};
|
||||
--color-bd-highlighted: #{colors.$slate-500};
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* Foreground */
|
||||
--color-fg-base: #{colors.$slate-300};
|
||||
--color-fg-deemphasized: #{colors.$slate-400};
|
||||
--color-fg-headings: #{colors.$slate-100};
|
||||
--color-fg-base: #{colors.$slate-700};
|
||||
--color-fg-deemphasized: #{colors.$slate-600};
|
||||
--color-fg-headings: #{colors.$slate-900};
|
||||
|
||||
/* Background */
|
||||
--color-bg-base: #{colors.$slate-900};
|
||||
--color-bg-raised-1: #{colors.$slate-800};
|
||||
--color-bg-raised-2: #{colors.$slate-700};
|
||||
--color-bg-base: #{colors.$slate-100};
|
||||
--color-bg-raised-1: #{colors.$slate-200};
|
||||
--color-bg-raised-2: #{colors.$slate-300};
|
||||
--color-bg-raised-3: #{colors.$slate-400};
|
||||
|
||||
/* Borders */
|
||||
--color-bd-base: #{colors.$slate-700};
|
||||
--color-bd-highlighted: #{colors.$slate-500};
|
||||
}
|
||||
--color-bd-base: #{colors.$slate-300};
|
||||
--color-bd-highlighted-1: #{colors.$slate-500};
|
||||
--color-bd-highlighted-2: #{colors.$slate-600};
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
/* Foreground */
|
||||
--color-fg-base: #{colors.$slate-300};
|
||||
--color-fg-deemphasized: #{colors.$slate-400};
|
||||
--color-fg-headings: #{colors.$slate-100};
|
||||
|
||||
/* Background */
|
||||
--color-bg-base: #{colors.$slate-900};
|
||||
--color-bg-raised-1: #{colors.$slate-800};
|
||||
--color-bg-raised-2: #{colors.$slate-700};
|
||||
|
||||
/* Borders */
|
||||
--color-bd-base: #{colors.$slate-700};
|
||||
--color-bd-highlighted: #{colors.$slate-500};
|
||||
}
|
||||
}
|
||||
|
||||
@mixin heading($disable-margin: false) {
|
||||
color: var(--color-fg-headings);
|
||||
@if $disable-margin {
|
||||
margin: 0;
|
||||
}
|
||||
color: var(--color-fg-headings);
|
||||
font-weight: text.$font-weight-bold;
|
||||
@if $disable-margin {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin heading2($disable-margin: false) {
|
||||
@include heading($disable-margin);
|
||||
font-size: text.$font-size-4xl;
|
||||
font-weight: text.$font-weight-bold;
|
||||
@include heading($disable-margin);
|
||||
font-size: text.$font-size-4xl;
|
||||
}
|
||||
|
||||
@mixin heading3($disable-margin: false) {
|
||||
@include heading($disable-margin);
|
||||
font-size: text.$font-size-3xl;
|
||||
}
|
||||
|
||||
@mixin heading4($disable-margin: false) {
|
||||
@include heading($disable-margin);
|
||||
font-size: text.$font-size-2xl;
|
||||
}
|
||||
|
||||
@mixin surface($is-interactive: false, $is-raised: false) {
|
||||
border: 1px solid var(--color-bd-base);
|
||||
border-radius: border-radius.$br-xl;
|
||||
transition-duration: transition.$duration-default;
|
||||
transition-timing-function: transition.$timing-fn-default;
|
||||
transition-property: background-color, border-color;
|
||||
|
||||
@if $is-raised {
|
||||
background-color: var(--color-bg-raised-1);
|
||||
} @else {
|
||||
background-color: unset;
|
||||
}
|
||||
|
||||
@if $is-interactive {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
border-color: var(--color-bd-highlighted-1);
|
||||
@if $is-raised {
|
||||
background-color: var(--color-bg-raised-2);
|
||||
} @else {
|
||||
background-color: var(--color-bg-raised-1);
|
||||
}
|
||||
}
|
||||
|
||||
&.active- {
|
||||
border-color: var(--color-bd-highlighted-1);
|
||||
@if $is-raised {
|
||||
background-color: var(--color-bg-raised-2);
|
||||
} @else {
|
||||
background-color: var(--color-bg-raised-1);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
border-color: var(--color-bd-highlighted-2);
|
||||
@if $is-raised {
|
||||
background-color: var(--color-bg-raised-3);
|
||||
} @else {
|
||||
background-color: var(--color-bg-raised-2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin button($is-raised: false) {
|
||||
@include surface(true, $is-raised);
|
||||
display: block;
|
||||
padding: spacing.s(1) spacing.s(3);
|
||||
font-size: text.$font-size-sm;
|
||||
color: unset;
|
||||
}
|
||||
|
|
|
|||
109
styles/admin.scss
Normal file
109
styles/admin.scss
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
@use "theme";
|
||||
@use "tailwind/spacing";
|
||||
|
||||
body.admin {
|
||||
width: 100%;
|
||||
max-width: spacing.$max-width-5xl;
|
||||
padding: spacing.s(16) spacing.s(8);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: spacing.s(64) auto;
|
||||
grid-template-rows: auto auto auto;
|
||||
grid-template-areas:
|
||||
"logo none"
|
||||
"sidebar main"
|
||||
"footer footer";
|
||||
gap: spacing.s(4);
|
||||
|
||||
> h1 {
|
||||
@include theme.heading2(true);
|
||||
grid-area: logo;
|
||||
}
|
||||
|
||||
> aside[role="navigation"] {
|
||||
grid-area: sidebar;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: unset;
|
||||
padding: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: spacing.s(2);
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: spacing.s(3) spacing.s(4);
|
||||
color: unset;
|
||||
text-decoration: unset;
|
||||
@include theme.surface(true, false);
|
||||
}
|
||||
}
|
||||
|
||||
> main {
|
||||
grid-area: main;
|
||||
}
|
||||
|
||||
> footer {
|
||||
grid-area: footer;
|
||||
color: var(--color-fg-deemphasized);
|
||||
}
|
||||
}
|
||||
|
||||
body.admin-pastes {
|
||||
main > ul {
|
||||
list-style: none;
|
||||
margin: unset;
|
||||
padding: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: spacing.s(6);
|
||||
|
||||
li {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
"title buttons"
|
||||
"timestamp buttons"
|
||||
"content content";
|
||||
gap: spacing.s(4);
|
||||
|
||||
.title {
|
||||
grid-area: title;
|
||||
@include theme.heading4(true);
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
time {
|
||||
grid-area: timestamp;
|
||||
color: var(--color-fg-deemphasized);
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
grid-area: buttons;
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
align-items: end;
|
||||
gap: spacing.s(2);
|
||||
|
||||
button {
|
||||
@include theme.button(true);
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
grid-area: content;
|
||||
@include theme.surface(false, true);
|
||||
padding: spacing.s(4);
|
||||
margin: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,13 +8,16 @@
|
|||
}
|
||||
|
||||
body {
|
||||
// @apply flex flex-col gap-8 px-4 py-16 mx-auto max-w-4xl bg-slate-900 text-fg-base max-lg:py-8;
|
||||
font-family: Inter, "Inter Variable", sans-serif;
|
||||
color: var(--color-fg-base);
|
||||
background-color: var(--color-bg-base);
|
||||
padding: spacing.s(16) spacing.s(8);
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
body:not(.admin) {
|
||||
// @apply flex flex-col gap-8 px-4 py-16 mx-auto max-w-4xl bg-slate-900 text-fg-base max-lg:py-8;
|
||||
max-width: spacing.$max-width-4xl;
|
||||
padding: spacing.s(16) spacing.s(8);
|
||||
|
||||
&.wide {
|
||||
max-width: spacing.$max-width-6xl;
|
||||
|
|
@ -85,41 +88,41 @@ body.paste {
|
|||
}
|
||||
}
|
||||
|
||||
body.admin-pastes {
|
||||
main form {
|
||||
input[type="text"],
|
||||
textarea,
|
||||
input[type="submit"] {
|
||||
padding: spacing.s(2) spacing.s(3);
|
||||
border-radius: border-radius.$br-lg;
|
||||
background-color: var(--color-bg-raised-1);
|
||||
border: 1px solid var(--color-bd-base);
|
||||
font-size: inherit;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background-color: var(--color-bg-raised-2);
|
||||
border-color: var(--color-bd-highlighted);
|
||||
}
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
textarea {
|
||||
width: 100%;
|
||||
margin-bottom: spacing.s(4);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: spacing.s(32);
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
// body.admin-pastes {
|
||||
// main form {
|
||||
// input[type="text"],
|
||||
// textarea,
|
||||
// input[type="submit"] {
|
||||
// padding: spacing.s(2) spacing.s(3);
|
||||
// border-radius: border-radius.$br-lg;
|
||||
// background-color: var(--color-bg-raised-1);
|
||||
// border: 1px solid var(--color-bd-base);
|
||||
// font-size: inherit;
|
||||
//
|
||||
// &:hover,
|
||||
// &:focus-visible {
|
||||
// background-color: var(--color-bg-raised-2);
|
||||
// border-color: var(--color-bd-highlighted);
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// input[type="text"],
|
||||
// textarea {
|
||||
// width: 100%;
|
||||
// margin-bottom: spacing.s(4);
|
||||
// }
|
||||
//
|
||||
// textarea {
|
||||
// min-height: spacing.s(32);
|
||||
// }
|
||||
//
|
||||
// input[type="submit"] {
|
||||
// cursor: pointer;
|
||||
// margin-left: auto;
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
a.tl {
|
||||
// @apply underline hover:no-underline hover:text-white focus-visible:no-underline focus-visible:text-white;
|
||||
|
|
|
|||
7
styles/tailwind/_transition.scss
Normal file
7
styles/tailwind/_transition.scss
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
$timing-fn-default: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
$timing-fn-linear: linear;
|
||||
$timing-fn-in: cubic-bezier(0.4, 0, 1, 1);
|
||||
$timing-fn-out: cubic-bezier(0, 0, 0.2, 1);
|
||||
$timing-fn-in-out: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
$duration-default: 150ms;
|
||||
Loading…
Add table
Add a link
Reference in a new issue