H

css/footer.css

@@ -9,7 +9,7 @@ footer {
   display: flex; flex-direction: row; flex-wrap: wrap;
   justify-content: space-around; align-items: center;
 
-  background-color: var(--bg); color: var(--fg);
+  background-color: var(--bg-dark); color: var(--fg);
 
   border-radius: var(--rad);
 
@@ -24,3 +24,6 @@ footer div {
   justify-content: center; align-content: center;
   text-align: center;
 }
+footer div h3 {
+  margin-bottom: 0.5rem;
+}

css/main.css

@@ -46,10 +46,13 @@ main section img {
   Gallery
 */
 .gallery-image {
+  padding: 0;
   width: 100%; height: 30rem;
   object-fit: contain;
 
-  background-color: #000;
+  display: block;
+
+  background-color: var(--bg-dark);
 }
 
 .gallery {
@@ -70,27 +73,6 @@ main section img {
   display: none;
 }
 
-/*
-#gallery::before,#gallery::after {
-  content: "";
-
-  width: 5rem; height: 10rem;
-  display: block;
-
-  position: absolute; bottom: 1rem;
-}
-#gallery::before {
-  left: 1rem;
-
-  background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
-}
-#gallery::after {
-  right: 1rem;
-
-  background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
-}
-*/
-
 .gallery img {
   margin: 0 0.5rem;
 
@@ -114,3 +96,39 @@ main section img {
 .gallery img:last-child {
   margin-right: 0;
 }
+
+/*
+  Filter
+*/
+.filter-list {
+  margin: 0 0 1rem 0; padding: 0;
+  width: 100%;
+  display: flex; flex-direction: row;
+
+  justify-content: space-between;
+}
+
+.filter-list div {
+  margin: 0 1rem 0 0; padding: 0.5rem;
+  width: 15rem; min-width: 8rem;
+  height: 1.5rem;
+
+  display: flex;
+  justify-content: center; align-items: center;
+
+  text-align: center;
+
+  background-color: var(--bg-dark);
+}
+@media (max-width:750px) {
+  .filter-list {
+    flex-direction: column;
+  }
+  .filter-list div {
+    margin: 0 0 1rem 0;
+    width: auto;
+  }
+}
+.filter-list div:last-child {
+  margin: 0;
+}

index.php

@@ -86,12 +86,28 @@
 			<p>To <span class="jeetix-colour">Jeetix</span> for helping me with learning how to make websites and keeping the original site up and running!</p>
 			<p>And to <span class="carty-colour">Carty</span> for teaching me how to run servers and the networking required to keep sites online!</p>
 			<p><span class="mrhdash-colour">mrHDash</span> for the <a href="#refsheet">Ref Sheet</a> and most other art on the page!</p>
-			<p>To <span class="zadok-colour">Zadok</span> for the silly tadium art in the nav bar!</p>
+			<p>To <span class="zadok-colour">Zadok</span> for the silly taidum art in the nav bar!</p>
 		</section>
 
 		<section id="gallery">
 			<h2>Random pictures lol</h2>
 			<img src="gallery/fluffy_VRchat-meet-2021.webp" class="gallery-image">
+			<!--
+			<div class="filter-list">
+				<div>
+					<p>Blur</p>
+				</div>
+				<div>
+					<p>Grayscale</p>
+				</div>
+				<div>
+					<p>Hue</p>
+				</div>
+				<div>
+					<p>Saturation</p>
+				</div>
+			</div>
+			-->
 			<div class="gallery" draggable="false">
 				<?php
 				$images = glob("gallery/*.{jpg,jpeg,png,webp,gif}", GLOB_BRACE);
@@ -131,14 +147,29 @@
 			<iframe src="https://open.spotify.com/embed/playlist/5e4iqBdioVN56hz1KCYWNi?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
 			<iframe src="https://open.spotify.com/embed/playlist/37vWcad8w7GBvNIZUkDxEi?utm_source=generator" width="100%" height="380" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"></iframe>
 
-			<h3>Artists I enjoy</h3>
+			<h3>Music flavours</h3>
+			<h4>Rock/Metal</h4>
 			<p>Bring me the Horizon</p>
-			<p>acloudyskye</p>
-			<p>Gorillaz</p>
-			<p>Conro</p>
 			<p>Pink Floyed</p>
 			<p>Ocean Colour Scene</p>
-			<p>More coming soon!</p>
+			<p>Oasis</p>
+			<p>Fleetwood Mac</p>
+			<p>Stereophonics</p>
+
+			<h4>EDM/Electronic</h4>
+			<p>acloudyskye</p>
+			<p>Conro</p>
+			<p>Pixel Terror</p>
+
+			<h4>Other</h4>
+			<p>Gorillaz</p>
+			<p>M38</p>
+			<p>C148</p>
+			<p>The Rare Occasion</p>
+			<p>Joywave</p>
+
+			<h3>Well...</h3>
+			<p>I listen to everything, but feel free to complain to me about my choices!</p>
 		</section>
 	</main>
 
@@ -150,7 +181,7 @@
 		</div>
 		<div>
 			<h3>Page status</h3>
-			<p>Last updated 16 Jun 2022</p>
+			<p>Last updated 17 Jun 2022</p>
 			<p>Made and designed by <span class="fluffy-colour">Fluffy</span></p>
 		</div>
 		<div>

stylesheet.css

@@ -2,21 +2,6 @@
 @import "css/main.css";
 @import "css/footer.css";
 
-/*
-@font-face {
-  font-family: "Rubik", sans-serif;
-  src: url(fonts/Rubik.ttf) format('truetype');
-}
-@font-face {
-  font-family: "Lexend Deca", sans-serif;
-  src: url(fonts/LexendDeca.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Fira Code', monospace;
-  src: url(fonts/FiraCode.ttf) format('truetype');
-}
-*/
-
 :root {
   --bg: #151515;
   --bg-dark: #0f0f0f;
@@ -73,7 +58,7 @@ p,a {
   font-family: "Fira Code", monospace;
 }
 
-h1,h2,h3 {
+h1,h2,h3,h4 {
   font-family: "Lexend Deca", sans-serif;
   font-weight: 600;
   color: var(--h);
@@ -87,6 +72,9 @@ h2 {
 h3 {
   font-size: 23px;
 }
+h4 {
+  font-size: 19px;
+}
 
 a {
   color: var(--green);