Merge pull request #174 from IgnaceMaes/sidebar-tweaks

style: on-this-page tweaks
ember-learn · Feb 19, 2024 · e297ca4 · e297ca4
2 parents b91c98e + e359c78
commit e297ca4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/addon/styles/addon.css b/addon/styles/addon.css
@@ -85,10 +85,6 @@ main {
   margin: var(--spacing-4) 0;
 }
 
-.on-this-page-wrapper {
-  margin-top: .6em;
-}
-
 @media (max-width: 80em) {
   .guides-article-wrapper {
     display: grid;

diff --git a/addon/styles/on-this-page.css b/addon/styles/on-this-page.css
@@ -1,10 +1,18 @@
+.on-this-page-wrapper {
+  font-size: var(--font-size-sm);
+}
+
 .on-this-page-wrapper ul {
   list-style: none;
   padding: 0;
+  padding-left: var(--spacing-2);
+  margin-top: var(--spacing-2);
+  border-left: 2px solid var(--color-gray-300);
 }
 
 .on-this-page-wrapper-header {
   color: var(--color-gray-600);
+  font-weight: var(--font-weight-3);
 }
 
 .on-this-page-wrapper hr {
@@ -14,6 +22,13 @@
 
 main .on-this-page-wrapper a {
   text-decoration: none;
-  color: var(--color-text);
+  color: var(--color-gray-600);
   background: none;
+  padding: 2px 0;
+  display: block;
+  transition: color 0.2s ease;
+}
+
+main .on-this-page-wrapper a:hover {
+  color: var(--color-gray-800);
 }