From 8a3c4e64361a1b831d0ae9d3d27f9572be896da3 Mon Sep 17 00:00:00 2001
From: Emma <hello@prpl.wtf>
Date: Mon, 30 Dec 2024 15:59:39 +0100
Subject: [PATCH] feat: make mobile friendly

---
 browse/extensions/index.css  | 10 ++++++++++
 browse/extensions/index.html | 10 +++++-----
 browse/index.html            |  2 +-
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/browse/extensions/index.css b/browse/extensions/index.css
index 811dcac..a069d20 100644
--- a/browse/extensions/index.css
+++ b/browse/extensions/index.css
@@ -43,4 +43,14 @@
   .extension-card-content {
     --card-padding-top: 240px;
   }
+}
+
+.blueprint-promotion {
+  --width: 75%;
+  width: var(--width);
+}
+@media screen and (max-width: 768px) {
+  .blueprint-promotion {
+    --width: 100% !important;
+  }
 }
\ No newline at end of file
diff --git a/browse/extensions/index.html b/browse/extensions/index.html
index 22542e7..0a0faed 100644
--- a/browse/extensions/index.html
+++ b/browse/extensions/index.html
@@ -194,10 +194,10 @@ <h3 class="pt-5 mt-5 mb-3 fw-bolder">
           </div>
 
           <div class="row g-4">
-            <div class="col-8">
+            <div class="col-lg-8 col-xs-12 order-lg-0 order-1">
               <center>
-                <div class="w-75">
-                  <img src="../../.assets/storage/misc/png/13.png" height="150"/>
+                <div class="blueprint-promotion">
+                  <img src="../../.assets/storage/misc/png/13.png" width="250" style="max-width: 90%"/>
                   <h2 class="h3 my-3">
                     Install and manage this extension with <b>Blueprint</b>!
                   </h2>
@@ -209,11 +209,11 @@ <h2 class="h3 my-3">
                 </div>
               </center>
             </div>
-            <div class="col-4">
+            <div class="col-lg-4 col-md-12">
               ${Object.entries(data.platforms)
                 .map(
                   ([platform, _data]) => `
-                    <div class="platform-button">
+                    <div class="platform-button placeholder-wave">
                       <a href="${
                         platform === "BUILTBYBIT"
                           ? "https://" +
diff --git a/browse/index.html b/browse/index.html
index 6ebbcba..ec66acc 100644
--- a/browse/index.html
+++ b/browse/index.html
@@ -384,7 +384,7 @@ <h1 class="modal-title fs-5" id="filterModalLabel"><i class="bi bi-filter"></i>
       function sortProducts(products) {
         switch (sortType) {
           case "created":
-            return products.sort((a, b) => new Date(a.created) < new Date(b.created) ? -1 : 1);
+            return products.sort((a, b) => new Date(a.created) < new Date(b.created) ? -1 : 1).reverse();
           case "author":
             return products.sort((a, b) => a.author.name.localeCompare(b.author.name));
           case "popularity":