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

adds apex banner

Browse Source
This commit is contained in:
akcodez
2023-06-07 10:45:43 -07:00
parent 832e4ef796
commit a9f1fa82b8
4 changed files with 73 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
assets/css/devportal2022-v18.css
View File

File diff suppressed because one or more lines are too long

10
styles/_helpers.scss
View File

@@ -1,3 +1,13 @@
/* POSITION HELPERS */
.t-20{
top: 20px !important;
}
.t-32{
top: 32px !important;
}
.t-40{
top: 40px !important;
}
/* HEIGHT AND WIDTH HELPERS */
.h32 {
height: 32px;

82
styles/_top-nav.scss
View File

@@ -1,3 +1,33 @@
// marquee
@keyframes marquee-horizontal {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-826px);
}
}
.marquee-wrap {
justify-content: flex-start;
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;
}
/* Top navigation ----------------------------------------------------------- */
.top-nav {
background-color: $gray-900;
@@ -8,8 +38,8 @@
.navbar-brand {
text-decoration: none;
white-space: pre;
-webkit-transition: opacity .2s ease, color .2s ease;
transition: opacity .2s ease, color .2s ease;
-webkit-transition: opacity 0.2s ease, color 0.2s ease;
transition: opacity 0.2s ease, color 0.2s ease;
padding-left: 2rem;
.logo {
@@ -51,7 +81,6 @@
}
}
// Dropdowns -----------------------------------------------------------------
// Shared styles
.dropdown-toggle {
@@ -68,7 +97,7 @@
}
.dropdown-item {
line-height: 1rem;
padding: .75rem 0;
padding: 0.75rem 0;
white-space: normal;
&.dropdown-hero {
@@ -82,7 +111,7 @@
background-color: $gray-800;
border-radius: $border-radius-sm;
flex-grow: 0;
padding: .75rem;
padding: 0.75rem;
margin-right: 2rem;
margin-top: auto;
margin-bottom: auto;
@@ -190,7 +219,7 @@
border-radius: 0 0 $border-radius-lg $border-radius-lg;
padding: 2.5rem;
.dropdown-item{
.dropdown-item {
&.dropdown-hero {
padding: 0;
}
@@ -275,7 +304,7 @@
@media (min-width: 992px) and (max-width: 1030px) {
// Fix for top nav overflow in this range
.nav-link {
padding: $nav-link-padding-y 1.6rem;//TODO:checkme
padding: $nav-link-padding-y 1.6rem; //TODO:checkme
}
}
}
@@ -295,7 +324,7 @@
@include media-breakpoint-up(xl) {
#topnav-search {
margin-left: 4rem;
margin-right: .5rem;
margin-right: 0.5rem;
}
}
} // End desktop styles
@@ -323,7 +352,7 @@
display: block;
width: 100%;
height: 3px;
transition: all .2s ease;
transition: all 0.2s ease;
}
&::before {
top: 0;
@@ -369,7 +398,7 @@
margin: 0;
width: 100%;
overflow: auto;
transition: all .2s ease;
transition: all 0.2s ease;
height: 0;
display: block;
padding: 0;
@@ -451,19 +480,19 @@
border: 0;
font-family: FontAwesome;
color: $blue-purple-400;
font-size: .75rem;
transition: all .2s ease;
font-size: 0.75rem;
transition: all 0.2s ease;
overflow: clip;
width: 1rem;
}
&::before {
content:"\f053"; // < chevron
content: "\f053"; // < chevron
display: inline-block;
margin-bottom: -5px; // fix weird placement on Chrome
}
&::after {
content:"\f054"; // > chevron
content: "\f054"; // > chevron
position: absolute;
right: 2rem;
}
@@ -487,7 +516,7 @@
#top-main-nav {
padding-top: 72px;
position: relative;
transition: padding-top .2s ease;
transition: padding-top 0.2s ease;
// Hide search and other sub-menus when one sub-menu is expanded
// (js required to add the class on the dropdown event)
@@ -512,7 +541,7 @@
top: 0;
width: 100%;
height: 72px;
transition: all .2s ease;
transition: all 0.2s ease;
.input-group {
flex-wrap: nowrap; // Fix search bar splitting into two lines on iPhone 5
@@ -527,7 +556,6 @@
display: static;
}
}
} // end mobile specific styles ----------------------------------------------
// nav "hero" images
@@ -537,10 +565,8 @@
#top-nav-hero-contribute {
content: url("../img/icons/contribute.svg");
}
}
// Fix so anchors don't jump under the fixed header ----------------------------
.main h1:before,
.main h2:before,
@@ -567,17 +593,17 @@ a {
.chevron {
position: relative;
display: inline-block;
width: .75rem;
height: .5625rem;
width: 0.75rem;
height: 0.5625rem;
span {
position: absolute;
top: .25rem;
top: 0.25rem;
display: inline-block;
width: .5rem;
height: .15rem;
width: 0.5rem;
height: 0.15rem;
background-color: $blue-purple-400;
transition: all .2s ease;
transition: all 0.2s ease;
border: none;
}
&:not(.expander) span {
@@ -628,9 +654,9 @@ a {
background-size: 3rem;
background-color: transparent;
transform-origin: center;
margin-left: -.5rem;
margin-right: .5rem;
transition: transform .4s ease, background-position .4s ease;
margin-left: -0.5rem;
margin-right: 0.5rem;
transition: transform 0.4s ease, background-position 0.4s ease;
// Default: dark mode, show moon
transform: rotate(15deg);
background-position: top left;

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

@@ -1,14 +1,10 @@
{#<div class="top-banner fixed-top">
<div class="d-none d-md-flex justify-content-center">
<span><p class="mb-0 no-wrap">{% trans %}The XRP Ledger now has Native NFT support.{% endtrans %}</p></span>
<span><a href="https://xrpl.org/non-fungible-tokens.html?utm_source=web&utm_medium=web&utm_campaign=pencil_banner" class="btn btn-outline-secondary">Learn More</a></span>
</div>
<div class="d-md-none d-block justify-content-center">
<span><p class="mb-0">{% trans %}The XRP Ledger now has Native{% endtrans %}</p></span>
<span><p class="mb-0">{% trans %} NFT support.{% endtrans %}<a href="https://xrpl.org/non-fungible-tokens.html?utm_source=web&utm_medium=web&utm_campaign=pencil_banner" class="btn btn-outline-secondary">Learn More</a></p></span>
</div>
</div>#}
<nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top">
<a href="http://register.apexdevsummit.com/cfs" target="_blank class="w-inline-block">
<div class="marquee-wrap fixed-top">
<div class="marquee-item">
</div>
</div>
</a>
<nav class="top-nav navbar navbar-expand-lg navbar-dark fixed-top t-32">
<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>