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

Spacing updates. Cleanup

Browse Source
This commit is contained in:
Jake
2022-05-26 17:30:20 -07:00
parent 85ef91c328
commit 09193295b9
4 changed files with 120 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

File diff suppressed because one or more lines are too long

2
dactyl-config.yml
View File

@@ -4034,7 +4034,7 @@ pages:
# "Community" tab --------------------------------------------------------------
- name: Contribute
- name: Contribute to the XRPL Community
html: contribute.html
parent: index.html
template: page-community.html.jinja

124
styles/_pages.scss
View File

@@ -733,6 +733,51 @@
.page-docs-index,
.page-community {
#community-heading {
padding-top: 2.5rem;
padding-bottom: 5rem;
padding-left: 1rem;
@include media-breakpoint-up(md) {
padding-top: 5rem;
padding-bottom: 15rem;
padding-left: 0;
}
// Floating images
.parallax {
position: absolute;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.one {
top: 160px;
left: 0%;
}
.two {
top: 439px;
left: 22%;
}
.three {
top: 517px;
left: 52%;
}
.four {
top: 322px;
left: 71%;
}
.five {
top: 120px;
right: 0%;
}
}
#run-a-network-node .card-deck {
.card:nth-child(1) .card-footer {
background-image: url(../img/cards/4col-yellow-2.svg);
@@ -748,38 +793,71 @@
}
}
#run-a-network-node .text-cards {
grid-gap: 40px;
#run-a-network-node {
padding-bottom: 5rem;
h6::before {
margin-top: 0;
height: unset;
@include media-breakpoint-up(md) {
padding-top: 104px;
padding-bottom: 104px;
}
a {
font-size: 1.25rem;
line-height: 26px;
color: #fff;
font-weight: bold;
&:hover {
text-decoration: none;
background: none !important;
.text-cards {
grid-gap: 40px;
h6::before {
margin-top: 0;
height: unset;
}
a {
font-size: 1.25rem;
line-height: 26px;
color: #fff;
font-weight: bold;
&:hover {
text-decoration: none;
background: none !important;
}
}
.btn-arrow::after {
display: inline-block;
content: url(../img/icons/arrow-right-purple.svg);
vertical-align: middle;
padding-left: 8px;
-webkit-transition: transform 0.3s ease-out;
-moz-transition: transform 0.3s ease-out;
-ms-transition: transform 0.3s ease-out;
-o-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
}
}
.btn-arrow::after {
display: inline-block;
content: url(../img/icons/arrow-right-purple.svg);
vertical-align: middle;
padding-left: 8px;
-webkit-transition: transform 0.3s ease-out;
-moz-transition: transform 0.3s ease-out;
-ms-transition: transform 0.3s ease-out;
-o-transition: transform 0.3s ease-out;
transition: transform 0.3s ease-out;
#xrpl-grants {
padding-bottom: 5rem;
@include media-breakpoint-up(md) {
padding-top: 104px;
padding-bottom: 104px;
}
}
#xrpl-events {
padding-bottom: 5rem;
@include media-breakpoint-up(md) {
padding-top: 104px;
padding-bottom: 104px;
}
}
#xrpl-careers {
padding-bottom: 5rem;
@include media-breakpoint-up(md) {
padding-top: 104px;
padding-bottom: 104px;
}
}

107
template/page-community.html.jinja
View File

@@ -17,41 +17,8 @@
{% block main %}
<style>
.parallax {
position: absolute;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.one {
top: 160px;
left: 0%;
}
.two {
top: 439px;
left: 22%;
}
.three {
top: 517px;
left: 52%;
}
.four {
top: 322px;
left: 71%;
}
.five {
top: 120px;
right: 0%;
}
</style>
<section class="py-26 pb-40 mb-40 text-center">
<section class="text-center" id="community-heading">
<div class="d-lg-block d-none">
<img class="parallax one" width="220px" height="160px" src="./assets/img/community/community-one@2x.png" >
@@ -100,7 +67,7 @@
] %}
<div class="row row-cols-2 row-cols-lg-4 card-deck">
{% for plat in platforms %}
<a class="card mb-10" href="{{plat.link}}">
<a class="card mb-10" href="{{plat.link}}" target="_blank">
<div class="card-body">
<div class="circled-logo"><img id="platform-{{plat.id}}" alt="(logo)" {% if plat.imgclasses %}class="{{plat.imgclasses}}"{% endif %}/></div>
<h4 class="card-title h5">{{plat.name}}</h4>
@@ -113,13 +80,13 @@
<!-- Contribute -->
<section class="container-new py-5" id="run-a-network-node">
<section class="container-new" id="run-a-network-node">
<div class="card-grid card-grid-2xN">
<div class="col d-sm-none d-lg-block align-self-center">
<div class="mt-10 " id="networkNode"></div>
<div class="col d-none d-lg-block align-self-center">
<div class="mt-10" id="networkNode"></div>
</div>
<div class="col pt-5">
<div class="col pt-lg-5">
<div class="d-flex flex-column-reverse mb-8 pl-0">
<h2 class="h4 h2-sm">{% trans %}Run an XRP Ledger network node{% endtrans %}</h2>
<h6 class="eyebrow mb-3">{% trans %}Contribute to Consensus{% endtrans %}</h6>
@@ -157,24 +124,24 @@
<!-- Grants -->
<section class="container-new pt-40 pb-26" id="xrpl-grants">
<section class="container-new" id="xrpl-grants">
<div class="card-grid card-grid-2xN">
<div class="col pr-2">
<div class="d-flex flex-column-reverse">
<h2 class="h4 h2-sm">{% trans %}Apply for funding for your next XRPL project{% endtrans %}</h2>
<h6 class="eyebrow mb-3">{% trans %}XRPL Grants{% endtrans %}</h6>
</div>
<p class="mb-lg-3 py-lg-4 pt-4 mb-0">{% trans %}The XRPL Grants program funds select open-source projects that help the growing XRP Ledger community. Wave 3 of XRPL Grants with the theme “Contributing to Open Source” is now open!{% endtrans %}</p>
<p class="mb-lg-3 py-lg-4 pt-4 mb-0">{% trans %}The XRPL Grants program funds select open-source projects that contribute to the growing XRP Ledger community.{% endtrans %}</p>
<div class="d-lg-block d-none">
<div class="mb-4 pb-3" id="xrplGrantsDark"></div>
<a class="btn btn-primary btn-arrow" target="_blank" href="https://xrplgrants.org/">{% trans %}Apply for a Grant{% endtrans %}</a>
<a class="btn btn-primary btn-arrow" target="_blank" href="https://xrplgrants.org/">{% trans %}Learn More{% endtrans %}</a>
</div>
</div>
<div class="col">
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
<h6 class="eyebrow mb-2">{% trans %}Awarded in single grant{% endtrans %}</h6>
<h6 class="eyebrow mb-2">{% trans %}Awarded in a single grant{% endtrans %}</h6>
<img src="./assets/img/community/community-grants-1.svg" >
</div>
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
@@ -188,7 +155,7 @@
<div class="d-lg-none d-block mt-4 pt-3">
<div class="mb-4 pb-3" id="xrplGrantsDark-small"></div>
<a class="btn btn-primary btn-arrow" target="_blank" href="https://xrplgrants.org/">{% trans %}Apply for a Grant{% endtrans %}</a>
<a class="btn btn-primary btn-arrow" target="_blank" href="https://xrplgrants.org/">{% trans %}Learn More{% endtrans %}</a>
</div>
</div>
</div>
@@ -196,7 +163,7 @@
<!-- Events -->
<section class="container-new py-26" id="xrpl-events">
<section class="container-new" id="xrpl-events">
<div class="card-grid card-grid-2xN ">
<div class="col pr-2 d-lg-block d-none">
@@ -219,10 +186,10 @@
<div class="col pt-5">
<div class="d-flex flex-column-reverse mb-lg-2 pl-0">
<h2 class="h4 h2-sm">{% trans %}Check out global events hosted by the XRPL community {% endtrans %}</h2>
<h2 class="h4 h2-sm">{% trans %}Check out global events across the XRPL community{% endtrans %}</h2>
<h6 class="eyebrow mb-3">{% trans %}XRPL Events{% endtrans %}</h6>
</div>
<p class="mb-3 py-4">{% trans %}Meet the XRPL community at meetups, hackathons, conferences like Apex, and more, across global regions.{% endtrans %}</p>
<p class="mb-3 py-4">{% trans %}Meet the XRPL community at meetups, hackathons, conferences, and more across global regions.{% endtrans %}</p>
<!-- Mobile. 3 inline images. -->
<div class="col pr-2 d-lg-none d-block">
@@ -250,47 +217,8 @@
</section>
<!-- Dev spotlight -->
<section class="container-new py-26">
<div class="d-flex flex-column-reverse col-lg-6 mb-lg-4 pl-0 ">
<h2 class="h4 h2-sm">{% trans %}Watch community members tell their stories of building on XRPL {% endtrans %}</h2>
<h6 class="eyebrow mb-3">{% trans %}Developer Spotlights{% endtrans %}</h6>
</div>
<div class="row row-cols-1 row-cols-lg-3 d-flex justify-content-between w-100 mx-0 mx-md-n3 mt-md-5">
<div class="px-md-3 pt-5 pt-md-0">
<a href="#" class="btn1" data-url="https://www.youtube.com/embed/k6VqEkqRTmk?rel=0&amp;showinfo=0&amp;autoplay=1">
<img src="./assets/img/overview/video_explainer_consensus@2x.png" id="xrpl-overview-video-consensus" class="w-100 video-image">
</a>
<div class="mt-2">
<h4 class="video-title mt-3 mb-0">{% trans %}Company Name{% endtrans %}</h4>
</div>
</div>
<div class="px-md-3 pt-5 pt-md-0">
<a href="#" class="btn1" data-url="https://www.youtube.com/embed/JjaVDXPqnbA?rel=0&amp;showinfo=0&amp;autoplay=1">
<img src="./assets/img/overview/video_explainer_nodes@2x.png" id="xrpl-overview-video-nodes" class="w-100 video-image">
</a>
<div class="mt-2">
<h4 class="video-title mt-3 mb-0">{% trans %}Company Name{% endtrans %}</h4>
</div>
</div>
<div class="px-md-3 pt-5 pt-md-0">
<a href="#" class="btn1" data-url="https://www.youtube.com/embed/WsmldDNGQ9s?rel=0&amp;showinfo=0&amp;autoplay=1">
<img src="./assets/img/overview/video_explainer_sustainability@2x.png" id="xrpl-overview-video-sustainability" class="w-100 video-image">
</a>
<div class="mt-2">
<h4 class="video-title mt-3 mb-0">{% trans %}Company Name{% endtrans %}</h4>
</div>
</div>
</div>
<div class="pt-5 w-100">
<a class="btn btn-primary btn-arrow" target="_blank" href="https://www.youtube.com/channel/UC6zTJdNCBI-TKMt5ubNc_Gg">{% trans %}Watch Full Series on YouTube{% endtrans %}</a>
</div>
</section>
<!-- Careers -->
<section class="container-new py-26">
<section class="container-new" id="xrpl-careers">
<div class="card-grid card-grid-2xN">
<div class="col pr-2 d-lg-block d-none">
@@ -299,7 +227,7 @@
<div class="col pt-5">
<div class="d-flex flex-column-reverse mb-lg-2 pl-0">
<h2 class="h4 h2-sm">{% trans %}Discover your next career opportunity with XRPL{% endtrans %}</h2>
<h2 class="h4 h2-sm">{% trans %}Discover your next career opportunity in the XRPL community{% endtrans %}</h2>
<h6 class="eyebrow mb-3">{% trans %}XRPL Careers{% endtrans %}</h6>
</div>
<p class="mb-3 py-4">{% trans %}Teams across the XRPL community are looking for talented individuals to help build their next innovation.{% endtrans %}</p>
@@ -316,7 +244,7 @@
</section>
<section class="container-new py-26">
<section class="container-new">
<div class="col-md-6 offset-md-3 p-6-sm p-10-until-sm br-8 cta-card">
<img src="./img/backgrounds/cta-community-purple.svg" class="d-none-sm cta cta-top-left">
<img src="./img/backgrounds/cta-community-green.svg" class="cta cta-bottom-right">
@@ -386,7 +314,6 @@
};
function careersAnimation(){
bodymovin.loadAnimation({
container: document.getElementById('careersDark'),