First jameswitzema.net commit

css/appearance.css

@@ -0,0 +1,167 @@
+
+/* Common CSS */
+html {
+	background-color: var(--bg-primary);
+	color: var(--grey);
+}
+
+h1, h2 {
+	font-size: 1em;
+}
+
+body {
+	margin: 0;
+	font-family: "Liberation Mono", monospace;
+}
+#titlebar {
+	font-family: unifont;
+}
+#titlebar h1 {
+	font-size: 2rem;
+}
+#subhead {
+	color: var(--cyan);
+	font-weight: bold;
+}
+#subhead a {
+	text-decoration: none;
+	padding: 0 0.5em 0 0.5em;
+	margin: 0 0.5em 0 0.5em;
+	color: var(--cyan);
+}
+#subhead a:hover {
+	/*text-decoration: underline;*/
+	background-color: var(--bg-secondary);
+	color: var(--orange);
+}
+#subhead ul {
+	border-bottom: 2px dashed var(--red);
+}
+
+.content p {
+	text-indent: 2em;
+}
+
+#foot {
+	border-top: 4px double var(--yellow);
+	padding-top: 2em;
+	padding-bottom: 1em;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+a {
+	color: var(--cyan);
+}
+a:hover {
+	color: var(--orange);
+	text-decoration: none;
+	cursor: pointer;
+}
+
+/* Desktop CSS */
+@media only screen and (min-aspect-ratio: 0.72) {
+	body {
+		display: flex;
+		align-items: stretch;
+		flex-direction: column;
+		width: 100vw;
+	}
+	#head {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	#titlebar {
+		align-self: stretch;
+		border-bottom: 4px double var(--yellow);
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 2em;
+	}
+	#titlebar h1{
+		margin: 0 0 0 0.3em;
+	}
+	#titlebar .item1 {
+	}
+	#titlebar .item2 {
+	}
+	#subhead {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	#subhead ul {
+		list-style-type: none;
+		display: flex;
+		margin: 0 0 0 0;
+	}
+	#subhead ul li {
+	}
+	#motd {
+		margin-left: 10px;
+		tab-size: 4;
+		white-space: pre-wrap;
+	}
+	.content {
+		width: 90vw;
+		max-width: 65em;
+		margin-top: 1em;
+		padding-left: 1em;
+		/*align-self: center;*/
+		margin-left: 2em;
+		min-height: 85vh;
+		border-left: 2px solid var(--bg-secondary);
+	}
+}
+
+/* Mobile CSS */
+@media screen and (max-aspect-ratio: 0.71) {
+	html {
+		font-size: 2vh;
+	}
+	#titlebar {
+		border-bottom: 4px double var(--yellow);
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: space-between;
+	}
+	#titlebar h1{
+		margin: 0;
+		padding-bottom: 0.3em;
+	}
+	#titlebar .item1 {
+	}
+	#titlebar .item2 {
+	}
+	#subhead {
+		color: var(--cyan);
+		display: flex;
+		flex-direction: column-reverse;
+		justify-content: space-between;
+		align-items: stretch;
+		width: 100%;
+	}
+	#subhead ul {
+		list-style-type: none;
+		display: flex;
+		justify-content: center;
+		margin: 0 0 0 0;
+	}
+	#motd {
+		margin-left: 0.5em;
+		display: flex;
+		justify-content: left;
+		align-items: center;
+		tab-size: 4;
+		white-space: pre-wrap;
+	}
+	.content {
+		margin-left: 15px;
+		font-size: 0.7em;
+	}
+}

css/colors.css

@@ -0,0 +1,38 @@
+/* Color variables */
+:root {
+	/* Ayu Dark */
+/*	--bg-primary:   #0A0E14;
+	--red:          #FF3333;
+	--red2:         #FF3333;
+	--green:        #C2D94C;
+	--green2:       #C2D94C;
+	--orange:       #FF8F40;
+	--orange2:      #FF8F40;
+	--blue:	        #59C2FF;
+	--blue2:        #59C2FF;
+	--yellow:       #FFEE99;
+	--yellow2:      #FFEE99;
+	--cyan:         #95E6CB;
+	--cyan2:        #95E6CB;
+	--grey:         #B3B1AD;
+	--grey2:        #B3B1AD;
+	--bg-secondary: #4D5566;
+*/
+	/* Elementary */
+	--bg-primary:   #303030;
+	--red:          #E1321A;
+	--red2:         #FF361E;
+	--green:        #6AB017;
+	--green2:       #7BC91F;
+	--orange:       #FFC005;
+	--orange2:      #FFD00A;
+	--blue:	        #004F9E;
+	--blue2:        #0071FF;
+	--yellow:       #EC0048;
+	--yellow2:      #FF1D62;
+	--cyan:         #2AA7E7;
+	--cyan2:        #4BB8FD;
+	--grey:         #F2F2F2;
+	--grey2:        #A020f0;
+	--bg-secondary: #4D5566;
+}

css/fonts.css

@@ -0,0 +1,17 @@
+/* Fonts */
+@font-face {
+	font-family: hackmono;
+	src: url(fonts/Hack-Regular.ttf);
+}
+@font-face {
+	font-family: "Code New Roman";
+	src: url("fonts/Code New Roman.woff");
+}
+@font-face {
+	font-family: unifont;
+	src: url(fonts/unifont-17.0.04.otf);
+}
+@font-face {
+	font-family: "Liberation Mono";
+	src: url(/fonts/liberation-mono.regular.ttf);
+}

css/layout.css

@@ -0,0 +1,8 @@
+/* Desktop CSS */
+@media only screen and (min-aspect-ratio: 0.72) {
+}
+
+/* Mobile CSS */
+@media screen and (max-aspect-ratio: 0.71) {
+
+}