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

Nav, link, & Bootstrap changes

Browse Source
This commit is contained in:
mDuo13
2021-06-29 18:46:30 -07:00
parent 11c742bbb7
commit 177b361d37
13 changed files with 206 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/devportal2020.css
View File

File diff suppressed because one or more lines are too long

55
assets/img/icons/arrow-right-purple.svg
View File

@@ -1,4 +1,53 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5 12H19" stroke="#9A52FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 5L19 12L12 19" stroke="#9A52FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
version="1.1"
id="svg250"
sodipodi:docname="arrow-right-purple.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs254" />
<sodipodi:namedview
id="namedview252"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="36.333333"
inkscape:cx="-0.66055046"
inkscape:cy="7.9954128"
inkscape:window-width="1920"
inkscape:window-height="1053"
inkscape:window-x="1080"
inkscape:window-y="840"
inkscape:window-maximized="1"
inkscape:current-layer="svg250" />
<path
d="M 1,8 H 15"
stroke="#9a52ff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
id="path246" />
<path
d="m 8,1 7,7 -7,7"
stroke="#9a52ff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
id="path248" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 316 B

After

Width:  |  Height:  |  Size: 1.4 KiB

55
assets/img/icons/arrow-up-right.svg
View File

@@ -1,4 +1,53 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.56299 17.343L17.4625 7.44352" stroke="#9A52FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.5625 7.44336L17.462 7.44336L17.462 17.3429" stroke="#9A52FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="11.4"
height="11.39964"
viewBox="0 0 11.4 11.39964"
fill="none"
version="1.1"
id="svg129"
sodipodi:docname="arrow-up-right.svg"
inkscape:version="1.1 (c4e8f9ed74, 2021-05-24)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs133" />
<sodipodi:namedview
id="namedview131"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="true"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="35.208333"
inkscape:cx="-3.7491124"
inkscape:cy="5.2970414"
inkscape:window-width="1920"
inkscape:window-height="1053"
inkscape:window-x="1080"
inkscape:window-y="840"
inkscape:window-maximized="1"
inkscape:current-layer="svg129" />
<path
d="M 0.75049,10.64964 10.65,0.75016"
stroke="#9a52ff"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
id="path125" />
<path
d="m 0.75,0.75 h 9.8995 v 9.89954"
stroke="#9a52ff"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
id="path127" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 371 B

After

Width:  |  Height:  |  Size: 1.5 KiB

3
dactyl-config.yml
View File

@@ -245,6 +245,7 @@ pages:
html: xrp-overview.html
parent: xrp-ledger-overview.html
top_nav_grouping: XRP
top_nav_name: About XRP
sidebar: disabled
targets:
- en
@@ -3724,7 +3725,7 @@ pages:
parent: index.html
template: page-community.html.jinja
sidebar: disabled
blurb: Contribute to XRPL.org
blurb: Join the conversation
top_nav_hero_image: assets/img/icons/contribute.svg
targets:
- en

2
styles/_buttons.scss
View File

