D static/catppuccin.css

@@ -1,177 +0,0 @@ 
-/* Style for rendered Markdown */
-
-:root {
-  --ctp-mocha-rosewater: #f5e0dc;
-	--ctp-mocha-flamingo: #f2cdcd;
-	--ctp-mocha-pink: #f5c2e7;
-	--ctp-mocha-mauve: #cba6f7;
-	--ctp-mocha-red: #f38ba8;
-	--ctp-mocha-maroon: #eba0ac;
-	--ctp-mocha-peach: #fab387;
-	--ctp-mocha-yellow: #f9e2af;
-	--ctp-mocha-green: #a6e3a1;
-	--ctp-mocha-teal: #94e2d5;
-	--ctp-mocha-sky: #89dceb;
-	--ctp-mocha-sapphire: #74c7ec;
-	--ctp-mocha-blue: #89b4fa;
-	--ctp-mocha-lavender: #b4befe;
-	--ctp-mocha-text: #cdd6f4;
-	--ctp-mocha-subtext1: #bac2de;
-	--ctp-mocha-subtext0: #a6adc8;
-	--ctp-mocha-overlay2: #9399b2;
-	--ctp-mocha-overlay1: #7f849c;
-	--ctp-mocha-overlay0: #6c7086;
-	--ctp-mocha-surface2: #585b70;
-	--ctp-mocha-surface1: #45475a;
-	--ctp-mocha-surface0: #313244;
-	--ctp-mocha-base: #1e1e2e;
-	--ctp-mocha-mantle: #181825;
-	--ctp-mocha-crust: #11111b;
-  --white: #D9E0EE;
-  --black: #000000;
-  --light: #C9CFFF;
-  --lighter-grey: #C3BAC6;
-  --light-grey: #988BA2;
-
-	--font-face: "Noto Sans", Arial, Helvetica, sans-serif;
-  --font-mono: "Roboto Mono", Courier, monospace;
-  --font-size: 13px;
-  --icon-size: 16px;
-
-  --regular: 400;
-  --bolder: 600;
-
-  --scroll-radius: 3px;
-
-  --opacity-0-8: 0.8;
-}
-
-body, th, td {
-  background-color: var(--ctp-mocha-base) !important;
-  font-family: var(--font-face) !important;
-}
-
-p, ul, ol, li {
-  color: var(--ctp-mocha-text) !important;
-}
-
-strong {
-  color: var(--ctp-mocha-text) !important;
-}
-
-hr {
-  border: none;
-  border-bottom: 1px solid var(--ctp-mocha-overlay1) !important;
-  margin: 2.5em 0 !important;
-}
-
-/* Scrollbars */
-::-webkit-scrollbar-thumb {
-  background-color: var(--ctp-mocha-base) !important;
-  border-radius: var(--scroll-radius) !important;
-}
-
-/*********************************************************************************
-* TITLES
-*********************************************************************************/
-
-h1 {
-  color: var(--ctp-mocha-text);
-  border-bottom: 1px solid var(--ctp-mocha-base) !important;
-  font-weight: var(--bolder) !important;
-  font-size: 2rem !important;
-  margin: 1rem 0;
-}
-
-h2, h3, h4, h5, h6 {
-  color: var(--ctp-mocha-subtext1);
-  border-bottom: 0 !important;
-  font-weight: var(--regular) !important;
-  margin: 1rem 0;
-}
-
-/*********************************************************************************
-* LINKS
-*********************************************************************************/
-
-a {
-  color: var(--ctp-mocha-blue) !important;
-  text-decoration: underline !important;
-}
-
-a:hover {
-  text-decoration: underline !important;
-}
-
-/*********************************************************************************
-* CODE BLOCK
-*********************************************************************************/
-
-pre, .hljs {
-  background-color: var(--ctp-mocha-mantle) !important;
-  font-family: var(--font-mono) !important;
-  padding: 10px !important;
-  margin: 1rem;
-  color: var(--ctp-mocha-text) !important;
-  font-size: 14px !important;
-  overflow: scroll !important;
-}
-
-/* Inline code */
-:not(pre) > code, .inline-code {
-  background-color: transparent !important;
-  border: 0 !important;
-  font-family: var(--font-mono) !important;
-  color: var(--ctp-mocha-flamingo) !important;
-  font-size: 16px !important;
-}
-
-/*********************************************************************************
-* BLOCKQUOTE
-*********************************************************************************/
-
-blockquote {
-  background-color: var(--ctp-mocha-surface0) !important;
-  padding: 10px !important;
-  color: var(--light) !important;
-  font-size: 14px !important;
-  font-style: italic !important;
-  border: 0 !important;
-  border-left: 5px solid var(--ctp-mocha-mantle) !important;
-}
-
-/*********************************************************************************
-* TABLES
-*********************************************************************************/
-
-th {
-  border: 1px solid var(--ctp-mocha-text) !important;
-  color: var(--ctp-mocha-text) !important;
-  border-bottom: 1px solid var(--ctp-mocha-text) !important;
-}
-
-td {
-  border: 1px solid var(--ctp-mocha-text) !important;
-  color: var(--ctp-mocha-text) !important;
-  border-bottom: 1px solid var(--ctp-mocha-text) !important;
-}
-
-/*********************************************************************************
-* HIGHLIGHTING
-*********************************************************************************/
-
-::selection {
-	background-color: var(--ctp-mocha-lavender) !important;
-  color: var(--ctp-mocha-crust) !important;
-}
-
-mark, mark strong {
-  background: var(--ctp-mocha-yellow) !important;
-  color: var(--ctp-mocha-crust) !important;
-}
-
-/* Highlighted searched item */
-mark[data-markjs] {
-  background-color: var(--ctp-mocha-lavender) !important;
-}
-

