Updated homepage and stylesheets

html/assets/mobile.css

@@ -5,7 +5,12 @@
  */
 
 /* Responsive layout for mobile */
-@media (max-width: 768px) {
+@media (max-width: 800px) {
+    /* Custom */
+    .img {
+        max-height: 25vh;
+    }
+
     /* Menu */
     .menu {	
         width: 90%;
@@ -51,6 +56,7 @@
     .footer p {font-size:12px;}
     
     .info {text-align: center; width: 100%;}
+    .copyright {text-align: center; width: 100%;}
     
     /* Boxes */
     .box {
@@ -65,4 +71,6 @@
         padding: 10px;
         width: 80%;
     }
+
+    .content {margin: auto;}
 }

html/assets/style.css

@@ -4,12 +4,20 @@
  * Copyright (c) 2025 FreedTapestry21
  */
 
+/* Jetbrains Mono font by Jetbrains */
 @font-face {
     font-family: 'Jetbrains Mono';
     src: local(''),
     	url('./fonts/jbmono.woff2')
 }
 
+/* VGA font by VileR @ int10h.org! */
+@font-face {
+    font-family: 'VGA';
+    src: local(''),
+        url('./fonts/ibm_vga8.woff2')
+}
+
 :root {
 	--accent-color: #b4befe;
 	--accent-color-dark: #9198cd;
@@ -19,14 +27,23 @@
 body {
 	background-color: var(--background-color);
 	color: var(--accent-color);
-	font-family: Verdana, sans-serif;
+	font-family: 'Jetbrains Mono';
 }
 
-p {font-size: 16px;}
-h1 {font-size: 32px;}
-h2 {font-size: 28px;}
-h3 {font-size: 24px;}
-h4 {font-size: 20px;}
+p {font-size: 18px;}
+h1 {font-size: 34px;}
+h2 {font-size: 30px;}
+h3 {font-size: 26px;}
+h4 {font-size: 22px;}
+
+a {
+	text-decoration: underline dotted;
+	color: var(--accent-color-dark);
+}
+
+a:hover {
+	color: var(--accent-color);
+}
 
 /* Custom */
 .center {
@@ -35,7 +52,16 @@ h4 {font-size: 20px;}
 }
 
 .img {
-	width: min(512px, 45%);
+	max-height: 45vh;
+	max-width: 300px;
+}
+
+.circle {
+	border-radius: 50%;
+}
+
+.nocircle {
+	max-height: 30vh;
 }
 
 /* Menu */
@@ -75,11 +101,12 @@ h4 {font-size: 20px;}
 
 .footer p {font-size:12px;}
 
-.info {text-align: left; width: 90%;}
+.info {text-align: left; width: 45%;}
+.copyright {text-align: right; width: 45%;}
 
 /* Boxes */
 .box {
-	width: 100%;
+	width: 80%;
 
 	display: flex;
   	flex-direction: row;
@@ -87,8 +114,13 @@ h4 {font-size: 20px;}
 }
 
 .item {
+	font-family: VGA;
 	padding: 10px;
-	width: 40%;
+	width: 50%;
 
 	margin: auto;
 }
+
+.content {margin: auto; min-height: 400px;}
+
+.invert {flex-direction: row-reverse;}

html/index.html

@@ -23,19 +23,31 @@
 			</div>
 		</div>
 
-		<div class="box">
+		<div class="box content">
 			<div class="item center">
-				<img src="/assets/img/logo.png" class="img">
+				<img src="/assets/img/welcome.png" class="img circle">
 			</div>
 			<div class="item">
 				<h1>(&#x2500;&#x203F;&#x203F;&#x2500;) &#x2661;</h1>
-				<p>heya! my name's Bo, also known as Freed! I'm a tiny creature traveling around the wild web like every other tiny creature which I see on my computer screen. be welcome to my little corner of the internet!</p>
+				<p>Hii there! My name's Bo, also known as Freed! <br>I'm a tiny creature traveling around the wild web like every other tiny creature which I see on my computer screen. Be welcome to my little corner of the internet!</p>
+			</div>
+		</div>
+
+		<div class="box content invert">
+			<div class="item center">
+				<img src="/assets/img/pixelated.png" class="img nocircle">
+			</div>
+			<div class="item">
+				<h1>The Pixelated collective</h1>
+				<p>Pixelated is a project which I've been working on for quite some time now. It's a collection of open-source services which I maintain, with the purpose of providing open-source alternatives to services from big tech corporations. For more information, please look <a href="https://pixelated.sh" target="_blank">here</a>.</p>
 			</div>
 		</div>
 
 		<div class="box footer">
 			<div class="info">
 				<p>Freed's place</p>
+			</div>
+			<div class="copyright">
 				<p>Copyright (c) 2022-2025 FreedTapestry21</p>
 			</div>
 		</div>