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

Tweak 3-column layout

Browse Source
This commit is contained in:
mDuo13
2021-07-15 20:27:10 -07:00
parent 2409b40d90
commit 817a3f0e59
13 changed files with 87 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal2021.css
View File

File diff suppressed because one or more lines are too long

1
styles/_breadcrumbs.scss
View File

@@ -3,6 +3,7 @@
.breadcrumbs-wrap {
position: relative;
z-index: 11;
padding: 0 2rem 2rem 2rem;
}
.breadcrumb-item + .breadcrumb-item:before {

2
styles/_cards.scss
View File

@@ -32,6 +32,8 @@ a.card:hover h3 {
.card-deck {
margin-top: 2.5rem;
margin-left: 0;
margin-right: 0;
flex-grow: 1;
.card {
background-position: bottom;

2
styles/_footer.scss
View File

@@ -1,7 +1,7 @@
/* Footer ------------------------------------------------------------------- */
.xrpl-footer {
padding: 7.5rem 2.5rem;
padding: 7.5rem 2rem;
@include media-breakpoint-up(lg) {
background-image: url(../img/backgrounds/footer.svg);

2
styles/_github-edit.scss
View File

@@ -7,5 +7,5 @@
padding-left: 48px;
text-decoration: none;
margin-bottom: 1rem;
margin-top: .75rem;
margin-top: 0;
}

162
styles/_layout.scss
View File

@@ -15,19 +15,6 @@ section {
margin-top: 80px;
}
// Normally-padded pages
.padded-landing,
.sidebar-primary #main_content_wrapper {
/* Mobile first */
padding: 0 1rem 1rem 1rem;
@include media-breakpoint-up(md) {
padding: 0 2rem 2rem 2rem;
}
@include media-breakpoint-up(lg) {
padding: 0 3rem 3rem 3rem;
}
}
// Square blocks ---------------------------------------------------------------
.square {
@@ -95,6 +82,11 @@ section {
}
.col-lg {
padding-left: 0;
padding-right: 0;
}
@for $i from 1 through 5 {
.cols-of-#{$i} {
@include media-breakpoint-up(lg) {
@@ -108,88 +100,15 @@ section {
.card-grid {
display: grid;
gap: 1px;
grid-gap: 40px;
padding: 0;
width: 100%;
&.card-grid-2x2 {
/* left half is a hero area; right half is a 2x2 grid. */
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: auto auto;
.section-hero {
grid-row-end: span 2;
}
@include media-breakpoint-down(md) {
/* Switch to 1-column layout on smaller widths */
grid-template-columns: 1fr;
grid-template-rows: repeat(5, auto);
}
}
&.card-grid-2x1 {
/* left half is a hero area; right half is a 2x1 grid. */
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr;
.section-hero {
grid-row-end: span 1;
}
@include media-breakpoint-down(md) {
/* Switch to 1-column layout on smaller widths */
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
}
&.card-grid-2x4 {
/* left half is a hero area; right half is a 2x4 grid. Total grid is 4x4 */
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
.section-hero {
grid-row-end: span 4;
}
@include media-breakpoint-down(md) {
/* Switch to 1-column layout on smaller widths */
grid-template-columns: 1fr;
grid-template-rows: repeat(5, auto);
.section-hero {
grid-row-end: span 1;
}
}
}
&.card-grid-4xN {
/* 4 equal columns and any number of auto-sized rows. */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-auto-rows: auto;
/* No "hero" blocks expected here. */
@include media-breakpoint-down(md) {
/* Switch to 1-column layout on smaller widths */
grid-template-columns: 1fr;
}
.col-new {
margin: 20px;
@include media-breakpoint-down(md) {
margin: 20px 0;
}
}
}
&.card-grid-3xN {
/* 3 equal columns and any number of auto-sized rows. */
grid-template-columns: 1fr 1fr 1fr;
grid-auto-rows: auto;
/* No "hero" blocks expected here. */
@include media-breakpoint-down(md) {
/* Switch to 1-column layout on smaller widths */
grid-template-columns: 1fr;
@@ -208,8 +127,6 @@ section {
grid-auto-rows: auto;
gap: 40px;
/* No "hero" blocks expected here. */
@include media-breakpoint-down(md) {
/* Switch to 1-column layout on smaller widths */
grid-template-columns: 1fr;
@@ -229,21 +146,6 @@ section {
}
}
&.card-grid-Nx1 {
/* 1 row of equal sized columns */
grid-auto-flow: column;
grid-auto-columns: 1fr;
grid-template-rows: auto;
/* No "hero" blocks expected here. */
@include media-breakpoint-down(md) {
/* Switch to 1-column layout on smaller widths */
grid-auto-flow: row;
grid-template-columns: 1fr;
}
}
.card {
padding: 40px;
border: 0;
@@ -271,23 +173,17 @@ $columns: 12; // Number of columns in the grid system
display: flex;
flex-wrap: wrap;
margin: 0 auto;
padding: 0 32px;
max-width: 100%;
z-index: 1;
@include media-breakpoint-up(xl) {
max-width: 1280px;
}
@include media-breakpoint-down(xl) {
max-width: 1040px;
}
@include media-breakpoint-down(lg) {
max-width: 832px;
}
@include media-breakpoint-down(md) {
@include media-breakpoint-up(md) {
max-width: 608px;
}
@include media-breakpoint-down(sm) {
max-width: 100%;
margin: 0 32px;
@include media-breakpoint-up(lg) {
max-width: 832px;
}
@include media-breakpoint-up(xl) {
max-width: 1280px;
}
// create columns
@for $width from 1 through $columns {
@@ -345,14 +241,42 @@ $columns: 12; // Number of columns in the grid system
}
}
// Misc. layout styles ---------------------------------------------------------
// 3-column layout for docs pages ----------------------------------------------
.xrp-ledger-dev-portal.sidebar-primary .main {
z-index: 5;
padding: 44px 24px 48px;
padding: 2rem;
min-height: 700px;
}
.left-sidebar {
padding: 2rem;
@include media-breakpoint-up(lg) {
position: sticky;
max-height: calc(100vh - 80px);
top: 80px;
left: 0;
overflow: auto;
border: 0;
}
}
.right-sidebar {
padding: 2rem;
border: 1px solid $gray-600;
@include media-breakpoint-up(lg) {
position: sticky;
max-height: calc(100vh - 80px);
top: 80px;
right: 0;
overflow: auto;
border: 0;
}
}
/* Responsive design for different viewscreens ------------------------------ */
@include media-breakpoint-down(md) {

53
styles/_side-nav.scss
View File

@@ -52,8 +52,6 @@ aside .active-parent > a {
}
.dactyl-tree-nav {
padding: 44px 24px 48px 0;
position: relative;
nav {
margin-left: 1rem;
@@ -80,9 +78,14 @@ aside .active-parent > a {
padding: 0.25rem 1rem;
font-size: 0.9rem;
}
&.nav-parent .nav-link {
padding-left: 0;
font-size: 1.125rem;
&.nav-parent {
padding-top: 0;
.nav-link {
padding-left: 0;
padding-top: 0;
font-size: 1.125rem;
}
}
.nav-toggler + .nav-link {
@@ -108,38 +111,30 @@ aside .active-parent > a {
/* Right navigation --------------------------------------------------------- */
.right-sidebar {
padding: 44px 0 24px 48px;
@include media-breakpoint-down(md) {
padding: 1.5rem;
border: 1px solid $gray-600;
}
.toc-header {
font-weight: bold;
font-size: 14px;
padding: 1rem 0;
.toc-header {
font-weight: bold;
font-size: 14px;
padding: 1rem 0;
h4 {
line-height: 20px;
font-size: 1.2em;
padding: 0;
margin: 0;
}
h4 {
line-height: 20px;
font-size: 1.2em;
padding: 0;
margin: 0;
}
}
#page-toc-wrapper {
position: sticky;
max-height: 85vh;
top: 48px;
overflow: auto;
padding: 0;
border: none;
// position: sticky;
// max-height: 85vh;
// top: 48px;
// overflow: auto;
// padding: 0;
// border: none;
.card-body {
padding: 0;
// padding: 0;
list-style-type: none;
}
}

10
styles/_top-nav.scss
View File

@@ -10,7 +10,7 @@
white-space: pre;
-webkit-transition: opacity .2s ease, color .2s ease;
transition: opacity .2s ease, color .2s ease;
padding-left: 2rem;
.logo {
margin-left: 0;
@@ -165,10 +165,11 @@
// Desktop only styles -------------------------------------------------------
@include media-breakpoint-up(lg) {
padding: 0 3rem;
padding: 0 2rem;
.navbar-brand {
margin-left: 0;
padding-left: 0;
}
.dropdown-toggle {
@@ -303,12 +304,9 @@
// Mobile only styles --------------------------------------------------------
@include media-breakpoint-down(md) {
.navbar-brand {
padding-left: 15px;
}
.navbar-toggler {
border: 0;
padding: 30px;
padding: 30px 2rem;
font-size: 1rem;
display: inline-block;

2
template/base.html.jinja
View File

@@ -108,7 +108,7 @@
</main>
{% if currentpage.sidebar is undefined or currentpage.sidebar != "disabled" %}
<!-- Left sidebar last so it's at the end for mobile -->
<aside class="sidebar col-md-5 col-lg-3 order-md-1" role="complementary">
<aside class="left-sidebar col-md-5 col-lg-3 order-md-1" role="complementary">
{% block left_sidebar %}
{% set docs_top = pages|selectattr('html', 'defined_and_equalto', 'docs.html')|list|first %}
{% if docs_top.is_ancestor_of(currentpage.html) %}

2
template/component-footer.html.jinja
View File

@@ -17,7 +17,7 @@
<section class="container-fluid mt-20 absolute-bottom-footer">
<div class="d-lg-flex">
<div class="d-lg-flex row">
<a href="{% if target.prefix %}{{target.prefix}}{% else %}/{% endif %}" class="footer-brand"><img src="{{currentpage.prefix}}assets/img/XRPLedger_DevPortal-white.svg" class="logo" height="24" alt="{{target.display_name}}" /></a>
<span class="flex-grow-1">&nbsp;</span>
<div class="copyright-license">&copy; 2021 XRP Ledger. <a href="https://raw.githubusercontent.com/ripple/ripple-dev-portal/master/LICENSE">{% trans %}Open Source.{% endtrans %}</a>

12
template/page-docs.html.jinja
View File

@@ -1,6 +1,6 @@
{% extends "base.html.jinja" %}
{% block mainclasses %}landing padded-landing page-docs-index landing-builtin-bg{% endblock %}
{% block mainclasses %}landing page-docs-index landing-builtin-bg{% endblock %}
{% block breadcrumbs %}{% endblock %}
@@ -44,7 +44,7 @@
</section>
<section class="container-new mb-50-until-sm" id="software-and-sdks">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<div class="d-flex flex-column-reverse col-sm-8">
<h2 class="h4">{% trans %}Software and SDKs{% endtrans %}</h2>
<h6 class="green-500 mb-3">{% trans %}Start Developing{% endtrans %}</h6>
</div>
@@ -61,7 +61,7 @@
</section><!--/#software-and-sdks-->
<section class="container-new mb-50-until-sm" id="doc-types">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<div class="d-flex flex-column-reverse col-sm-8">
<h2 class="h4">{% trans %}Article types{% endtrans %}</h2>
<h6 class="green-500 mb-3">{% trans %}Dive In{% endtrans %}</h6>
</div>
@@ -72,7 +72,7 @@
</section><!--/#doc-types-->
<section class="container-new mb-50-until-sm" id="run-a-network-node">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<div class="d-flex flex-column-reverse col-sm-8">
<h2 class="h4">{% trans %}Run an XRP Ledger network node{% endtrans %}</h2>
<h6 class="green-500 mb-3">{% trans %}Participate in the Network{% endtrans %}</h6>
</div>
@@ -86,7 +86,7 @@
</section><!--/#run-a-network-node-->
<section class="container-new mb-50-until-sm" id="docs-hot-topic">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<div class="d-flex flex-column-reverse col-sm-8">
<h2 class="h4">{% trans %}NFTs{% endtrans %}</h2>
<h6 class="green-500 mb-3">{% trans %}Hot Topic{% endtrans %}</h6>
</div>
@@ -105,7 +105,7 @@
</section><!--/#docs-hot-topic-->
<section class="container-new mb-50-until-sm doc-index">
<div class="d-flex flex-column-reverse col-sm-8 p-0">
<div class="d-flex flex-column-reverse col-sm-8">
<h2 id="full-doc-index" class="h4">{% trans %}Full documentation index{% endtrans %}</h2>
<h6 class="green-500 mb-3">{% trans %}See Everything{% endtrans %}</h6>
</div>

2
template/page-references.html.jinja
View File

@@ -1,6 +1,6 @@
{% extends "base.html.jinja" %}
{% block mainclasses %}landing padded-landing page-references{% endblock %}
{% block mainclasses %}landing page-references{% endblock %}
{% block main %}
<section class="py-20 text-center">

13
template/page-uses.html.jinja
View File

@@ -67,7 +67,7 @@
</div>
<section class="container-new py-26">
<div class="col-sm-7 p-0 mx-10-until-sm">
<div class="col-sm-7">
<div class="d-flex flex-column-reverse">
<h3 class="h4 h2-sm">{% trans %}Businesses and projects running<br class="until-sm"> on the XRP Ledger{% endtrans %}</h3>
<h6 class="green-500 mb-3">{% trans %}Solving Real Problems Across Industries{% endtrans %}</h6>
@@ -132,17 +132,6 @@
"title": _("Security"),
"description": _("Xrplorer offers services and tools that help prevent and combat fraudulent activity on the XRPL as well as custom APIs and analytics that supplement the XRPL APIs where they are not enough.")},
] %}
<!-- <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 card-deck">
{% for card in cards %}
<a class="card col" href="{{card.link}}" target="_blank" id="{{card.id}}">
<div class="card-body">
<div class="head-logo"><img src="{{card.img}}" alt="{{card.name}}" {% if card.imgclasses %}class="{{card.imgclasses}}"{% endif %}/></div>
<h4 class="card-title h5">{{card.title}}</h4>
</div>
<div class="card-footer">&nbsp;</div>
</a>
{% endfor %}
</div> -->
<div class="mt-10 card-grid card-grid-3xN">
{% for card in cards %}