From 29de11b76283878eaed7b1ddceac91e580df164e Mon Sep 17 00:00:00 2001
From: Muhammad Nauman Raza <devraza.hazard643@slmail.me>
Date: Wed, 5 Feb 2025 18:21:24 +0000
Subject: [PATCH] feat: revamp styling of website

---
 badge.png => assets/badge.png                 | Bin
 .../devraza-avatar.webp                       | Bin
 .../happybull-avatar.jpg                      | Bin
 logo.svg => assets/logo.svg                   |   0
 .../midnadimple-avatar.png                    | Bin
 rayan-avatar.png => assets/rayan-avatar.png   | Bin
 index.html                                    |  27 +++++----
 style.css                                     |  52 +++++++++++-------
 8 files changed, 46 insertions(+), 33 deletions(-)
 rename badge.png => assets/badge.png (100%)
 rename devraza-avatar.webp => assets/devraza-avatar.webp (100%)
 rename happybull-avatar.jpg => assets/happybull-avatar.jpg (100%)
 rename logo.svg => assets/logo.svg (100%)
 rename midnadimple-avatar.png => assets/midnadimple-avatar.png (100%)
 rename rayan-avatar.png => assets/rayan-avatar.png (100%)
diff --git a/badge.png b/assets/badge.png
similarity index 100%
rename from badge.png
rename to assets/badge.png
diff --git a/devraza-avatar.webp b/assets/devraza-avatar.webp
similarity index 100%
rename from devraza-avatar.webp
rename to assets/devraza-avatar.webp
diff --git a/happybull-avatar.jpg b/assets/happybull-avatar.jpg
similarity index 100%
rename from happybull-avatar.jpg
rename to assets/happybull-avatar.jpg
diff --git a/logo.svg b/assets/logo.svg
similarity index 100%
rename from logo.svg
rename to assets/logo.svg
diff --git a/midnadimple-avatar.png b/assets/midnadimple-avatar.png
similarity index 100%
rename from midnadimple-avatar.png
rename to assets/midnadimple-avatar.png
diff --git a/rayan-avatar.png b/assets/rayan-avatar.png
similarity index 100%
rename from rayan-avatar.png
rename to assets/rayan-avatar.png
diff --git a/index.html b/index.html
index be12562..10ba258 100644
--- a/index.html
+++ b/index.html
@@ -14,12 +14,12 @@
 <body>
 	<div class="split left">
 		<header>
-			<img src="logo.svg" width="256">
-			<h1>A Tyrant Incoporated</h1>
+			<img src="assets/logo.svg" width="256">
+			<h1>A Tyrant Incorporated</h1>
 			<em>a.k.a "Atiran Inc."</em>
 		</header>
 		<section class="container">
-			<h1>About</h1>
+			<h2>About</h2>
 			<p>We are a group of independent software developers and cybersecurity experts connected by a webring and some duct tape.</p>
 			<p>We strive to provide resources for all members in the group, so that they can make useful software that can rival those funded by big tech.</p>
 			<p>If you believe you create software that stands out from the competition, have a deep passion for technology, and are innovative and creative,
@@ -33,14 +33,14 @@
 		<h1 style="text-align: center">Members</h1>
 
 		<article class="container">
-			<img src="devraza-avatar.webp" width="256px">
+			<img src="assets/devraza-avatar.webp" width="256px">
 			<div>
-				<h1>Devraza</h1>
+				<h2>Devraza</h2>
 				<p>A great programmer, entry-level security specialist, very competent system administrator,
 					and average graphic designer. More well-known for being a Linux and Rust evangelist.
-					Source for the name of this website
+					Source for the name of this website.
 				</p>
-				<q><em>I am the true tyrant...</em></q>
+				<q><em>How much rust would Rust rust if one was rusty with Rust?</em></q>
 				<br><br>
 				<a href="https://devraza.giize.com" class="btn">Website</a>
 				<a href="https://www.linkedin.com/in/razadev/" class="btn">LinkedIn</a>
@@ -48,9 +48,9 @@
 		</article>
 
 		<article class="container">
-			<img src="midnadimple-avatar.png" width="256px">
+			<img src="assets/midnadimple-avatar.png" width="256px">
 			<div>
-				<h1>midnadimple :/</h1>
+				<h2>midnadimple :/</h2>
 				<p>A C(++) developer that focuses on low-level development on Windows. Also a fledgling system administrator
 					and web technologist. Big into the self-improvement community and posts about bettering yourself
 					on his blog.
