A static/catppuccin.css

@@ -0,0 +1,177 @@ 
+/* 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

@@ -71,26 +71,8 @@ padding: 0;
   line-height: 160%;
 }
 
-main h1, h2, h3, strong {
-  font-family: var(--display-font);
-  font-weight: 500;
-}
-
 strong {
   font-weight: 500;
-}
-
-main h1 {
-  font-size: 20px;
-  padding: 10px 0 10px 0;
-}
-
-main h2 {
-  font-size: 18px;
-}
-
-main h2, h3 {
-  padding: 20px 0 15px 0;
 }
 
 nav {
@@ -179,22 +161,16 @@ .size {
   text-align: right;
 }
 
-.readme pre {
-  white-space: pre-wrap;
-  padding: 1rem;
-}
-
 .readme {
-  background: var(--light-gray);
   padding: 0.5rem;
-}
 
-.readme ul, .readme ol {
-  padding: revert;
-}
+  ul, ol {
+    padding: revert;
+  }
 
-.readme img {
-  max-width: 100%;
+  img {
+    max-width: 100%;
+  }
 }
 
 .diff {

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

@@ -3,6 +3,7 @@ <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 }}/

M templates/repo.html → templates/repo.html

@@ -28,9 +28,7 @@ {{- end -}}
 
       <div class="clone-url">
       <strong>clone</strong>
-        <pre>
-git clone https://{{ .servername }}/{{ .name }}
-        </pre>
+        <pre>git clone https://{{ .servername }}/{{ .name }}</pre>
       </div>
     </main>
   </body>