Merge pull request #28 from Zexlo/main

UI refresh and fixups

Author: pizza-beep

assets/images/BG.png

@@ -5,50 +5,67 @@ body {
   padding: 0;
   color: #fff;
   text-align: center;
+  background-color: #ffffff;  
   transition: background-color 0.3s, color 0.3s;
-}
+  background: url("../assets/images/BGdark.png");
+  zoom: 115%;   
+
+  .card {
+    background: url("../assets/images/button.png"); 
+    width: 249px;
+    height: 78px;    
+    padding: 1rem;
+    text-decoration: none;
+    color: inherit;
+    overflow:hidden;    
+  }  
+
+  header {
+    padding-bottom: 0.2rem;        
+    padding-bottom: 0.1rem;    
+    background: url("../assets/images/headerdark.png");
+    border-bottom: 3px solid #000;
+    transition: background-color 0.3s ease; /* Transition for smooth color change */
+  } 
 
-body.dark-mode {
-  background: url("assets/images/BGdark.png");   
-/*background-color: #000000; /* Darker background for dark mode */
-  color: #fff; /* Ensure text color is visible in dark mode */
 }
 
 body.light-mode {
-  background: url("assets/images/BG.png");   
-/*   background-color: #ffffff; */
+  background: url("../assets/images/BG.png");
+zoom: 115%;     
   color: #000; /* Dark text for light mode */
-}
 
-header.dark-mode {
-  display: flex;
-  align-items: center;
-  background-color: #1e1e1e; /* Default dark color */
-  padding: 1rem;
-  border-bottom: 2px solid #444;
-  transition: background-color 0.3s ease; /* Transition for smooth color change */
-}
+  .card{
+    background: url("../assets/images/buttonlight.png");
+    width: 249px;
+    height: 78px;          
+    padding: 1rem;
+    text-decoration: none;
+    color: inherit;
+    overflow:hidden;      
+  }
 
-header.light-mode {
-  display: flex;
-  align-items: center;
-  background-color: #fff; /* Default dark color */
-  padding: 1rem;
-  border-bottom: 2px solid #444;
-  transition: background-color 0.3s ease; /* Transition for smooth color change */
+  header {
+    background: url("../assets/images/header.png");
+    border-bottom: 3px solid #000;
+    transition: background-color 0.3s ease; /* Transition for smooth color change */
+  }  
+  
 }
 
 .wiki-logo {
-  max-width: 300px;
+  text-decoration: none;  
+  max-width: 400px;
+  padding-left: 4rem;   
   height: auto;
-  margin-left: 600px 
 }
 
 .settings-icon {
-  width: 40px;
-  height: 40px;
+  padding-top: 2rem;
+  padding-right: 1rem;   
+  width: 50;
+  height: 50px;
   cursor: pointer;
-  margin-left: 550px; /* Push to the right side */
   image-rendering: auto;
   image-rendering: crisp-edges;
   image-rendering: pixelated;
@@ -96,28 +113,23 @@ header.light-mode {
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 1rem;
   padding: 2rem;
+  padding-top: 0.4rem; 
+  padding-left: 3rem;   
   margin: auto;
+  overflow:hidden;  
 }
 
 /* Card Styles */
-.card {
-  background-color: #444;
-  border: 1px solid #444;
-  border-radius: 8px;
-  padding: 1rem;
-  text-decoration: none;
-  color: inherit;
-}
 
 .card h2 {
-  margin: 0 0 0.5rem;
-  font-size: 1.5rem;
+  margin: 0 0 0.2rem;
+  font-size: 1.1rem;
 }
 
 .card p {
   margin: 0;
   font-size: 0.9rem;
-  color: #bbb;
+  color: inherit;
 }
 
 summary {
@@ -126,27 +138,37 @@ summary {
 
  /* Style the button that is used to open and close the collapsible content */
  .collapsible {
-  background-color: #777;
-  color: white;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));  
+  background-color: #48494a;
+  color: rgb(98, 98, 98);
   cursor: pointer;
-  padding: 18px;
-  width: 100%;
+  padding: 12px;
+  width: 40%;
+  max-height: 100px;  
   border: none;
-  text-align: left;
+  text-align: center;
   outline: none;
-  font-size: 15px;
+  font-size: 20px;
+  transition: max-height 0.2s ease-out;  
 }
 
 /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 .active, .collapsible:hover {
-  background-color: #ccc;
+  background-color: #4c4e4f;
 }
 
 /* Style the collapsible content. Note: hidden by default */
 .content {
-  padding: 0 18px;
-  background-color: white;
+  padding: 0px;
+  color: rgb(98, 98, 98);  
+  background-color: #313233;
   max-height: 0;
+  max-width: 531px;  
   overflow: hidden;
+  text-align: left;
+  border: none;    
+  outline: none;  
   transition: max-height 0.2s ease-out;
+  margin-bottom: 10px;  
 }