helpimnotdrowning.net
Personal website
1/*
2 This file is part of NKK.
3
4 NKK is free software: you can redistribute it and/or modify it under the
5 terms of the GNU Affero General Public License as published by the Free
6 Software Foundation, either version 3 of the License, or (at your option)
7 any later version.
8
9 NKK is distributed in the hope that it will be useful, but WITHOUT ANY
10 WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
11 FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for
12 more details.
13
14 You should have received a copy of the GNU Affero General Public License
15 along with NKK. If not, see <http://www.gnu.org/licenses/>.
16*/
17
18@import "tailwindcss" source(none);
19@import "./00.typography.tw.css";
20@import "./01.prismjs.tw.css";
21@import "../public/font/IBMPlexMono-Regular/IBMPlexMono-Regular.css";
22@import "../public/font/IBMPlexSansJP-Regular/IBMPlexSansJP-Regular.css";
23@import "../public/font/IBMPlexSansJP-Bold/IBMPlexSansJP-Bold.css";
24
25@source "../**/*.{ps1,html,css,md}";
26@source not "../public";
27
28@theme {
29 --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
30 --font-sans: 'IBM Plex Sans JP', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
31 --text-xxs: 0.625rem;
32}
33
34html {
35 @apply bg-fixed bg-linear-to-b;
36 @apply from-green-100 to-green-300;
37 @apply font-sans leading-[1.65] text-sm;
38}
39
40hr {
41 @apply my-4;
42 @apply text-stone-400;
43}
44
45a:not(.clickable) {
46 &:hover {
47 /* like https://phk.freebsd.dk/ */
48 @apply bg-blue-400/15 rounded-xs;
49 }
50
51 @apply
52 text-blue-500 underline px-1;
53}
54
55a::after {
56 content: ' 🡥';
57 @apply text-xxs no-underline align-middle pb-2;
58}
59
60.hidden-link-lmao {
61 @apply px-0!;
62
63 &::after {
64 content: '' !important;
65 }
66}
67
68a:visited {
69 @apply text-blue-900;
70}
71
72.n-box {
73 @apply w-[min(67%,_var(--container-6xl))];
74 @apply border border-black border-solid;
75 @apply flex flex-col mt-8 mb-20 p-4 rounded-sm drop-shadow-xl;
76 @apply bg-[#ffffff];
77 @apply mx-auto;
78
79 /* subsequent `n-box`es have their bottom margin shrunk */
80 &:has(+ .n-box) {
81 @apply mb-8;
82 }
83}
84
85.clear-n-box {
86 @apply border-transparent;
87 @apply bg-transparent;
88 @apply drop-shadow-none;
89}
90
91.clickable {
92 @apply bg-gray-100;
93 @apply pl-[0.5ch] pr-[0.5ch];
94
95 @apply border border-black border-solid;
96 @apply rounded-sm;
97
98 text-decoration: none;
99
100 &:hover {
101 @apply bg-gray-200;
102 }
103
104 &:disabled, &[aria-disabled="True"] {
105 @apply text-stone-400 border-stone-400 pointer-events-none;
106 }
107}
108
109.pfp {
110 @apply drop-shadow-xl/25;
111}
112
113#splash, .you-know-you-want-to {
114 a {
115 @apply bg-transparent;
116 }
117
118 @apply whitespace-nowrap w-min px-[2ch] cursor-pointer;
119
120 font-smooth: never;
121
122 animation-duration: .25s;
123 animation-name: splashscale;
124 animation-timing-function: transform 0.6s cubic-bezier(0.68, -0.6, 0.32, 1.6);
125 animation-direction: alternate;
126 animation-iteration-count: infinite;
127
128 transition-property: background-color;
129 transition-duration: 0.3s;
130 transition-timing-function: ease-in-out;
131 @apply rounded-md;
132
133 &:hover {
134 @apply bg-green-400/50;
135 }
136}
137
138@media (prefers-reduced-motion) {
139 #splash, .you-know-you-want-to {
140 transform: rotateZ(-1.5deg);
141 font-smooth: auto;
142 @apply animate-none;
143 }
144}
145
146.post-component {
147 @apply m-2;
148 h1 a {
149 font-size: 2.33em;
150 font-weight: 800;
151 text-decoration: none !important;
152 }
153}
154
155.artifact-holder {
156 display: grid;
157 gap: 10px;
158 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
159 grid-template-rows: masonry;
160}
161
162.artifact-component {
163 /* @apply m-2 grid; */
164
165 width: 50%;
166
167 h1 a {
168 font-size: 1.5em;
169 font-weight: 800;
170 text-decoration: none !important;
171 }
172}
173
174@keyframes splashscale {
175 0% {
176 transform: scale(0.99) rotateZ(-1deg);
177 }
178
179 100% {
180 transform: scale(1.02) rotateZ(-1deg);
181 }
182}