@@ -97,8 +97,6 @@ p + .readmore {
right: 36px;
font-weight: 700;
z-index: 1000;
color: white;
background-color: transparent;
&::after {
display: none;

5
styles/_code-tabs.scss
View File

@@ -1,4 +1,4 @@
$code-bg: $gray-900;
$code-bg: $gray-800;
$code-padding: 2rem;
// Code Tabs -------------------------------------------------------------------
@@ -71,8 +71,9 @@ pre {
}
&:hover {
text-decoration: none;
background-color: $gray-900;
background-color: $code-bg;
color: $primary;
padding-bottom: 0.625rem;
}
}

27
styles/_colors.scss
View File

@@ -45,7 +45,7 @@ $blue-purple-600: #5F00E5;
$blue-purple-700: #4A00B2;
$blue-purple-800: #350080;
$blue-purple-900: #20004C;
$purple: $blue-purple-500;
$purple: $blue-purple-400;
$red-purple-100: #FBE5FF;
$red-purple-200: #F2B2FF;
@@ -92,24 +92,26 @@ $yellow-900: #4B4C00;
$yellow: $yellow-500;
// Common colors & colors used in Bootstrap ------------------------------------
$primary: $green-500;
$primary: $purple;
$secondary: $gray-200;
$light: $white;
$dark: $black;
$dark: $gray-900;
$success: $green-500;
$info: $blue-500;
$warning: $yellow-500; // "caution" callout style
$danger: $magenta-500; // "warning" callout style
// Bootstrap elements
$body-bg: $black;
$body-bg: $gray-900;
$navbar-light-color: $gray-600;
$code-color: $secondary;
$body-color: $white;
$headings-color: $white;
$text-muted: $gray-200;
$link-hover-color: $purple;
$link-color: $white;
$breadcrumb-bg: $black;
$breadcrumb-bg: $body-bg;
$breadcrumb-active-color: $gray-400;
$card-bg: $gray-800;
@@ -119,19 +121,22 @@ $dropdown-divider-bg: $black;
$dropdown-border-color: $gray-900;
$dropdown-color: $secondary;
$dropdown-link-color: $white;
$dropdown-link-hover-color: $blue-purple-500;
$dropdown-link-hover-color: $purple;
$dropdown-link-hover-bg: $gray-900;
$dropdown-link-active-bg: transparent;
$navbar-dark-color: $white;
$navbar-dark-hover-color: $blue-purple-500;
$navbar-dark-active-color: $primary;
$navbar-dark-hover-color: $purple;
$navbar-dark-active-color: $white;
$input-bg: $gray-900;
$input-disabled-bg: $gray-800;
$input-bg: $gray-800;
$input-disabled-bg: $gray-600;
$input-color: $white;
$input-border-color: transparent;
$input-box-shadow: inset 0 1px 1px rgba($primary, .075);
$input-box-shadow: none;
$btn-box-shadow: none;
$btn-active-box-shadow: none;
$btn-focus-box-shadow: none;
$input-placeholder-color: $gray-400;
$input-group-addon-bg: $gray-600;
$input-group-addon-color: $white;

27
styles/_external-links.scss
View File

@@ -4,9 +4,10 @@
background-image: url(../img/icons/arrow-up-right.svg);
background-repeat: no-repeat;
display: inline-block;
background-size: 1em;
padding: 0 .5em;
background-position: left 0 bottom .2em;
background-size: 10px;
padding: 0 4px 0 8px;
width: 14px;
background-position: left 0 bottom 4px;
transition: background-position 100ms ease-in-out;
// Note: the background position is based on the padding, so it might
@@ -16,7 +17,7 @@
}
&:hover::after {
background-position: left .2em bottom .4em;
background-position: left 4px bottom 8px;
}
.fa-external-link {
@@ -24,13 +25,15 @@
}
}
.top-nav .dropdown .external-link {
.top-nav .dropdown .external-link,
.xrpl-footer .external-link {
&::after {
background-position: left 0 bottom -.1em;
background-position: left 8px bottom 2px;
width: 2rem;
}
&:hover::after {
background-position: left .2em bottom .1em;
background-position: left 12px bottom 6px;
}
}
@@ -57,13 +60,3 @@
}
}
}
.xrpl-footer .external-link {
&::after {
background-position: left 0 bottom 0;
}
&:hover::after {
background-position: left .2em bottom .2em;
}
}

31
styles/_font.scss
View File

