feat: revamp styling of website

This commit is contained in:
Muhammad Nauman Raza 2025-02-05 18:21:24 +00:00
parent d56b72b213
commit 29de11b762
Signed by: devraza
GPG key ID: 91EAD6081011574B
8 changed files with 46 additions and 33 deletions

View file

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View file

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 9.8 KiB

View file

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View file

Before

Width:  |  Height:  |  Size: 5.3 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

View file

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

View file

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

View file

@ -14,12 +14,12 @@
<body> <body>
<div class="split left"> <div class="split left">
<header> <header>
<img src="logo.svg" width="256"> <img src="assets/logo.svg" width="256">
<h1>A Tyrant Incoporated</h1> <h1>A Tyrant Incorporated</h1>
<em>a.k.a "Atiran Inc."</em> <em>a.k.a "Atiran Inc."</em>
</header> </header>
<section class="container"> <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 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>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, <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> <h1 style="text-align: center">Members</h1>
<article class="container"> <article class="container">
<img src="devraza-avatar.webp" width="256px"> <img src="assets/devraza-avatar.webp" width="256px">
<div> <div>
<h1>Devraza</h1> <h2>Devraza</h2>
<p>A great programmer, entry-level security specialist, very competent system administrator, <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. 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> </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> <br><br>
<a href="https://devraza.giize.com" class="btn">Website</a> <a href="https://devraza.giize.com" class="btn">Website</a>
<a href="https://www.linkedin.com/in/razadev/" class="btn">LinkedIn</a> <a href="https://www.linkedin.com/in/razadev/" class="btn">LinkedIn</a>
@ -48,9 +48,9 @@
</article> </article>
<article class="container"> <article class="container">
<img src="midnadimple-avatar.png" width="256px"> <img src="assets/midnadimple-avatar.png" width="256px">
<div> <div>
<h1>midnadimple :/</h1> <h2>midnadimple :/</h2>
<p>A C(++) developer that focuses on low-level development on Windows. Also a fledgling system administrator <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 and web technologist. Big into the self-improvement community and posts about bettering yourself
on his blog. on his blog.
@ -64,9 +64,9 @@
</article> </article>
<article class="container"> <article class="container">
<img src="happybull-avatar.jpg" width="256px"> <img src="assets/happybull-avatar.jpg" width="256px">
<div> <div>
<h1>HappyBull</h1> <h2>HappyBull</h2>
<p>The go-to cybersecurity guy. Has certifications in Python and Microsoft Windows for some reason? <p>The go-to cybersecurity guy. Has certifications in Python and Microsoft Windows for some reason?
Big guy, small personality. Big guy, small personality.
</p> </p>
@ -77,9 +77,9 @@
</article> </article>
<article class="container"> <article class="container">
<img src="rayan-avatar.png" width="256px"> <img src="assets/rayan-avatar.png" width="256px">
<div> <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. <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. Works at Kumon. Has a lot of useful scripts on his github.
</p> </p>
@ -88,7 +88,6 @@
<a href="https://github.com/Rayan-H7" class="btn">GitHub</a> <a href="https://github.com/Rayan-H7" class="btn">GitHub</a>
</div> </div>
</article> </article>
</div> </div>
<footer> <footer>

View file

@ -4,7 +4,7 @@
--fg-color: #ece5ea; --fg-color: #ece5ea;
--confirm-color: #78b9c4; --confirm-color: #78b9c4;
--deny-color: #f06969; --deny-color: #f06969;
--hilite-color: #a292e8; --highlight-color: #a292e8;
} }
html, body { html, body {
@ -23,17 +23,15 @@ body {
.split { .split {
height: calc(100vh - 4rem); height: calc(100vh - 4rem);
width: 50%;
position: fixed; position: fixed;
z-index: 1;
top: 0; top: 0;
overflow-x: hidden; overflow-x: hidden;
padding-top: 20px; padding-top: 60px;
} }
.left { .left {
left: 0; left: 0;
width: 40%; width: 30%;
background-color: var(--bg-color); background-color: var(--bg-color);
} }
@ -64,14 +62,12 @@ body {
footer { footer {
clear: both; clear: both;
text-align: center; text-align: center;
height: 3rem; color: var(--highlight-color);
line-height: 3rem;
margin-top: auto;
width: 100%; width: 100%;
background-color: var(--hilite-color); padding: 6px 0px 8px 0px;
color: var(--bg-color); background-color: var(--dark-color);
border-top: 2px solid var(--highlight-color);
position: fixed; position: fixed;
left: 0;
bottom: 0; bottom: 0;
} }
@ -83,7 +79,7 @@ header {
} }
a { a {
color: var(--hilite-color); color: var(--highlight-color);
text-decoration: underline; text-decoration: underline;
} }
@ -94,7 +90,13 @@ a:hover {
h1 { h1 {
font-size: xx-large; font-size: xx-large;
text-decoration-line: underline; 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 { .hljs {
@ -115,6 +117,16 @@ code {
border-radius: 5px; border-radius: 5px;
} }
article {
display: flex;
justify-content: enter;
align-items: center;
img {
padding-right: 30px;
}
}
.container { .container {
max-width: 1536px; max-width: 1536px;
margin-left: auto; margin-left: auto;
@ -122,7 +134,6 @@ code {
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
padding-bottom: 2rem; padding-bottom: 2rem;
text-align: center;
width: 70%; width: 70%;
} }
@ -169,16 +180,19 @@ code {
} }
.btn { .btn {
font-family: monospace;
font-size: large;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
padding: 10px;
border-radius: 10px;
user-select: none; user-select: none;
font-weight: 700;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
padding: 5px 10px 5px 10px;
margin: 2px;
color: var(--bg-color); color: var(--bg-color);
background-color: var(--hilite-color); background-color: var(--highlight-color);
} }
.btn:hover { .btn:hover {
@ -187,9 +201,9 @@ code {
} }
.quote-link { .quote-link {
color: var(--hilite-color); color: var(--highlight-color);
} }
.quote-link:hover { .quote-link:hover {
color: var(--confirm-color); color: var(--confirm-color);
} }