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

Updated button out arrow

Browse Source
This commit is contained in:
Jake
2022-06-09 15:10:01 -07:00
parent 9094af3aec
commit 0f43bbb13f
4 changed files with 48 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

4
assets/img/icons/arrow-up-right-white.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.96484 15.5352L16.0359 8.46409" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.96484 8.46484H16.0359V15.5359" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 351 B

29
styles/_pages.scss
View File

@@ -273,6 +273,35 @@
// Ambassadors // Ambassadors
.page-ambassadors { .page-ambassadors {
// Button has link out arrow.
.btn {
padding: .75rem;
}
@media (max-width: 767.98px) {
.btn-arrow-out {
display: block;
width: 100%;
}
}
.btn-arrow-out::after {
background-position: left 0px bottom 0px;
content: "\00a0";
background-image: url(../img/icons/arrow-up-right-white.svg);
background-repeat: no-repeat;
display: inline-block;
padding: 4px 8px 4px 12px;
transition: background-position 0.3s ease-in-out;
margin-left: 4px;
}
.btn-arrow-out:hover::after {
background-position: left 4px bottom 4px;
}
// Sliding Quotes
#carouselSlidesOnly{ #carouselSlidesOnly{
height: 392px; height: 392px;
margin-bottom: 40px; margin-bottom: 40px;

28
template/page-ambassadors.html.jinja
View File

@@ -30,9 +30,9 @@
<p class="mt-3 py-3 col-lg-8 mx-lg-auto p-0">{% trans %}The XRPL Developer and Campus Ambassador program engages, supports, connects and <p class="mt-3 py-3 col-lg-8 mx-lg-auto p-0">{% trans %}The XRPL Developer and Campus Ambassador program engages, supports, connects and
recognizes champions of the XRPL and empowers them to further advance awareness of and development on the recognizes champions of the XRPL and empowers them to further advance awareness of and development on the
ledger.{% endtrans %}</p> ledger.{% endtrans %}</p>
<!-- <a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a> --> <!-- <a class="btn btn-primary btn-arrow-out" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a> -->
<button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet" <button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet"
class="btn btn-primary btn-arrow" class="btn btn-primary btn-arrow-out"
data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx"
>Apply Now to XRPL Ambassadors</button> >Apply Now to XRPL Ambassadors</button>
@@ -55,7 +55,7 @@
workshops, hackathons, content creation and more. Ambassadors help answer questions, share resources on workshops, hackathons, content creation and more. Ambassadors help answer questions, share resources on
how to build on the XRPL and provide updates on community developments.{% endtrans %}</p> how to build on the XRPL and provide updates on community developments.{% endtrans %}</p>
<div class="d-none d-lg-block p-lg-3"> <div class="d-none d-lg-block p-lg-3">
<a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Connect with Ambassadors{%endtrans %}</a> <a class="btn btn-primary btn-arrow-out" target="_blank" href="#">{% trans %}Connect with Ambassadors{%endtrans %}</a>
</div> </div>
</div> </div>
@@ -66,7 +66,7 @@
</div> </div>
<div class="d-lg-none order-3 mt-4 pt-3 p-lg-3"> <div class="d-lg-none order-3 mt-4 pt-3 p-lg-3">
<a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Connect with Ambassadors{%endtrans %}</a> <a class="btn btn-primary btn-arrow-out" target="_blank" href="#">{% trans %}Connect with Ambassadors{%endtrans %}</a>
</div> </div>
</div> </div>
@@ -104,8 +104,8 @@
Developer Ambassador.{% endtrans %}</p> Developer Ambassador.{% endtrans %}</p>
<div class="d-none d-lg-block p-lg-3"> <div class="d-none d-lg-block p-lg-3">
<!-- <a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a> --> <!-- <a class="btn btn-primary btn-arrow-out" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a> -->
<button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet" class="btn btn-primary btn-arrow" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply Now to XRPL Ambassadors</button> <button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet" class="btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply Now to XRPL Ambassadors</button>
</div> </div>
</div> </div>
@@ -176,8 +176,8 @@
</div> </div>
<div class="d-lg-none order-3 mt-4 pt-3"> <div class="d-lg-none order-3 mt-4 pt-3">
<!-- <a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{% endtrans%}</a> --> <!-- <a class="btn btn-primary btn-arrow-out" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{% endtrans%}</a> -->
<button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet" class="btn btn-primary btn-arrow" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply Now to XRPL Ambassadors</button> <button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet" class="btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply Now to XRPL Ambassadors</button>
</div> </div>
</div> </div>
@@ -287,8 +287,8 @@
<h6 class="eyebrow mb-3">{% trans %}Current Students{% endtrans %}</h6> <h6 class="eyebrow mb-3">{% trans %}Current Students{% endtrans %}</h6>
</div> </div>
<p class="p-lg-3 mb-2 longform">{% trans %}The XRPL Campus Ambassador Program aims to elevate the impact of college students who are passionate about blockchain technology. In their role, Campus Ambassadors help educate other students about crypto and how to start building on the XRPL.{% endtrans %}</p> <p class="p-lg-3 mb-2 longform">{% trans %}The XRPL Campus Ambassador Program aims to elevate the impact of college students who are passionate about blockchain technology. In their role, Campus Ambassadors help educate other students about crypto and how to start building on the XRPL.{% endtrans %}</p>
<!-- <a class="m-lg-3 btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a> --> <!-- <a class="m-lg-3 btn btn-primary btn-arrow-out" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a> -->
<button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet" class=" m-lg-3 btn btn-primary btn-arrow" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply Now to XRPL Ambassadors</button> <button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet" class=" m-lg-3 btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply Now to XRPL Ambassadors</button>
</div> </div>
<!-- Quotes --> <!-- Quotes -->
@@ -503,8 +503,8 @@
<p class="p-lg-3 mb-2 longform">{% trans %}To stay up-to-date on the latest activity, meetups, and events of the XRPL Developer Ambassadors and XRPL Campus Ambassadors be sure to follow these channels:{% endtrans %}</p> <p class="p-lg-3 mb-2 longform">{% trans %}To stay up-to-date on the latest activity, meetups, and events of the XRPL Developer Ambassadors and XRPL Campus Ambassadors be sure to follow these channels:{% endtrans %}</p>
<div class="d-none d-lg-block p-lg-3"> <div class="d-none d-lg-block p-lg-3">
<!-- <a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a> --> <!-- <a class="btn btn-primary btn-arrow-out" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{%endtrans %}</a> -->
<button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet" class="btn btn-primary btn-arrow" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply Now to XRPL Ambassadors</button> <button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet" class="btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply Now to XRPL Ambassadors</button>
</div> </div>
</div> </div>
@@ -548,8 +548,8 @@
</div> </div>
<div class="d-lg-none order-3 mt-4 pt-3"> <div class="d-lg-none order-3 mt-4 pt-3">
<!-- <a class="btn btn-primary btn-arrow" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{% endtrans%}</a> --> <!-- <a class="btn btn-primary btn-arrow-out" target="_blank" href="#">{% trans %}Apply Now to XRPL Ambassadors{% endtrans%}</a> -->
<button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet" class="btn btn-primary btn-arrow" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply Now to XRPL Ambassadors</button> <button data-tf-popup="vXU4VN5c" data-tf-iframe-props="title=XRPL Ambassador Program" data-tf-medium="snippet" class="btn btn-primary btn-arrow-out" data-tf-hidden="utm_source=xxxxx,utm_medium=xxxxx,utm_campaign=xxxxx,utm_term=xxxxx,utm_content=xxxxx">Apply Now to XRPL Ambassadors</button>
</div> </div>
</div> </div>