ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-21 04:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix Token2049 banner breakpoints

Browse Source
This commit is contained in:
mDuo13
2023-08-31 13:45:51 -07:00
parent 9265d223f8
commit c2f904f3f9
3 changed files with 42 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal2022-v23.css
View File

File diff suppressed because one or more lines are too long

83
styles/_top-banner.scss
View File

@@ -118,9 +118,6 @@ html.light .token-banner-container {
& > img { & > img {
height: 36px; height: 36px;
@include media-breakpoint-up(lg) {
}
} }
& > div { & > div {
@@ -140,30 +137,17 @@ html.light .token-banner-container {
.token-reg { .token-reg {
text-align: center; text-align: center;
line-height: 3rem; line-height: 48px;
@include media-breakpoint-up(md) { font-size: 16px;
padding: 0 1rem; padding: 0 1rem;
}
@include media-breakpoint-up(lg) {
line-height: 60px;
} }
.hide-on-mobile { // Nonstandard "xxl" breakpoint again
@include media-breakpoint-down(sm) { @media (min-width: 1400px) {
display: none !important; font-size: 22px;
}
}
.show-on-mobile {
display: none;
@include media-breakpoint-down(sm) {
display: inline !important;
}
}
@include media-breakpoint-up(md) {
.hide-on-mobile,
.show-on-mobile {
display: inline !important;
} }
} }
@@ -180,17 +164,22 @@ html.light .token-banner-container {
white-space: nowrap; white-space: nowrap;
transition: border-color 0.5s ease; transition: border-color 0.5s ease;
// sm breakpoint // xs breakpoint
border: 2px solid $white; border: 2px solid $white;
height: 36px; height: 36px;
line-height: 32px; line-height: 32px;
border-radius: 32px; border-radius: 32px;
font-size: 2vw; font-size: 8px; // min legible font size
margin-top: 2px; margin-top: 6px;
@include media-breakpoint-up(sm) {
font-size: 2vw; // font scales up from here
}
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
border-width: 3px; border-width: 3px;
height: 48px; height: 48px;
line-height: 42px;
border-radius: 40px; border-radius: 40px;
font-size: 16px; font-size: 16px;
} }
@@ -223,38 +212,28 @@ html.light .token-banner-container {
color: $white; color: $white;
} }
.js-clock .box { .js-clock {
padding-top: 3px;
@include media-breakpoint-up(lg) {
padding-top: 8px;
}
.box {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
font-size: 14px; font-size: 14px;
line-height: 22px;
&:last-child {
margin-right: 0;
}
} }
.clock-number { .clock-number {
font-variant-numeric: tabular-nums; font-variant-numeric: tabular-nums;
} }
.js-clock .box {
display: inline-block;
margin-right: 10px;
}
.js-clock .box:last-child {
margin-right: 0;
} }
.token-circled,
#js-clock {
@include media-breakpoint-down(sm) {
display: none;
}
}
@include media-breakpoint-up(md) {
.token-reg,
.token-circled,
#js-clock {
display: inline-block;
margin-top: 10px;
}
}
.highlight-purple{ .highlight-purple{
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
display: none; display: none;
@@ -262,12 +241,6 @@ html.light .token-banner-container {
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
.show-on-mobile {
display: inline-block;
}
.highlight-yellow{
margin-top:10px;
}
.token-highlight{ .token-highlight{
margin-right:10px; margin-right:10px;
} }

14
template/component-top-nav.html.jinja
View File

@@ -15,7 +15,7 @@
// Define the banner HTML with the countdown timer // Define the banner HTML with the countdown timer
let token2049bannerHTML = ` let token2049bannerHTML = `
<a href="https://www.token2049.com/" target="_blank" class="w-inline-block token-banner-container d-flex justify-content-center"> <a href="https://www.token2049.com/" target="_blank" class="w-inline-block token-banner-container d-flex justify-content-center">
<div id="js-clock" class="js-clock align-items-center"> <div id="js-clock" class="js-clock align-items-center d-none d-sm-inline-block">
<div class="box"> <div class="box">
<div id="js-clock-days" class="clock-number">00</div> <div id="js-clock-days" class="clock-number">00</div>
<div class="clock-label">Days</div> <div class="clock-label">Days</div>
@@ -33,12 +33,12 @@
<div class="clock-label">Sec</div> <div class="clock-label">Sec</div>
</div> </div>
</div> </div>
<div class="token-reg"> <span class="hide-on-mobile">{% trans %}Countdown to{% endtrans %}</span> <div class="token-reg"> <span class="d-none d-lg-inline-block">{% trans %}Countdown to{% endtrans %}</span>
<span class="show-on-mobile">{% trans %}XRPL Zone {% endtrans %}</span> <span class="d-inline-block">{% trans %}XRPL Zone {% endtrans %}</span>
<span class="token-highlight show-on-mobile">{% trans %}@Token2049{% endtrans %}</span></div> <span class="token-highlight d-inline-block">{% trans %}@Token2049{% endtrans %}</span></div>
<div class="token-circled d-lg-block highlight-yellow show-on-mobile">{% trans %} Singapore{% endtrans %}</div> <div class="token-circled d-md-block highlight-yellow d-inline-block">{% trans %} Singapore{% endtrans %}</div>
<div class="token-reg hide-on-mobile"> {% trans %} 12 September 2023 {% endtrans %} </div> <div class="token-reg d-none d-md-inline-block"> {% trans %} 12 September 2023 {% endtrans %} </div>
<div class="token-circled d-none d-lg-block highlight-purple">{% trans %}Register Now{% endtrans %}</div> <div class="token-circled d-none d-lg-inline-block highlight-purple">{% trans %}Register Now{% endtrans %}</div>
</a> </a>
`; `;