Update base.css

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "fonts/comic-mono-font"]
+	path = fonts/comic-mono-font
+	url = https://git.alv.cx/alvierahman90/comic-mono-font.git

base.css

@@ -50,7 +50,8 @@ pre {
 }
 
 code, pre{
-	background-color: var(--bg-lc) ;
+	background-color: var(--light);
+	color: var(--dark);
 }
 
 
@@ -96,13 +97,26 @@ figcaption {
 
 kbd {
 	color: var(--bg);
-	background-color: var(--fg);
+	background-color: var(--fg-lc);
 	border-radius: 0.25em;
 	padding: 0.2em;
 	margin-left: 0.2em;
 	margin-right: 0.2em;
 }
 
+input, select, button {
+	color: var(--fg-lc);
+	background: var(--bg);
+	border: 1px solid var(--fg);
+	border-radius: 0.5em;
+	padding: 0.5em;
+	margin: 0.5em;
+}
+
+::placeholder {
+	color: var(--fg-lc);
+}
+
 /* scrollbar */
 
 ::-webkit-scrollbar {

fonts/comic-mono-font.css

@@ -0,0 +1,12 @@
+@font-face {
+  font-family: 'Comic Mono';
+  font-style: normal;
+  src: url('/fonts/comic-mono-font/ComicMono.ttf'), format('ttf');
+}
+
+@font-face {
+  font-family: 'Comic Mono';
+  font-style: normal;
+  font-weight: bold;
+  src: url('/fonts/comic-mono-font/ComicMono-Bold.ttf'), format('ttf');
+}

fonts/readme.txt

@@ -0,0 +1,10 @@
+styles.alv.cx/fonts
+===================
+
+alvficially approved fonts and pairings
+
+font pairings set body, header, and code font-families and can be found in the folder /fonts/pairings
+
+fonts can be loaded with
+
+	@import url("https://styles.alv.cx/fonts/<family.css");

fonts/source_code_pro.css

@@ -2,12 +2,12 @@
   font-family: 'Source Code Pro';
   font-style: normal;
   font-weight: 400;
-  src: url(./fonts/Source_Code_Pro/SourceCodePro-VariableFont_wght.ttf) format('ttf');
+  src: url('/fonts/Source_Code_Pro/SourceCodePro-VariableFont_wght.ttf') format('ttf');
 }
 
 @font-face {
   font-family: 'Source Code Pro';
   font-style: italic;
   font-weight: 400;
-  src: url(./fonts/Source_Code_Pro/SourceCodePro-Italic-VariableFont_wght.ttf) format('ttf');
+  src: url('/fonts/Source_Code_Pro/SourceCodePro-Italic-VariableFont_wght.ttf') format('ttf');
 }

fonts/source_sans_pro.css

@@ -2,5 +2,5 @@
   font-family: 'Source Sans Pro';
   font-style: normal;
   font-weight: 400;
-  src: url(/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf) format('ttf');
+  src: url('/fonts/Source_Sans_Pro/SourceSansPro-Regular.ttf') format('ttf');
 }

fonts/source_serif_pro.css

@@ -2,5 +2,5 @@
   font-family: 'Source Serif Pro';
   font-style: normal;
   font-weight: 400;
-  src: url(/fonts/Source_Serif_Pro/SourceSerifPro-Regular.ttf) format('ttf');
+  src: url('/fonts/Source_Serif_Pro/SourceSerifPro-Regular.ttf') format('ttf');
 }

gohookr.sh

@@ -1,3 +1,5 @@
 #!/usr/bin/env bash
 cd `dirname $0`
 git pull
+git submodule init
+git submodule update

modules/alwaysdark.css

@@ -0,0 +1,8 @@
+@import url("https://styles.alv.cx/modules/soft_media.css");
+
+:root {
+  --fg: var(--colorscheme-light);
+  --fg-lc: var(--colorscheme-light-darker);
+  --bg: var(--colorscheme-dark);
+  --bg-lc: var(--colorscheme-dark-lighter);
+}

modules/buttonlist.css

@@ -1,5 +1,5 @@
 .buttonlist {
-	border-left: 1px solid #b3b3b3;
+	border-left: 1px solid var(--fg-lc);
 	padding-left: 0.5em;
 	margin-left: 0.5em;
 }

modules/darkmode.css

@@ -1,10 +1 @@
-@import url("https://styles.alv.cx/modules/soft_media.css") screen and (prefers-color-scheme: dark);
-
-@media (prefers-color-scheme: dark) {
-	:root {
-		--fg: var(--colorscheme-light);
-		--fg-lc: var(--colorscheme-light-darker);
-		--bg: var(--colorscheme-dark);
-		--bg-lc: var(--colorscheme-dark-lighter);
-	}
-}
+@import url("https://styles.alv.cx/modules/alwaysdark.css") screen and (prefers-color-scheme: dark);

modules/dotgrid.css

@@ -0,0 +1,5 @@
+body {
+  background-size: var(--dotgrid-size) var(--dotgrid-size);
+  background-image: radial-gradient(circle, var(--fg-lc) var(--dotgrid-dot-size), rgba(0, 0, 0, 0) 1px);
+	background-position: center;
+}

modules/readmes/alwaysdark.txt

@@ -0,0 +1,5 @@
+in the css
+
+	@import url("https://styles.alv.cx/modules/alwaysdark.css");
+
+puts the website always in dark mode, ignoring user preference.

modules/readmes/dotgrid.txt

@@ -0,0 +1,10 @@
+in the css
+
+	@import url("https://styles.alv.cx/modules/dotgrid.css");
+
+variables:
+
+	--dotgrid-size: 3em;
+  --dotgrid-dot-size: 1px;
+
+puts a background image on the `body` element.