diff --git a/site/src/routes/docs/_GuideContents.svelte b/site/src/routes/docs/_GuideContents.svelte
index fb2a9dc177..f5407164e4 100644
--- a/site/src/routes/docs/_GuideContents.svelte
+++ b/site/src/routes/docs/_GuideContents.svelte
@@ -48,19 +48,12 @@
a {
position: relative;
- opacity: 0.75;
- transition: opacity 0.2s;
+ transition: color 0.2s;
border-bottom: none;
padding: 0;
color: var(--second);
}
- @media (min-width: 832px) {
- a {
- color: white;
- }
- }
-
.section {
display: block;
padding: 0 0 .8rem 0;
@@ -78,22 +71,33 @@
}
.section:hover,
- .subsection:hover {
+ .subsection:hover,
+ .active {
color: var(--flash);
- opacity: 1
}
.subsection[data-level="4"] {
padding-left: 1.2rem;
}
- .active { opacity: 1 }
-
.icon-container {
position: absolute;
top: -.2rem;
right: 2.4rem;
}
+
+ @media (min-width: 832px) {
+ a {
+ color: var(--sidebar-text);
+ }
+
+ a:hover,
+ .section:hover,
+ .subsection:hover,
+ .active {
+ color: white
+ }
+ }
diff --git a/site/src/routes/tutorial/[slug]/_TableOfContents.svelte b/site/src/routes/tutorial/[slug]/_TableOfContents.svelte
index 4796a71587..b74cc46046 100644
--- a/site/src/routes/tutorial/[slug]/_TableOfContents.svelte
+++ b/site/src/routes/tutorial/[slug]/_TableOfContents.svelte
@@ -30,13 +30,17 @@
display: block;
padding: 0.7em 0;
text-align: center;
- opacity: 0.7;
+ opacity: 0.75;
color: white;
}
+ a:hover {
+ opacity: 1;
+ }
+
a.disabled, a.disabled:hover, a.disabled:active {
color: white;
- opacity: 0.4;
+ opacity: 0.3;
}
span {
diff --git a/site/src/routes/tutorial/[slug]/index.svelte b/site/src/routes/tutorial/[slug]/index.svelte
index 5b2c2a6398..9afc3d40df 100644
--- a/site/src/routes/tutorial/[slug]/index.svelte
+++ b/site/src/routes/tutorial/[slug]/index.svelte
@@ -151,7 +151,7 @@
height: 100%;
border-right: 1px solid var(--second);
background-color: var(--second);
- color: white;
+ color: var(--sidebar-text);
}
.chapter-markup {
@@ -165,6 +165,7 @@
margin: 4rem 0 1.6rem 0;
font-size: var(--h3);
line-height: 1;
+ font-weight: 400;
color: white;
}
@@ -173,16 +174,21 @@
}
.chapter-markup :global(a) {
+ color: var(--sidebar-text);
+ }
+
+ .chapter-markup :global(a:hover) {
color: white;
}
+
.chapter-markup :global(ul) {
padding: 0 0 0 2em;
}
.chapter-markup :global(blockquote) {
- background-color: rgba(255,255,255,.1);
- color: white;
+ background-color: rgba(0,0,0,.17);
+ color: var(--sidebar-text);
}
.chapter-markup::-webkit-scrollbar {
@@ -198,22 +204,22 @@
.chapter-markup :global(p) > :global(code),
.chapter-markup :global(ul) :global(code) {
- color: white;
- background: rgba(255,255,255,.1);
- padding: .2em .4em;
+ color: var(--sidebar-text);
+ background: rgba(0,0,0,.12);
+ padding: .2em .4em .3em;
white-space: nowrap;
position: relative;
top: -0.1em;
}
.controls {
- border-top: 1px solid rgba(255,255,255,.1);
+ border-top: 1px solid rgba(255,255,255,.15);
padding: 1em 0 0 0;
display: flex;
}
.show {
- background: rgba(255,255,255,.1);
+ background: rgba(0,0,0,.4);
padding: .2em .7em .3em;
border-radius: var(--border-r);
top: .1em;
@@ -223,22 +229,17 @@
}
.show:hover {
- background: rgba(255,255,255,.2);
+ background: rgba(0,0,0,.65);
+ color: white;
}
a.next {
- /* border-bottom: none; */
padding-right: 1.2em;
background: no-repeat 100% 50% url(/icons/arrow-right.svg);
background-size: 1em 1em;
margin-left: auto;
}
- a.next:hover {
- /* border-bottom: 2px solid currentColor; */
- /* text-decoration: underline; */
- }
-
.improve-chapter {
padding: 1em 0 .5em 0;
}
diff --git a/site/static/global.css b/site/static/global.css
index 4553898006..6c84f1abee 100644
--- a/site/static/global.css
+++ b/site/static/global.css
@@ -46,6 +46,7 @@
--flash: #40b3ff;
--heading: var(--second);
--text: #444;
+ --sidebar-text: rgba(255, 255, 255, .75);
--border-w: .3rem; /* border-width */
--border-r: .4rem; /* border-radius */
}