pushing to git repo. adding new assets for community page, have 4x row set up

dactyl-config.yml

@@ -292,9 +292,10 @@ pages:
 
     -   name: XRPL Foundation
         html: xrpl-foundation.html
-        #template: some custom template TODO
+        template: page-xrpl-foundation.html.jinja
         parent: xrp-ledger-overview.html
         top_nav_grouping: About
+        sidebar: disabled
         targets:
             - en
             - ja
@@ -3674,24 +3675,24 @@ pages:
 #             - ja
 
 # # "Community" tab --------------------------------------------------------------
-#     -   name: Community
+    -   name: Community
-#         html: contribute.html
+        html: contribute.html
-#         parent: index.html
+        parent: index.html
-#         template: page-community.html.jinja
+        template: page-community.html.jinja
-#         sidebar: disabled
+        sidebar: disabled
-#         blurb: The XRP Ledger (XRPL) is a community-driven public blockchain ledger. Here’s how you can get involved.
+        blurb: The XRP Ledger (XRPL) is a community-driven public blockchain ledger. Here’s how you can get involved.
-#         targets:
+        targets:
-#             - en
+            - en
 
-#         # TODO: translate blurb & contents
+        # TODO: translate blurb & contents
-#     -   name: コミュニティー
+    -   name: コミュニティー
-#         html: contribute.html
+        html: contribute.html
-#         parent: index.html
+        parent: index.html
-#         template: page-community.html.jinja
+        template: page-community.html.jinja
-#         sidebar: disabled
+        sidebar: disabled
-#         blurb: The XRP Ledger (XRPL) is a community-driven public blockchain ledger. Here’s how you can get involved.
+        blurb: The XRP Ledger (XRPL) is a community-driven public blockchain ledger. Here’s how you can get involved.
-#         targets:
+        targets:
-#             - ja
+            - ja
 
 #     -   md: contributing/contribute-code.md
 #         html: contribute-code.html

img/logos/github.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25" cy="25" r="25" fill="#454549"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.829 12C21.7835 11.9969 18.8363 13.0785 16.5158 15.0509C14.1953 17.0234 12.653 19.7577 12.1654 22.764C11.6777 25.7702 12.2766 28.8519 13.8547 31.4567C15.4328 34.0615 17.8869 36.0192 20.7773 36.9789C21.4224 37.0969 21.6506 36.6957 21.6506 36.3574C21.6506 36.0191 21.6506 35.2481 21.6506 34.1782C18.0709 34.957 17.3157 32.4552 17.3157 32.4552C17.0782 31.6798 16.5737 31.0136 15.8917 30.5749C14.7352 29.7882 15.9861 29.7882 15.9861 29.7882C16.3915 29.8454 16.7785 29.9942 17.1179 30.2232C17.4573 30.4522 17.7402 30.7554 17.9451 31.1099C18.1191 31.4255 18.3538 31.7037 18.6357 31.9284C18.9175 32.1531 19.2409 32.3199 19.5874 32.4194C19.9339 32.5188 20.2966 32.5488 20.6547 32.5077C21.0128 32.4666 21.3593 32.3552 21.6742 32.1798C21.7236 31.5326 22.0026 30.9244 22.4609 30.4647C19.6129 30.1422 16.6233 29.0408 16.6233 24.1708C16.6038 22.8987 17.0742 21.6677 17.9372 20.7328C17.5528 19.6267 17.5978 18.4165 18.0631 17.342C18.0631 17.342 19.1409 16.9958 21.5877 18.6558C23.6887 18.0789 25.9064 18.0789 28.0074 18.6558C30.4542 16.9958 31.5241 17.342 31.5241 17.342C31.9959 18.4052 32.0521 19.6066 31.6815 20.7092C32.5445 21.6441 33.0149 22.8751 32.9953 24.1472C32.9953 29.0722 29.9979 30.1501 27.142 30.4411C27.4482 30.749 27.6847 31.119 27.8354 31.5263C27.9861 31.9335 28.0474 32.3683 28.0153 32.8014C28.0153 34.5164 28.0153 35.9011 28.0153 36.3181C28.0153 36.735 28.2435 37.0576 28.8964 36.9317C31.7539 35.9467 34.1713 33.9834 35.7215 31.3887C37.2717 28.7941 37.855 25.735 37.3684 22.7519C36.8817 19.7689 35.3564 17.0538 33.0619 15.0864C30.7674 13.119 27.8514 12.0258 24.829 12Z" fill="white"/>
+</svg>

