add marquee

Author: toddwords

public/templates/index_staging.hbs

@@ -26,7 +26,32 @@
   <link rel="shortcut icon" type="image/png" href="https://sfpc.study/images/sessions/favicon.ico" />
   <link rel="stylesheet" href="https://use.typekit.net/thn3crj.css">
 
-
+<style>
+    .stars-marquee {
+      width: 100%;
+      overflow: hidden;
+      /* background: #131313; */
+      padding: 0.5rem;
+    }
+
+    .marquee-content {
+      display: inline-block;
+      white-space: nowrap;
+      /* animation: stars-marquee 20s linear infinite; */
+      font-size: 24px;
+    }
+
+    @keyframes stars-marquee {
+      0% { transform: translateX(100%); }
+      100% { transform: translateX(-100%); }
+    }
+
+    .char0 { color: #ee3737; }
+    .char1 { color: #ba7ff1; }
+    .char2 { color: #b1c44f; }
+    .char3 { color: #eeb437; }
+    .char4 { color: #37ee91; }
+  </style>
 
   <script src="/jquery-3.6.0.min.js"></script>
 
@@ -104,6 +129,48 @@
 
       <div class="intro crt home-intro">
 
+
+  <marquee class="stars-marquee">
+    <div class="marquee-content">
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+            <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+            <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+      <span class="char0">*</span><span class="char1">*</span><span class="char2">*</span><span class="char3">*</span><span class="char4">*</span>
+    </div>
+    
+  </marquee>
         <!-- <div class="break"></div> -->
         <p tabindex="0" class="large">
           <!-- <span id="session-name"><a href="/sessions/summer-24">Spring 2024</a></span> · -->
@@ -149,7 +216,7 @@
 
               <div class="featured-text">
                 <div class="top">
-                  <h4 class="type"><a href="/sessions/spring-25/code-societies">class</a></h4>
+                  <h4 class="type"><a href="/sessions/spring-25/cybernetic-sculpture">class</a></h4>
                   <h2 class="title class" style="overflow-wrap: break-word; color:#37ee91">Code Societies:<br> Cybernetic Sculpture</h2>
                   <h6 class="index-teachers">with Melanie Hoff</h6>
                 </div>

public/templates/partials/spring25classBlock.hbs

@@ -35,7 +35,7 @@
       <div class="featured-text">
         {{!-- <img src="/images/sessions/spring-25/classes/code-societies/cover.jpg"> --}}
         <div class="top">
-          <h4 class="type"><a href="/sessions/spring-25/code-societies">class</a></h4>
+          <h4 class="type"><a href="/sessions/spring-25/cybernetic-sculpture">class</a></h4>
           <h2 class="title class" style="overflow-wrap: break-word; color:#37ee91">Code Societies: Cybernetic Sculpture</h2>
           <h6 class="index-teachers">with Melanie Hoff</h6>
         </div>