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

Updated images and styles

Browse Source
This commit is contained in:
Jake
2022-05-26 08:44:32 -07:00
parent 5926abbdf6
commit 85ef91c328
17 changed files with 120 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
template/base.html.jinja
View File

@@ -53,7 +53,7 @@
{% if target.lang=="ja" %}
<link href="{{currentpage.prefix}}assets/css/fonts-ja.css" rel="stylesheet" />
{% endif %}
<link href="{{currentpage.prefix}}assets/css/devportal2022-v3.css" rel="stylesheet" />
<link href="{{currentpage.prefix}}assets/css/devportal2022-v4a.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />

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

@@ -17,48 +17,50 @@
{% block main %}
<!-- TEMP -->
<style>
.text-cards {
grid-gap: 40px;
}
.text-card h6::before {
margin-top: 0;
height: unset;
}
.text-card a{
font-size: 1.25rem;
line-height: 26px;
color: #fff;
font-weight: bold;
}
.text-card a:hover {
text-decoration: none;
background: none !important;
.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;
}
.text-card .btn-arrow::after {
display: inline-block;
content: url(../assets/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;
}
.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">
<div class="d-lg-block d-none">
<img class="parallax one" width="220px" height="160px" src="./assets/img/community/community-one@2x.png" >
<img class="parallax two" width="120px" height="160px" src="./assets/img/community/community-two@2x.png" >
<img class="parallax three" width="102px" height="102px" src="./assets/img/community/community-three@2x.png" >
<img class="parallax four" width="120px" height="160px" src="./assets/img/community/community-four@2x.png" >
<img class="parallax five" width="216px" height="160px" src="./assets/img/community/community-five@2x.png" >
</div>
<section class="py-26 text-center">
<div class="col-lg-6 mx-auto text-left text-md-center">
<div class="d-flex flex-column-reverse">
<h1 class="mb-0">{% trans %}A Global Community of Builders and Innovators{% endtrans %}</h1>
@@ -110,11 +112,6 @@
</section>
<!-- order-1 order-lg-2 -->
<!-- order-2 order-lg-1 -->
<!-- Contribute -->
<section class="container-new py-5" id="run-a-network-node">
<div class="card-grid card-grid-2xN">
@@ -129,32 +126,29 @@
</div>
<div class="col d-lg-none d-block">
<!-- <img src="./assets/img/community/temp_community_xrp_ledger@2x.png" class="w-100"> -->
<div class="mt-10" id="networkNode-small"></div>
</div>
</div>
<div class="pt-2 pt-lg-5 card-grid card-grid-2xN text-cards">
<div class="text-card">
<a class="btn-arrow" href="/the-rippled-server.html">About the Server</a>
<p class="mt-3 mb-0">rippled is the core peer-to-peer server that manages the XRP Ledger.</p>
</div>
<div class="pt-2 pt-lg-5 card-grid card-grid-2xN text-cards">
<div class="text-card">
<a class="btn-arrow" href="/the-rippled-server.html">About the Server</a>
<p class="mt-3 mb-0">rippled is the core peer-to-peer server that manages the XRP Ledger.</p>
</div>
<div class="text-card">
<a class="btn-arrow" href="/run-rippled-as-a-validator.html">Become a Validator </a>
<p class="mt-3 mb-0">Join the Unique Node List (UNL) to contribute to consensus on XRPL.</p>
</div>
<div class="text-card">
<a class="btn-arrow" href="/run-rippled-as-a-validator.html">Become a Validator </a>
<p class="mt-3 mb-0">Join the Unique Node List (UNL) to contribute to consensus on XRPL.</p>
</div>
<div class="text-card">
<a class="btn-arrow" href="/install-rippled.html">Install & Configure</a>
<p class="mt-3 mb-0">Install, run, and update the rippled server.</p>
</div>
<div class="text-card">
<a class="btn-arrow" href="/troubleshoot-the-rippled-server.html">Troubleshooting</a>
<p class="mt-3 mb-0">Troubleshoot any issues you’re having with the rippled server.</p>
</div>
<div class="text-card">
<a class="btn-arrow" href="/install-rippled.html">Install & Configure</a>
<p class="mt-3 mb-0">Install, run, and update the rippled server.</p>
</div>
<div class="text-card">
<a class="btn-arrow" href="/troubleshoot-the-rippled-server.html">Troubleshooting</a>
<p class="mt-3 mb-0">Troubleshoot any issues you’re having with the rippled server.</p>
</div>
</div>
</div>
@@ -163,7 +157,7 @@
<!-- Grants -->
<section class="container-new pt-40 pb-26">
<section class="container-new pt-40 pb-26" id="xrpl-grants">
<div class="card-grid card-grid-2xN">
<div class="col pr-2">
<div class="d-flex flex-column-reverse">
@@ -173,8 +167,6 @@
<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>
<div class="d-lg-block d-none">
<!-- <img src="./assets/img/community/temp_community_grants_logos@2x.png" class="w-100 mb-4 pb-3"> -->
<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>
</div>
@@ -183,19 +175,18 @@
<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>
<img src="./assets/img/community/community-grants-1.svg" class=" ">
<img src="./assets/img/community/community-grants-1.svg" >
</div>
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
<h6 class="eyebrow mb-2">{% trans %}Distributed to grant recipients{% endtrans %}</h6>
<img src="./assets/img/community/community-grants-2.svg" class="">
<img src="./assets/img/community/community-grants-2.svg" >
</div>
<div class="mb-4 pb-3 mb-lg-3 pb-lg-5">
<h6 class="eyebrow mb-2">{% trans %}Open-source projects funded {% endtrans %}</h6>
<img src="./assets/img/community/community-grants-3.svg" class="">
<img src="./assets/img/community/community-grants-3.svg" >
</div>
<div class="d-lg-none d-block mt-4 pt-3">
<!-- <img src="./assets/img/community/temp_community_grants_logos@2x.png" class="w-100 mb-4 pb-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>
</div>
@@ -204,15 +195,13 @@
</section>
<!-- Events -->
<section class="container-new py-26">
<section class="container-new py-26" id="xrpl-events">
<div class="card-grid card-grid-2xN ">
<div class="col pr-2 d-lg-block d-none ">
<div class="col pr-2 d-lg-block d-none">
<!-- Large. 3 image in col -->
<div class="d-flex flex-row h-100">
<div class="d-flex flex-row h-100">
<div class=" pr-1 mr-3 align-self-start">
<img src="./assets/img/community/community-events-apex-small@2x.png" class="w-100">
<p class="bold text-light mt-3">{% trans %}Welcome to Apex 2021{% endtrans %}</p>
@@ -250,12 +239,9 @@
<img src="./assets/img/community/community-events-hackathon@2x.png" class="w-100">
<h6 class="mt-3">{% trans %}XRPL Hackathon 2022{% endtrans %}</h6>
</div>
<!-- <img src="./assets/img/community/temp_community_types_of_events@2x.png" class="w-100"> -->
</div>
<div class="">
<div >
<a class="btn btn-primary btn-arrow" target="_blank" href="/events.html">{% trans %}View All Events{% endtrans %}</a>
</div>
</div>
@@ -307,9 +293,7 @@
<section class="container-new py-26">
<div class="card-grid card-grid-2xN">
<div class="col pr-2 d-lg-block d-none">
<!-- <img src="./assets/img/community/temp_community_open_roles@2x.png" class="w-100"> -->
<div class="mb-4 pb-3" id="careersDark"></div>
</div>
@@ -321,7 +305,6 @@
<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>
<div class="d-lg-none d-block">
<!-- <img src="./assets/img/community/temp_community_open_roles@2x.png" class="w-100"> -->
<div class="mb-4 pb-3" id="careersDark-small"></div>
</div>
<div class="d-lg-block">
@@ -360,8 +343,6 @@
<!-- <div class="mt-10" id="networkNode"></div> -->
<script type="text/javascript">
function networkNodeAnimation(){
bodymovin.loadAnimation({
@@ -406,8 +387,6 @@
function careersAnimation(){
bodymovin.loadAnimation({
container: document.getElementById('careersDark'),
@@ -428,8 +407,8 @@
});
};
careersAnimation();
careersSmallAnimation();
careersAnimation();
careersSmallAnimation();
xrplGrantsAnimation();
@@ -441,8 +420,6 @@ careersSmallAnimation();
</script>
<!-- <div class="mt-10" id="networkNode"></div> -->
{% endblock %}