@@ -5,10 +5,7 @@ body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-size: $base-size;
background: $gray-900;
background-color: $gray-900;
line-height: 1.5;
color: $white;
font-family: 'Work Sans', sans-serif;
}
@@ -109,21 +106,19 @@ p {
line-height: 24px;
}
a {
color: inherit;
&:hover {
text-decoration: none;
}
}
p a {
color: $blue-purple-400;
&:hover {
color: $blue-purple-400;
text-decoration: none;
}
}
// a {
// color: inherit;
// &:hover {
// text-decoration: none;
// }
// }
// p a {
// color: $blue-purple-400;
// &:hover {
// color: $blue-purple-400;
// text-decoration: none;
// }
// }
.fs-base {
font-size: $base-size;

82
styles/_forms.scss
View File

@@ -17,7 +17,7 @@
&:focus {
box-shadow: none;
border-color: $white;
border-color: $purple;
}
}
@@ -30,46 +30,54 @@
z-index: 1100 !important;
}
// Algolia Search results --------------------------------------------------
.algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
background-color: rgba(0,0,0,0.9);
border: 1px solid $gray-900;
border-radius: $border-radius-lg;
}
.algolia-autocomplete .ds-dropdown-menu::before {
background-color: rgba(0,0,0,0.9);
border-color: $gray-900;
}
.algolia-docsearch-suggestion {
background-color: rgba(0,0,0,0.9);
}
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
color: $white;
border: 0 solid $secondary;
border-bottom-width: 1px;
font-weight: bold;
}
.xrp-ledger-dev-portal {
// The extra specificity makes this override the default Algolia styles.
// Algolia Search results --------------------------------------------------
.algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
background-color: $dropdown-bg;
border: 0;
border-radius: $border-radius-lg;
}
.algolia-autocomplete .ds-dropdown-menu::before {
background-color: $dropdown-bg;
border: 0;
}
.algolia-autocomplete .algolia-docsearch-suggestion {
background-color: $dropdown-bg;
}
.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
color: $white;
border: 0;
border-bottom: 2px solid $blue-purple-500;
font-weight: bold;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
color: $white;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
color: $white;
}
.algolia-autocomplete .algolia-docsearch-suggestion--title {
color: $white;
}
.algolia-autocomplete .algolia-docsearch-suggestion--title {
color: $white;
}
.algolia-autocomplete .algolia-docsearch-suggestion--text {
font-size: 0.8rem;
color: $gray-200;
}
.algolia-autocomplete .algolia-docsearch-suggestion--text {
font-size: 0.8rem;
color: $gray-200;
}
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
color: $white;
background-color: $green-800;
}
.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
color: $white;
background-color: $gray-700;
}
@include media-breakpoint-down(md) {
.algolia-autocomplete .ds-dropdown-menu {
min-width: unset;
.algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl0 .algolia-docsearch-suggestion--highlight, .algolia-autocomplete .algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--category-header-lvl1 .algolia-docsearch-suggestion--highlight, .algolia-autocomplete .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
box-shadow: none;
background-color: $gray-700;
}
@include media-breakpoint-down(md) {
.algolia-autocomplete .ds-dropdown-menu {
min-width: unset;
}
}
}

9
styles/_landings.scss
View File

@@ -128,7 +128,9 @@
&:not(.external-link)::after {
content: " ";
background-image: url(../img/icons/arrow-right-purple.svg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-size: 1rem;
position: absolute;
right: 0;
width: 1.5rem;
@@ -142,9 +144,10 @@
&.external-link::after {
content: " ";
background-image: url(../img/icons/arrow-up-right.svg);
background-size: cover;
background-repeat: no-repeat;
position: absolute;
// right: .5rem;
background-position: center;
background-size: .75rem;
right: 7px;
width: 1.5rem;
height: 1.5rem;

11
styles/_top-nav.scss
View File

@@ -53,11 +53,6 @@
.dropdown-toggle {
position: relative;
}
.dropdown.show {
.dropdown-toggle {
color: $gray-500;
}
}
.dropdown-menu {
border-width: 0;
@@ -94,6 +89,10 @@
white-space: normal;
}
h4 {
font-size: 1.25rem;
}
&:hover {
h4 {
color: $blue-purple-400;
@@ -166,7 +165,7 @@
.dropdown .dropdown-toggle:hover > span:not(.chevron) {
padding-bottom: 8px;
border-bottom: 2px solid $blue-purple-400;
border-bottom: 2px solid $blue-purple-500;
margin-bottom: -8px;
}

2
styles/xrpl.scss
View File

@@ -14,7 +14,7 @@ $border-radius-lg: 8px;
$border-radius-sm: 4px;
$dropdown-border-width: 1px;
$enable-shadows: true;
$dropdown-box-shadow: 0px 5px 40px $gray-900;
$dropdown-box-shadow: 0px 5px 40px $black;
$card-spacer-x: 2rem;
$card-spacer-y: 2rem;
$card-deck-margin: 1.25rem;