better visibility on project page

CookieCollective · Oct 4, 2024 · cbd743c · cbd743c
1 parent 6569287
commit cbd743c
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 3 deletions.
diff --git a/src/css/style.scss b/src/css/style.scss
@@ -89,7 +89,34 @@ legend {
 }
 
 .project-text-content {
-    font-size: 0.75em;
+    font-size: 1em;
+}
+
+.project-title-one-line {
+    font-size: 1.5em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: block;
+    animation: scroll-text 10s linear infinite;
+
+    &:hover {
+        animationplay-state: paused;
+    }
+}
+
+
+@keyframes scroll-text {
+    0% {
+        transform: translateX(100%);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+legend {
+    font-size: 1em;
 }
 
 .project-text-content a {

diff --git a/src/project.njk b/src/project.njk
@@ -55,8 +55,8 @@ permalink: "projects/{{ project.folder | slugify }}/"
 
         <div class="column video-column">
             <div class="project-title"</div>
-                <h2>{% phicon "projector-screen" %}</h2>
-                <h2>{{project.videast.name}} X {{project.musician.name}} &mdash; {{project.title}}</h2>
+                <h2></h2>
+                <h2 class="project-title-one-line">{% phicon "projector-screen" %} {{project.videast.name}} X {{project.musician.name}} &mdash; {{project.title}}</h2>
             </div>
             <video class="view box-shadow borders" controls>
                 <source src="https://ccc-static.cookie.paris/{{project.folder}}.mp4" type="video/mp4" />