From db830f20f9f8826518463a426a749d3967775ea7 Mon Sep 17 00:00:00 2001 From: Jake Bonham Date: Wed, 15 May 2019 06:47:03 -0700 Subject: [PATCH] Changes from Ohn list Updated nav. Home icons for Xpring updated Sidebar colors and hover states --- assets/css/devportal.css | 25 ++++++++++--------------- assets/img/xpring-logo.svg | 10 +--------- assets/vendor/bootstrap.css | 28 ++++++++++++++++++++++++---- tool/template-home.html | 34 +++++++++++++++++++++------------- tool/xrpl.scss | 26 +++++++++++++++++++++++++- 5 files changed, 81 insertions(+), 42 deletions(-) diff --git a/assets/css/devportal.css b/assets/css/devportal.css index a1889ee5e0..86057312fb 100644 --- a/assets/css/devportal.css +++ b/assets/css/devportal.css @@ -48,7 +48,7 @@ th { } .navbar .navbar-nav .nav-link { - font-size: 1.15rem; + font-size: 1rem; line-height: 52px; text-decoration: none; font-family: 'Space Mono', monospace; @@ -75,18 +75,18 @@ th { } #navbar-search .form-inline { - min-width: 250px; /* more room for placeholder text */ + min-width: 224px; /* more room for placeholder text */ } #topsearchbar { - padding-right: 60px; + padding-right: 40px; width: 100%; font-size: 0.875rem; } #navbar-search .btn { position: absolute; - right: 0.375rem; + right: 0; } /* Top navigation Mobile ----------------------------------------------------------- */ @@ -154,7 +154,7 @@ body { font-feature-settings: "liga", "kern"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; - font-size: 18px; + font-size: 0.9375rem; } /* Push content below fixed header ------------------------------------------ */ @@ -352,7 +352,7 @@ body { font-size: 1rem; } .xrpl-footer li { - font-size: 1rem; + font-size: 0.75rem; } .absolute_bottom_footer span { @@ -785,7 +785,6 @@ a.current { .right-sidebar .card-header h4 { line-height: 20px; - font-weight: 700; font-size: 1.2em; padding: 0; margin: 0; @@ -809,9 +808,6 @@ a.current { .right-sidebar .level-2 { margin-left: 0; } -.right-sidebar .level-3 { - margin-left: 16px; -} /* Use Cases ---------------------------------------------------------------- */ .use-case-steps { @@ -1022,16 +1018,15 @@ a.current { /* "Related Projects" boxes -------------- */ .interledger-link .project-icon { - width: 120px; + width: 80px; } .xpring-link .project-icon { - background-color: #212529; /* Xpring color */ - padding: 4px; - border-radius: 4px; - height: 24px; + height: 60px; + width: 100px; line-height: 20px; vertical-align: middle; + margin: 9px 0; } /* Interactive blocks in tutorial contents ---------------------------------- */ diff --git a/assets/img/xpring-logo.svg b/assets/img/xpring-logo.svg index ce189c458f..aa27751bd4 100644 --- a/assets/img/xpring-logo.svg +++ b/assets/img/xpring-logo.svg @@ -1,9 +1 @@ - - - - - - - - - +logo-xpring \ No newline at end of file diff --git a/assets/vendor/bootstrap.css b/assets/vendor/bootstrap.css index 73fbf2d84f..687ebfe477 100644 --- a/assets/vendor/bootstrap.css +++ b/assets/vendor/bootstrap.css @@ -5459,7 +5459,7 @@ button.bg-dark:focus { z-index: 1; pointer-events: auto; content: ""; - background-color: rgba(0, 0, 0, 0); } + background-color: transparent; } .m-0 { margin: 0 !important; } @@ -7050,7 +7050,8 @@ a.text-dark:hover, a.text-dark:focus { h1, h2, h3, h4, h5 { font-family: 'Space Mono', monospace; - font-weight: 700; } + font-weight: 700; + color: #1B1818; } .landing section, .xrpl-footer .card-grid, @@ -7286,6 +7287,24 @@ aside a.active-parent { font-weight: 700; padding: 15px 16px 15px 10px; } +.right-sidebar .level-1 a { + color: #1B1818; } + +.right-sidebar .level-3 { + padding-left: 16px; + border-left: 1px solid #EBE8E7; + margin-bottom: 0; + padding-bottom: 5px; } + +.right-sidebar .level-3 a { + margin-top: 0; + padding-bottom: 5px; } + +.right-sidebar a:hover { + text-decoration: none; + border-left: 1px solid #25A768; + padding-left: 34px; } + /* main content area ----------------------------------- */ .sidebar-primary .main { border-left: 1px solid #EBE8E7; @@ -7294,7 +7313,7 @@ aside a.active-parent { .content a.button { box-shadow: inset 0 0 0 1px #D3D0CF; color: #676463; - border: 1px solid #676463; } + border: 1px solid #D3D0CF; } #main_content_wrapper .btn-outline-secondary:hover, #main_content_wrapper .btn-outline-secondary:active, @@ -7324,4 +7343,5 @@ aside a.active-parent { line-height: 17px; /* Match search box height */ font-family: "Space Mono", monospace; - font-weight: 700; } + font-weight: 700; + margin-left: 10px; } diff --git a/tool/template-home.html b/tool/template-home.html index 69239693a0..898dc6b989 100644 --- a/tool/template-home.html +++ b/tool/template-home.html @@ -247,23 +247,31 @@ - +
+
+ +

Interledger

+
- -

Interledger -

Interledger is an open protocol suite for sending payments across different ledgers.

- +
+ Learn More +
+
- -
-

- Xpring -

-

Xpring (pronounced “spring”) is a Ripple initiative that builds infrastructure and helps innovative blockchain projects grow through investments and partnerships.

-
- +
+
+ Xpring +

Xpring

+
+
+

Xpring (pronounced “spring”) is a Ripple initiative that builds infrastructure and helps innovative blockchain projects grow through investments and partnerships.

+
+
+ Learn More +
+
{% endblock %} diff --git a/tool/xrpl.scss b/tool/xrpl.scss index fe29498e35..afddccd781 100644 --- a/tool/xrpl.scss +++ b/tool/xrpl.scss @@ -76,6 +76,7 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif; h1, h2, h3, h4, h5 { font-family: 'Space Mono', monospace; font-weight: 700; + color: $black; } .landing section, @@ -361,6 +362,28 @@ aside a.active-parent { padding: 15px 16px 15px 10px; } +.right-sidebar .level-1 a { + color: $black; +} + +.right-sidebar .level-3 { + padding-left: 16px; + border-left: 1px solid $gray-200; + margin-bottom: 0; + padding-bottom: 5px; +} + +.right-sidebar .level-3 a { + margin-top: 0; + padding-bottom: 5px; +} + +.right-sidebar a:hover { + text-decoration: none; + border-left: 1px solid $primary; + padding-left: 34px; +} + /* main content area ----------------------------------- */ .sidebar-primary .main { border-left: 1px solid $gray-200; @@ -370,7 +393,7 @@ aside a.active-parent { .content a.button { box-shadow: inset 0 0 0 1px $gray-300; color: $gray-600; - border: 1px solid $gray-600; + border: 1px solid $gray-300; } #main_content_wrapper .btn-outline-secondary:hover, @@ -402,4 +425,5 @@ aside a.active-parent { line-height: 17px; /* Match search box height */ font-family: "Space Mono", monospace; font-weight: 700; + margin-left: 10px; }