Pig

css/colors.css

@@ -0,0 +1,27 @@
+/* CSS variables
+   Generated by 'wal' */
+:root {
+
+    /* Special */
+    --background: #060710;
+    --foreground: #f5dcd0;
+    --cursor: #f5dcd0;
+
+    /* Colors */
+    --color0: #060710;
+    --color1: #1B9AAD;
+    --color2: #699EA1;
+    --color3: #7695B6;
+    --color4: #8C9AB4;
+    --color5: #A6A1B2;
+    --color6: #DFB1B5;
+    --color7: #f5dcd0;
+    --color8: #ab9a91;
+    --color9: #1B9AAD;
+    --color10: #699EA1;
+    --color11: #7695B6;
+    --color12: #8C9AB4;
+    --color13: #A6A1B2;
+    --color14: #DFB1B5;
+    --color15: #f5dcd0;
+}

css/style.css

@@ -0,0 +1,130 @@
+@import url("colors.css");
+@font-face {
+font-family: 'Comic Mono';
+src: url('/fonts/ComicMono.ttf') format('truetype'),
+url("/fonts/ComicMono.ttf") format("truetype");
+font-weight: 400;
+font-style: normal;
+}
+body {
+	font-family: "Comic Mono", monospace;
+	font-size: 1.1em;
+	background-color: var(--background);
+	color: var(--foreground);
+    word-wrap: break-word; /* maybe only to p since the donate page was the culprit */
+}
+p {
+	text-align: start; /* text-align: justify; */
+    overflow: auto;
+	/* text-justify: inter-word; */
+	line-height: 1.4em;
+}
+em {
+	font-family: "Comic Mono", monospace;
+}
+h1,h2,h3 {
+	font-size: 1.1em;
+}
+h1 {
+	color: var(--color4);
+	text-align: center;
+}
+h2 {
+	color: var(--color6);
+}
+h3 {
+	color: var(--color5);
+}
+h1:before {
+	content: "# ";
+}
+h2:before {
+	content: "## ";
+}
+h3:before {
+	content: "### ";
+}
+section {
+	width: 50%;
+	margin: 5em auto 0% auto;
+}
+blockquote {
+    text-align: center; 
+    margin:0 auto;
+    width:auto;
+    display:table
+}
+pre {
+ white-space: pre-wrap;       /* css-3 */
+ white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+ white-space: -pre-wrap;      /* Opera 4-6 */
+ white-space: -o-pre-wrap;    /* Opera 7 */
+ word-wrap: break-word;       /* Internet Explorer 5.5+ */
+}
+code, pre {
+	font-family: "Comic Mono", monospace;
+	font-size: 1.0em;
+	color: var(--color1);
+	text-align: center
+}
+a {
+	font-size: .8em 
+	display: inline-block;
+	text-align: left;
+	text-justify: none;
+	color: var(--color10);
+	text-decoration: none;
+}
+section a:before {
+	content: "=> 🌍 ";
+}
+section a.gem:before {
+    content: "=> 💎 ";
+}
+footer a:before {
+	content: "";
+}
+a:hover {
+	transition: background-color 0.1s, color 1.1s;
+	background-color: var(--color9);
+	color: var(--background);
+}
+span#url {
+	display: inline-block;
+	width: 27em;
+}
+span#name {
+	color: var(--color9);
+	font-style: italic;
+}
+button#mybtn {
+color: var(--color15);
+background-color: var(--color0);
+font-family: "Comic Mono", monospace;
+font-size: 1em;
+border: 2px solid var(--color3);
+}
+button#mybtn:hover {
+	transition: background-color 0.1s, color 1.1s;
+	background-color: var(--color9);
+	color: var(--background);
+	font-family: "Comic Mono", monospace;
+	font-size: 1em;
+}
+footer a#gemyo img {
+	image-rendering: optimizeSpeed;
+	image-rendering: -moz-crisp-edges;
+	image-rendering: -o-crisp-edges;
+	image-rendering: -webkit-optimize-contrast;
+	image-rendering: optimize-contrast;
+	image-rendering: crisp-edges;
+	image-rendering: pixelated;
+	width: 170px;
+	display: block;
+	margin: 3em auto 0em auto;
+}
+@media screen and (max-width: 1600px) {
+	section {
+		width: 80%;
+	}
+}