A lot of CSS fuckery, added uzi and a navbar.

2025-10-29 21:10:54 +01:00
parent 34e47d74f4
commit b380449e7c
3 changed files with 205 additions and 108 deletions
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -1,36 +1,121 @@
-/* CSS Document */
@font-face {
  font-family: "Clockopia";
  src: url("../fonts/Clockopia.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
 }

@font-face {
  font-family: "LuxiSans";
  src: url("../fonts/luxisr.ttf") format("truetype");
-  font-weight: normal;
-  font-style: normal;
 }

 body {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  height: 100vh;
+  overflow: hidden;
  background-color: #0e0016;
  color: white;
  font-family: "LuxiSans", sans-serif;
 }

-h1, h2, h3, h4, h5, h6 {
+/* === NAVBAR ON THE RIGHT === */
+.navbar {
+  width: 100px;
+  background-color: #3c1a4d;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 20;
+}
+
+.navbar ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.navbar li {
+  width: 100%;
+  margin: 0.5rem 0;
+}
+
+.navbar a {
+  display: block;
+  color: white;
+  text-decoration: none;
+  text-align: center;
+  padding: 0.75rem 0;
+  transition: background 0.2s ease;
+}
+
+.navbar a:hover {
+  background-color: #5e2b7a;
+}
+
+/* === MAIN CONTENT === */
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  padding: 0 10% 0 10%;
+  gap: 5%;
+  z-index: 10;
+  position: relative;
+}
+
+/* === LEFT SIDE (UZI IMAGE) === */
+.left {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.uzi {
+  width: 90%;
+  max-width: 650px;
+  height: auto;
+  pointer-events: none;
+}
+
+/* === MIDDLE SECTION (TEXT + BADGES) === */
+.middle {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: left;
+  z-index: 10;
+}
+
+.middle h1 {
  font-family: "Clockopia", sans-serif;
-  letter-spacing: 0.05em;
-  color: #CBC3E3;
+  font-size: 3.5rem;
+  margin-bottom: 1rem;
+  color: #fff5a8;
+}
+
+.middle p {
+  font-size: 1.1rem;
+  line-height: 1.7;
+  margin-bottom: 1rem;
+  max-width: 550px;
 }

 .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
-    justify-content: center;
-    margin-top: 20px;
+  margin-top: 1.5rem;
 }

 .buttons img {
@@ -40,27 +125,16 @@ h1, h2, h3, h4, h5, h6 {
  image-rendering: pixelated;
 }

-@media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-        -webkit-transition: none !important;
-        -o-transition: none !important;
-        transition: none !important;
-        -webkit-animation: none !important;
-        animation: none !important;
-        -webkit-animation-play-state: paused !important;
-        animation-play-state: paused !important;
-        scroll-behavior: auto !important;
-    }
-}
-
+/* === BACKGROUND CANVAS === */
 #night {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
-    background: #0e0016;
  z-index: -9999;
 }
+
+/* === RESPONSIVE === */
+@media (max-width: 900px) {
+  body
--- a/assets/images/uzi.png
+++ b/assets/images/uzi.png
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
  <meta charset="utf-8">
  <meta name="og:url" content="https://purplebored.pl/" />
@@ -8,19 +8,30 @@
  <meta name="description" content="Just my personal website :-)" />
  <meta name="keywords" content="purplebored, poland, polish, personal website, website, buttons, niko, self-hosted, open source, foss, murder drones, tobacco, md, nicotine" />
  <meta name="color-scheme" content="dark" />
-	<meta name="theme-color" content="black" />
+  <meta name="theme-color" content="#0e0016" />

  <link rel="stylesheet" href="assets/css/style.css">
-<title>Purplebored</title>
+  <title>Purplebored</title>
 </head>

 <body>
+  <div class="content">
+    <div class="left">
+      <img src="assets/images/uzi.png" alt="Uzi" class="uzi">
+    </div>
+
+    <div class="middle">
      <h1>Purplebored.pl</h1>
-	<p>Hi, I am Purplebored, o/ also known as Niko. Right now you are on my own little website which I call my home on the World Wide Web! </p>

-	<p>I like making simple websites, and I am also a privacy advocate. I also love tobacco, and I am a big nicotine addict. I speak Polish and English, but I am also learning Russian. Regarding programming, I currently only know basic HTML. From other stuff, I also know some Linux and quite a lot about Windows — especially the older versions like Windows 7.</p>
+      <p>
+        Hi, I am Purplebored, o/ also known as Niko. Right now you are on my own little website which I call my home on the World Wide Web!
+      </p>

-	<!-- Badges / Buttons / 88x31s -->
+      <p>
+        I like making simple websites, and I am also a privacy advocate. I also love tobacco, and I am a big nicotine addict. I speak Polish and English, but I am also learning Russian. Regarding programming, I currently only know basic HTML. From other stuff, I also know some Linux and quite a lot about Windows — especially the older versions like Windows 7.
+      </p>
+
+      <!-- Badges -->
      <div class="buttons">
        <a href="https://purplebored.pl/" target="_blank" rel="noopener noreferrer">
          <img src="assets/images/buttons/Purplebored_button.png" alt="Purplebored button" />
@@ -68,6 +79,18 @@
          <img src="assets/images/buttons/midgard.png" alt="Midgard button" />
        </a>
      </div>
+    </div>
+  </div>
+
+  <nav class="navbar">
+    <ul>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="#">About</a></li>
+      <li><a href="#">Projects</a></li>
+      <li><a href="#">Contact</a></li>
+    </ul>
+  </nav>
+
  <canvas id="night"></canvas>
  <script src="assets/js/script.js" defer></script>
 </body>