It was like that when I got here
This commit is contained in:
parent
331423d3f6
commit
18251d7f00
GPG key ID:
B61CC9ADABE2D952
36 changed files with 1534 additions and 1000 deletions
53
styles/_theme.scss
Normal file
53
styles/_theme.scss
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@use "tailwind/colors";
|
||||
@use "tailwind/spacing";
|
||||
@use "tailwind/text";
|
||||
|
||||
html {
|
||||
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};
|
||||
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin heading2($disable-margin: false) {
|
||||
@include heading($disable-margin);
|
||||
font-size: text.$font-size-4xl;
|
||||
font-weight: text.$font-weight-bold;
|
||||
}
|
||||
138
styles/style.scss
Normal file
138
styles/style.scss
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
@use "theme";
|
||||
@use "tailwind/border-radius";
|
||||
@use "tailwind/spacing";
|
||||
@use "tailwind/text";
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
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;
|
||||
max-width: spacing.$max-width-4xl;
|
||||
|
||||
&.wide {
|
||||
max-width: spacing.$max-width-6xl;
|
||||
}
|
||||
|
||||
@media not all and (min-width: var(--max-width-lg)) {
|
||||
padding: spacing.s(8);
|
||||
}
|
||||
|
||||
header {
|
||||
margin-bottom: spacing.s(8);
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
color: var(--color-fg-headings);
|
||||
font-size: text.$font-size-3xl;
|
||||
font-weight: text.$font-weight-extrabold;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
color: var(--color-fg-deemphasized);
|
||||
margin-top: spacing.s(8);
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
body.paste {
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: end;
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
gap: spacing.s(2);
|
||||
|
||||
button,
|
||||
[role="button"] {
|
||||
background-color: var(--color-bg-raised-1);
|
||||
padding: spacing.s(1) spacing.s(3);
|
||||
border: 1px solid var(--color-bd-base);
|
||||
border-radius: border-radius.$br-lg;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
font-size: text.$font-size-sm;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
background-color: var(--color-bg-raised-2);
|
||||
border-color: var(--color-bd-highlighted);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
pre {
|
||||
// pre class="p-4 border border-bd-base rounded-xl" { (r.content) }
|
||||
background-color: var(--color-bg-raised-1);
|
||||
padding: spacing.s(4);
|
||||
border: 1px solid var(--color-bd-base);
|
||||
border-radius: border-radius.$br-xl;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
table {
|
||||
// @apply table-auto border-collapse border border-bd-base;
|
||||
|
||||
thead tr th {
|
||||
// @apply border border-bd-base px-2 py-1 text-left;
|
||||
}
|
||||
|
||||
tbody tr td {
|
||||
// @apply border border-bd-base px-2 py-1;
|
||||
}
|
||||
}
|
||||
10
styles/tailwind/_border-radius.scss
Normal file
10
styles/tailwind/_border-radius.scss
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L162 */
|
||||
$br-none: 0px;
|
||||
$br-sm: 0.125rem;
|
||||
$br-default: 0.25rem;
|
||||
$br-md: 0.375rem;
|
||||
$br-lg: 0.5rem;
|
||||
$br-xl: 0.75rem;
|
||||
$br-2xl: 1rem;
|
||||
$br-3xl: 1.5rem;
|
||||
$br-full: 9999px;
|
||||
12
styles/tailwind/_colors.scss
Normal file
12
styles/tailwind/_colors.scss
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/* Tailwind palette */
|
||||
$slate-50: #f8fafc;
|
||||
$slate-100: #f1f5f9;
|
||||
$slate-200: #e2e8f0;
|
||||
$slate-300: #cbd5e1;
|
||||
$slate-400: #94a3b8;
|
||||
$slate-500: #64748b;
|
||||
$slate-600: #475569;
|
||||
$slate-700: #334155;
|
||||
$slate-800: #1e293b;
|
||||
$slate-900: #0f172a;
|
||||
$slate-950: #020617;
|
||||
0
styles/tailwind/_max-width.scss
Normal file
0
styles/tailwind/_max-width.scss
Normal file
6
styles/tailwind/_screens.scss
Normal file
6
styles/tailwind/_screens.scss
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
/* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L885 */
|
||||
$screen-sm: 640px;
|
||||
$screen-md: 768px;
|
||||
$screen-lg: 1024px;
|
||||
$screen-xl: 1280px;
|
||||
$screen-2xl: 1536px;
|
||||
25
styles/tailwind/_spacing.scss
Normal file
25
styles/tailwind/_spacing.scss
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
/* Yes, it's that simple.
|
||||
* https://tailwindcss.com/docs/customizing-spacing#default-spacing-scale
|
||||
* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L909 */
|
||||
@function s($n) {
|
||||
@return 0.25rem * $n;
|
||||
}
|
||||
|
||||
/* https://github.com/tailwindlabs/tailwindcss/blob/ac6d4a6e8e9ae7ca197bf98d933ae2f205be3635/packages/tailwindcss/src/compat/default-theme.ts#L715 */
|
||||
$max-width-none: none;
|
||||
$max-width-xs: 20rem;
|
||||
$max-width-sm: 24rem;
|
||||
$max-width-md: 28rem;
|
||||
$max-width-lg: 32rem;
|
||||
$max-width-xl: 36rem;
|
||||
$max-width-2xl: 42rem;
|
||||
$max-width-3xl: 48rem;
|
||||
$max-width-4xl: 56rem;
|
||||
$max-width-5xl: 64rem;
|
||||
$max-width-6xl: 72rem;
|
||||
$max-width-7xl: 80rem;
|
||||
$max-width-full: 100%;
|
||||
$max-width-min: min-content;
|
||||
$max-width-max: max-content;
|
||||
$max-width-fit: fit-content;
|
||||
$max-width-prose: 65ch;
|
||||
37
styles/tailwind/_text.scss
Normal file
37
styles/tailwind/_text.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
$font-size-xs: 0.75rem;
|
||||
$font-size-sm: 0.875rem;
|
||||
$font-size-base: 1rem;
|
||||
$font-size-lg: 1.125rem;
|
||||
$font-size-xl: 1.25rem;
|
||||
$font-size-2xl: 1.5rem;
|
||||
$font-size-3xl: 1.875rem;
|
||||
$font-size-4xl: 2.25rem;
|
||||
$font-size-5xl: 3rem;
|
||||
$font-size-6xl: 3.75rem;
|
||||
$font-size-7xl: 4.5rem;
|
||||
$font-size-8xl: 6rem;
|
||||
$font-size-9xl: 8rem;
|
||||
|
||||
$line-height-xs: 1rem;
|
||||
$line-height-sm: 1.25rem;
|
||||
$line-height-base: 1.5rem;
|
||||
$line-height-lg: 1.75rem;
|
||||
$line-height-xl: 1.75rem;
|
||||
$line-height-2xl: 2rem;
|
||||
$line-height-3xl: 2.25rem;
|
||||
$line-height-4xl: 2.5rem;
|
||||
$line-height-5xl: 1;
|
||||
$line-height-6xl: 1;
|
||||
$line-height-7xl: 1;
|
||||
$line-height-8xl: 1;
|
||||
$line-height-9xl: 1;
|
||||
|
||||
$font-weight-thin: 100;
|
||||
$font-weight-extralight: 200;
|
||||
$font-weight-light: 300;
|
||||
$font-weight-normal: 400;
|
||||
$font-weight-medium: 500;
|
||||
$font-weight-semibold: 600;
|
||||
$font-weight-bold: 700;
|
||||
$font-weight-extrabold: 800;
|
||||
$font-weight-black: 900;
|
||||
Loading…
Add table
Add a link
Reference in a new issue