clean up, fix layout on mobile, fix typos

docs/blender/index.html

@@ -14,7 +14,7 @@
 	</header>
 	<main>
 		<h1>Blender creations</h1>
-		<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
+		<p>I have been using Blender since around August 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
 
 		<h2>Alien Creatures animation</h2>
 		<p>January 2022</p>

docs/index.html

@@ -13,8 +13,11 @@
 		<a href="/" id="logo"><img src="/icons/logo.png" alt=""></a>
 	</header>
 	<main>
-		<h1>Hello!</h1>
+		<section id="introduction">
-		<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects in an easier to see way compared to just github.</p>
+			<h1>Hello!</h1>
+			<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects.</p>
+			<p>You can find all my code projects on <a href="https://github.com/CrispyPin">GitHub</a> and all published games are available on <a href="https://crispypin.itch.io">itch.io</a></p>
+		</section>
 
 		<section id="voxels">
 			<h2><a href="/voxels">Voxel engine in godot-rust</a></h2>
@@ -32,32 +35,34 @@
 				OVR Utils is a VR overlay application that has some useful tools for SteamVR. I have been working on it on and off since May 2021.
 			</p>
 			<p>
-				I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard.	
+				I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had Linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard.	
 			</p>
 		</section>
 
 		<section id="blender">	
 			<h2><a href="/blender">Blender creations</a></h2>
-			<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
+			<p>I have been using Blender since around August 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
 			<img src="/blender/shork_wallpaper_preview.png" alt="">
 		</section>
 
 		<section id="voxel-raymarch">	
 			<h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2>
-			<a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a>
+			<p>Source: <a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a></p>
+			<p>A raymarched voxel renderer made with a Godot shader.</p>
 			<img src="/projects/raymarched-voxels.png" alt="">
 		</section>
 		
 		<section id="gol-wallpaper">
-			<h2><a href="https://gol.crispypin.cc/">Game of life wallpaper</a></h2>
+			<h2><a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">Game of Life wallpaper</a></h2>
 			<p>Source: <a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p>
-			<p>See live here: <a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">gol.crispypin.cc</a></p>
+
+			<p>Click the title to see it live or go to <a href="https://gol.crispypin.cc/">gol.crispypin.cc</a></p>
 			<img src="/projects/gol.png" alt="">
 		</section>
 
 		<section id="fractals">
 			<h2><a href="/fractals">Fractals</a></h2>
-			While I was learning web development and javascript I made a page with fractals. I thought it was interesting enough to keep here.
+			While I was learning web development and JavaScript I made a page with fractals. I thought it was interesting enough to keep here.
 		</section>
 
 	</main>

docs/style.css

