made everything look better in the code and in aesthetics

i love you
Snare-Hawk · May 27, 2022 · 0a80d08 · 0a80d08
1 parent 5532bff
commit 0a80d08
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 23 deletions.
diff --git a/Banners.html b/Banners.html
@@ -3,8 +3,9 @@
 	<head>
 		<title>How to Make Custom Banners</title>
 		<link rel="stylesheet" href="styles.css" />
+		<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
 	</head>
-	<body link="#B8D2DF" alink="#acbcc7" vlink="#8A9EA7">
+	<body id="banners">
 		<div class="topnav">
 			<a href="index.html"><strong>Wii Stuff</strong></a>
 		</div>
@@ -16,33 +17,32 @@ <h1>Custom Wii Banners for USB Loader GX</h1>
 				This is a guide on how I was able to make custom banners for use in
 				<a href="https://wii.guide/usbloadergx">USB Loader GX</a>. While it may
 				not be the best way to do it, it is the one that I found to work. If you
-				happened to have found a better method, ping me on
-				<a href="https://discord.gg/rc24">the RiiConnect24 Discord server</a>,
-				my tag is Snare-Hawk#6331.
+				happened to have found a better method, ping me on the
+				<a href="https://discord.gg/rc24">RiiConnect24 Discord server</a>, my
+				username is Snare-Hawk#6331.
 			</div>
 			<h4>What you need</h4>
 			<ul>
 				<li>
-					<a href="https://code.google.com/archive/p/customizemii/downloads"
-						>CustomizeMii</a
-					>
+					<a href="https://code.google.com/archive/p/customizemii/downloads">
+						CustomizeMii
+					</a>
 				</li>
 				<li>
-					A base WAD such as
-					<a
-						href="https://cdn.discordapp.com/attachments/666436193898201109/950131110770278460/Animal_Crossing_-_fart_-_opGAF.wad"
-						>this Animal Crossing one</a
-					>
+					A WAD to use as a base, such as
+					<a href="assets/Animal Crossing Banner.wad">
+						this Animal Crossing one
+					</a>
 				</li>
 				<li>
-					An image editing software such as
+					An image editing software, such as
 					<a href="https://www.gimp.org/">GIMP</a>
 				</li>
 			</ul>
 			<h4>Optional</h4>
 			<ul>
 				<li>
-					An audio editing software such as
+					An audio editing software, such as
 					<a href="http://www.darkaudacity.com/download.html">Dark Audacity</a>
 				</li>
 			</ul>
@@ -62,7 +62,7 @@ <h4>Instructions</h4>
 				<ul>
 					<li>
 						I've noticed that the larger the WAD is in size, the longer it takes
-						to load in your loader.
+						to load in your USB loader.
 					</li>
 					<li>I recommend using <a href="https://tinypng.com">TinyPNG</a>.</li>
 				</ul>
@@ -90,8 +90,19 @@ <h4>Instructions</h4>
 				<li>
 					Locate the folder containing the WAD contents and then rename the file
 					named <code>00000000.app</code> to <code>[GAME ID].bnr</code>.
+					<ul>
+						<li>
+							You only need to have the first three characters of the game ID
+							for USB Loader GX to read it properly.
+						</li>
+					</ul>
 				</li>
 			</ol>
+			<p>
+				You should now see the banners you created with their respective title.
+				If you would like to see the banners I have made, check them out
+				<a href="assets/cache_bnr.7z">here</a>.
+			</p>
 		</div>
 		<div class="bottom-nav">
 			<p>Site by <a href="https://snare-hawk.carrd.co/">Snare-Hawk</a></p>

diff --git a/assets/favicon.ico b/assets/favicon.ico
diff --git a/emuNAND.html b/emuNAND.html
@@ -3,8 +3,9 @@
 	<head>
 		<title>Dumping NAND to Emulated NAND</title>
 		<link rel="stylesheet" href="styles.css" />
+		<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
 	</head>
-	<body link="#B8D2DF" alink="#acbcc7" vlink="#8A9EA7">
+	<body id="emuNAND">
 		<div class="topnav">
 			<a href="index.html"><strong>Wii Stuff</strong></a>
 		</div>
@@ -43,7 +44,7 @@ <h5>Section I - Preparing the SD Card</h5>
 						<code>nands</code> named <code>01</code>. At this point, your SD
 						card should look something similar to the image below.
 					</li>
-					<img src="assets/emuNAND.png" width="796px" height="557px" />
+					<img src="assets/emuNAND.png" />
 					<li>
 						Eject your SD card, insert it into your Wii and launch USB Loader
 						GX.

diff --git a/index.html b/index.html
@@ -3,15 +3,17 @@
 	<head>
 		<title>Home</title>
 		<link rel="stylesheet" href="styles.css" />
+		<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
 	</head>
-	<body link="#B8D2DF" alink="#acbcc7" vlink="#8A9EA7">
+	<body id="home">
 		<div class="topnav">
 			<a href="index.html"><strong>Wii Stuff</strong></a>
 		</div>
 		<hr />
 		<div id="main">
 			<div class="intro">
 				<h2>Intro</h2>
+				<hr />
 				<p>
 					Heyo! My name is Snare-Hawk. I just wanted to make this site to make a
 					collection of guides not currently found on
@@ -25,13 +27,15 @@ <h2>Intro</h2>
 			</div>
 			<div class="guides">
 				<h2>Guides</h2>
+				<hr />
 				<ul>
 					<li><a href="emuNAND.html">Setting Up emuNAND</a></li>
 					<li><a href="Banners.html">Custom Banners</a></li>
 				</ul>
 			</div>
 			<div class="Credits">
 				<h2>Credits</h2>
+				<hr />
 				<p>
 					Firstly, if you couldn't tell already, this site is heavily inspired
 					by the amazing <a href="https://wii.guide">Wii Guide</a>. This site is

diff --git a/styles.css b/styles.css
@@ -86,15 +86,24 @@ div {
 .topnav a:hover {
 	color: #adb2ba;
 }
-.topnav a.active {
+.topnav a:active {
 	color: white;
 }
+.topnav a:visited {
+	color: inherit;
+}
 .bottom-nav {
 	overflow: hidden;
 	background-color: #20242d;
 	margin-top: 66px;
 	padding: 22px;
 }
+body#home div.bottom-nav {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	width: 97.7%;
+}
 .bottom-nav p {
 	float: left;
 	text-align: center;
@@ -156,11 +165,37 @@ li {
 	box-shadow: 0 1px 1px rgba(94, 129, 172, 0.25);
 }
 img {
-	padding: 10px 0px;
+	display: block;
+	margin: 10px auto;
 }
-.img {
-	margin: auto;
+#emuNAND img {
+	width: 796px;
+	height: 557px;
 }
-.normal {
+img .normal {
 	font-size: 18.7px;
 }
+a {
+	color: #b8d2df;
+}
+a:active {
+	color: #acbcc7;
+}
+a:visited {
+	color: #8a9ea7;
+}
+.notice--warning a {
+	color: #deab9b;
+	text-decoration: none;
+}
+.notice--info a {
+	color: #8ea7c5;
+	text-decoration: none;
+}
+.notice--warning a:hover,
+.notice--info a:hover {
+	text-decoration: underline;
+}
+.topnav a {
+	text-decoration: bold;
+}