ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-19 11:15: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

95
styles/_top-banner.scss
View File

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

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

@@ -15,7 +15,7 @@
// Define the banner HTML with the countdown timer
let token2049bannerHTML = `
<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 id="js-clock-days" class="clock-number">00</div>
<div class="clock-label">Days</div>
@@ -33,12 +33,12 @@
<div class="clock-label">Sec</div>
</div>
</div>
<div class="token-reg"> <span class="hide-on-mobile">{% trans %}Countdown to{% endtrans %}</span>
<span class="show-on-mobile">{% trans %}XRPL Zone {% endtrans %}</span>
<span class="token-highlight show-on-mobile">{% trans %}@Token2049{% endtrans %}</span></div>
<div class="token-circled d-lg-block highlight-yellow show-on-mobile">{% trans %} Singapore{% endtrans %}</div>
<div class="token-reg hide-on-mobile"> {% 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-reg"> <span class="d-none d-lg-inline-block">{% trans %}Countdown to{% endtrans %}</span>
<span class="d-inline-block">{% trans %}XRPL Zone {% endtrans %}</span>
<span class="token-highlight d-inline-block">{% trans %}@Token2049{% endtrans %}</span></div>
<div class="token-circled d-md-block highlight-yellow d-inline-block">{% trans %} Singapore{% 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-inline-block highlight-purple">{% trans %}Register Now{% endtrans %}</div>
</a>
`;