diff --git a/guides/assets/images/hr_rails_white.svg b/guides/assets/images/hr_rails_white.svg
new file mode 100644
index 0000000000000..48b2acd6b023d
--- /dev/null
+++ b/guides/assets/images/hr_rails_white.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/guides/assets/images/icon_construction-sign.svg b/guides/assets/images/icon_construction-sign.svg
index 2ce8d87902cba..b07315bb67808 100644
--- a/guides/assets/images/icon_construction-sign.svg
+++ b/guides/assets/images/icon_construction-sign.svg
@@ -1 +1 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/guides/assets/stylesrc/_dark.scss b/guides/assets/stylesrc/_dark.scss
index 1a775f25c9c28..eaea033a90ea1 100644
--- a/guides/assets/stylesrc/_dark.scss
+++ b/guides/assets/stylesrc/_dark.scss
@@ -7,26 +7,53 @@
@media (prefers-color-scheme: dark) {
body.guide {
+
background-color: $gray-900;
color: #fff;
+ &::-webkit-scrollbar {
+ width: 12px;
+ background-color: transparent;
+ }
+
+ &::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ border-radius: 10px;
+ background-color: $gray-900;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-color: $gray-500;
+ border-radius: 10px;
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+ }
+ h1 {
+ color: #fff;
+ }
+
a {
&:link {
- color: $rf-brand-light;
+ color: $rf-brand-lightest;
}
&:hover,
&:active {
- color: $rf-brand-darker;
+ color: $rf-brand-lighter;
} // &:hover, &:active
&:visited {
- color: $rf-brand;
+ color: $rf-brand-lightest;
} // &:visited
} // a
+
+ h2 a {
+ &:link,
+ &:visited {
+ color: #fff;
+ }
+ } // h2 a
table {
th {
- color: $gray-900;
- background-color: $gray-200;
+ background-color: $gray-1000;
} // th
tr {
@@ -44,13 +71,27 @@
} // a, a:link, a:visited
} // h3
+ hr {
+ background: url("../images/hr_rails_white.svg") center no-repeat;
+ }
+
pre, code {
- background-color: $gray-200;
- color: $gray-200;
+ background-color: $gray-1000;
+ color: #fff;
} // pre, code
- p code, ul code, li code, h2 code, h3 code, h4 code, h5 code, td code {
- background-color: $gray-600;
+ p code, ul code, li code {
+ background-color: $gray-650;
+ color: #fff;
+ }
+
+ td code {
+ background-color: transparent;
+ }
+
+ h2 code, h3 code, h4 code, h5 code {
+ background-color: transparent;
+ color: #fff;
}
nav#topNav {
@@ -114,16 +155,12 @@
a:hover,
a:active {
- color: $rf-brand-light;
+ color: $rf-brand-lighter;
} // a:hover
} // dd
} // .guides-section
} // #guides
- footer#page_footer {
- background-color: $gray-200;
- color: $gray-900;
- } // footer#page_footer
#feature {
background-color: $gray-800;
@@ -133,9 +170,28 @@
}
#subCol {
- background-color: $gray-700;
-
- ol {
+ background-color: $gray-800;
+
+ ol.chapters {
+ &::-webkit-scrollbar {
+ background-color: $gray-700;
+ }
+
+ &::-webkit-scrollbar-track {
+ background-color: $gray-700;
+ border-radius: 5px;
+ box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background-image: -webkit-gradient(linear,
+ left bottom,
+ left top,
+ color-stop(0.44, $rf-brand-lightest),
+ color-stop(0.86, $rf-brand-lighter));
+ border-radius: 5px;
+ box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+ }
li {
a,
a:link,
@@ -145,15 +201,41 @@
a:hover,
a:active {
- color: $rf-brand-light;
+ color: $rf-brand-lighter;
} // a
} // li
} // ol
} // #subCol
} // #feature
- .interstitial.code {
- background-color: $gray-200;
- }
+ .interstitial {
+ &.code {
+ background-color: $gray-1000;
+ color: $gray-200;
+ }
+ &.note,
+ &.work-in-progress,
+ &.todo {
+ border-color: $note-dark;
+ background-color: $note-bkgnd-dark;
+ }
+
+ &.info {
+ border-color: $tip-dark;
+ background-color: $tip-bkgnd-dark;
+ }
+
+ &.warning {
+ border-color: $stop-dark;
+ background-color: $stop-bkgnd-dark;
+ }
+
+ &.question {
+ border-color: $gray-600;
+ background-color: $gray-700;
+ }
+
+
+ }
} // body.guide
} // @media (prefers-color-scheme: dark
\ No newline at end of file
diff --git a/guides/assets/stylesrc/_main.scss b/guides/assets/stylesrc/_main.scss
index 312ba0d72a3ab..1ddc510e264cd 100644
--- a/guides/assets/stylesrc/_main.scss
+++ b/guides/assets/stylesrc/_main.scss
@@ -1,4 +1,19 @@
body.guide {
+ &::-webkit-scrollbar {
+ width: 12px;
+ background-color: transparent;
+ }
+
+ &::-webkit-scrollbar-track {
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ border-radius: 10px;
+ background-color: transparent;
+ }
+
+ &::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+ }
-webkit-tap-highlight-color:rgba(38, 27, 35, 0);
@@ -18,9 +33,6 @@ body.guide {
font-size: 1.125rem; /* 18px */
font-style: normal;
font-weight: 400;
- font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
line-height: 1.4;
font-feature-settings: "liga" 1;
@@ -55,6 +67,17 @@ body.guide {
} // p
+ table,
+ ul,
+ .interstitial {
+ @include media('>tablet') {
+ min-width: 23em;
+ max-width: 38em;
+ text-align: left;
+ margin-left: 0 !important;
+ }
+ }
+
// Links
a {
@@ -118,7 +141,6 @@ body.guide {
// Headlines
// TODO: media queries to increase font size, current sizes are for desktop, so drop base to mobile appropriate and MQ up twice (min width 60/120 em, minheight 30/60em)
- // Font family is Calibre, declared globally
h1 {
color: $rf-brand;
font-family: 'Calibre', sans-serif;
@@ -248,6 +270,8 @@ body.guide {
padding: 0.25em 0 1em;
border-bottom: 1px solid $gray-500;
margin: 0 0 1em 0;
+
+ &:last-child {border-bottom: none;}
} // dd
} // dl
@@ -319,9 +343,10 @@ body.guide {
:where(body[dir="rtl"]) & { text-align: right; }
@include media('>desktop') {
- padding-left: 5vw;
width: 60vw;
-
+ max-width: calc(55rem + 400px);
+ margin: 0 auto;
+ padding-right: 400px;
}
} // .wrapper
@@ -392,6 +417,12 @@ body.guide {
} // nav#topNav
header#page_header {
+ width: 100%;
+
+ .wrapper {
+ max-width: calc(50em + 400px);
+ padding-right: 0;
+ }
nav#feature_nav {
@include media('>desktop'){
@@ -399,7 +430,7 @@ body.guide {
display: flex;
flex-direction: row;
justify-content: space-between;
- width: 90vw;
+ width: 100%;
}
// Image augmented
@@ -452,7 +483,7 @@ body.guide {
@include media('>desktop'){
display: flex;
flex-direction: row;
- justify-content: space-between;
+ justify-content: flex-end;
margin: 0;
padding: 1em 0 0 0;
}
@@ -639,19 +670,30 @@ body.guide {
background-color: $gray-800;
color: #fff;
font-size: 0.75em;
- padding: 1em 0 .5em 0;
+ padding: 1.5em 0 .5em 0;
width: 100%;
+ .wrapper {
+ padding: 0;
+ }
+
p {
max-width: 100vw;
}
}
+ main#container {
+ @include media('>desktop') {
+ // padding-right: 400px;
+ }
+ }
+
#feature {
background-color: $gray-100;
@include media('>desktop') {
background-color: #fff;
+ // padding-right: 400px;
}
#subCol {
@@ -664,18 +706,45 @@ body.guide {
display: block;
position: fixed;
top: 100px;
- right: 5vw;
+ right: calc(40vw - 400px);
max-height: calc(100vh - 90px);
width: 30vw;
+ max-width: 380px;
}
h3.chapter img {
margin-right: 0.25em;
}
- ol {
+ ol.chapters {
+ &::-webkit-scrollbar
+ {
+ width: 6px;
+ background-color: #F5F5F5;
+ }
+
+ &::-webkit-scrollbar-track
+ {
+ background-color: #F5F5F5;
+ border-radius: 6px;
+ box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
+ }
+
+ &::-webkit-scrollbar-thumb
+ {
+ border-radius: 5px;
+ background-image: -webkit-gradient(linear,
+ left bottom,
+ left top,
+ color-stop(0.44, $rf-brand-light),
+ color-stop(0.72, $rf-brand),
+ color-stop(0.86, $rf-brand-dark));
+ }
+
+
@include media('>desktop') {
overflow-y: auto;
+ overflow-x: hidden;
max-height: 73vh;
}
@@ -696,19 +765,21 @@ body.guide {
} // a
ul {
+ margin-top: 0.5em;
+ margin-bottom: 0.75em;
padding-inline-start: 1em;
+ max-width: unset;
li {
font-weight: 400;
+ @include media('>desktop') {
+ width: 320px;
+ }
} // li
} // ul
} // li
} // ol
}
}
-
- @include media('>desktop') {
- padding-right: 400px;
- }
} // body.guide
\ No newline at end of file
diff --git a/guides/assets/stylesrc/highlight.scss b/guides/assets/stylesrc/highlight.scss
index 1476d6ddd9df1..64024fe69465e 100644
--- a/guides/assets/stylesrc/highlight.scss
+++ b/guides/assets/stylesrc/highlight.scss
@@ -46,7 +46,7 @@
.nl,
.o,
.ow {
- font-weight: bold;
+ font-weight: 500;
}
} // .highlight
@@ -57,155 +57,74 @@
// These are the inverse of what they used to be, as we use a dark block on the
// light background and a light block on the dark background pages.
-// Include media does not support prefers-color-scheme yet
-@media (prefers-color-scheme: dark) {
- .highlight {
- &.plaintext,
- &.console,
- &.erb,
- &.html { color: #000; }
- // .hll { background-color: #272822; }
- .c { color: #6c6c65; } /* Comment */
- .err { color: #a61717; background-color: #e3d2d2 } /* Error */
- .k { color: #0073a6; } /* Keyword */
- .l { color: #007979; } /* Literal */
- .n { color: #007979; } /* Name */
- .o { color: #f92672; } /* Operator */
- .p { color: #007979; } /* Punctuation */
- .bp { color: #6c6c6c; }
- .cm { color: #6c6c65; } /* Comment.Multiline */
- .cp { color: #6c6c6c; } /* Comment.Preproc */
- .c1 { color: #6c6c65; } /* Comment.Single */
- .cs { color: #6c6c6c; } /* Comment.Special */
- .fm { color: #990000; }
- .kc { color: #32aac2; } /* Keyword.Constant */
- .kd { color: #32aac2; } /* Keyword.Declaration */
- .kn { color: #FF538C; } /* Keyword.Namespace */
- .kp { color: #32aac2; } /* Keyword.Pseudo */
- .kr { color: #32aac2; } /* Keyword.Reserved */
- .kt { color: #445588; } /* Keyword.Type */
- .kv { color: #0073a6; }
- .ld { color: #d51144; } /* Literal.Date */
- .m { color: #007979; } /* Literal.Number */
- .s { color: #d51144; } /* Literal.String */
- .na { color: #007979; } /* Name.Attribute */
- .nb { color: #0074a1; } /* Name.Builtin */
- .nc { color: #445588; } /* Name.Class */
- .no { color: #007979; } /* Name.Constant */
- .nd { color: #3c5d5d; } /* Name.Decorator */
- .ni { color: #800080; } /* Name.Entity */
- .ne { color: #990000; } /* Name.Exception */
- .nf { color: #990000; } /* Name.Function */
- .nl { color: #990000; } /* Name.Label */
- .nn { color: #555555; } /* Name.Namespace */
- .nx { color: #BDFB42; } /* Name.Other */
- .py { color: #007979; } /* Name.Property */
- .nt { color: #000080; } /* Name.Tag */
- .nv { color: #007979; } /* Name.Variable */
- .ow { color: #000000; } /* Operator.Word */
- .w { color: #6c6c6c; } /* Text.Whitespace */
- .mf { color: #007979; } /* Literal.Number.Float */
- .mh { color: #007979; } /* Literal.Number.Hex */
- .mi { color: #007979; } /* Literal.Number.Integer */
- .mo { color: #007979; } /* Literal.Number.Oct */
- .sb { color: #d51144; } /* Literal.String.Backtick */
- .sc { color: #d51144; } /* Literal.String.Char */
- .sd { color: #d51144; } /* Literal.String.Doc */
- .s2 { color: #d51144; } /* Literal.String.Double */
- .se { color: #007979; } /* Literal.String.Escape */
- .sh { color: #d51144; } /* Literal.String.Heredoc */
- .si { color: #d51144; } /* Literal.String.Interpol */
- .sx { color: #d51144; } /* Literal.String.Other */
- .sr { color: #d51144; } /* Literal.String.Regex */
- .s1 { color: #d51144; } /* Literal.String.Single */
- .ss { color: #d51144; } /* Literal.String.Symbol */
- .bp { color: #007979; } /* Name.Builtin.Pseudo */
- .vc { color: #007979; } /* Name.Variable.Class */
- .vg { color: #007979; } /* Name.Variable.Global */
- .vi { color: #005cc5; } /* Name.Variable.Instance */
- .vm { color: #007979; }
- .il { color: #007979; } /* Literal.Number.Integer.Long */
- .gh { color: #6c6c6c; } /* Generic Heading & Diff Header */
- .gu { color: #6c6c6c; } /* Generic.Subheading & Diff Unified/Comment? */
- .gd { color: #000000; background-color: #ffdddd; } /* Generic.Deleted & Diff Deleted */
- .gi { color: #000000; background-color: #ddffdd; } /* Generic.Inserted & Diff Inserted */
- .gr { color: #aa0000; }
- .go { color: #6c6c6c; }
- .gp { color: #555555; }
- .gt { color: #aa0000; }
- }
+.highlight {
+ color: #fff;
+ &.plaintext,
+ &.console,
+ &.erb,
+ &.html { color: #fff; }
+ .hll { background-color: #272822; }
+ .c { color: #A9A9A8; } /* Comment */
+ .err { color: #e7007b; background-color: #1e0010 } /* Error */
+ .k { color: #8AECFF; } /* Keyword */
+ .l { color: #C3A2FF; } /* Literal */
+ .n { color: #f8f8f2; } /* Name */
+ .o { color: #FF538C; } /* Operator */
+ .p { color: #f8f8f2; } /* Punctuation */
+ .cm { color: #A9A9A8; } /* Comment.Multiline */
+ .cp { color: #A9A9A8; } /* Comment.Preproc */
+ .c1 { color: #A9A9A8; } /* Comment.Single */
+ .cs { color: #A9A9A8; } /* Comment.Special */
+ .kc { color: #8AECFF; } /* Keyword.Constant */
+ .kd { color: #8AECFF; } /* Keyword.Declaration */
+ .kn { color: #FF538C; } /* Keyword.Namespace */
+ .kp { color: #8AECFF; } /* Keyword.Pseudo */
+ .kr { color: #8AECFF; } /* Keyword.Reserved */
+ .kt { color: #8AECFF; } /* Keyword.Type */
+ .ld { color: #FCEF8D; } /* Literal.Date */
+ .m { color: #C3A2FF; } /* Literal.Number */
+ .s { color: #FCEF8D; } /* Literal.String */
+ .na { color: #BDFB42; } /* Name.Attribute */
+ .nb { color: #f8f8f2; } /* Name.Builtin */
+ .nc { color: #BDFB42; } /* Name.Class */
+ .no { color: #8AECFF; } /* Name.Constant */
+ .nd { color: #BDFB42; } /* Name.Decorator */
+ .ni { color: #f8f8f2; } /* Name.Entity */
+ .ne { color: #BDFB42; } /* Name.Exception */
+ .nf { color: #BDFB42; } /* Name.Function */
+ .nl { color: #f8f8f2; } /* Name.Label */
+ .nn { color: #f8f8f2; } /* Name.Namespace */
+ .nx { color: #BDFB42; } /* Name.Other */
+ .py { color: #f8f8f2; } /* Name.Property */
+ .nt { color: #FF538C; } /* Name.Tag */
+ .nv { color: #f8f8f2; } /* Name.Variable */
+ .ow { color: #FF538C; } /* Operator.Word */
+ .w { color: #f8f8f2; } /* Text.Whitespace */
+ .mf { color: #C3A2FF; } /* Literal.Number.Float */
+ .mh { color: #C3A2FF; } /* Literal.Number.Hex */
+ .mi { color: #C3A2FF; } /* Literal.Number.Integer */
+ .mo { color: #C3A2FF; } /* Literal.Number.Oct */
+ .sb { color: #FCEF8D; } /* Literal.String.Backtick */
+ .sc { color: #FCEF8D; } /* Literal.String.Char */
+ .sd { color: #FCEF8D; } /* Literal.String.Doc */
+ .s2 { color: #FCEF8D; } /* Literal.String.Double */
+ .se { color: #C3A2FF; } /* Literal.String.Escape */
+ .sh { color: #FCEF8D; } /* Literal.String.Heredoc */
+ .si { color: #FCEF8D; } /* Literal.String.Interpol */
+ .sx { color: #FCEF8D; } /* Literal.String.Other */
+ .sr { color: #FCEF8D; } /* Literal.String.Regex */
+ .s1 { color: #FCEF8D; } /* Literal.String.Single */
+ .ss { color: #FCEF8D; } /* Literal.String.Symbol */
+ .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
+ .vc { color: #f8f8f2; } /* Name.Variable.Class */
+ .vg { color: #f8f8f2; } /* Name.Variable.Global */
+ .vi { color: #f8f8f2; } /* Name.Variable.Instance */
+ .il { color: #C3A2FF; } /* Literal.Number.Integer.Long */
+ .gh { color: #A9A9A8; } /* Generic Heading & Diff Header */
+ .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
+ .gd { color: #FF538C; background-color: unset; } /* Generic.Deleted & Diff Deleted */
+ .gi { color: #BDFB42; background-color: unset; } /* Generic.Inserted & Diff Inserted */
+ .gr { color: #FF538C; }
+ .go { color: #A9A9A8; }
+ .gp { color: #fff; }
}
-
-@media (prefers-color-scheme: light) {
- .highlight {
- color: #fff;
- &.plaintext,
- &.console,
- &.erb,
- &.html { color: #fff; }
- .hll { background-color: #272822; }
- .c { color: #A9A9A8; } /* Comment */
- .err { color: #e7007b; background-color: #1e0010 } /* Error */
- .k { color: #8AECFF; } /* Keyword */
- .l { color: #C3A2FF; } /* Literal */
- .n { color: #f8f8f2; } /* Name */
- .o { color: #FF538C; } /* Operator */
- .p { color: #f8f8f2; } /* Punctuation */
- .cm { color: #A9A9A8; } /* Comment.Multiline */
- .cp { color: #A9A9A8; } /* Comment.Preproc */
- .c1 { color: #A9A9A8; } /* Comment.Single */
- .cs { color: #A9A9A8; } /* Comment.Special */
- .kc { color: #8AECFF; } /* Keyword.Constant */
- .kd { color: #8AECFF; } /* Keyword.Declaration */
- .kn { color: #FF538C; } /* Keyword.Namespace */
- .kp { color: #8AECFF; } /* Keyword.Pseudo */
- .kr { color: #8AECFF; } /* Keyword.Reserved */
- .kt { color: #8AECFF; } /* Keyword.Type */
- .ld { color: #FCEF8D; } /* Literal.Date */
- .m { color: #C3A2FF; } /* Literal.Number */
- .s { color: #FCEF8D; } /* Literal.String */
- .na { color: #BDFB42; } /* Name.Attribute */
- .nb { color: #f8f8f2; } /* Name.Builtin */
- .nc { color: #BDFB42; } /* Name.Class */
- .no { color: #8AECFF; } /* Name.Constant */
- .nd { color: #BDFB42; } /* Name.Decorator */
- .ni { color: #f8f8f2; } /* Name.Entity */
- .ne { color: #BDFB42; } /* Name.Exception */
- .nf { color: #BDFB42; } /* Name.Function */
- .nl { color: #f8f8f2; } /* Name.Label */
- .nn { color: #f8f8f2; } /* Name.Namespace */
- .nx { color: #BDFB42; } /* Name.Other */
- .py { color: #f8f8f2; } /* Name.Property */
- .nt { color: #FF538C; } /* Name.Tag */
- .nv { color: #f8f8f2; } /* Name.Variable */
- .ow { color: #FF538C; } /* Operator.Word */
- .w { color: #f8f8f2; } /* Text.Whitespace */
- .mf { color: #C3A2FF; } /* Literal.Number.Float */
- .mh { color: #C3A2FF; } /* Literal.Number.Hex */
- .mi { color: #C3A2FF; } /* Literal.Number.Integer */
- .mo { color: #C3A2FF; } /* Literal.Number.Oct */
- .sb { color: #FCEF8D; } /* Literal.String.Backtick */
- .sc { color: #FCEF8D; } /* Literal.String.Char */
- .sd { color: #FCEF8D; } /* Literal.String.Doc */
- .s2 { color: #FCEF8D; } /* Literal.String.Double */
- .se { color: #C3A2FF; } /* Literal.String.Escape */
- .sh { color: #FCEF8D; } /* Literal.String.Heredoc */
- .si { color: #FCEF8D; } /* Literal.String.Interpol */
- .sx { color: #FCEF8D; } /* Literal.String.Other */
- .sr { color: #FCEF8D; } /* Literal.String.Regex */
- .s1 { color: #FCEF8D; } /* Literal.String.Single */
- .ss { color: #FCEF8D; } /* Literal.String.Symbol */
- .bp { color: #f8f8f2; } /* Name.Builtin.Pseudo */
- .vc { color: #f8f8f2; } /* Name.Variable.Class */
- .vg { color: #f8f8f2; } /* Name.Variable.Global */
- .vi { color: #f8f8f2; } /* Name.Variable.Instance */
- .il { color: #C3A2FF; } /* Literal.Number.Integer.Long */
- .gh { color: #A9A9A8; } /* Generic Heading & Diff Header */
- .gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */
- .gd { color: #FF538C; background-color: unset; } /* Generic.Deleted & Diff Deleted */
- .gi { color: #BDFB42; background-color: unset; } /* Generic.Inserted & Diff Inserted */
- .gr { color: #FF538C; }
- .go { color: #A9A9A8; }
- .gp { color: #fff; }
- }
-}
\ No newline at end of file
diff --git a/guides/assets/stylesrc/style.scss b/guides/assets/stylesrc/style.scss
index e655de6b6f147..a532b34963bc8 100644
--- a/guides/assets/stylesrc/style.scss
+++ b/guides/assets/stylesrc/style.scss
@@ -36,7 +36,9 @@ $breakpoints: (
$rf-brand: #C81418;
$rf-brand-light: lighten($rf-brand, 5%);
-$rf-brand-dark: darken($rf-brand, 10%);
+$rf-brand-lighter: lighten($rf-brand, 15%);
+$rf-brand-lightest: lighten($rf-brand, 25%);
+$rf-brand-dark: darken($rf-brand, 15%);
$rf-brand-darker: darken($rf-brand, 20%);
$rf-highlight: rgba($rf-brand, 10%);
@@ -46,18 +48,27 @@ $gray-300: #EBEBEA;
$gray-400: #DCDCD8;
$gray-500: #A9A9A8;
$gray-600: #666666;
+$gray-650: #505050;
$gray-700: #3A3939;
$gray-800: #343434;
$gray-900: #2E2E2E;
+$gray-1000: #181818;
$note: #FFD600;
-$note-bkgnd: rgba($note, 15%); // Works for light and dark mode
+$note-dark: rgba($note, 0.5);
+$note-bkgnd: rgba($note, 15%);
+$note-bkgnd-dark: rgba($note, 5%);
+
$tip: #00F0FF;
-$tip-bkgnd: rgba($tip, 15%); // Works for light and dark mode
+$tip-dark: rgba($tip, 0.5);
+$tip-bkgnd: rgba($tip, 15%);
+$tip-bkgnd-dark: rgba($tip, 5%);
$stop: $rf-brand;
-$stop-bkgnd: rgba($stop, 15%); // Works for light and dark mode
+$stop-dark: rgba($stop, 0.5);
+$stop-bkgnd: rgba($stop, 15%);
+$stop-bkgnd-dark: rgba($stop, 5%);
// ----------------------------------------------------------------------------
// Fonts
diff --git a/guides/source/layout.html.erb b/guides/source/layout.html.erb
index 123f6e0b7f3e4..940ff7b8c08c8 100644
--- a/guides/source/layout.html.erb
+++ b/guides/source/layout.html.erb
@@ -10,7 +10,7 @@
-
+