bring up to date w master

CONTRIBUTING.md

@@ -124,6 +124,7 @@ Use the following conventions when creating a page:
 - The HTML filename and MD filename should match exactly except for the file extension.
 - The filenames should closely match the title of the page, including words like "and" and "the", but should be in all lowercase with hyphens instead of spaces and punctuation. For example, `cash-a-check-for-an-exact-amount.md`. If you change the title of a page, change the filename too. (If it has already been published at another URL, leave a redirect from the old URL.)
 - Always start a page with a h1 header.
+- Don't link to the top h1 anchor of a page, link to the page itself without an anchor. This helps prevent broken links in translation. It's OK to link to later headers.
 - Don't use any formatting (like _italics_ or `code font`) in the title of the page.
 - Don't hard-wrap text in Markdown files.
 - For code samples, try to keep lines no longer than 80 columns wide.

content/concepts/introduction/xrp.md

@@ -30,7 +30,7 @@ The XRP Ledger was built over 2011 – early 2012 by Jed McCaleb, Arthur Britto
 
 ### Naming
 
-Originally, the XRP Ledger was called "Ripple" for the way the technology allowed payments [to ripple through multiple hops and currencies](rippling.html). For the native asset built into the ledger, the creators chose the ticker symbol "XRP" from the term "ripple credits" or "ripples" and the X prefix for non-national currencies in the ISO 4217 standard. The company registered itself as "Ripple Labs". The name "XRP" came to be used to refer to the asset in all contexts, to avoid confusion with the similar names for the technology and company, and eventually the company shortened its own name to "Ripple". In May 2018, [the community selected a new "X" symbol](https://twitter.com/xrpsymbol/status/1006925937571713025) to represent XRP to differentiate it from the triskelion logo that had previously been used for both the company and the digital asset.
+Originally, the XRP Ledger was called "Ripple" for the way the technology allowed payments [to ripple through multiple hops and currencies](rippling.html). For the native asset built into the ledger, the creators chose the ticker symbol "XRP" from the term "ripple credits" or "ripples" and the X prefix for non-national currencies in the [ISO 4217 standard](https://www.iso.org/iso-4217-currency-codes.html). The company registered itself as "Ripple Labs". The name "XRP" came to be used to refer to the asset in all contexts, to avoid confusion with the similar names for the technology and company, and eventually the company shortened its own name to "Ripple". In May 2018, [the community selected a new "X" symbol](https://twitter.com/xrpsymbol/status/1006925937571713025) to represent XRP to differentiate it from the triskelion logo that had previously been used for both the company and the digital asset.
 
 | XRP "X" Logo                           | Ripple triskelion                   |
 |:---------------------------------------|:------------------------------------|

dactyl-config.yml

@@ -1233,7 +1233,7 @@ pages:
         html: tutorials.html
         parent: docs.html
         top_nav_grouping: Article Types
-        template: pagetype-tutorials.html.jinja
+        template: page-tutorials.html.jinja
         blurb: The XRP Ledger tutorials walk you through the steps to learn and get started with the XRP Ledger and to use the ledger for advanced use cases.
         targets:
             - en
@@ -1242,7 +1242,7 @@ pages:
         html: tutorials.html
         parent: docs.html
         top_nav_grouping: Article Types
-        template: pagetype-tutorials.html.jinja
+        template: page-tutorials.html.jinja
         blurb: XRP Ledgerで一般的なタスクを実行するためのステップバイステップのガイダンスを紹介します。
         targets:
             - ja

img/ecosystem.svg

@@ -181,9 +181,9 @@
     ><rect x="0.5" width="168.5" height="68.5" y="0.5" clip-path="url(#clipPath10)" stroke="none"
     /></g
     ><g transform="translate(350,360)"
-    ><rect fill="none" x="0.5" width="168.5" height="68.5" y="0.5" clip-path="url(#clipPath10)"
+    ><rect fill="none" x="0.5" width="100" height="68.5" y="0.5" clip-path="url(#clipPath10)"
       /><text x="5" font-size="14px" y="34.2188" clip-path="url(#clipPath10)" font-family="sans-serif" stroke="none" xml:space="preserve"
-      >ripple-lib (JavaScript)</text
+      >xrpl.js</text
     ></g
     ><g fill="rgb(255,255,255)" fill-opacity="0" transform="translate(550,540)" stroke-opacity="0" stroke="rgb(255,255,255)"
     ><rect x="0.5" width="198.5" height="88.5" y="0.5" clip-path="url(#clipPath11)" stroke="none"

styles/_tutorials.scss

@@ -43,9 +43,16 @@ $footer-images: 3col-magenta-orange, 3col-green-blue, 3col-orange, 3col-purple,
 }
 
 .tutorial-card-grid {
-  grid-gap: 40px !important;
+  grid-gap: 16px !important;
   row-gap: 0 !important;
   &.card-grid {
+    &.card-grid-3xN {
+      grid-template-columns: 1fr;
+      grid-auto-rows: auto;
+      @include media-breakpoint-up(xl) {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+    }
     .card {
       margin-bottom: 2.5rem;
       background-position: bottom;

template/page-tutorials.html.jinja

@@ -26,28 +26,24 @@
         "description": "Using xrpl.py, a pure Python library.",
         "href": "get-started-using-python.html",
         "img": "./assets/img/logos/python.svg",
-        "external": true,
       },
       {
         "title": "Java",
         "description": "Using xrpl4j, a pure Java library.",
         "href": "get-started-using-java.html",
         "img": "./assets/img/logos/java.svg",
-        "external": true,
       },
       {
         "title": "Javascript",
         "description": "Using the xrpl.js client library.",
         "href": "get-started-using-javascript.html",
         "img": "./assets/img/logos/javascript.svg",
-        "external": true,
       },
       {
         "title": "HTTP & Websocket APIs",
         "description": "Access the XRP Ledger directly through the APIs of its core server.",
         "href": "http-websocket-apis.html",
         "img": "./assets/img/logos/globe.svg",
-        "external": true,
       },
     ]
   },
@@ -163,7 +159,7 @@
       {% set show_blurbs = True %}
       {% set depth= 1 %}
       {% macro tutorialCard(title, description, href, img, external) %}
-        <a class="card" href="{{href}}" target="_blank">
+        <a class="card float-up-on-hover" href="{{href}}" target="_blank">
             <div class="card-body">
               {% if img %}
               <div class="card-icon-container">