ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-09 22:35:49 +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"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<path d="M5 12H19" stroke="#9A52FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> <svg
<path d="M12 5L19 12L12 19" stroke="#9A52FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> 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> </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"> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<path d="M7.56299 17.343L17.4625 7.44352" stroke="#9A52FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <svg
<path d="M7.5625 7.44336L17.462 7.44336L17.462 17.3429" stroke="#9A52FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> 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> </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 html: xrp-overview.html
parent: xrp-ledger-overview.html parent: xrp-ledger-overview.html
top_nav_grouping: XRP top_nav_grouping: XRP
top_nav_name: About XRP
sidebar: disabled sidebar: disabled
targets: targets:
- en - en
@@ -3724,7 +3725,7 @@ pages:
parent: index.html parent: index.html
template: page-community.html.jinja template: page-community.html.jinja
sidebar: disabled sidebar: disabled
blurb: Contribute to XRPL.org blurb: Join the conversation
top_nav_hero_image: assets/img/icons/contribute.svg top_nav_hero_image: assets/img/icons/contribute.svg
targets: targets:
- en - en

2
styles/_buttons.scss
View File

@@ -97,8 +97,6 @@ p + .readmore {
right: 36px; right: 36px;
font-weight: 700; font-weight: 700;
z-index: 1000; z-index: 1000;
color: white;
background-color: transparent;
&::after { &::after {
display: none; 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-padding: 2rem;
// Code Tabs ------------------------------------------------------------------- // Code Tabs -------------------------------------------------------------------
@@ -71,8 +71,9 @@ pre {
} }
&:hover { &:hover {
text-decoration: none; text-decoration: none;
background-color: $gray-900; background-color: $code-bg;
color: $primary; 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-700: #4A00B2;
$blue-purple-800: #350080; $blue-purple-800: #350080;
$blue-purple-900: #20004C; $blue-purple-900: #20004C;
$purple: $blue-purple-500; $purple: $blue-purple-400;
$red-purple-100: #FBE5FF; $red-purple-100: #FBE5FF;
$red-purple-200: #F2B2FF; $red-purple-200: #F2B2FF;
@@ -92,24 +92,26 @@ $yellow-900: #4B4C00;
$yellow: $yellow-500; $yellow: $yellow-500;
// Common colors & colors used in Bootstrap ------------------------------------ // Common colors & colors used in Bootstrap ------------------------------------
$primary: $green-500; $primary: $purple;
$secondary: $gray-200; $secondary: $gray-200;
$light: $white; $light: $white;
$dark: $black; $dark: $gray-900;
$success: $green-500; $success: $green-500;
$info: $blue-500; $info: $blue-500;
$warning: $yellow-500; // "caution" callout style $warning: $yellow-500; // "caution" callout style
$danger: $magenta-500; // "warning" callout style $danger: $magenta-500; // "warning" callout style
// Bootstrap elements // Bootstrap elements
$body-bg: $black; $body-bg: $gray-900;
$navbar-light-color: $gray-600; $navbar-light-color: $gray-600;
$code-color: $secondary; $code-color: $secondary;
$body-color: $white; $body-color: $white;
$headings-color: $white; $headings-color: $white;
$text-muted: $gray-200; $text-muted: $gray-200;
$link-hover-color: $purple;
$link-color: $white;
$breadcrumb-bg: $black; $breadcrumb-bg: $body-bg;
$breadcrumb-active-color: $gray-400; $breadcrumb-active-color: $gray-400;
$card-bg: $gray-800; $card-bg: $gray-800;
@@ -119,19 +121,22 @@ $dropdown-divider-bg: $black;
$dropdown-border-color: $gray-900; $dropdown-border-color: $gray-900;
$dropdown-color: $secondary; $dropdown-color: $secondary;
$dropdown-link-color: $white; $dropdown-link-color: $white;
$dropdown-link-hover-color: $blue-purple-500; $dropdown-link-hover-color: $purple;
$dropdown-link-hover-bg: $gray-900; $dropdown-link-hover-bg: $gray-900;
$dropdown-link-active-bg: transparent; $dropdown-link-active-bg: transparent;
$navbar-dark-color: $white; $navbar-dark-color: $white;
$navbar-dark-hover-color: $blue-purple-500; $navbar-dark-hover-color: $purple;
$navbar-dark-active-color: $primary; $navbar-dark-active-color: $white;
$input-bg: $gray-900; $input-bg: $gray-800;
$input-disabled-bg: $gray-800; $input-disabled-bg: $gray-600;
$input-color: $white; $input-color: $white;
$input-border-color: transparent; $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-placeholder-color: $gray-400;
$input-group-addon-bg: $gray-600; $input-group-addon-bg: $gray-600;
$input-group-addon-color: $white; $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-image: url(../img/icons/arrow-up-right.svg);
background-repeat: no-repeat; background-repeat: no-repeat;
display: inline-block; display: inline-block;
background-size: 1em; background-size: 10px;
padding: 0 .5em; padding: 0 4px 0 8px;
background-position: left 0 bottom .2em; width: 14px;
background-position: left 0 bottom 4px;
transition: background-position 100ms ease-in-out; transition: background-position 100ms ease-in-out;
// Note: the background position is based on the padding, so it might // Note: the background position is based on the padding, so it might
@@ -16,7 +17,7 @@
} }
&:hover::after { &:hover::after {
background-position: left .2em bottom .4em; background-position: left 4px bottom 8px;
} }
.fa-external-link { .fa-external-link {
@@ -24,13 +25,15 @@
} }
} }
.top-nav .dropdown .external-link { .top-nav .dropdown .external-link,
.xrpl-footer .external-link {
&::after { &::after {
background-position: left 0 bottom -.1em; background-position: left 8px bottom 2px;
width: 2rem;
} }
&:hover::after { &: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; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
font-size: $base-size; font-size: $base-size;
background: $gray-900;
background-color: $gray-900;
line-height: 1.5; line-height: 1.5;
color: $white;
font-family: 'Work Sans', sans-serif; font-family: 'Work Sans', sans-serif;
} }
@@ -109,21 +106,19 @@ p {
line-height: 24px; line-height: 24px;
} }
// a {
// color: inherit;
a { // &:hover {
color: inherit; // text-decoration: none;
&:hover { // }
text-decoration: none; // }
} // p a {
} // color: $blue-purple-400;
p a { // &:hover {
color: $blue-purple-400; // color: $blue-purple-400;
&:hover { // text-decoration: none;
color: $blue-purple-400; // }
text-decoration: none; // }
}
}
.fs-base { .fs-base {
font-size: $base-size; font-size: $base-size;

82
styles/_forms.scss
View File

@@ -17,7 +17,7 @@
&:focus { &:focus {
box-shadow: none; box-shadow: none;
border-color: $white; border-color: $purple;
} }
} }
@@ -30,46 +30,54 @@
z-index: 1100 !important; z-index: 1100 !important;
} }
// Algolia Search results -------------------------------------------------- .xrp-ledger-dev-portal {
.algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] { // The extra specificity makes this override the default Algolia styles.
background-color: rgba(0,0,0,0.9); // Algolia Search results --------------------------------------------------
border: 1px solid $gray-900; .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
border-radius: $border-radius-lg; background-color: $dropdown-bg;
} border: 0;
.algolia-autocomplete .ds-dropdown-menu::before { border-radius: $border-radius-lg;
background-color: rgba(0,0,0,0.9); }
border-color: $gray-900; .algolia-autocomplete .ds-dropdown-menu::before {
} background-color: $dropdown-bg;
.algolia-docsearch-suggestion { border: 0;
background-color: rgba(0,0,0,0.9); }
} .algolia-autocomplete .algolia-docsearch-suggestion {
.algolia-autocomplete .algolia-docsearch-suggestion--category-header { background-color: $dropdown-bg;
color: $white; }
border: 0 solid $secondary; .algolia-autocomplete .algolia-docsearch-suggestion--category-header {
border-bottom-width: 1px; color: $white;
font-weight: bold; border: 0;
} border-bottom: 2px solid $blue-purple-500;
font-weight: bold;
}
.algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column { .algolia-autocomplete .algolia-docsearch-suggestion--subcategory-column {
color: $white; color: $white;
} }
.algolia-autocomplete .algolia-docsearch-suggestion--title { .algolia-autocomplete .algolia-docsearch-suggestion--title {
color: $white; color: $white;
} }
.algolia-autocomplete .algolia-docsearch-suggestion--text { .algolia-autocomplete .algolia-docsearch-suggestion--text {
font-size: 0.8rem; font-size: 0.8rem;
color: $gray-200; color: $gray-200;
} }
.algolia-autocomplete .algolia-docsearch-suggestion--highlight { .algolia-autocomplete .algolia-docsearch-suggestion--highlight {
color: $white; color: $white;
background-color: $green-800; background-color: $gray-700;
} }
@include media-breakpoint-down(md) { .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 {
.algolia-autocomplete .ds-dropdown-menu { box-shadow: none;
min-width: unset; 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 { &:not(.external-link)::after {
content: " "; content: " ";
background-image: url(../img/icons/arrow-right-purple.svg); background-image: url(../img/icons/arrow-right-purple.svg);
background-size: cover; background-repeat: no-repeat;
background-position: center;
background-size: 1rem;
position: absolute; position: absolute;
right: 0; right: 0;
width: 1.5rem; width: 1.5rem;
@@ -142,9 +144,10 @@
&.external-link::after { &.external-link::after {
content: " "; content: " ";
background-image: url(../img/icons/arrow-up-right.svg); background-image: url(../img/icons/arrow-up-right.svg);
background-size: cover; background-repeat: no-repeat;
position: absolute; position: absolute;
// right: .5rem; background-position: center;
background-size: .75rem;
right: 7px; right: 7px;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;

11
styles/_top-nav.scss
View File

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

2
styles/xrpl.scss
View File

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