internalize needed files for starting the program

1 files changed, 212 insertions, 0 deletions

diff --git a/src/blog.node5.net/static/main.css b/src/blog.node5.net/static/main.css
new file mode 100644
index 0000000..8a61703
--- /dev/null
+++ b/src/blog.node5.net/static/main.css
@@ -0,0 +1,212 @@
+:root {
+    --main-color: #02e5e1;
+    --secondary-color: #0aee23;
+    --tertiary-color: #F40B36;
+    --quaternary-color: #FFBF00;
+}
+
+.main-color {
+    color: var(--main-color);
+}
+
+.secondary-color {
+    color: var(--secondary-color);
+}
+
+.tertiary-color {
+    color: var(--tertiary-color);
+}
+
+.glow {
+	text-shadow: 0 0 0.5em var(--main-color);
+}
+
+.quaternary-color {
+    color: var(--quaternary-color);
+}
+
+@font-face {
+  font-family: "RobotoMono-Regular";
+  src: url("RobotoMono-Regular.ttf");
+}
+
+@font-face {
+  font-family: "RobotoMono-Bold";
+  src: url("RobotoMono-Bold.ttf");
+}
+
+body {
+  font-family: "RobotoMono-Regular", monospace;
+	background: black;
+	color: white;
+}
+
+#content {
+  padding: 1em;
+}
+
+#root-container {
+  padding: 0 3em;
+}
+
+/* Dynamic padding on sides based on page width, too wide text is hard to read */
+
+@media screen and (max-width: 25rem) {
+	#root-container {
+		padding: 0!important;
+	}
+}
+
+/* Phone */
+@media screen and (max-width: 40rem) {
+	#root-container {
+		padding: 0 2em;
+	}
+}
+
+@media screen and (min-width: 70rem) {
+	#root-container {
+		padding: 0 15em;
+	}
+}
+
+@media screen and (min-width: 100rem) {
+	#root-container {
+		padding: 0 25em;
+	}
+}
+
+/* Ultra wide */
+@media screen and (min-width: 200rem) {
+        #root-container {
+                padding: 0 60em;
+        }
+}
+
+#logo h1 {
+  font-family: "RobotoMono-Bold", monospace;
+	font-size: 2.5em;
+	margin: 0;
+	color: var(--main-color);
+}
+
+.grey {
+	color: #777;
+}
+
+.dark-grey {
+	color: #444;
+}
+
+.inline {
+    display: inline-block;
+}
+
+hr {
+	color: var(--main-color);
+}
+
+a:link {
+	color: var(--main-color);
+	text-decoration: None;
+}
+
+a:visited {
+  color: magenta;
+}
+
+h1 {
+	color: var(--secondary-color);
+	margin: 0;
+  text-decoration: underline;
+  text-decoration-thickness: 0.1em;
+}
+
+h2 {
+	color: var(--tertiary-color);
+}
+
+h3 {
+	color: var(--quaternary-color);
+	margin: 0;
+}
+
+table {
+	border-collapse: collapse;
+}
+
+th, td {
+  border: 1px solid grey;
+}
+
+tr:nth-child(even) {
+	background-color: #222;
+}
+
+.entries {
+	padding: 0;
+	list-style: None;
+  margin: 0;
+}
+
+label{
+    font-size: 0.75em;
+}
+
+.width-100{
+    width: 100%;
+}
+
+#motd {
+  margin-bottom: 2em;
+  rotate: 2deg;
+}
+
+#motd img{
+max-height: 2em;
+}
+
+img {
+  border-radius: 6px;
+}
+
+/* Background blurred image */
+body:before {
+    content: "";
+    position: fixed; /* Change to fixed to keep it in place during scroll */
+    top: 0; /* Align to the top */
+    left: 0; /* Align to the left */
+    background: linear-gradient(
+          rgba(0, 0, 0, 0.7),
+          rgba(0, 0, 0, 0.7)
+        ), url(bg.webp);
+    background-size: cover;
+    z-index: -1; /* Keep the background behind the content */
+    height: 100vh; /* Full viewport height */
+    width: 100vw; /* Full viewport width */
+
+    /* don't forget to use the prefixes you need */
+    transform: scale(1); /* Adjust scale as needed */
+    filter: blur(0.25em);
+    background-position: center;
+}
+
+/* Code highlight */
+pre:not(#comments) {
+  overflow: auto;
+  width: calc(100% - 2em);
+  padding: 1em;
+  border-radius: 0.5em;
+  display: inline-block;
+  background: #111;
+}
+
+.container {
+  background-color: #050b11d4;
+  padding: 0.5em;
+}
+
+::selection {
+  color: black;
+  background: var(--main-color);
+}