From cbd743c9463f6fa83f36ad32840ee52efc86927d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rapha=C3=ABl=20Forment?= <raphael.forment@gmail.com>
Date: Fri, 4 Oct 2024 02:58:20 +0200
Subject: [PATCH] better visibility on project page

---
 src/css/style.scss | 29 ++++++++++++++++++++++++++++-
 src/project.njk    |  4 ++--
 2 files changed, 30 insertions(+), 3 deletions(-)

diff --git a/src/css/style.scss b/src/css/style.scss
index 4808918..a42e664 100644
--- 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
index a7cc7fe..f8105f3 100644
--- 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" />