@@ -64,9 +64,9 @@
 		</article>
 	
 		<article class="container">
-			<img src="happybull-avatar.jpg" width="256px">
+			<img src="assets/happybull-avatar.jpg" width="256px">
 			<div>
-				<h1>HappyBull</h1>
+				<h2>HappyBull</h2>
 				<p>The go-to cybersecurity guy. Has certifications in Python and Microsoft Windows for some reason?
 					Big guy, small personality.
 				</p>
@@ -77,9 +77,9 @@
 		</article>
 	
 		<article class="container">
-			<img src="rayan-avatar.png" width="256px">
+			<img src="assets/rayan-avatar.png" width="256px">
 			<div>
-				<h1>Rayan-H7</h1>
+				<h2>Rayan-H7</h2>
 				<p>An interesting fellow, to say the least. Hard to tell if he's Chinese or Pakistani.
 					Works at Kumon. Has a lot of useful scripts on his github.
 				</p>
@@ -88,7 +88,6 @@
 				<a href="https://github.com/Rayan-H7" class="btn">GitHub</a>
 			</div>
 		</article>
-
 	</div>
 
 	<footer>
diff --git a/style.css b/style.css
index 85fd430..3f89101 100644
--- a/style.css
+++ b/style.css
@@ -4,7 +4,7 @@
 	--fg-color: #ece5ea;
 	--confirm-color: #78b9c4;
 	--deny-color: #f06969;
-	--hilite-color: #a292e8;
+	--highlight-color: #a292e8;
 }
 
 html, body {
@@ -23,17 +23,15 @@ body {
 
 .split {
 	height: calc(100vh - 4rem);
-	width: 50%;
 	position: fixed;
-	z-index: 1;
 	top: 0;
 	overflow-x: hidden;
-	padding-top: 20px;
+	padding-top: 60px;
 }
 
 .left {
 	left: 0;
-	width: 40%;
+	width: 30%;
 	background-color: var(--bg-color);
 }
 
@@ -64,14 +62,12 @@ body {
 footer {
 	clear: both;
 	text-align: center;
-	height: 3rem;
-	line-height: 3rem;
-	margin-top: auto;
+  color: var(--highlight-color);
 	width: 100%;
-	background-color: var(--hilite-color);
-	color: var(--bg-color);
+  padding: 6px 0px 8px 0px;
+	background-color: var(--dark-color);
+  border-top: 2px solid var(--highlight-color);
 	position: fixed;
-	left: 0;
 	bottom: 0;
 }
 
@@ -83,7 +79,7 @@ header {
 }
 
 a {
-	color: var(--hilite-color);
+	color: var(--highlight-color);
 	text-decoration: underline;
 }
 
@@ -94,7 +90,13 @@ a:hover {
 h1 {
 	font-size: xx-large;
 	text-decoration-line: underline;
-	text-decoration-color: var(--hilite-color);
+	text-decoration-color: var(--highlight-color);
+}
+
+h2 {
+	font-size: x-large;
+	text-decoration-line: underline;
+	text-decoration-color: var(--highlight-color);
 }
 
 .hljs {
@@ -115,6 +117,16 @@ code {
 	border-radius: 5px;
 }
 
+article {
+  display: flex;
+  justify-content: enter;
+  align-items: center;
+
+  img {
+    padding-right: 30px;
+  }
+}
+
 .container {
 	max-width: 1536px;
 	margin-left: auto;
@@ -122,7 +134,6 @@ code {
 	padding-left: 0.5rem;
 	padding-right: 0.5rem;
 	padding-bottom: 2rem;
-	text-align: center;
 	width: 70%;
 }
   
@@ -169,16 +180,19 @@ code {
 }
 
 .btn {
+  font-family: monospace;
+  font-size: large;
 	cursor: pointer;
 	position: relative;
-	padding: 10px;
-	border-radius: 10px;
 	user-select: none;
+  font-weight: 700;
 	text-align: center;
 	display: inline-block;
 	text-decoration: none;
+  padding: 5px 10px 5px 10px;
+  margin: 2px;
 	color: var(--bg-color);
-	background-color: var(--hilite-color);
+	background-color: var(--highlight-color);
 }
 
 .btn:hover {
@@ -187,9 +201,9 @@ code {
 }
 
 .quote-link {
-	color: var(--hilite-color);
+	color: var(--highlight-color);
 }
 
 .quote-link:hover {
 	color: var(--confirm-color);
-}
\ No newline at end of file
+}