img/logos/stack-overflow.svg

@@ -0,0 +1,5 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25" cy="25" r="25" fill="#454549"/>
+<path d="M31.8407 32.7771V26.0797H34.0635V35H14V26.0797H16.2229V32.7771H31.8407Z" fill="#BCBBBB"/>
+<path d="M18.6763 25.4446L29.5885 27.7252L30.0504 25.5312L19.1382 23.2506L18.6763 25.4446ZM20.1197 20.2483L30.2236 24.9538L31.1474 22.933L21.0435 18.1986L20.1197 20.2483ZM22.9199 15.2829L31.4938 22.4134L32.9084 20.7102L24.3345 13.5797L22.9199 15.2829ZM28.4626 10L26.6728 11.3279L33.3125 20.2771L35.1024 18.9492L28.4626 10ZM18.4453 30.5254H29.5885V28.3026H18.4453V30.5254Z" fill="#F48023"/>
+</svg>

img/logos/twitch.svg

@@ -0,0 +1,7 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25" cy="25" r="25" fill="#454549"/>
+<path d="M33.651 24.1071L30.0781 27.6786H26.5052L23.3789 30.8036V27.6786H19.3594V14.2857H33.651V24.1071Z" fill="white"/>
+<path d="M18.4661 12.5L14 16.9643V33.0357H19.3594V37.5L23.8255 33.0357H27.3984L35.4375 25V12.5H18.4661ZM33.651 24.1071L30.0781 27.6786H26.5052L23.3789 30.8036V27.6786H19.3594V14.2857H33.651V24.1071Z" fill="#9146FF"/>
+<path d="M30.9701 17.4106H29.1836V22.7678H30.9701V17.4106Z" fill="#9146FF"/>
+<path d="M26.0599 17.4106H24.2734V22.7678H26.0599V17.4106Z" fill="#9146FF"/>
+</svg>

img/logos/twitter.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25" cy="25" r="25" fill="#454549"/>
+<path d="M37.6103 17.3677C36.7049 17.7697 35.7318 18.0404 34.7104 18.1624C35.7533 17.5379 36.5541 16.5484 36.9305 15.3692C35.9553 15.9475 34.8745 16.3679 33.724 16.5945C32.8041 15.6132 31.4906 15 30.0386 15C26.7787 15 24.3833 18.0414 25.1196 21.1987C20.9245 20.9885 17.2043 18.9787 14.7135 15.9239C13.3907 18.1932 14.0275 21.1618 16.2752 22.6651C15.4487 22.6384 14.6694 22.4118 13.9895 22.0334C13.9342 24.3724 15.6107 26.5607 18.039 27.0478C17.3283 27.2406 16.55 27.2857 15.7584 27.1339C16.4003 29.1397 18.2646 30.5988 20.4754 30.6399C18.3527 32.3041 15.6784 33.0476 13 32.7317C15.2344 34.1643 17.8893 35 20.74 35C30.1144 35 35.4108 27.0826 35.0909 19.9815C36.0773 19.2689 36.9336 18.3798 37.6103 17.3677Z" fill="#4BA0EB"/>
+</svg>

styles/_helpers.scss

@@ -33,6 +33,24 @@
 
 /* SPACING HELPERS */
 /* To create new margin classes, multiply by 4px */
+.ml-5 {
+  margin-left: 1.25rem;
+  &-until-md {
+    @include media-breakpoint-up(md) {
+      margin-left: 1.25rem;
+      margin-right: 1.25rem;
+    }
+  }
+}
+.mr-5 {
+  margin-right: 1.25rem;
+  &-until-md {
+    @include media-breakpoint-up(md) {
+      margin-left: 1.25rem;
+      margin-right: 1.25rem;
+    }
+  }
+}
 .mb-6 {
   margin-bottom: 1.5rem;
 }

styles/_layout.scss

@@ -123,6 +123,9 @@ section {
       /* Switch to 1-column layout on smaller widths */
       grid-template-columns: 1fr;
     }
