mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2025-11-04 20:05:50 +00:00
adds banner for sm md and lg breakpoints
This commit is contained in:
akcodez
File diff suppressed because one or more lines are too long
BIN
assets/img/apex-banner-md.png
Normal file
BIN
assets/img/apex-banner-md.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
assets/img/apex-banner-sm.png
Normal file
BIN
assets/img/apex-banner-sm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
@@ -1,69 +1,84 @@
|
||||
.top-banner {
|
||||
height: 46px;
|
||||
background: url(../img/backgrounds/bg-apex-banner.svg);
|
||||
background-position: left;
|
||||
background-size: cover;
|
||||
background-color: #7919FF;
|
||||
// padding: 2px 0;
|
||||
height: 46px;
|
||||
background: url(../img/backgrounds/bg-apex-banner.svg);
|
||||
background-position: left;
|
||||
background-size: cover;
|
||||
background-color: #7919ff;
|
||||
// padding: 2px 0;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
|
||||
.btn {
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
padding: 2px 4px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 2px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-top: 9px;
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
padding: 4px 8px;
|
||||
border: 1.5px solid #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
&:not(:disabled):not(.disabled):hover {
|
||||
color: #111112;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
margin: auto;
|
||||
|
||||
|
||||
|
||||
.btn {
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
padding: 2px 4px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 2px;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-top: 9px;
|
||||
margin-left: 16px;
|
||||
font-size: 16px;
|
||||
padding: 4px 8px;
|
||||
border: 1.5px solid #fff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
&:not(:disabled):not(.disabled):hover {
|
||||
color: #111112;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-top: 11px;
|
||||
font-size: 16px;
|
||||
width: initial;
|
||||
line-height: 24px;
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
padding-top: 11px;
|
||||
font-size: 16px;
|
||||
width: initial;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 46px;
|
||||
padding-top: 46px;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
top: 32px;
|
||||
@include media-breakpoint-only(xs) {
|
||||
top: 43px; // adjust as needed
|
||||
}
|
||||
@include media-breakpoint-only(sm) {
|
||||
top: 43px; // adjust as needed
|
||||
}
|
||||
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@include media-breakpoint-only(md) {
|
||||
top: 46px; // adjust as needed
|
||||
}
|
||||
|
||||
// Large devices (desktops, 992px and up)
|
||||
@include media-breakpoint-up(lg) {
|
||||
top: 40px; // adjust as needed
|
||||
}
|
||||
}
|
||||
|
||||
.right-sidebar,
|
||||
.left-sidebar {
|
||||
@include media-breakpoint-up(lg) {
|
||||
top: 100px;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
top: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
$banner-top-offset: 146px;
|
||||
@@ -80,31 +95,28 @@ $banner-top-offset: 146px;
|
||||
.main h6:before,
|
||||
#main_content_wrapper:before,
|
||||
.interactive-block:before {
|
||||
margin-top: -$banner-top-offset;
|
||||
height: $banner-top-offset;
|
||||
margin-top: -$banner-top-offset;
|
||||
height: $banner-top-offset;
|
||||
}
|
||||
|
||||
.content h1:first-child:before {
|
||||
margin-top: -$banner-top-offset;
|
||||
margin-top: -$banner-top-offset;
|
||||
}
|
||||
|
||||
#main_content_wrapper {
|
||||
margin-top: 53px;
|
||||
margin-top: 53px;
|
||||
}
|
||||
|
||||
html.light {
|
||||
.top-banner {
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
&:not(:disabled):not(.disabled):hover {
|
||||
color: #111112;
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.top-banner {
|
||||
.btn-outline-secondary {
|
||||
color: #fff;
|
||||
border-color: #fff;
|
||||
&:not(:disabled):not(.disabled):hover {
|
||||
color: #111112;
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -12,28 +12,47 @@
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
.marquee-item {
|
||||
width: 6192px;
|
||||
height: 32px;
|
||||
background-image: url(../img/apex-banner.png);
|
||||
background-position: 0%;
|
||||
background-repeat: repeat-x;
|
||||
background-size: auto 32px;
|
||||
flex: none;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
white-space: nowrap;
|
||||
will-change: transform;
|
||||
animation: marquee-horizontal 16s linear infinite;
|
||||
#apex-banner {
|
||||
width: 100%;
|
||||
@include media-breakpoint-only(xs) {
|
||||
content: url(../img/apex-banner-sm.png);
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
@include media-breakpoint-only(sm) {
|
||||
content: url(../img/apex-banner-sm.png);
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
// Medium devices (tablets, 768px and up)
|
||||
@include media-breakpoint-only(md) {
|
||||
content: url(../img/apex-banner-md.png);
|
||||
height: 46px;
|
||||
}
|
||||
|
||||
// Large devices (desktops, 992px and up)
|
||||
@include media-breakpoint-up(lg) {
|
||||
content: url(../img/apex-banner.png);
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
// background-position: 0%;
|
||||
// background-repeat: repeat-x;
|
||||
// background-size: auto 32px;
|
||||
// flex: none;
|
||||
// justify-content: flex-start;
|
||||
// align-items: center;
|
||||
// display: flex;
|
||||
// position: relative;
|
||||
// white-space: nowrap;
|
||||
// will-change: transform;
|
||||
// animation: marquee-horizontal 16s linear infinite;
|
||||
}
|
||||
/* Top navigation ----------------------------------------------------------- */
|
||||
.top-nav {
|
||||
background-color: $gray-900;
|
||||
height: 80px;
|
||||
padding: 0;
|
||||
|
||||
// Logo
|
||||
.navbar-brand {
|
||||
text-decoration: none;
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<a href="http://register.apexdevsummit.com/cfs" target="_blank class="w-inline-block fixed-top">
|
||||
<div class="marquee-wrap fixed-top">
|
||||
<div class="marquee-item"></div>
|
||||
<div class="fixed-top">
|
||||
<img id="apex-banner"/>
|
||||
</div>
|
||||
</a>
|
||||
<nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top ">
|
||||
<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">
|
||||
<span class="navbar-toggler-icon"><div></div></span>
|
||||
|
||||
Reference in New Issue
Block a user