css tweaks

.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +1,7 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="GrazieInspection" enabled="false" level="TYPO" enabled_by_default="false" />
     <inspection_tool class="PyAugmentAssignmentInspection" enabled="true" level="WEAK WARNING" enabled_by_default="true" />
     <inspection_tool class="PyComparisonWithNoneInspection" enabled="true" level="WARNING" enabled_by_default="true" />
     <inspection_tool class="PyCompatibilityInspection" enabled="true" level="WARNING" enabled_by_default="true">

assets/style.css

@@ -2,7 +2,7 @@
 	box-sizing: border-box;
 }
 body {
-	font-family: sans-serif;
+	font-family: "Noto Sans", sans-serif;
 	margin: 0;
 	display: grid;
 	grid-template-columns: max(325px, 15%) auto;
@@ -82,7 +82,7 @@ header {
 	height: 100vh;
 	transition: 0.2s all;
 }
-header::after {
+header::after { /* the background image behind the sidebar */
 	/* will use webp with jpeg fallback when
 	https://developer.mozilla.org/en-US/docs/Web/CSS/image()#browser_compatibility becomes a thing, until then, it's jpeg
 	only for now :c */
@@ -98,10 +98,10 @@ header::after {
 	/* 	image("/assets/img/background.webp", "/assets/img/background.jpeg") no-repeat bottom center/cover, */
 	url("/assets/img/background.jpeg") no-repeat bottom center/cover,
 	#333;
-	filter: blur(5px) saturate(75%);
+	filter: blur(3px) saturate(75%);
 	content: "";
 }
-#hamburger {
+#hamburger { /* hamburger menu button, should only display on mobile devices. see @media section at bottom of file */
 	display: none;
 	position: fixed;
 	top: 10px;
@@ -118,14 +118,14 @@ header::after {
 #hb-icon {
 	height: 100%;
 	width: 100%;
-	background: linear-gradient( to bottom, mediumpurple, mediumpurple 10%, #fafafa 10%, #fafafa 45%, mediumpurple 45%, mediumpurple 55%, #fafafa 55%, #fafafa 90%, mediumpurple 90%, mediumpurple 100% );
+	background: linear-gradient(to bottom, mediumpurple, mediumpurple 10%, #fafafa 10%, #fafafa 45%, mediumpurple 45%, mediumpurple 55%, #fafafa 55%, #fafafa 90%, mediumpurple 90%, mediumpurple 100%);
 }
 
 nav a {
 	color: white;
 }
 nav a {
-	padding: 10px 0;
+	padding: 10px 40px;
 	display: block;
 	width: 100%;
 	text-align: center;
@@ -145,10 +145,12 @@ nav a::before {
 	position: absolute;
 	transition: 0.2s all;
 }
-nav a:hover,
-nav a.current {
+nav a:hover {
 	background: #00000044;
 }
+nav a.current:not(:hover) {
+	background: #9370db44;
+}
 nav a:hover::before,
 nav a.current::before {
 	left: 0;
@@ -185,8 +187,15 @@ nav a.current::before {
 	font-style: italic;
 }
 
+/* smaller screen tweaks */
+@media only screen and (max-device-width : 840px) {
+	body {
+		grid-template-columns: max(225px, 15%) auto;
+	}
+}
+
 /* mobile tweaks */
-@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+@media only screen and (max-device-width : 480px) {
 	main {
 		width: 100vw;
 		box-shadow: none;