Merge pull request #394 from mDuo13/spacing-fixes

Style and Template Improvements
This commit is contained in:
Rome Reginelli
2018-05-20 15:41:44 -07:00
committed by GitHub
5 changed files with 153 additions and 136 deletions

View File

@@ -182,6 +182,7 @@ th {
.content table {
clear: right;
margin-bottom: 1rem;
}
/* Big draft warning at top of page so it's hard to mix up with the live site */
@@ -228,7 +229,6 @@ th {
color: #ffffff;
letter-spacing: .04em;
text-decoration: none;
font-weight: 300;
padding-bottom: 0.5rem;
}
.ripple-footer h5 a:hover {
@@ -307,6 +307,10 @@ th {
/* Button styling ----------------------------------------------------------- */
p + .readmore {
margin-top: 12px;
}
.readmore .btn {
font-size: 18px;
transition: 0.5s;
@@ -436,7 +440,7 @@ a.current {
.curated-links ol,
.children-display ul {
padding-left: 0;
margin-bottom: 4px;
margin-bottom: 0;
}
.level-1,
@@ -797,6 +801,11 @@ a.current {
/* Landing Pages ------------------------------------------------------------ */
.landing p {
font-size: 18px;
margin-bottom: 0;
}
.landing h2 {
font-weight: bold;
line-height: 40px;
@@ -810,7 +819,7 @@ a.current {
font-weight: 700;
}
.card-header.bg-dark h3.card-title {
.card-header h3.card-title {
margin-bottom: 0;
}
@@ -851,17 +860,17 @@ a.current {
}
.landing .card-header {
padding: 16px;
}
.landing .card-header:not(.bg-dark) + .card-body {
padding: 0 12px 12px 12px;
padding: 12px;
}
.landing .card-footer {
padding: 0 12px 12px 12px;
}
.landing .card-header + .card-body {
padding: 0 12px 12px 12px;
}
.landing .card-header a {
display: block;
margin: -12px;
@@ -870,6 +879,11 @@ a.current {
transition: 0.5s;
}
.landing .card-body > p {
padding: 0;
font-size: 18px;
}
.card-header.bg-dark {
color: white;
}
@@ -879,8 +893,7 @@ a.current {
color: #FF9900;
}
.landing .card .blurb,
.child-blurb {
.landing .card .blurb {
margin-top: 1rem;
}
@@ -905,10 +918,6 @@ a.current {
padding: 1px;
}
.landing .curated-links li:first-child {
margin-top: 5px;
}
.recently-updated-date {
font-style: italic;
color: #6B7075;
@@ -922,6 +931,7 @@ a.current {
background-size: cover;
background-position: center center;
color: white;
line-height: 38px;
}
.splash-head h1 {
@@ -929,9 +939,8 @@ a.current {
}
.splash-head p {
font-size: 18px;
font-weight: 300;
text-shadow: 0px 1px 2px #171C21;
margin-bottom: 0;
}
.splash-head p .btn {

View File

@@ -1,4 +1,4 @@
<nav class="breadcrumbs-wrap {% if currentpage.sidebar == 'disabled' %}p-3 px-sm-5{% else %}p-3{% endif %}" aria-label="breacrumb">
<nav class="breadcrumbs-wrap {% if currentpage.sidebar == 'disabled' %}p-3 px-sm-4{% else %}p-3{% endif %}" aria-label="breacrumb">
<ul class="breadcrumb bg-white">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
{% if currentpage.funnel and currentpage != pages|selectattr('funnel', 'equalto', currentpage.funnel)|first %}

View File

@@ -28,9 +28,9 @@
</section>
<section class="container-fluid py-3 p-sm-4 bg-white" id="home_first_shortcuts">
<div class="card-deck mb-4">
<div class="card-deck">
<div class="card mr-xl-5">
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title"><img class="card-title-icon" src="assets/img/reference-book.svg" alt="(reference book icon)" width="32" height="32" /> Go to the References</h3>
</div><!--/.card-header-->
@@ -42,11 +42,15 @@
<li><a href="data-api.html">Data API</a></li>
</ul>
</div><!--/.curated-links-->
<a href="references.html" class="btn btn-secondary">View All References <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a href="references.html" class="btn btn-secondary">View All References <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div><!--/.card-footer-->
</div><!--/.card-->
<div class="card mr-xl-5">
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title"><img class="card-title-icon" src="assets/img/airplane.svg" alt="(airplane icon)" width="32" height="32" /> Get Started</h3>
</div><!--/.card-header-->
@@ -69,8 +73,12 @@
{% set parent_page = pages|selectattr("name", "equalto", "Use Cases")|first %}
{% set depth = 1 %}
{% include 'template-page-children.html' %}
<a href="use-cases.html" class="btn btn-secondary">View All Use Cases <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a href="use-cases.html" class="btn btn-secondary">View All Use Cases <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div><!--/.card-footer-->
</div><!--/.card-->
</div><!--/.card-deck-->
@@ -121,7 +129,7 @@
<div class="container">
<div class="card-deck mb-4">
<div class="card-deck">
<a href="xrp-ledger-overview.html#the-best-digital-asset" class="card m-3">
<img class="card-img-top" src="assets/img/payment-card.svg" alt="(XRP triskellion)" />
@@ -210,7 +218,7 @@
</div>
<div class="container">
<div class="row card-deck mb-4 p-xl-5">
<div class="row card-deck mx-4 mt-4 mb-0">
<div class="card">
<div class="card-header">
@@ -270,11 +278,10 @@
<div class="col">
<a class="interledger-link card" href="https://interledger.org/" target="_blank">
<div class="card-body">
<p>
<img class="project-icon" src="assets/img/ilp_logo.svg" />
<span class="project-name">Interledger</span>
<img class="project-icon" src="assets/img/ilp_logo.svg" />
<h3 class="card-title">Interledger
<i class="fa fa-external-link" aria-hidden="true"></i>
</p>
</h3>
<p class="project-summary">Interledger is an open protocol suite for sending payments across different ledgers.</p>
<p class="project-summary">Like routers on the Internet, connectors route packets of money across independent payment networks. The open architecture and minimal protocol enable interoperability for any value transfer system.</p>
<p class="project-summary">Interledger is not tied to any one company, blockchain, or currency.</p>

View File

@@ -3,98 +3,101 @@
{% block mainclasses %}landing{% endblock %}
{% block main %}
<section class="container-fluid bg-white p-3 px-sm-5">
<h1 class="main-page-header">XRP Ledger Documentation</h1>
<div class="blurb">
<p>Dive into our documentation and start integrating with the XRP Ledger.</p>
</div>
</section>
<section class="container-fluid bg-white p-3 p-sm-4">
<h1 class="main-page-header">XRP Ledger Documentation</h1>
<p class="blurb">Dive into our documentation and start integrating with the XRP Ledger.</p>
</section>
<section class="container-fluid bg-light p-3 px-sm-5">
<div class="card-deck p-2">
{% set doc_types = [] %}
{% for page in pages %}
{% if page.doc_type is defined and page.doc_type not in doc_types %}
{% set doc_type_top = pages|selectattr('doc_type', 'equalto', page.doc_type)|first %}
<section class="container-fluid bg-light p-3 p-sm-4">
<div class="card-deck">
{% set doc_types = [] %}
{% for page in pages %}
{% if page.doc_type is defined and page.doc_type not in doc_types %}
{% set doc_type_top = pages|selectattr('doc_type', 'equalto', page.doc_type)|first %}
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title"><a href="{{doc_type_top.html}}">{{doc_type_top.name}} <i class="fa fa-arrow-right" aria-hidden="true"></i></a></h3>
</div><!--/.card-header-->
<div class="card-body">
{% if page.blurb is defined %}
<p class="blurb">{{page.blurb}}</p>
{% endif %}
{% set parent_page = doc_type_top %}
{% set depth = 1.5 %}
{% include 'template-page-children.html' %}
</div><!--/.card-body-->
</div><!--/.card-->
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">{{doc_type_top.name}}</h3>
</div><!--/.card-header-->
<div class="card-body">
{% if page.blurb is defined %}
<p class="blurb">{{page.blurb}}</p>
{% endif %}
{% set parent_page = doc_type_top %}
{% set depth = 1.5 %}
{% include 'template-page-children.html' %}
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a class="btn btn-secondary" href="{{doc_type_top.html}}">View All {{doc_type_top.name}} <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div><!--/.card-footer-->
</div><!--/.card-->
{% set _ = doc_types.append(page.doc_type) %}
{% endif %}
{% endfor %}
</div><!--/.card-deck-->
<div class="card-deck pt-3 pt-sm-4">
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">Get Started</h3>
</div><!--/.card-header-->
<div class="card-body">
<div class="curated-links">
<ul>
<li><a href="websocket-api-tool.html">Make a call to the rippled API</a></li>
<li><a href="xrp-test-net-faucet.html">Access the XRP Ledger Test Net</a></li>
<li><a href="concepts.html">Understand XRP Ledger Concepts</a></li>
</ul>
</div><!--/.curated-links-->
</div><!--/.card-body-->
</div><!--/.card-->
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">Popular Docs</h3>
</div><!--/.card-header-->
<div class="card-body">
<div class="curated-links">
<ol>
<li><a href="public-rippled-methods.html">rippled API Public Methods Reference</a></li>
<li><a href="accounts.html">Accounts</a></li>
<li><a href="install-rippled.html">Install rippled</a></li>
<li><a href="rippleapi-reference.html">RippleAPI for JavaScript Reference</a></li>
</ol>
</div><!--/.curated-links-->
</div><!--/.card-body-->
</div><!--/.card-->
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">Recently Updated</h3>
</div><!--/.card-header-->
<div class="card-body">
<div class="curated-links">
<ol>
{% for link in target.recently_updated %}
{% set linkpage = pages|selectattr("html", "equalto", link.html)|first %}
<li><a href="{{linkpage.html}}">{{linkpage.name}}{% if link.date is defined %} <span class="recently-updated-date">({{link.date}})</span>{% endif %}</a></li>
{% endfor %}
</ol>
</div><!--/.curated-links-->
</div><!--/.card-body-->
</div><!--/.card-->
{% set _ = doc_types.append(page.doc_type) %}
{% endif %}
{% endfor %}
</div><!--/.card-deck-->
<div class="card-deck p-2">
</section>
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">Get Started</h3>
</div><!--/.card-header-->
<div class="card-body">
<div class="curated-links">
<ul>
<li><a href="websocket-api-tool.html">Make a call to the rippled API</a></li>
<li><a href="xrp-test-net-faucet.html">Access the XRP Ledger Test Net</a></li>
<li><a href="concepts.html">Understand XRP Ledger Concepts</a></li>
</ul>
</div><!--/.curated-links-->
</div><!--/.card-body-->
</div><!--/.card-->
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">Popular Docs</h3>
</div><!--/.card-header-->
<div class="card-body">
<div class="curated-links">
<ol>
<li><a href="public-rippled-methods.html">rippled API Public Methods Reference</a></li>
<li><a href="accounts.html">Accounts</a></li>
<li><a href="install-rippled.html">Install rippled</a></li>
<li><a href="rippleapi-reference.html">RippleAPI for JavaScript Reference</a></li>
</ol>
</div><!--/.curated-links-->
</div><!--/.card-body-->
</div><!--/.card-->
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title">Recently Updated</h3>
</div><!--/.card-header-->
<div class="card-body">
<div class="curated-links">
<ol>
{% for link in target.recently_updated %}
{% set linkpage = pages|selectattr("html", "equalto", link.html)|first %}
<li><a href="{{linkpage.html}}">{{linkpage.name}}{% if link.date is defined %} <span class="recently-updated-date">({{link.date}})</span>{% endif %}</a></li>
{% endfor %}
</ol>
</div><!--/.curated-links-->
</div><!--/.card-body-->
</div><!--/.card-->
</div><!--/.card-deck-->
</section>
<section class="container-fluid p-3 p-lg-5">
<h2 id="full-doc-index">Full Documentation Index</h2>
<div class="row">
<div class="col-md-8">
{% set parent_page = currentpage %}
{% set depth = 5 %}
{% include 'template-page-children.html' %}
</div>
<section class="container-fluid p-3 p-sm-4">
<h2 id="full-doc-index">Full Documentation Index</h2>
<div class="row">
<div class="col-md-8">
{% set parent_page = currentpage %}
{% set depth = 5 %}
{% include 'template-page-children.html' %}
</div>
</section>
</div>
</section>
{% endblock %}

View File

@@ -3,38 +3,38 @@
{% block mainclasses %}landing{% endblock %}
{% block main %}
<section class="container-fluid bg-white p-3 px-sm-5">
<h1 class="main-page-header">References</h1>
<p class="blurb">{{currentpage.blurb}}</p>
<section class="container-fluid bg-white p-3 px-sm-4 pb-sm-4">
<h1 class="main-page-header">References</h1>
<p class="blurb">{{currentpage.blurb}}</p>
</section>
<section class="container-fluid bg-light p-3 px-sm-5">
<section class="container-fluid bg-light p-3 px-sm-4 pb-sm-4">
<h2><a href="rippled-api.html">rippled API Reference</a></h2>
<div class="blurb">
<p>Use the <code>rippled</code> API to communicate with a <code>rippled</code> server, the core peer-to-peer server that manages the XRP Ledger.</p>
</div>
<div class="card-deck p-2">
<p class="blurb">Use the <code>rippled</code> API to communicate with a <code>rippled</code> server, the core peer-to-peer server that manages the XRP Ledger.</p>
<div class="card-deck pt-3 pt-sm-4">
{% for page in pages|selectattr("supercategory", "equalto", "rippled API")|list %}
{% if loop.index != 1 and page == pages|selectattr("category", "equalto", page.category)|first %}
<div class="card">
<div class="card-header bg-dark">
<h3 class="card-title"><a href="{{page.html}}">{{page.name}} <i class="fa fa-arrow-right" aria-hidden="true"></i></a></h3>
<h3 class="card-title">{{page.name}}</h3>
</div><!--/.card-header-->
<div class="card-body">
<p class="ref-blurb">{{page.blurb}}</p>
<p class="blurb">{{page.blurb}}</p>
{% set depth = 1 %}
{% set parent_page = page %}
{% include 'template-page-children.html' %}
</div><!--/.card-body-->
<div class="card-footer">
<div class="readmore">
<a class="btn btn-secondary" href="{{page.html}}">View All {{page.name}} <i class="fa fa-arrow-right" aria-hidden="true"></i></a>
</div>
</div><!--/.card-footer-->
</div><!--/.card-->
{# go to new row after admin methods #}
{% if page.html == "admin-rippled-methods.html" %}
</div><!--/.card-deck-->
<div class="card-deck p-2">
<div class="card-deck pt-3 pt-sm-4">
{% endif %}
{% endif %}
{% endfor %}
@@ -43,13 +43,11 @@
</section>
<section class="container-fluid bg-white p-5">
<section class="container-fluid bg-white p-3 px-sm-4 pb-sm-4">
<h2>Other XRP Ledger Interfaces</h2>
<div class="blurb col-sm-12">
<p>Here are a few other ways to interact with the XRP Ledger.</p>
</div>
<div class="card-deck p-2">
<p class="blurb">Here are a few other ways to interact with the XRP Ledger.</p>
<div class="card-deck pt-3 pt-sm-4">
{% for page in pages|selectattr("doc_type", "equalto", "References")|selectattr("supercategory", "ne", "rippled API") %}
{% if loop.index != 1 and page == pages|selectattr("category", "equalto", page.category)|first %}
@@ -58,7 +56,7 @@
<h3 class="card-title"><a href="{{page.html}}">{{page.name}}</a></h3>
</div><!--/.card-header-->
<div class="card-body">
<p class="ref-blurb">{{page.blurb}}</p>
<p class="blurb">{{page.blurb}}</p>
{% if page.curated_anchors is defined %}
<div class="curated-links">
<ul>