taking it back

j0ell1 · Oct 13, 2024 · d9289cc · d9289cc
1 parent f17f099
commit d9289cc
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 40 deletions.
diff --git a/index.html b/index.html
@@ -5,11 +5,47 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
   <title>Lanyard Presence</title>
+  <style>
+    /* Center the content horizontally and vertically */
+    body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100vh;
+      margin: 0;
+      font-family: Arial, sans-serif;
+    }
+
+    .container {
+      display: flex;
+      align-items: center; /* Center items vertically */
+    }
+
+    #activity {
+      text-align: left;
+      font-size: 20px;
+      color: #333;
+      margin-left: 20px; /* Space between the line and activity */
+    }
+
+    /* Style for album art */
+    #albumArt {
+      width: 100px;
+      height: 100px;
+    }
+
+    .separator {
+      width: 2px; /* Width of the vertical line */
+      background-color: #ccc; /* Color of the line */
+      height: 100px; /* Height of the line */
+      margin: 0 20px; /* Space around the line */
+    }
+  </style>
 </head>
 <body>
   <div class="container">
     <img id="albumArt" src="" alt="Album Art" style="display:none;" />
-    <div class="separator">
+    <div class="separator"></div> <!-- Vertical line -->
     <p id="activity">Activity: Loading...</p>
   </div>
 

diff --git a/style.css b/style.css
@@ -1,40 +1,6 @@
 body {
-    margin: 0;
-    height: 100vh;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: rgb(36,29,19);
-    background: -moz-linear-gradient(135deg, rgba(36,29,19,1) 0%, rgba(151,139,125,1) 100%);
-    background: -webkit-linear-gradient(135deg, rgba(36,29,19,1) 0%, rgba(151,139,125,1) 100%);
-    background: linear-gradient(135deg, rgba(36,29,19,1) 0%, rgba(151,139,125,1) 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#241d13",endColorstr="#978b7d",GradientType=1); 
-}
-
-.container {
-    display: flex;
-    align-items: center;
-    background-color: #e0e0e0;
-    padding: 20px;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  }
-
-  #activity {
-    text-align: left;
-    font-size: 20px;
-    color: #333;
-    margin-left: 20px;
-  }
-
-  #albumArt {
-    width: 100px;
-    height: 100px;
-  }
-
-  .separator {
-    width: 2px;
-    background-color: #ccc;
-    height: 100px;
-    margin: 0 20px;
-  }
+    margin: 0; /* Remove default margin */
+    height: 100vh; /* Ensure body takes full height */
+    background: rgb(125, 125, 125); /* Fallback for older browsers */
+    background: linear-gradient(156deg, rgba(125, 125, 125, 1) 25%, rgba(57, 57, 57, 1) 55%, rgba(38, 38, 38, 1) 83%);
+}