+    .col-new {
+      margin: 20px;
+    }
   }
 
   &.card-grid-3xN {
@@ -136,6 +139,12 @@ section {
       /* Switch to 1-column layout on smaller widths */
       grid-template-columns: 1fr;
     }
+    .card-new {
+      min-height: 264px;
+      @include media-breakpoint-up(md) {
+        min-height: 347px;
+      }
+    }
   }
 
   &.card-grid-2xN {
@@ -269,16 +278,11 @@ $columns: 12; // Number of columns in the grid system
     &#blue-light-blue {
       background-image: url(../../img/cards/blue-light-blue.svg);
     }
-    .card-new {
+    
-      padding: 32px;
-      min-height: 264px;
-      @include media-breakpoint-up(md) {
-        min-height: 347px;
-      }
-    }
   }
 
   .card-new {
+    padding: 32px;
     --width: 4;
   }
   .col-new-card {

template/page-community.html.jinja

@@ -16,29 +16,87 @@
 {% block breadcrumbs %}{% endblock %}
 
 {% block main %}
-  <div class="marketing-wrapper">
+
-    <div class="container mt-40 mb-30">
+<section class="py-26 text-center">
-      <h1 class="mb-10">{% trans %}For Developers{% endtrans %}</h1>
+  <div class="col-md-4 mx-auto text-center">
-      <section class="row mb-30">
+    <div class="d-flex flex-column-reverse">
-        <div class="col-md-6 offset-md-1 order-2 mb-10">
+      <h1 class="mb-18">{% trans %}Faster, Cheaper, Green Money{% endtrans %}</h1>
-          <div class="d-flex flex-wrap w-100">
+      <h6 class="green-500 mb-3">{% trans %}Impact{% endtrans %}</h6>
-            <a class="square square-50 d-flex card-b" href="https://github.com/ripple/xrpl-dev-portal" target="_blank">
-              <h3>XRPL.org on <img class="mt-2" src="assets/img/logos/github.png" alt="GitHub"></h3>
-            </a>
-            <a class="square square-50 d-flex card-b" href="https://github.com/XRPLF/XRPL-Standards" target="_blank">
-              <h3><i class="fa fa-comments-o mw-100 mr-2"></i> XRP Ledger Standards</h3>
-            </a>
-          </div>
-        </div>
-        <div class="col-md-5 order-1">
-          <p>{% trans %}Thank you for your interest in contributing to XRPL.org. This website was created for the community and is meant to be a living, breathing source of truth for XRP and XRP Ledger resources.{% endtrans %}</p>
-          <p>{% trans %}Contributing to XRPL.org is a great way to learn about the XRP Ledger. This portal is open-source and anyone can suggest changes. For more information, please <a href="https://github.com/ripple/xrpl-dev-portal/blob/master/CONTRIBUTING.md" target="_blank">read and consider the contributing guidelines</a>.{% endtrans %}</p>
-          <p>{% trans %}You may also be interested in learning about <a href="https://interledger.org/" target="_blank">Interledger</a>, <a href="https://ripplex.io/" target="_blank">RippleX</a>, and <a href="https://paystring.org/" target="_blank">PayString</a>.{% endtrans %}</p>
-        </div>
-      </section>
     </div>
-    <img id="page-contribute-bot" src="assets/img/backgrounds/bg-contribute.png">
   </div>
+</section>
+
+<section class="container-new py-26">
+  <div class="col-8 p-0 mx-10-until-sm">
+    <h3 class="h4 mb-6">{% trans %}Run an XRP Ledger Network Node{% endtrans %}</h3>
+    <p class="longform">{% trans %}Experience the true power of decentralization — 
by participating directly in the XRP Ledger consensus protocol.{% endtrans %}</h6>
+  </div>
+  <div class="mt-10 card-grid card-grid-4xN ml-5-until-md mr-5-until-md">
+    <a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="pink-purple">
+      <span class="card-new d-block">
+        <h4 class="h5">{% trans %}About the Server{% endtrans %}</h4>
+        <p class="mt-6 mb-8">{% trans %}rippled is the core peer-to-peer server that manages the XRP Ledger.{% endtrans %}</p>
+      </span>
+    </a>
+    <a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="neutral-blue">
+      <span class="card-new d-block">
+        <h4 class="h5">{% trans %}Install & Configure{% endtrans %}</h4>
+        <p class="mt-6 mb-8">{% trans %}Install and update the rippled server.{% endtrans %}</p>
+      </span>
+    </a>
+    <a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="light-green">
+      <span class="card-new d-block">
+        <h4 class="h5">{% trans %}Join UNL{% endtrans %}</h4>
+        <p class="mt-6 mb-8">{% trans %}Run a rippled server in validator mode. {% endtrans %}</p>
+      </span>
+    </a>
+    <a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="orange">
+      <span class="card-new d-block">
+        <h4 class="h5">{% trans %}Troubleshooting{% endtrans %}</h4>
+        <p class="mt-6 mb-8">{% trans %}Troubleshoot all kinds of problems with the rippled server.{% endtrans %}</p>
+      </span>
+    </a>
+  </div>
+</section>
+<section class="container-new py-26">
+  <div class="d-flex flex-column-reverse col-8 p-0 mx-10-until-sm">
+    <h3 class="h4">{% trans %}Join the Conversation{% endtrans %}</h3>
+    <h6 class="green-500 mb-3">{% trans %}Find us on the platforms below{% endtrans %}</h6>
+  </div>
+  <div class="mt-10 card-grid card-grid-4xN ml-5-until-md mr-5-until-md">
+    <a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="pink-purple">
+      <span class="card-new d-block">
+        <h4 class="h5">{% trans %}Decentralized Exchange{% endtrans %}</h4>
+        <p class="mt-6 mb-8">{% trans %}A high-performance decentralized peer-to-peer multi-currency exchange built directly into the blockchain{% endtrans %}</p>
+      </span>
+    </a>
+    <a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="neutral-blue">
+      <span class="card-new d-block">
+        <h4 class="h5">{% trans %}Cross-Currency Payments{% endtrans %}</h4>
+        <p class="mt-6 mb-8">{% trans %}Atomically settle multi-hop payments that cross currency or national boundaries with ease.{% endtrans %}</p>
+      </span>
+    </a>
+    <a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="light-green">
+      <span class="card-new d-block">
+        <h4 class="h5">{% trans %}Payment <br/>Channels{% endtrans %}</h4>
+        <p class="mt-6 mb-8">{% trans %}Batched micropayments with unlimited speed, secured with XRP.{% endtrans %}</p>
+      </span>
+    </a>
+    <a class="col-new col-new-card ls-none bg-grey-800 br-8 mb-16-sm" id="orange">
+      <span class="card-new d-block">
+        <h4 class="h5">{% trans %}Multi-Signing{% endtrans %}</h4>
+        <p class="mt-6 mb-8">{% trans %}Flexible options for custody and security of on-ledger accounts.{% endtrans %}</p>
+      </span>
+    </a>
+  </div>
+</section>
+<section class="container-new py-26">
+  <div class="col-md-6 offset-md-3 p-40 br-8 bg-grey-800 text-center">
+    <h2 class="h4 mb-8">{% trans %}Our Shared Vision for 
XRPL’s Future{% endtrans %}</h2>
+    <p class="mb-10">{% trans %}Together, we're building the greenest infrastructure to drive blockchain innovation that doesn't sacrifice utility or performance, to bring the developer community's vision to life.{% endtrans %}</p>
+    <a class="btn btn-primary">Learn More</a>
+  </div>
+</section>
 {% endblock %}
 
 

template/page-xrpl-foundation.html.jinja

@@ -0,0 +1,89 @@
+{% extends "base.html.jinja" %}
+{% block head %}
+
+    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+{% endblock %}
+
+{% block bodyclasses %}no-sidebar{% endblock %}
+{% block mainclasses %}landing{% endblock %}
+
+{% block breadcrumbs %}{% endblock %}
+
+{% block main %}
+<section class="py-26 text-center">
+  <div class="col-md-4 mx-auto text-center">
+    <div class="d-flex flex-column-reverse">
+      <h1 class="mb-18">{% trans %}Fostering the Development of  XRP Ledger{% endtrans %}</h1>
+      <h6 class="green-500 mb-3">{% trans %}XRPL Foundation{% endtrans %}</h6>
+    </div>
+  </div>
+</section>
+
+<section class="container-new py-26">
+  <div class="col-md-6 offset-md-3 p-40">
+  	<h4>{% trans %}The Vision{% endtrans %}</h4>
+    <h6 class="longform mb-10">{% trans %}The Foundation’s vision is to support the development of a diverse XRP Ledger community by focusing on governance, amendments to the core code, and an evolving list of robust validators — all key to creating a dynamic ecosystem that supports a growing and innovative Ledger. {% endtrans %}</h6>
+  </div>
+</section>
+
+<section class="container-new py-26">
+   <h3 class="h4 mx-10">{% trans %}Key Areas of Focus{% endtrans %}</h3>
+  <ul class="mt-10 card-grid card-grid-3xN">
+    <li class="col-new ls-none mb-16-sm">
+      <h4 class="mt-3 mb-0 h5">{% trans %}Core Technology{% endtrans %}</h4>
+      <p class="mt-8 mb-0">{% trans %}Enhance and develop infrastructure including high capacity hubs, full history servers, and monitoring systems.{% endtrans %}</p>
+    </li>
+    <li class="col-new ls-none mb-16-sm">
+      <h4 class="mt-3 mb-0 h5">{% trans %}Unique Node List{% endtrans %}</h4>
+      <p class="mt-8 mb-0">{% trans %}Establish a list of public and objective criteria for evaluating the performance of validators.{% endtrans %}</p>
+    </li>
+    <li class="col-new ls-none mb-16-sm">
+      <h4 class="mt-3 mb-0 h5">{% trans %}Developer Ecosystem{% endtrans %}</h4>
+      <p class="mt-8 mb-0">{% trans %}Support a growing ecosystem of global developers to help with the Ledger adoption and use.{% endtrans %}</p>
+    </li>
+    <li class="col-new ls-none mb-16-sm">
+      <h4 class="mt-3 mb-0 h5">{% trans %}Sustainability{% endtrans %}</h4>
+      <p class="mt-8 mb-0">{% trans %}Encourage scalable and sustainable practices.{% endtrans %}</p>
+    </li>
+    <li class="col-new ls-none mb-16-sm">
+      <h4 class="mt-3 mb-0 h5">{% trans %}Social and Community Initiatives{% endtrans %}</h4>
+      <p class="mt-8 mb-0">{% trans %}Support development of tools and platforms for financial inclusion globally.{% endtrans %}</p>
+    </li>
+  </ul>
+</section>
+
+<section class="container-new py-26">
+	<div class="mx-10">
+	  <h3 class="h4">{% trans %}XRP Ledger Foundation Values and Beliefs{% endtrans %}</h3>
+	  <h4 class="mt-10 mb-10 h5">{% trans %}We Value:{% endtrans %}</h4>
+	</div>
+  <ul class="card-grid card-grid-3xN mb-10">
+    <li class="col-new ls-none mb-16-sm">{% trans %}Our role as an independent organization acting in the best interests of the XRP Ledger community{% endtrans %}</li>
+    <li class="col-new ls-none mb-16-sm">{% trans %}Having the resources and support to compete on an equal playing field with other blockhain foundations to achieve our goals{% endtrans %}</li>
+    <li class="col-new ls-none mb-16-sm">{% trans %}Cultivating a diverse developer ecosystem, where many entities contribute to and benefit from the XRP Ledger{% endtrans %}</li>
+  </ul>
+  <div class="mx-10">
+	  <h4 class="mt-10 mb-10 h5">{% trans %}We Believe:{% endtrans %}</h4>
+	</div>
+  <ul class="card-grid card-grid-3xN">
+    <li class="col-new ls-none mb-16-sm">{% trans %}Trust is foundational to our mission and understand building trust is a slow, steady process{% endtrans %}</li>
+    <li class="col-new ls-none mb-16-sm">{% trans %}Close working relationships between developers and organizations that build on and contribute to the XRP Ledger are critical to its innovation and success{% endtrans %}</li>
+  </ul>
+
+</section>
+
+  
+{% endblock %}
+
+
+{% block endbody %}
+<script type="application/javascript">
+  gtag('config', 'UA-157720658-3', {'content_group1': 'Hub Pages'});
+</script>
+{% endblock %}