Cleanup style for mod store button

SauceLLC · Mar 30, 2024 · ec1bb61 · ec1bb61
1 parent 5778713
commit ec1bb61
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/pages/overview-settings.html b/pages/overview-settings.html
@@ -304,11 +304,12 @@ <h2 class="banner"><img class="logo" src="/pages/images/icon256.png"/> Sauce for
 
             <div class="settings section tab mods">
                 <div class="desc">
-                    Mods allow you to modify and extend the functionality of Sauce. <br/><br/>
+                    <p>Mods add new functionality <i>(i.e. window types, data fields, etc.)</i> or change existing behavior.</p>
 
-                    <center>Browse available Mods...</center>
                     <a class="official-mod-store" href="http://localhost:8000/?width=1000&height=800&frame"
                        target="mod-browse"><img src="images/mod-store-badge.webp"/></a>
+                    <footer><b>NOTE:</b> Mods are written by 3rd parties, so be sure
+                        you trust the author before installing.</footer>
                 </div>
 
                 <hr/>

diff --git a/pages/scss/overview-settings.scss b/pages/scss/overview-settings.scss
@@ -473,31 +473,33 @@ img.logo {
 }
 
 .official-mod-store {
-    font-size: 1.5em;
-    text-align: center;
-    font-variant: all-small-caps;
-    font-weight: 700;
-    display: inline-block;
+    $img-width: 300px;
     align-self: center;
 
     img {
-        width: 200px;
+        width: $img-width;
         object-fit: contain;
         background-image: linear-gradient(135deg, #eee, #ccc);
         border-radius: 0.28em;
         box-shadow: 1px 1px 5px 0 #0005;
         opacity: 0.9;
-        transition: 200ms opacity, 200ms box-shadow, 400ms scale;
-        transition-timing-function: ease, ease, cubic-bezier(0.2, -1, 0.73, 10);
+        transition: 200ms opacity, 200ms box-shadow;
     }
 
     &:hover {
         img {
             opacity: 1;
             box-shadow: 1px 1px 5px 0 #0001;
-            scale: 1.1;
         }
     }
+
+    & + footer {
+        width: $img-width;
+        align-self: center;
+        font-size: 0.92em;
+        padding: 0.5em;
+        opacity: 0.92;
+    }
 }
 
 .mods-path.button {