v3 final?

ItzzCode · Nov 22, 2023 · ad42a27 · ad42a27
1 parent 8c8b1b1
commit ad42a27
Show file tree

Hide file tree

Showing 9 changed files with 109 additions and 60 deletions.
diff --git a/_includes/footer.html b/_includes/footer.html
@@ -26,7 +26,9 @@
 	<img src="/assets/images/badges/amongus.png" alt="">
 	<img src="/assets/images/badges/hydrohomie.png" alt="">
 	<img src="/assets/images/badges/nofuckingthanks.gif" alt="">
-	<!--<img src="/assets/images/badges/88x31blank.gif" alt="">-->
+	<img src="/assets/images/badges/got_html.gif" alt="">
+	<img src="/assets/images/badges/htmldream.gif" alt="">
+	<img src="/assets/images/badges/neo-fedi.gif" alt="">
 </div>
 
 <p>Page built at {{site.time}}</p>

diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -2,17 +2,24 @@
 The navigation bar thing
 
 -->
-
+<style>
+	#indexlink{
+		color: white;
+		text-decoration: none;
+	}
+	#indexlink:hover {
+		font-style: italic;
+	}
+</style>
 <nav class="navbar" style="font-size: 30px;">
-	<a href="/" style="color: white; text-decoration: none;">
-		<img src="/assets/images/icon.ico" alt="logo" style="width:30px;height:30px;"></img> Itzz Me
+	<a href="/" id="indexlink">
+		<img src="/assets/images/icon.ico" alt="logo" style="width:30px;height:30px;"> Itzz&nbsp;Me
 	</a>
-	<br />
 	<!--<a href="econosite/econosite.php">Econosite</a>-->
-	<a href="/about.html">About</a> <br />
-	<a href="/blogs.html">Blog</a> <br />
+	<a href="/about.html">About</a>
+	<a href="/blogs.html">Blog</a>
 	<!--<a href="/webring">Green Ring</a> - -->
-	<a href="/games.html">Games</a> <br />
-	<a href="/links.html">Links</a> <br />
-	<a href="/beepage.html">Bees</a> <br />
+	<a href="/games.html">Games</a>
+	<a href="/links.html">Links</a>
+	<!--<a href="/beepage.html">Bees</a> <br />-->
 </nav>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,22 +2,25 @@
 <html lang="en">
 	<head>
 		<title>Itzz Me - {{ page.title }}</title>
-		<link rel="icon" type="image/png" href="/assets/images/icon.ico" />
-		<link rel="stylesheet" type="text/css" href="/assets/css/styles.css" />
-		<meta charset="utf-8" />
+		<link rel="icon" type="image/png" href="/assets/images/icon.ico">
+		<link rel="stylesheet" type="text/css" href="/assets/css/styles.css">
+		<meta charset="utf-8">
 		{% feed_meta %}
     	{% seo %}
 	</head>
 	<body>
-		<table><tr><td id="nav">
-		{% include navbar.html %}
-		</td><td>
-		<!-- johnvertisement -->
-		<iframe src="https://john.citrons.xyz/embed?ref=itzzcode.github.io" style="margin-left:auto;display:block;margin-right:auto;max-width:732px;width:100%;height:94px;border:none;"></iframe>
-		{{ content }}</td></tr>
-		<tr><td colspan="2" id="footer">
-		{% include footer.html %}
-		</td></tr>
-		</table>
+		<div id="nav">
+			{% include navbar.html %}
+		</div>
+
+		<div id="main">
+			<!-- johnvertisement -->
+			<iframe src="https://john.citrons.xyz/embed?ref=itzzcode.github.io" style="margin-left:auto;display:block;margin-right:auto;max-width:732px;width:100%;height:94px;border:none;"></iframe>
+			{{ content }}
+		</div>
+
+		<div id="footer">
+			{% include footer.html %}
+		</div>
 	</body>
 </html>
diff --git a/_posts/2023-11-21-website-v3.md b/_posts/2023-11-21-website-v3.md
@@ -0,0 +1,9 @@
+---
+layout: blog
+title: Version 3 of my website
+author: Itzz Me
+---
+
+If you're seeing this blog post, I have made the 3rd version of my website public! By version, I mean major changes to how the website looks, acts, etc.
+
+That's all for now.
diff --git a/assets/css/styles.css b/assets/css/styles.css
@@ -4,22 +4,55 @@
 	--itzzic: 0, 175, 0;
 }
 