@@ -1,21 +1,27 @@
 body {
   font-family: sans-serif;
-  background-color: #111;
+  background-color: #080808;
   color: #fff;
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-rows: 50px 1fr auto;
-      grid-template-rows: 50px 1fr auto;
   margin: 0;
+  min-width: -webkit-min-content;
+  min-width: -moz-min-content;
+  min-width: min-content;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
 
 main {
-  padding: 0 32px 64px;
+  padding: 0 16px 64px;
   width: 800px;
-  background-color: #222;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 800px;
+  background-color: #181818;
+}
+
+header {
+  text-align: center;
 }
 
 a:link {
@@ -35,14 +41,7 @@ a:visited {
   color: #fff;
 }
 
-header {
-  grid-column: 1 / -1;
-  background-color: #111;
-  padding: 0;
-}
-
 footer {
-  grid-column: 1 / -1;
   margin-top: 5px;
   margin-bottom: 10px;
   text-align: center;
@@ -55,4 +54,8 @@ footer p {
 img {
   max-width: 800px;
 }
+
+video {
+  max-width: 800px;
+}
 /*# sourceMappingURL=style.css.map */

docs/style.css.map

@@ -1,6 +1,6 @@
 {
     "version": 3,
-    "mappings": "AAOA,AAAA,IAAI,CAAC;EACJ,WAAW,EAAE,UAAU;EACvB,gBAAgB,EATP,IAAI;EAUb,KAAK,EARI,IAAI;EAUb,OAAO,EAAE,IAAI;EACb,kBAAkB,EAAE,aAAa;EAEjC,MAAM,EAAE,CAAC;EACT,eAAe,EAAE,MAAM;CACvB;;AAED,AAAA,IAAI,CAAC;EACJ,OAAO,EAAE,WAAY;EAErB,KAAK,EAlBO,KAAK;EAoBjB,gBAAgB,EAvBJ,IAAI;CAwBhB;;AAED,AAAA,CAAC,AAAA,KAAK,CAAC;EACN,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,CAAC,AAAA,QAAQ,CAAC;EACT,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,WAAW,CAAC,CAAC,CAAC;EACb,eAAe,EAAE,IAAI;EACrB,KAAK,EAnCI,IAAI;CAuCb;;AAND,AAGC,WAHU,CAAC,CAAC,AAGX,QAAQ,CAAC;EACT,KAAK,EArCG,IAAI;CAsCZ;;AAGF,AAAA,MAAM,CAAC;EACN,WAAW,EAAE,MAAM;EACnB,gBAAgB,EA7CP,IAAI;EA8Cb,OAAO,EAAE,CAAC;CACV;;AAED,AAAA,MAAM,CAAC;EACN,WAAW,EAAE,MAAM;EACnB,UAAU,EAAE,GAAG;EACf,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,MAAM;CAIlB;;AARD,AAKC,MALK,CAKL,CAAC,CAAC;EACD,MAAM,EAAE,GAAG;CACX;;AAGF,AAAA,GAAG,CAAC;EACH,SAAS,EAxDG,KAAK;CAyDjB",
+    "mappings": "AAOA,AAAA,IAAI,CAAC;EACJ,WAAW,EAAE,UAAU;EACvB,gBAAgB,EATP,OAAO;EAUhB,KAAK,EARI,IAAI;EAUb,MAAM,EAAE,CAAC;EACT,SAAS,EAAE,WAAW;EACtB,eAAe,EAAE,MAAM;CACvB;;AAED,AAAA,IAAI,CAAC;EACJ,OAAO,EAAE,WAAW;EACpB,KAAK,EAfO,KAAK;EAgBjB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;EAClB,SAAS,EAlBG,KAAK;EAmBjB,gBAAgB,EAtBJ,OAAO;CAuBnB;;AAED,AAAA,MAAM,CAAC;EACN,UAAU,EAAE,MAAM;CAClB;;AAED,AAAA,CAAC,AAAA,KAAK,CAAC;EACN,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,CAAC,AAAA,QAAQ,CAAC;EACT,KAAK,EAAE,IAAI;CACX;;AAED,AAAA,WAAW,CAAC,CAAC,CAAC;EACb,eAAe,EAAE,IAAI;EACrB,KAAK,EAtCI,IAAI;CA0Cb;;AAND,AAGC,WAHU,CAAC,CAAC,AAGX,QAAQ,CAAC;EACT,KAAK,EAxCG,IAAI;CAyCZ;;AAGF,AAAA,MAAM,CAAC;EACN,UAAU,EAAE,GAAG;EACf,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,MAAM;CAIlB;;AAPD,AAIC,MAJK,CAIL,CAAC,CAAC;EACD,MAAM,EAAE,GAAG;CACX;;AAGF,AAAA,GAAG,CAAC;EACH,SAAS,EApDG,KAAK;CAqDjB;;AAED,AAAA,KAAK,CAAC;EACL,SAAS,EAxDG,KAAK;CAyDjB",
     "sources": [
         "style.scss"
     ],

docs/style.scss

@@ -1,5 +1,5 @@
-$main-bg: #111;
+$main-bg: #080808;
-$content-bg: #222;
+$content-bg: #181818;
 $main-fg: #fff;
 
 $page-width: 800px;
@@ -10,21 +10,24 @@ body {
 	background-color: $main-bg;
 	color: $main-fg;
 
-	display: grid;
-	grid-template-rows: 50px 1fr auto;
-
 	margin: 0;
+	min-width: min-content;
 	justify-content: center;
 }
 
 main {
-	padding: 0 32px 64px ;
+	padding: 0 16px 64px;
-	// grid-column: 2 / -2;
 	width: $page-width;
-	// justify-self: center;
+	margin-left: auto;
+	margin-right: auto;
+	max-width: $page-width;
 	background-color: $content-bg;
 }
 
+header {
+	text-align: center;
+}
+
 a:link {
 	color: #8bf;
 }
@@ -41,14 +44,7 @@ a:visited {
 	}
 }
 
-header {
-	grid-column: 1 / -1;
-	background-color: $main-bg;
-	padding: 0;
-}
-
 footer {
-	grid-column: 1 / -1;
 	margin-top: 5px;
 	margin-bottom: 10px;
 	text-align: center;
@@ -61,3 +57,7 @@ img {
 	max-width: $page-width;
 }
 
+video {
+	max-width: $page-width;
+}
+

docs/voxels/index.html

@@ -16,17 +16,17 @@
 		<h1>Godot-Rust Voxel Engine</h1>
 		<a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
 		<p>
-			I am making a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems.
+			I am making a voxel engine in rust to learn Rust and godot-rust as well as explore voxel systems.
 		</p>
-		<video src="demo.mp4" controls height="320">video not supported :(</video>
+		<video src="demo.mp4" controls>video not supported :(</video>
 		<p>Demo of fast terrain generation</p>
-		<video src="demo2.mp4" controls height="320">video not supported :(</video>
+		<video src="demo2.mp4" controls>video not supported :(</video>
 		<p>Greedy mesh visualisation</p>
 
-		<h3>Greedy mesh algorithm</h3>
+		<h2 id="greedy-mesh" class="title-link"><a href="#greedy-mesh">Greedy mesh algorithm</a></h2>
 		<p>Disclaimer: this is not done. <b>I will write the rest of this soon™</b></p>
 		
-		<p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start</p>
+		<p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start.</p>
 		
 		<p>In this explanation I will assume basic knowledge of how meshes work and how to do the simplest form of culling for voxel meshes.</p>
 		

pages/blender/index.html

@@ -8,7 +8,7 @@
 	<include header.html/>
 	<main>
 		<h1>Blender creations</h1>
-		<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
+		<p>I have been using Blender since around August 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
 
 		<h2>Alien Creatures animation</h2>
 		<p>January 2022</p>

pages/index.html

@@ -7,8 +7,11 @@
 <body>
 	<include header.html/>
 	<main>
-		<h1>Hello!</h1>
+		<section id="introduction">
-		<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects in an easier to see way compared to just github.</p>
+			<h1>Hello!</h1>
+			<p>Welcome to my corner of the internet. I use this page to showcase some of my interesting projects.</p>
+			<p>You can find all my code projects on <a href="https://github.com/CrispyPin">GitHub</a> and all published games are available on <a href="https://crispypin.itch.io">itch.io</a></p>
+		</section>
 
 		<section id="voxels">
 			<h2><a href="/voxels">Voxel engine in godot-rust</a></h2>
@@ -26,32 +29,34 @@
 				OVR Utils is a VR overlay application that has some useful tools for SteamVR. I have been working on it on and off since May 2021.
 			</p>
 			<p>
-				I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard.	
+				I wanted an overlay that could tell me the time without having to open the steam dashboard, and to see the battery levels of my controllers easily, but couldn't find one for free that also had Linux support. So I decided to create my own, and also wrote down a long list of other useful tools. So far only a few of these have been implemented, such as the image overlay and the keyboard.	
 			</p>
 		</section>
 
 		<section id="blender">	
 			<h2><a href="/blender">Blender creations</a></h2>
-			<p>I have been using Blender since around august 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
+			<p>I have been using Blender since around August 2020 on and off, and did a course in it 2021, which boosted my motivation a lot. I occasionally make art in it and of course use it for game jams.</p>
 			<img src="/blender/shork_wallpaper_preview.png" alt="">
 		</section>
 
 		<section id="voxel-raymarch">	
 			<h2 class="title-link"><a href="#voxel-raymarch">Raymarched voxel rendering</a></h2>
-			<a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a>
+			<p>Source: <a href="https://github.com/CrispyPin/voxel-raymarcher">https://github.com/CrispyPin/voxel-raymarcher</a></p>
+			<p>A raymarched voxel renderer made with a Godot shader.</p>
 			<img src="/projects/raymarched-voxels.png" alt="">
 		</section>
 		
 		<section id="gol-wallpaper">
-			<h2><a href="https://gol.crispypin.cc/">Game of life wallpaper</a></h2>
+			<h2><a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">Game of Life wallpaper</a></h2>
 			<p>Source: <a href="https://github.com/CrispyPin/gol-wallpaper">https://github.com/CrispyPin/gol-wallpaper</a></p>
-			<p>See live here: <a href="https://gol.crispypin.cc/?cellsize=5&time=2&margin=0&populate=true">gol.crispypin.cc</a></p>
+
+			<p>Click the title to see it live or go to <a href="https://gol.crispypin.cc/">gol.crispypin.cc</a></p>
 			<img src="/projects/gol.png" alt="">
 		</section>
 
 		<section id="fractals">
 			<h2><a href="/fractals">Fractals</a></h2>
-			While I was learning web development and javascript I made a page with fractals. I thought it was interesting enough to keep here.
+			While I was learning web development and JavaScript I made a page with fractals. I thought it was interesting enough to keep here.
 		</section>
 
 	</main>

pages/voxels/index.html

@@ -10,17 +10,17 @@
 		<h1>Godot-Rust Voxel Engine</h1>
 		<a href="https://github.com/CrispyPin/gd-voxel-rs">https://github.com/CrispyPin/gd-voxel-rs</a>
 		<p>
-			I am making a voxel engine in rust to learn rust and godot-rust as well as explore voxel systems.
+			I am making a voxel engine in rust to learn Rust and godot-rust as well as explore voxel systems.
 		</p>
-		<video src="demo.mp4" controls height="320">video not supported :(</video>
+		<video src="demo.mp4" controls>video not supported :(</video>
 		<p>Demo of fast terrain generation</p>
-		<video src="demo2.mp4" controls height="320">video not supported :(</video>
+		<video src="demo2.mp4" controls>video not supported :(</video>
 		<p>Greedy mesh visualisation</p>
 
-		<h3>Greedy mesh algorithm</h3>
+		<h2 id="greedy-mesh" class="title-link"><a href="#greedy-mesh">Greedy mesh algorithm</a></h2>
 		<p>Disclaimer: this is not done. <b>I will write the rest of this soon™</b></p>
 		
-		<p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start</p>
+		<p>The algorithm I'm using is one I made myself, inspired by a few others. I could not find an easy to understand explanation of how to do it but <a href="https://vercidium.com/blog/voxel-world-optimisations/">this artice</a> and <a href="https://0fps.net/2012/06/30/meshing-in-a-minecraft-game/">this article</a> gave me somewhere to start.</p>
 		
 		<p>In this explanation I will assume basic knowledge of how meshes work and how to do the simplest form of culling for voxel meshes.</p>