t

holtzy · Nov 4, 2024 · c21b3cc · c21b3cc
1 parent ae7786c
commit c21b3cc
Show file tree

Hide file tree

Showing 17 changed files with 377 additions and 109 deletions.
diff --git a/pages/course/hover-effect/css-descendant-selector.tsx b/pages/course/hover-effect/css-descendant-selector.tsx
@@ -13,9 +13,6 @@ import {
   ExerciseDoubleSandbox,
 } from '@/component/ExerciseDoubleSandbox';
 import { ExerciseAccordion } from '@/component/ExerciseAccordion';
-import { Graph9 } from '@/viz/exercise/LollipopFirstSolution/Graph';
-import { Graph12 } from '@/viz/exercise/LollipopHoverEffectSolution/Graph';
-import { Graph22 } from '@/viz/exercise/Hover3CirclesDescandantSelectorIssueSolution/Graph';
 
 const previousURL = '/course/hover-effect/css-pseudo-class';
 const currentURL = '/course/hover-effect/css-descendant-selector';
@@ -41,7 +38,7 @@ export default function Home() {
         title={currentLesson.name}
         lessonStatus={currentLesson.status}
         readTime={currentLesson.readTime}
-        topBadge={'Lesson ' + currentLessonId}
+        selectedLesson={currentLesson}
         description={
           <>
             <p>
@@ -164,11 +161,35 @@ export default function Home() {
             content: <ExerciseDoubleSandbox exercise={exercises[1]} />,
           },
           {
-            title: <span>Scatterplot = problem 🚨</span>,
+            title: <span>Scatterplot = problem? 🚨</span>,
             content: <ExerciseDoubleSandbox exercise={exercises[2]} />,
           },
         ]}
       />
+
+      <p>
+        <br />
+        <br />
+      </p>
+
+      <blockquote className="bg-fuchsia-50 py-8">
+        <div>
+          <p>
+            Note: When you use the <code>:hover</code> pseudo-class on an SVG
+            area, it activates whenever the mouse enters the entire SVG
+            rectangle.
+          </p>
+          <p>
+            <br />
+            <br />
+          </p>
+          <p>
+            However, if you apply <code>:hover</code> to a <code>g</code>{' '}
+            element, it will only trigger when the mouse hovers over one of the
+            elements within the <code>g</code> group!
+          </p>
+        </div>
+      </blockquote>
     </LayoutCourse>
   );
 }

diff --git a/pages/course/hover-effect/css-pseudo-class.tsx b/pages/course/hover-effect/css-pseudo-class.tsx
@@ -14,9 +14,6 @@ import {
 import { ExerciseAccordion } from '@/component/ExerciseAccordion';
 import Link from 'next/link';
 import { TakeHome } from '@/component/TakeHome';
-import { Graph9 } from '@/viz/exercise/HoverFirstTreemapSolution/Graph';
-import { Graph10 } from '@/viz/exercise/HoverDeathByStateSolution/Graph';
-import { Graph11 } from '@/viz/exercise/HoverDeathByStateFixSolution/Graph';
 
 const previousURL = '/course/hover-effect/introduction';
 const currentURL = '/course/hover-effect/css-pseudo-class';
@@ -42,7 +39,7 @@ export default function Home() {
         title={currentLesson.name}
         lessonStatus={currentLesson.status}
         readTime={currentLesson.readTime}
-        topBadge={'Lesson ' + currentLessonId}
+        selectedLesson={currentLesson}
         description={
           <>
             <p>The simplest strategy.</p>

diff --git a/pages/course/hover-effect/internal-state.tsx b/pages/course/hover-effect/internal-state.tsx
@@ -4,7 +4,6 @@ import { LayoutCourse } from '@/component/LayoutCourse';
 import { lessonList } from '@/util/lessonList';
 import { ChartOrSandbox } from '@/component/ChartOrSandbox';
 import { CodeBlock } from '@/component/UI/CodeBlock';
-import { DonutChartHoverDemo } from '@/viz/DonutChartHover/DonutChartHoverDemo';
 import { ScatterplotHoverHighlightDimDemo } from '@/viz/ScatterplotHoverHighlightDim/ScatterplotHoverHighlightDimDemo';
 import { Badge } from '@/component/UI/badge';
 import GraphGallery from '@/component/GraphGallery';
@@ -33,7 +32,7 @@ export default function Home() {
         title={currentLesson.name}
         lessonStatus={currentLesson.status}
         readTime={currentLesson.readTime}
-        topBadge={'Lesson ' + currentLessonId}
+        selectedLesson={currentLesson}
         description={
           <>
             <p>

diff --git a/pages/course/hover-effect/introduction.tsx b/pages/course/hover-effect/introduction.tsx
@@ -3,8 +3,6 @@ import TitleAndDescription from '@/component/TitleAndDescription';
 import { LayoutCourse } from '@/component/LayoutCourse';
 import { lessonList } from '@/util/lessonList';
 import { Sidenote } from '@/component/SideNote';
-import { ChartOrSandbox } from '@/component/ChartOrSandbox';
-import { ScatterplotHoverHighlightDimDemo } from '@/viz/ScatterplotHoverHighlightDim/ScatterplotHoverHighlightDimDemo';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/component/UI/tabs';
 import { ScatterplotHoverHighlightPseudoClassDemo } from '@/viz/ScatterplotHoverHighlightPseudoClass/ScatterplotHoverHighlightPseudoClassDemo';
 import { TreemapHoverEffectDemo } from '@/viz/TreemapHoverEffect/TreemapHoverEffectDemo';