make focus more obvious

tinacms · Jul 21, 2023 · 238b981 · 238b981
1 parent ab7541d
commit 238b981
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 2 deletions.
diff --git a/content/docs/product-tour.md b/content/docs/product-tour.md
@@ -81,7 +81,7 @@ TinaCMS can be setup on your site with `tinacms init`. This installs a few Tina
 
 - Content in TinaCMS is modelled using a `tina/config.ts` file in your project. Through this, you can define "collections" that model various content types on your site.
 
-![](https://placehold.co/600x400?text=Content+Modelling+Code+Snippet)
+![](https://res.cloudinary.com/forestry-demo/image/upload/v1689950496/tina-io/docs/product-tour/Tina_Content_Modelling.png)
 
 ### Data-fetching
 

diff --git a/pages/docs/product-tour.tsx b/pages/docs/product-tour.tsx
@@ -197,12 +197,21 @@ const SplitContent = styled.div`
     h2,
     h3,
     h4 {
-      color: var(--color-primary);
+      color: var(--color-light-dark);
+
+      &:not(.focused) * {
+        color: var(--color-light-dark);
+      }
 
       + p,
       + ul {
         padding-left: 1rem;
         border-left: 4px solid var(--color-light-dark);
+
+        color: var(--color-light-dark);
+        * {
+          color: var(--color-light-dark);
+        }
       }
 
       &.focused {
@@ -211,6 +220,11 @@ const SplitContent = styled.div`
         + p,
         + ul {
           border-left: 4px solid var(--color-orange);
+
+          color: var(--color-primary);
+          * {
+            color: var(--color-primary);
+          }
         }
       }
     }