From e77c5c2c42272e9b480c9a8842dbc6d2f12ae812 Mon Sep 17 00:00:00 2001
From: elijah <me@elia.li>
Date: Sat, 22 Jun 2024 00:19:52 +0200
Subject: [PATCH] refactor styling

---
 assets/style.css | 246 +++++++++++++++++++++++++----------------------
 index.html       |   8 +-
 2 files changed, 135 insertions(+), 119 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index e0f4579..e7cdf30 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,124 +1,140 @@
-  @font-face {
-    font-family: 'workbench';
-    src: url('../assets/font.woff2') format('woff2');
-  }
-  body {
-    user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
- }
-  body, html {
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    font-family: 'workbench', sans-serif;
-    overflow: hidden;
-  }
-  #background-video {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    width: auto;
-    height: auto;
-    min-width: 100%;
-    min-height: 101%;
-    transform: translate(-50%, -50%);
-    z-index: -1;
-    object-fit: cover;
-    object-position: center;
-  }
+@font-face {
+  font-family: 'workbench';
+  src: url('../assets/font.woff2') format('woff2');
+}
+
+body, html {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-family: 'workbench', sans-serif;
+  overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+#background-video {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  min-width: 100%;
+  min-height: 101%;
+  width: auto;
+  height: auto;
+  transform: translate(-50%, -50%);
+  z-index: -1;
+  object-fit: cover;
+  object-position: center;
+}
+
+.navbar {
+  background: none;
+  padding: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  pointer-events: none;
+}
+
+.logo {
+  font-size: 1.5rem;
+  color: #db7bdb;
+  text-shadow: 0 0 10px #db7bdb;
+}
+
+.nav-links {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+}
+
+.nav-links li {
+  margin-right: 20px;
+}
+
+.nav-links a {
+  font-size: 1.2rem;
+  color: #db7bdb;
+  text-decoration: none;
+  transition: color 0.2s ease;
+  text-shadow: 0 0 3px #db7bdb;
+  pointer-events: initial;
+  letter-spacing: 1px;
+}
+
+.nav-links a:hover {
+  color: #d6afd6;
+}
+
+.response {
+  text-align: center;
+  font-size: 2rem;
+  color: #783F8E;
+  text-shadow: 0 0 10px #783F8E;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  pointer-events: none;
+}
+
+.response b {
+  text-shadow: 
+    2px 2px 30px #9847b8,
+    -2px -2px 30px #9847b8;
+  color: #7f5191;
+}
+
+.stats {
+  position: absolute;
+  bottom: 0.5%;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 1rem;
+  color: rgba(128, 128, 128, 0.5);
+  pointer-events: none;
+  white-space: nowrap;
+  display: none;
+  animation: fadeIn 1.5s;
+  bottom: 1%;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@media (max-width: 600px) {
   .navbar {
-    background: none;
-    padding: 1rem;
-    display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
-    pointer-events: none;
-  }
-  .logo {
-    font-size: 1.5rem;
-    color: #db7bdb;
-    text-shadow: 0 0 10px #db7bdb;
   }
+
   .nav-links {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+    margin-top: 1rem;
     display: flex;
-    align-items: center;
-  }
-  .nav-links li {
-    margin-right: 20px;
-  }
-  .nav-links a {
-    font-size: 1.2rem;
-    color: #db7bdb;
-    text-decoration: none;
-    transition: color 0.2s ease;
-    text-shadow: 0 0 3px #db7bdb;
-    pointer-events: initial;
-    letter-spacing: 1px;
-  }
-  .nav-links a:hover {
-    color: #d6afd6;
-  }
-  .response {
-    text-align: center;
-    font-size: 2.0rem;
-    color: #783F8E;
-    text-shadow: 0 0 10px #783F8E;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+    justify-content: center;
+    padding: 0;
     width: 100%;
-    pointer-events: none;
   }
-  .response b {
-    text-shadow: 
-      2px 2px 30px #9847b8,
-      -2px -2px 30px #9847b8;
-    color: #7f5191;
+
+  .logo {
+    display: none;
   }
-  .stats {
-    bottom: 0.5%;
-    font-size: 1rem;
-    color: rgba(128, 128, 128, 0.6);
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    pointer-events: none;
-    white-space: nowrap;
-    display: none; 
-    animation: fadeIn 1.5s;
+
+  .nav-links li {
+    margin: 0 10px;
+    text-align: center;
   }
-  @keyframes fadeIn {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }  
-  @media (max-width: 600px) {
-    .navbar {
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-    .nav-links {
-      margin-top: 1rem;
-      display: flex;
-      justify-content: center;
-      padding: 0;
-      width: 100%;
-    }
-    .logo {
-      display: none;
-    }
-    .nav-links li {
-      margin: 0 10px;
-      text-align: center;
-    }
-    .response {
-      font-size: 1.5rem !important;
-    }
-  }
\ No newline at end of file
+
+  .response {
+    font-size: 1.5rem !important;
+  }
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index c3f8774..78c46cf 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta name="title" content="elia's website">
-  <meta name="description" content="swiss hosted services">
+  <meta name="description" content="hello">
   <meta name="keywords" content="ich, hasse, mein, leben">
   <meta name="author" content="elia">
   <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
@@ -17,12 +17,12 @@
   <meta name="msapplication-config" content="icons/browserconfig.xml">
   <meta name="theme-color" content="#33ccff">
   <meta property="og:title" content="elia's website">
-  <meta property="og:description" content="swiss hosted services">
+  <meta property="og:description" content="hello">
   <meta property="og:url" content="https://elia's website">
   <meta property="og:site_name" content="elia's website">
   <meta property="og:image" content="https://elia.li/icons/favicon-32x32.png">
   <meta property="twitter:title" content="elia's website">
-  <meta property="twitter:description" content="swiss hosted services">
+  <meta property="twitter:description" content="hello">
   <meta property="twitter:card" content="summary_large_image">
   <meta property="twitter:image" content="https://elia.li/icons/favicon-32x32.png">
   <link rel="icon" type="image/png" href="favicon.png">
@@ -46,7 +46,7 @@
         </ul>
       </nav>
       <div id="response" class="response">
-        <span>...</span>
+        <span></span>
       </div>
       <div id="stats" class="stats">
         <span id="charsPerSecond">0 chars/s</span>