Discover books, shows, and movies at your level. Track your progress by filling your Shelf with what you find, and share with other language learners. *No dusting required.
shlf.space
1@import "tailwindcss";
2@import "./internal/ui/views/index/index.css";
3@import "./internal/ui/views/shelf/shelf.css";
4@import "./internal/ui/views/login/login.css";
5@import "./internal/ui/components/header/header.css";
6
7@font-face {
8 font-family: 'Epilogue';
9 font-style: normal;
10 font-weight: 100 900;
11 font-display: swap;
12 src: url('/static/fonts/epilogue.woff2') format('woff2');
13}
14
15@font-face {
16 font-family: 'Caveat';
17 font-style: normal;
18 font-weight: 400 700;
19 font-display: swap;
20 src: url('/static/fonts/caveat.woff2') format('woff2');
21}
22
23@theme {
24 --color-canvas: #fbf9f5;
25 --color-ink: #1a1a1a;
26 --color-tonal: #f5f4ef;
27 --color-dim: #5f5e5e;
28 --color-accent: #b1b3ab;
29 --color-hover: #e8e9e2;
30
31 --font-primary: 'Epilogue', sans-serif;
32 --font-accent: 'Caveat', cursive;
33}
34
35body {
36 display: flex;
37 flex-direction: column;
38 min-height: 100vh;
39 font-family: var(--font-primary);
40 background-color: var(--color-canvas);
41 color: var(--color-ink);
42}
43
44main {
45 flex: 1;
46 display: flex;
47 flex-direction: column;
48}
49
50.container {
51 margin-inline: auto;
52 max-width: 80rem;
53 padding: 2rem 1.125rem;
54}
55
56.button {
57 display: flex;
58 align-items: center;
59 justify-content: center;
60 gap: theme(spacing.2);
61 cursor: pointer;
62 padding: theme(spacing.3) theme(spacing.5);
63 font-weight: bold;
64 font-family: var(--font-primary);
65
66 &:hover {
67 background-color: var(--color-hover);
68 color: var(--color-ink);
69 }
70
71 &:active {
72 transform: scale(0.98);
73 }
74
75 &:disabled {
76 opacity: 0.5;
77 cursor: not-allowed;
78 pointer-events: none;
79 }
80
81 &.button-primary {
82 background-color: var(--color-ink);
83 color: var(--color-canvas);
84
85 &:hover {
86 background-color: var(--color-dim);
87 color: var(--color-canvas);
88 }
89 }
90}
91
92.input {
93 padding: theme(spacing.2) theme(spacing.4);
94 background-color: var(--color-tonal);
95 font-size: var(--text-sm);
96 font-family: var(--font-primary);
97
98 &::placeholder {
99 opacity: 0.75;
100 }
101
102 &:focus {
103 outline: 1px solid var(--color-ink);
104 outline-offset: -2px;
105 }
106}
107
108.spinner {
109 width: 1rem;
110 height: 1rem;
111 display: none;
112 animation: spin 1s linear infinite;
113}
114
115@keyframes spin {
116 from { rotate: 0deg; }
117 to { rotate: 360deg; }
118}
119
120.htmx-request .spinner {
121 display: inline;
122}