Merge pull request #1545 from JakeatRipple/feat-learningportal-banner

Feat learning portal banner

styles/_top-banner.scss

@@ -1,9 +1,9 @@
 .top-banner {
     height: 46px;
-    background: url(../img/backgrounds/bg-apex-banner-2.png);
+    background: url(../img/backgrounds/bg-learning-banner.png);
     background-position: center;
     background-size: cover;
-    padding: 2px 0;
+    // padding: 2px 0;
     color: #fff;
     text-align: center;
     font-size: 16px;
@@ -12,13 +12,13 @@
 
     @include media-breakpoint-up(md) {
         padding: 5px 8px;
-        background: url(../img/backgrounds/bg-apex-banner-2-md.png);
+        background: url(../img/backgrounds/bg-learning-banner-md.png);
         background-position: center;
         background-size: cover;
     }
 
     @include media-breakpoint-up(xl) {
-        background: url(../img/backgrounds/bg-apex-banner-2-lg.png);
+        background: url(../img/backgrounds/bg-learning-banner-lg.png);
         background-position: center;
         background-size: cover;
     }

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-v9.css --output-style compressed",
+    "build-css": "node-sass --include-path scss xrpl.scss ../assets/css/devportal2022-v10.css --output-style compressed",
-    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v9.css --output-style compressed --source-map true",
+    "build-css-out": "node-sass --include-path scss xrpl.scss ../out/assets/css/devportal2022-v10.css --output-style compressed --source-map true",
-    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v9.css --output-style compressed --source-map true"
+    "build-css-watch-out": "node-sass --recursive --watch  --include-path scss xrpl.scss ../out/assets/css/devportal2022-v10.css --output-style compressed --source-map true"
   },
   "dependencies": {
     "sass": "^1.26.10"

styles/xrpl.scss

@@ -67,7 +67,7 @@ $line-height-base: 1.5;
 @import "_blog.scss";
 @import "_feedback.scss";
 @import "_video.scss";
-// @import "_top-banner.scss";
+@import "_top-banner.scss";
 
 // Light/Dark theme settings ---------------------------------------------------
 // Option to only change theme on user system settings.  No toggle.

template/base.html.jinja

@@ -53,7 +53,7 @@
     {% if target.lang=="ja" %}
     <link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
     {% endif %}
-    <link href="{{currentpage.prefix}}assets/css/devportal2022-v9.css" rel="stylesheet" />
+    <link href="{{currentpage.prefix}}assets/css/devportal2022-v10.css" rel="stylesheet" />
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 

template/component-top-nav.html.jinja

@@ -1,15 +1,9 @@
-{# <div class="top-banner fixed-top"> 
+<div class="top-banner fixed-top"> 
-  <!-- mobile -->
+  <div class="d-md-flex justify-content-center">
-  <div class="justify-content-center d-md-none">
+    <span><p class="mb-0">{% trans %}Learn how to build on the XRP Ledger.{% endtrans %}</p></span>
-    <span><p class="mb-0">{% trans %}Registration is live for Apex: The XRPL{% endtrans %}</p></span>
+    <span><a href="https://learn.xrpl.org/" target="_blank" class="btn btn-outline-secondary">Start Learning</a></span>
-    <span><p class="mb-0"> Developer Summit <a href="https://www.apexdevsummit.com/" target="_blank" class="btn btn-outline-secondary">Register Now</a></p></span>
   </div>
-  <!-- tablet and up -->
+</div>
-  <div class="d-md-flex justify-content-center d-none">
-    <span><p class="mb-0">{% trans %}Registration is live for Apex: The XRPL Developer Summit{% endtrans %}</p></span>
-    <span><a href="https://www.apexdevsummit.com/" target="_blank" class="btn btn-outline-secondary">Register Now</a></span>
-  </div>
-</div> #}
 <nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top">
   <a href="{% if currentpage.prefix %}{{currentpage.prefix}}{% else %}/{% endif %}" class="navbar-brand"><img class="logo"  height="40" alt="{{target.display_name}}" /></a>
   <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#top-main-nav" aria-controls="navbarHolder" aria-expanded="false" aria-label="Toggle navigation">