changes css version adds mobile modal adjustments, adds proper wallets

styles/_pages.scss

@@ -348,7 +348,9 @@
         "bitpay": "svg",
         "ripples-on-demand-liquidity": "svg",
         "ripples-cbdc-platform": "svg",
-        "momento": "svg"
+        "momento": "svg",
+        "Crossmark": "png",
+        "Edge": "png"
       )
   {
     #use_case_companies_list {

styles/_use-cases.scss

@@ -4,7 +4,7 @@
 $infrastructure-logos: "XRP-Ledger", "Gatehub", "towoLabs", "xrpscan", "xrp-toolkit", "bithomp", "onthedex";
 $developer-tooling-logos: "blockforce", "Evernode", "threezy", "tokenize";
 $interoperability-logos: "Allbridge", "futureverse", "multichain";
-$wallet-logos: "Bitfrost", "Crossmark", "Edge", "gem-wallet", "Xumm";
+$wallet-logos:  "Crossmark", "Edge", "gem-wallet", "Xumm";
 $nfts-logos: "aesthetes", "audiotarky", "nftmaster", "peerkat", "sologenic_dex", "xrp-cafe", "xrp-oval";
 $exchanges-logos: "sologenic_dex", "XPMarket";
 $gaming-logos: "Forte", "Futureverse", "ledger-city", "onXRP", "styngr";
@@ -104,6 +104,9 @@ $custody-logos: "Gatehub", "Bitgo";
   display: flex;
   justify-content: space-between;
   z-index: 10;
+  @media only screen and (max-width: 768px) {
+    top: 30px;
+  }
 }
 
 .arrow-button {
@@ -119,10 +122,16 @@ $custody-logos: "Gatehub", "Bitgo";
 
 .left-arrow {
   margin-left: 40px;
+  @media only screen and (max-width: 768px) {
+    margin-left: 0px;
+  }
 }
 
 .right-arrow {
   margin-right: 40px;
+  @media only screen and (max-width: 768px) {
+    margin-right: 0px;
+  }
 }
 
 .modal {
@@ -152,6 +161,9 @@ $custody-logos: "Gatehub", "Bitgo";
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  @media only screen and (max-width: 768px) {
+    height: fit-content;
+  }
 }
 
 .modal-content-uses::before {
@@ -275,11 +287,14 @@ $custody-logos: "Gatehub", "Bitgo";
 .bottom-row {
   display: flex;
   justify-content: center;
+  @media only screen and (max-width: 768px) {
+    flex-wrap: wrap;
+  }
 }
 
 .logo-item {
-  max-height: 24px;
-  max-width: 107px;
+  max-height: 30px;
+  max-width: 130px;
   margin: 10px 11px;
 }
 

styles/light/_light-theme.scss

@@ -721,7 +721,8 @@ pre code {
     'xrpscan': 'svg',
     'ripples-on-demand-liquidity': 'svg',
     'xumm-wallet': 'svg',
-    'sologenic-dex': 'svg'
+    'sologenic-dex': 'svg',
+    'Crossmark': 'png'
   ) 
   {
     #use_case_companies_list {

styles/package.json

@@ -4,9 +4,9 @@
     "node-sass": "^7.0.0"
   },
   "scripts": {
-    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v24.css --output-style compressed",
-    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v24.css --output-style compressed --source-map true",
-    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v24.css --output-style compressed --source-map true"
+    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v25.css --output-style compressed",
+    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v25.css --output-style compressed --source-map true",
+    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v25.css --output-style compressed --source-map true"
   },
   "dependencies": {
     "sass": "^1.26.10"

template/base.html.jinja

@@ -52,7 +52,7 @@
     {% if target.lang=="ja" %}
     <link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
     {% endif %}
-    <link href="{{currentpage.prefix}}assets/css/devportal2022-v24.css" rel="stylesheet" />
+    <link href="{{currentpage.prefix}}assets/css/devportal2022-v25.css" rel="stylesheet" />
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />
 

template/page-uses.html.jinja

@@ -170,6 +170,22 @@
     "category_name": "NFTs",
     "link": "https://peerkat.io/",
   },
+  {
+    "id": "Crossmark",
+    "title": _("Crossmark"),
+    "description": _("Crossmark is a browser extension wallet built for interacting with the XRP Ledger."),
+    "category_id": "wallet",
+    "category_name": "Wallet",
+    "link": "https://github.com/crossmarkio",
+  },
+  {
+    "id": "Edge",
+    "title": _("Edge"),
+    "description": _("Edge is a secure, easy, and private way to use, store, trade, and exchange crypto assets. Edge ensures sure you’re always in control of your money and information while also providing the tools necessary to protect yourself from others and your own mistakes. Edge has rich functionality, a battle-tested security architecture, and the industry’s best customer support."),
+    "category_id": "wallet",
+    "category_name": "Wallet",
+    "link": "https://edge.app/ripple-wallet/",
+  },
   {
     "id": "ripples-cbdc-platform",
     "title": _("Ripple's CBDC Platform"),
@@ -484,7 +500,7 @@
   <div class="colorful-join-text-wrapper">
     <span class="colorful-join-text"> Join the XRPL Ecosystem and showcase your XRPL project, application, or product. Get featured on the Developer Reflections blog or Ecosystem page. </span>
         <div class="mt-10">
-          <a class="btn btn-primary btn-arrow" href="https://xrpl.typeform.com/dev-spotlight">{% trans %}Submit Your Project{% endtrans %}</a>
+          <a target="_blank" class="btn btn-primary btn-arrow" href="https://xrpl.typeform.com/dev-spotlight">{% trans %}Submit Your Project{% endtrans %}</a>
         </div>
   </div>
   </section>