aboutsummaryrefslogtreecommitdiffstats
path: root/src/app.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/app.css')
-rw-r--r--src/app.css201
1 files changed, 197 insertions, 4 deletions
diff --git a/src/app.css b/src/app.css
index 0199fc9..679174a 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1,15 +1,20 @@
/*
- Copyright (C) 2024 memdmp
+ Copyright (C) 2024-2026 memdmp
- This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by Affero, Inc., at version 1.
- This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details.
+ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the Affero General Public License for more details.
- You should have received a copy of the GNU Affero General Public License along with this program. If not, see <http://www.gnu.org/licenses/>.
+ You should have received a copy of the Affero General Public License along with this program. If not, see <https://spdx.org/licenses/AGPL-1.0-only>.
*/
@import 'tailwindcss';
@theme {
+ --font-sans:
+ InterVariable, Inter, "Noto Sans",
+ ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+ "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
+ --font-space-grotesk: "Space Grotesk", var(--font-sans), sans-serif;
--font-bios:
'Ac437 IBM EGA 8x14', 'Hack', 'Courier New', 'Courier', 'monospace';
--font-grub:
@@ -17,6 +22,194 @@
'Courier', 'monospace';
--font-mono:
'PxPlus IBM EGA 8x14', 'Hack', 'Courier New', 'Courier', 'monospace';
+ --font-genericmono:
+ 'JetBrainsMono NF', 'Jetbrains Mono', 'JetBrains Mono', monospace;
+ --color-formatted-table-border: var(--color-neutral-900);
+ --color-formatted-table-background: var(--color-neutral-950);
+ --color-codeblock-border: var(--color-neutral-900);
+ --color-codeblock-background: var(--color-neutral-950);
+ --color-accent-primary: var(--color-red-400);
+}
+
+@utility afterunderline-* {
+ @apply relative;
+ &::before {
+ content: '';
+ background: --value(--color-*);
+ @apply absolute top-full left-0 -mt-0.5 h-[0.2rem] w-full transition-all -z-10;
+ }
+}
+@utility afterunderline-hoverstate {
+ &::before {
+ @apply top-0 left-0 mt-0 h-full w-full;
+ }
+}
+
+@utility formatted-table {
+ @apply relative overflow-x-auto shadow-xs rounded-xl border bg-formatted-table-background border-formatted-table-border;
+ table {
+ @apply w-full text-sm text-left rtl:text-right bg-formatted-table-background;
+ thead {
+ @apply text-sm border-b rounded-xl border-formatted-table-border;
+ }
+ tbody tr {
+ @apply not-last:border-b border-formatted-table-border;
+ }
+ th,td {
+ @apply px-6 py-3;
+ }
+ td > b:first-child:last-child {
+ @apply px-6 py-4 font-medium whitespace-nowrap;
+ }
+ }
+}
+@utility quicklink {
+ @apply text-accent-primary transition-all afterunderline-accent-primary hover:afterunderline-hoverstate hover:text-white;
+}
+
+@utility internal-header-active {
+ &:not(:is(p)) {
+ @apply text-white/95;
+ }
+ &:is(blockquote) {
+ &::before {
+ background-color: var(--colour-full);
+ }
+ }
+ &::after {
+ @apply -ml-3 bg-gray-200/50;
+ }
+}
+#postmd {
+ @apply font-sans;
+ a {
+ @apply quicklink;
+ }
+ h1 {
+ @apply text-4xl mb-1.5 mt-2;
+ }
+ h2 {
+ @apply my-1.5 text-2xl;
+ }
+ h3 {
+ @apply my-1 text-xl;
+ }
+ h4 {
+ @apply my-1 text-lg;
+ }
+ h1,h2,h3,h4,h5,h6,p {
+ @apply relative text-white/90 hover:text-white;
+ &::after {
+ content: "";
+ @apply absolute top-[20%] left-0 h-[60%] w-0.5 -ml-4 rounded-full transition-all;
+ }
+ &:is(p)::after {
+ @apply bg-gray-200/5;
+ }
+ &:not(:is(p))::after {
+ @apply bg-gray-200/15;
+ }
+ &:hover::after {
+ @apply -ml-3 bg-gray-200/75;
+ }
+ &:hover ~ p:is(p)::after {
+ @apply bg-gray-200/4;
+ }
+ }
+ h1 {
+ &:not(:hover):has(~*:hover):not(:has(~h1~*:hover)) {
+ @apply internal-header-active;
+ }
+ }
+ h2 {
+ &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover)) {
+ @apply internal-header-active;
+ }
+ }
+ h3 {
+ &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover)) {
+ @apply internal-header-active;
+ }
+ }
+ h4 {
+ &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover,~h4~*:hover)) {
+ @apply internal-header-active;
+ }
+ }
+ h5,h6,p {
+ &:not(:hover):has(~*:hover):not(:has(~h1~*:hover,~h2~*:hover,~h3~*:hover,~h4~*:hover,~h5~*:hover)) {
+ @apply internal-header-active;
+ }
+ }
+ p::after {
+ @apply h-[90%] top-[5%];
+ }
+ p {
+ @apply my-1;
+ }
+ code {
+ @apply font-genericmono;
+ }
+ p code {
+ @apply bg-codeblock-background -my-1 p-1 rounded-lg;
+ }
+ pre {
+ @apply p-3 -mx-2 overflow-scroll bg-codeblock-background border border-codeblock-border rounded-lg transition-colors max-h-[min(75vh,38rem)];
+ code {
+ .token {
+ @apply text-red-500;
+ }
+ &,
+ .token.builtin,
+ .token.interpolation {
+ @apply text-[#9CDCFE] selection:bg-[#9CDCFE] selection:text-black;
+ }
+ .token.operator {
+ @apply text-[#d4d4d4] selection:bg-[#d4d4d4] selection:text-black;
+ }
+ .token.class-name {
+ @apply text-[#4ec9b0] selection:bg-[#4ec9b0] selection:text-black;
+ }
+ .token.number {
+ @apply text-[#b5cea8] selection:bg-[#b5cea8] selection:text-black;
+ }
+ .token.comment {
+ @apply text-[#6a9955] selection:bg-[#6a9955] selection:text-black;
+ }
+ .token.keyword {
+ @apply text-[#c586c0] selection:bg-[#c586c0] selection:text-black;
+ }
+ .token.punctuation {
+ @apply text-[white] selection:bg-[white] selection:text-black;
+ }
+ .token.function {
+ @apply text-[#dcdcaa] selection:bg-[#dcdcaa] selection:text-black;
+ }
+ .token.string {
+ @apply text-[#ce9178] selection:bg-[#ce9178] selection:text-black;
+ }
+ .token.boolean,
+ .token.interpolation-punctuation {
+ @apply text-[#5293c9] selection:bg-[#5293c9] selection:text-black;
+ }
+ }
+ }
+ blockquote:not(.default-blockquote) {
+ @apply -ml-1 pl-4 p-2 relative my-1;
+ &::before {
+ @apply absolute w-1 bg-accent-primary/50 transition-colors left-0 top-[10%] h-[80%];
+ content: '';
+ --colour-full: var(--color-accent-primary);
+ }
+ &:hover::before {
+ background-color: var(--colour-full);
+ }
+ p {
+ &::after {
+ @apply hidden;
+ }
+ }
+ }
}
/*
generated by cgit v1.2.3 (git 2.25.1) at 2026-01-14 06:33:38 +0000