ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-19 19:25:51 +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

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;