diff css/style.css @ 75:d69f3fe99911

*: remove bootstrap, add projects page, use custom navbar the bootstrap navbar was a bit too bloated for something like this anyway. P.S.: you can see some fun stupid tricks in `projects/index.html`, I had to hack around to make the background work how I wanted
author Paper <paper@paper.us.eu.org>
date Fri, 22 Mar 2024 21:42:50 -0400
parents c8ea71d9d102
children 5fdf5f346b92
line wrap: on
line diff
--- a/css/style.css	Mon Dec 18 00:26:00 2023 -0500
+++ b/css/style.css	Fri Mar 22 21:42:50 2024 -0400
@@ -1,40 +1,54 @@
-/* body-wide font choice and stuff */
-body {
-	color: white;
-	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+/* remove stupid default margin */
+html, body {
+	margin: 0px;
+	padding: 0px;
 }
 
-.header {
-	text-align: center;
-	justify-content: center;
+/* body-wide font choice */
+body {
+	color: white;
+	font-family: sans-serif;
 }
 
-.title {
-	text-align: center;
-	display: inline-block;
-	/* dumb little hack to get this to render properly on mobile */
-	padding: 0 0.75em;
+/* make links not look like pure shite */
+a.prettylink:link, a.prettylink:visited {
+	color: #3395ff;
+	text-decoration: none;
+}
+
+a.prettylink:link:hover {
+	text-decoration: underline;
 }
 
-.avatar {
-	display: inline-block;
+/* navbar */
+.navbar {
+	display: flex;
 
-	border: 4px solid black;
-	width: 200px;
-	height: auto;
+	background-color: rgba(0, 0, 0, 0.6);
+	color: white;
+
+	padding: 5px;
+}
+
+.navbar-item {
+	color: gray;
 }
 
-.content {
-	background-color: rgba(0, 0, 0, 0.5);
+.navbar-item-active {
+	color: white;
+}
 
-	/* essentially equivalent to `margin: auto;`
-	 * except it has a minimum value of 1em to make it
-	 * look nice on mobile
-	*/
-	margin-inline: max(1em, 50% - 46.88em/2);
+.navbar-item,
+.navbar-item-active {
+	text-decoration: none;
+	margin-left: 5px;
+	margin-right: 5px;
+}
 
-	margin-top: 1em;
-	padding: 1em 1.5em;
+.navbar-item:hover,
+.navbar-item-active:hover {
+	text-decoration: underline;
+	color: white;
 }
 
 /* generic drop shadows that I heavily use in... everything,
@@ -47,3 +61,63 @@
 .drop-shadow-box {
 	box-shadow: 0.125em 0.125em 0.625em rgba(0, 0, 0, 0.5);
 }
+
+/* fuck off */
+h1, h2 {
+	margin: 0;
+}
+
+/* creates a box to store text or whatever in */
+.content {
+	background-color: rgba(0, 0, 0, 0.6);
+	margin-inline: max(1em, 50% - 46.88em/2);
+
+	/* essentially equivalent to `margin: auto;`
+	 * except it has a minimum value of 1em to make it
+	 * look nice on mobile
+	*/
+	padding: 1em;
+}
+
+/* headers */
+.header {
+	display: flex;
+	flex-wrap: wrap; /* wrap text, useful on mobile */
+
+	align-items: center;
+
+	text-align: center;
+	justify-content: center;
+}
+
+/* projects/index.html */
+.project-title {
+	font-weight: bold;
+}
+
+.project-separator {
+	margin: 1px 0px;
+}
+
+.index-socials-list, /* woah! */
+.project-downloads {
+	margin: 0px;
+	list-style: square;
+}
+
+/* index.html */
+.title {
+	display: inline-block;
+	vertical-align: middle;
+
+	/* dumb little hack to get this to render properly on mobile */
+	padding: 0 0.75em;
+}
+
+.avatar {
+	display: inline-block;
+
+	border: 4px solid black;
+	width: 200px;
+	height: auto;
+}