Version 48

css/brb.css

@@ -65,18 +65,70 @@ body{
   align-items: center;
   width: 75px;
   height: 75px;
-  bottom: 10px;
-  right: 10px;
+  bottom: 0;
+  right: 0;
   filter: drop-shadow(0 0 10px #000);
-  background: #0377c4;
+  background: #046baf;
   border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: .5s;
+  color: #000;
 }
 .changelog svg{
   height: 100%;
   aspect-ratio: 1/1;
   /*filter: drop-shadow(0 0 10px #000);*/
   color: #fff;
+  cursor: pointer;
 }
+.changelog.large{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  
+  min-width: 270px;
+  min-height: 420px;
+  
+  border-radius: 1rem;
+  transition: .5s;
+
+  padding: 1rem 2.5rem;
+}
+.changelog.large svg{
+  position: absolute;
+  z-index: 999;
+  color: #fff;
+  top: 10px;
+  right: 10px;
+  width: 2.5rem;
+  height: 2.5rem;
+  cursor: pointer;
+  background-color: #046baf;
+  border-radius: 50%;
+}
+.changelog.large div{
+  background-color: #eee;
+  box-shadow: inset 10px 10px 15px #333;
+  border-radius: 1.5rem;
+  width: 250px;
+  height: 400px;
+  padding: .5rem 1.5rem;
+  overflow-y: scroll;
+  transition: .5s;
+  scroll-behavior: smooth;
+}
+.changelog.large div h1{
+  text-align: center;
+  text-decoration: underline;
+}
+.changelog.large div h2{text-align: center;transition: .5s;}
+.changelog.large div h3{text-align: center;transition: .5s;}
+.changelog.large div p {text-align: justify;transition: .5s;}
 
 /* Ligt NODE */
 @media (prefers-color-scheme: light){
@@ -90,6 +142,9 @@ body{
     color: #000;
     text-shadow: none;
   }
+  .changelog{
+    background: #0377c4;
+  }
 }
 
 /* DARJ MODE */

css/menu.css

@@ -44,7 +44,7 @@
 .menu-container .button.expand span svg:nth-child(1){opacity:0;}
 .menu-container .button span svg:nth-child(2){opacity:0;}
 .menu-container .button.expand span svg:nth-child(2){opacity:1;}
-ul{
+#ula{
     list-style: none;
     position: absolute;
     top: 65px;
@@ -58,7 +58,7 @@ ul{
     box-shadow: 0 3px 6px rgba(0,0,0,.3);
     padding-inline-start: 0px;
 }
-ul:before{
+#ula:before{
     position: absolute;
     content: '';
     width: 20px;
@@ -69,26 +69,26 @@ ul:before{
     transform: rotate(45deg);
     z-index: -1;
 }
-ul li{
+#ula li{
     line-height: 35px;
     cursor: pointer;
     border-right: 1px solid rgba(255,255,255,.1);
     width: 25%;
 }
-ul li:hover:first-child{
+#ula li:hover:first-child{
     border-radius: 10px  0 0 10px;
 }
-ul li:hover:last-child{
+#ula li:hover:last-child{
     border-radius: 0 10px 10px 0;
 }
-ul li:hover{
+#ula li:hover{
     box-shadow: inset 0 0 5px #33ff33,
     inset 0 0 10px #66ff66;
 }
-ul li:last-child{
+#ula li:last-child{
     border-right: none;
 }
-ul li a{
+#ula li a{
     display: flex;
     justify-content: center;
     align-items: center;
@@ -98,11 +98,11 @@ ul li a{
     fill: #fff;
     text-decoration: none;
 }
-ul li a svg{
+#ula li a svg{
     width: 50%;
     height: 50%;
     color: #fff;
 }
-ul li:hover a svg{
+#ula li:hover a svg{
     color: #44dd44;
 }