M static/style.css → static/style.css

@@ -1,7 +1,9 @@ 
 :root {
   --color-primary: #4f46e5;
   --color-primary-light: rgba(79, 70, 229, 0.08);
+  --color-secondary: #df8e1d;
   --color-bg: #f1f5f9;
+  --color-blockquote: #181825;
   --text-secondary: #374151;
 
   --light: #f4f4f4;
@@ -22,6 +24,7 @@ :root {
     color-scheme: dark light;
     --color-primary: #818cf8;
     --color-bg: #14141f;
+    --color-secondary: #f9e2af;
     --text-secondary: #e2e4e8;
     --light: #181818;
     --cyan: #76c7c0;
@@ -75,6 +78,14 @@ strong {
   font-weight: 500;
 }
 
+:not(pre) > code, .inline-code {
+  background-color: transparent;
+  border: 0;
+  color: var(--color-secondary);
+  font-size: 16px;
+  font-family: var(--mono-font);
+}
+
 nav {
   padding: 0.4rem 0 1.5rem 0;
 }
@@ -97,14 +108,56 @@ padding: 0;
   box-sizing: border-box;
   text-decoration: none;
   word-wrap: break-word;
-}
-
-a {
   color: var(--color-primary);
 }
 
 a:hover {
   text-decoration: underline;
+  color: #818cf8;
+}
+
+blockquote {
+  margin: 0;
+  padding-left: 1rem;
+  color: var(--text-secondary);
+  border-left: 6px solid var(--color-primary);
+  background-color: var(--color-blockquote);
+}
+
+h1 {
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+}
+
+h3 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+p {
+  margin: 1.5rem 0;
+  line-height: 1.5;
+}
+
+ul {
+  line-height: 1.3;
+}
+
+.readme pre {
+  background-color: var(--color-blockquote);
+  color: white;
+  padding: 10px;
+  margin: 1rem;
+  font-size: 14px;
+  overflow: scroll;
+  border-radius: 4px;
 }
 
 .index {

M templates/head.html → templates/head.html

@@ -3,7 +3,6 @@ <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="stylesheet" href="/static/style.css" type="text/css" />
-  <link rel="stylesheet" href="/static/catppuccin.css" type="text/css" />
   <link rel=icon href=https://5ika.ch/favicon.ico> {{ if .parent }}
   <title>
     {{ .meta.Title }} &mdash; {{ .name }} ({{ .ref }}): {{ .parent }}/