new: Advanced settings button redesigned

fix: Swtich to regular font on thumb titles
fix: Tweaked layout a bit

index.html

@@ -172,14 +172,11 @@ <h1 class="widget-slide brush-text-style-3 has-shadow">Welcome</h1>
     </div><br>
   </div>
   <div class="flex-wallpaper-horizontal" id="wallpapers">
-    <div class="settings" onclick="event.stopPropagation()">
-      <div class="setting-option"><label for="toggle-blur-cb" class="setting-title clickable">Enable Blur <input
-            type="checkbox" id="toggle-blur-cb" checked="false" tabindex="3"></label><br><label
-          for="toggle-wallpaper-cb" class="setting-title clickable">Lights Out &nbsp<input type="checkbox"
-            id="toggle-wallpaper-cb" checked="false" tabindex="3"></label><br><button id="toggle-labs-btn"
-          class="setting-title clickable button">Advanced Settings</button></div>
+    <div id="toggle-labs-btn" class="advanced-settings-button clickable button">
+      <i class="fa fa-cogs"></i>
     </div>
   </div>
+  </div>
   <footer class="footer">
     <ul>
       <li><a href="https://github.com/lscambo13/casamia" title="GitHub" tabindex="4">GitHub</a></li>

style.css

@@ -330,7 +330,7 @@ input[type=checkbox] {
   justify-content: start;
   position: fixed;
   bottom: 0;
-  padding: .75em;
+  padding: 0 0 .75em 0;
   z-index: 2
 }
 
@@ -342,22 +342,28 @@ input[type=checkbox] {
   cursor: pointer
 }
 
-.settings {
+.advanced-settings-button {
+  position: sticky;
   min-width: 9em;
-  min-height: 4.8em;
-  margin: .5em;
-  border-radius: 1em;
-  -webkit-backdrop-filter: blur(1em);
-  backdrop-filter: blur(1em);
-  background-color: var(--white-half-alpha);
-  cursor: pointer
+  left: 0;
+  margin: 0 0 1em 0;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0 1.5em 1.5em 0;
+  backdrop-filter: blur(2em);
+  -webkit-backdrop-filter: blur(2em);
+  background-color: rgba(255, 255, 255, 0.85);
+  cursor: pointer;
+  z-index: 3;
+  scale: 1.125;
 }
 
-.setting-option {
-  padding-block: .8em;
-  padding-inline: 1em;
-  cursor: pointer;
-  color: var(--dark)
+.advanced-settings-button>i {
+  font-size: 4em;
+  color: #060604;
+  opacity: 0.8;
 }
 
 .thumb-group:focus,
@@ -369,36 +375,25 @@ input[type=checkbox] {
   transition: 1s
 }
 
-.animate:focus>.thumb-title,
-.animate:hover>.thumb-title {
-  animation: animation_appear .25s;
-  animation-fill-mode: both;
-  animation-iteration-count: 1
-}
-
-.thumbnail {
-  position: relative;
-  width: 7.05em;
-  height: 4.8em;
-  border: .1em solid var(--primary-color);
-  margin-left: -.04em;
-  border-radius: .9em
-}
-
 .thumb-title {
   position: absolute;
-  border-radius: 0 0 .75em .75em;
+  border-radius: 0 0 1em 1em;
   border: 0 solid var(--primary-color);
   border-top: none;
-  width: 6.89em;
-  padding-top: .3em;
+  width: 8em;
+  height: 1.5em;
+  margin-top: 4em;
+  /* padding-top: .3em;
   margin-top: 3.15em;
   margin-left: .05em;
   padding-left: .75em;
   padding-right: .25em;
-  padding-bottom: .3em;
+  padding-bottom: .3em; */
   z-index: 2;
   opacity: 0;
+  font-family: "Ubuntu";
+  font-size: 0.875em;
+  padding-inline-start: 0.5em;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -407,6 +402,22 @@ input[type=checkbox] {
   pointer-events: none
 }
 
+.animate:focus>.thumb-title,
+.animate:hover>.thumb-title {
+  animation: animation_appear .25s;
+  animation-fill-mode: both;
+  animation-iteration-count: 1
+}
+
+.thumbnail {
+  position: relative;
+  width: 7.05em;
+  height: 4.8em;
+  border: .1em solid var(--primary-color);
+  margin-left: -.04em;
+  border-radius: .9em
+}
+
 #add_bookmark_button {
   background-color: var(--add-bookmark);
   -webkit-backdrop-filter: blur(1em);