Merge branch 'apexbanner'

styles/_top-banner.scss

@@ -0,0 +1,93 @@
+.top-banner {
+    height: 46px;
+    background: url(../img/backgrounds/bg-apex-banner.svg);
+    background-position: center;
+    background-color: #7919FF;
+    padding: 2px 8px;
+    color: #fff;
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+    line-height: 24px;
+
+    @include media-breakpoint-up(md) {
+        padding: 11px 8px;
+    }
+
+    .btn {
+        margin-top: -4px;
+        margin-left: 8px;
+        padding: 2px 4px;
+        font-size: 12px;
+
+        @include media-breakpoint-up(md) {
+            padding: 8px;
+            margin-left: 16px;
+            font-size: 16px;
+        }
+    }
+
+    p {
+        font-size: 12px;
+        line-height: 20px;
+        width: 280px;
+        text-align: center;
+        margin: auto;
+
+        @include media-breakpoint-up(md) {
+            font-size: 16px;
+            line-height: 24px;
+            width: initial;
+        }
+    }
+}
+
+body {
+    padding-top: 46px;
+}
+.top-nav {
+    top: 46px;
+}
+.right-sidebar,
+.left-sidebar {
+    @include media-breakpoint-up(lg) {
+        top: 100px;
+    }
+}
+
+$banner-top-offset: 146px;
+
+.main h1:before,
+.main h2:before,
+.main h3:before,
+.main h4:before,
+.main h5:before,
+.main h6:before,
+#main_content_wrapper:before,
+.interactive-block:before {
+    margin-top: -$banner-top-offset;
+    height: $banner-top-offset;
+}
+
+.content h1:first-child:before {
+    margin-top: -$banner-top-offset;
+}
+
+#main_content_wrapper {
+    margin-top: 53px;
+}
+
+html.light {
+    .top-banner {
+        .btn-outline-secondary {
+            color: #E0E0E1;
+            border-color: #E0E0E1;
+            &:not(:disabled):not(.disabled):hover {
+                color: #111112;
+                background-color: #E0E0E1;
+                border-color: #E0E0E1;
+            }
+        }
+        
+    }
+} 

styles/xrpl.scss

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