-body {
-	background-image: url('/assets/images/misc/bgstars.gif');
-	font: normal normal 300 16px 'RobotoMono';
-	color: white;
-}
-
 /*this part is for hiding the pesky scrollbar*/
 html {
 	-ms-overflow-style: none;  /* IE and Edge */
 	scrollbar-width: none;  /* Firefox */
+	background-image: url('/assets/images/misc/bgstars.gif');
 }
 
 html::-webkit-scrollbar {
 	display: none;
 }
 
+body {
+	font: normal normal 300 calc(15px + 0.390625vw) 'RobotoMono';
+	color: white;
+	display: grid;
+	grid-template-columns: min-content auto;
+	grid-template-rows: auto auto;
+	margin-right: auto;
+	margin-left: auto;
+	width: 60%;
+	height: 85%;
+	border-style: ridge;
+	border-width: 5px;
+	background: black;
+}
+
+#nav {
+	border-right: 1px dashed;
+	padding: 10px !important;
+	vertical-align: top;
+	grid-row: 1 / 2;
+	grid-column: 1 / 2;
+}
+
+#main {
+	grid-row: 1 / 2;
+	grid-column: 2 / 3;
+}
+
+#footer {
+	border-top: 1px solid;
+	grid-row: 2 / 3;
+	grid-column: 1 / 3;
+}
+
+#nav, #main, #footer {
+	padding: 5px;
+}
+
 a {
 	color: rgb(var(--itzzic));
 }
@@ -29,31 +62,20 @@ a:visited { text-decoration: none; }
 a:hover { text-decoration: underline; }
 a:active { text-decoration: underline; }
 
-div#oldsitealert {
-	background-color: rgba(var(--itzzic), 0.12);
-	border: solid 3px white;
-	padding: 10px;
-	text-align: center;
-}
-
 li {
 	margin-top: 10px;
 	margin-bottom: 10px;
 }
 
-#nav {
-	border-right: 1px dashed;
-	width: 10%;
-	vertical-align: top;
-}
-
-#footer {
-	border-top: 1px solid;
+div#oldsitealert {
+	background-color: rgba(var(--itzzic), 0.12);
+	border: solid 3px white;
+	padding: 10px;
+	text-align: center;
 }
 
 .badges {
-	width: 100%;
-	margin: auto;
+	/*HOW DO I CENTER A DIV*/
 }
 
 .badges img {
@@ -66,16 +88,24 @@ li {
 	text-decoration-color: rgb(var(--itzzic));
 }
 
-table {
-	margin-right: auto;
-	margin-left: auto;
-	width: 55%;
-	height: 85%;
-	border-style: ridge;
-	border-width: 5px;
-	background-color: black;
-}
-
 @media(max-width: 800px) or (orientation: portrait) {
-	table{width: 100%;}
+	body {
+		grid-template-columns: auto auto;
+		grid-template-rows: auto auto auto;
+		width: 95%;
+		height: 100%;
+	}
+	#nav {
+		grid-row: 1 / 2;
+		grid-column: 1 / 3;
+		border-right: none;
+		border-bottom: 1px solid;
+	}
+	#main {
+		grid-row: 2 / 3;
+		grid-column: 1 / 3;
+	}
+	#footer {
+		grid-row: 3 / 4;
+	}
 }
diff --git a/assets/images/badges/got_html.gif b/assets/images/badges/got_html.gif
diff --git a/assets/images/badges/htmldream.gif b/assets/images/badges/htmldream.gif
diff --git a/assets/images/badges/neo-fedi.gif b/assets/images/badges/neo-fedi.gif
diff --git a/index.html b/index.html
@@ -28,7 +28,7 @@
 </p>
 
 <p>
-Also, check out my <a href="blogs.html">Blogs</a>, I'll try to post regularly to it.<sup>[<em><a>citation needed</a></em>]</sup>
+Also, check out my <a href="blogs.html">Blogs</a>, I'll try to post regularly to it.<sup>[<em><a>citation&nbsp;needed</a></em>]</sup>
 </p>
 
 <p>
@@ -53,8 +53,6 @@
 		Enable Javascript for this epic button that you are missing out on
 	</noscript>
 
-<hr>
-
 </p>
 <p>
 	I am a member of the GEORGE! The navigation for this will can be found in the footer of every page.