Remove off brand transitions

6 files changed, 1 insertions, 76 deletions

diff --git a/src/tour.gleam b/src/tour.gleam
index ef4ed02..2a64561 100644
--- a/src/tour.gleam
+++ b/src/tour.gleam
@@ -1000,7 +1000,7 @@ pub fn render_page_html(page config: PageConfig) -> Html {
       ],
     ),
     lang: "en-GB",
-    attributes: [#("class", "theme-light theme-init")],
+    attributes: [#("class", "theme-light")],
     body: BodyConfig(
       attributes: [body_class],
       scripts: config.scripts.body,
diff --git a/src/tour/widgets.gleam b/src/tour/widgets.gleam
index 3a6f0a0..8ac9f08 100644
--- a/src/tour/widgets.gleam
+++ b/src/tour/widgets.gleam
@@ -138,15 +138,6 @@ function toggleTheme() {
   setTheme(getAppliedTheme() === 'dark' ? 'light' : 'dark');
 }
 
-function reEnableTransitions() {
-  // re-enable transitions when triggered after first-render to avoid fouc
-  // setTimeout(fn, 0) needed to give CSS at lease 1 frame without transitions and thus avoid FOUC
-  setTimeout(() => {
-    // executed after css has loaded & theme swiching has occured
-    document.documentElement.classList.toggle('theme-init', false);
-  }, 0);
-}
-
 function initThemeEvents() {
   // Watch the device's preferred theme and update theme if user did not select a theme
   mediaPrefersDarkTheme.addEventListener('change', () => {
@@ -159,8 +150,6 @@ function initThemeEvents() {
   document
     .querySelector('.theme-picker')
     ?.addEventListener('click', toggleTheme);
-  // Re-enable transitons only when all content has loaded
-  window.addEventListener('DOMContentLoaded', reEnableTransitions);
 }
 
 function initTheme() {
diff --git a/static/css/code/syntax-highlight.css b/static/css/code/syntax-highlight.css
index d742aab..af9df72 100644
--- a/static/css/code/syntax-highlight.css
+++ b/static/css/code/syntax-highlight.css
@@ -194,19 +194,3 @@ CodeFlask mappings
 .codeflask .token.attr-value {
   color: var(--code-token-attr-value);
 }
-
-/* Add color transitions to fit with theme switching */
-
-.hljs,
-.codeflask .codeflask__textarea {
-  transition:
-    background 150ms linear 0s,
-    color 150ms linear 0s;
-}
-
-.hljs,
-.hljs *,
-.codeflask .codeflask__textarea .codeflask .codeflask__textarea * {
-  transition: color 150ms linear 0s;
-}
-
diff --git a/static/css/pages/everything.css b/static/css/pages/everything.css
index c8d8279..8637aaa 100644
--- a/static/css/pages/everything.css
+++ b/static/css/pages/everything.css
@@ -63,7 +63,6 @@ h3 {
   display: flex;
   background: var(--color-background);
   flex-direction: column;
-  transition: background 150ms linear 0s;
   position: relative;
 }
 
@@ -97,7 +96,6 @@ h3 {
   list-style: none;
   padding: 0;
   color: var(--color-text-secondary);
-  transition: color 150ms linear 0s;
 }
 
 #everything-contents .chapter ul {
@@ -114,7 +112,6 @@ h3 {
   scroll-behavior: smooth;
   scroll-snap-type: y proximity;
   scroll-padding-block-start: calc(2 * var(--navbar-height));
-  /* scroll-padding-block-start: var(--gap-double); */
 }
 
 #everything-lessons .chapter-title {
@@ -125,9 +122,6 @@ h3 {
   height: var(--gap-triple);
   top: 0;
   background: var(--color-background);
-  transition:
-    background 150ms linear 0s,
-    color 150ms linear 0s;
   z-index: 3;
 }
 
@@ -146,9 +140,6 @@ h3 {
   position: sticky;
   top: var(--gap-triple);
   background: var(--color-background);
-  transition:
-    background 150ms linear 0s,
-    color 150ms ease-out 0s;
   color: var(--color-link);
   z-index: 2;
   padding: var(--gap) 0;
@@ -169,9 +160,6 @@ h3 {
   margin-top: var(--gap-double);
   position: relative;
   background: var(--code-background);
-  transition:
-    background 150ms linear 0s,
-    box-shadow 150ms linear 0s;
   box-shadow: var(--drop-shadow);
 }
 
@@ -201,7 +189,6 @@ h3 {
   outline: 1px solid transparent;
   outline-offset: -1px;
   cursor: pointer;
-  transition: all 300ms ease-out 0s;
 }
 
 #everything-lessons hr {
@@ -211,7 +198,6 @@ h3 {
   padding: 0;
   margin: 0;
   display: block;
-  transition: border-top 150ms linear 0s;
 }
 
 #everything-lessons .lesson-separator {
@@ -249,11 +235,6 @@ h3 {
     filter: contrast(1);
   }
 
-  #everything-contents:hover:not(:has(a:hover))::after {
-    opacity: 0;
-    transition: opacity 150ms ease-in 0s;
-  }
-
   #everything-lessons {
     grid-column: 1 / span 2;
     padding-bottom: var(--gap-quad);
diff --git a/static/css/root.css b/static/css/root.css
index 948462c..57e7b43 100644
--- a/static/css/root.css
+++ b/static/css/root.css
@@ -164,14 +164,9 @@ html.theme-light .theme-button.-light {
   color: var(--color-text-accent);
   text-decoration: underline;
   text-decoration-color: var(--color-accent-muted);
-  transition:
-    background 150ms linear 0s,
-    color 150ms ease-out 0s,
-    text-decoration-color 150ms ease-out 0s;
 }
 
 .link.padded,
 .navbar .link {
   padding: calc(var(--gap-quarter) * 0.5) var(--gap-quarter) 0;
 }
-
diff --git a/static/css/theme.css b/static/css/theme.css
index 2cec41e..1ca496a 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -53,27 +53,3 @@ html.theme-dark {
   color-scheme: dark;
 }
 
-/* Hide body while theme init is occurring (50ms) */
-html.theme-init body {
-  opacity: 0
-}
-
-/*
-removes all transitions in the page during first theme render to avoid FOUC
-(the theme-init class is removed from DOM 1 frame after the page content loads)
-*/
-html.theme-init * {
-  transition: none !important;
-}
-
-body {
-  opacity: 1;
-  transition: opacity 300ms ease-out 0s;
-}
-
-html * {
-  transition-duration: 150ms, 300ms;
-  transition-property: color, background;
-  transition-timing-function: ease-out;
-  transition-delay: 0;
-}
\ No newline at end of file