improve website design

medialab · Jul 30, 2024 · 2d0fbdd · 2d0fbdd
1 parent 376bd3e
commit 2d0fbdd
Show file tree

Hide file tree

Showing 7 changed files with 209 additions and 118 deletions.
diff --git a/public/texts/footer.md b/public/texts/footer.md
@@ -1,7 +1,7 @@
-CC by SA
+[médialab Sciences Po](https://medialab.sciencespo.fr/)
 
-https://creativecommons.org/licenses/by-sa/3.0/fr/
+Licence [Creative Commons Attribution-Partage dans les mêmes conditions](https://creativecommons.org/licenses/by-sa/3.0/fr/).
 
-Typographie
+Typographie : [Karla](https://fonts.google.com/specimen/Karla), Jonny Pinhorn.
 
-Carla
+Code source : [https://github.com/medialab/voix-des-abords/](https://github.com/medialab/voix-des-abords/)
diff --git a/public/texts/voyageurs.md b/public/texts/voyageurs.md
@@ -1,18 +1 @@
-Tout d’abord je dois introduire mon utilisation du terme « voyageur.ses quotidien.nes », en effet, je l’emploie pour parler des personnes qui prennent régulièrement le RER C, mais il faut savoir qu’ils sont régulièrement appelés par la SNCF des « usager.es ». Je n’utiliserai pas ce terme car je trouve qu’il rend moins compte de l’expérience de ces personnes. Nous avons étudié le point de vue des voyageur.ses quotidien.nes du RER C par deux approches principales : la première à consiste en une grande collecte de tweets allant jusqu'au 14 juin 2024 et mentionnant "rerc" ainsi que d'autres mots clés liés à la vie des abords de voies comme "arbre", "branche", "incendie", "talus", "feuilles", "éboulement", "animaux" ou "chèvres". Pour comprendre la nature des tweets récoltés, il faut savoir que la ligne du RER C, comme d'autres lignes du transport francilien possède son compte twitter ainsi que des Community Managers qui ont pour rôle d'informer en temps réel les voyageur.ses, de répondre à leurs questions et notamment dans les perturbations de la circulation, ce compte @RERC_SNCF génère de nombreux tweets que je peux collecter ainsi que ceux contenant le #RERC. La seconde approche est de l'ordre de l'immersion, j'empruntais le RER C quotidiennement pendant les quatre mois de mon stage et j'ai pu vivre les retards, la fatigue et les chèvres sur les voies parmis les voyageur.ses.
-
-
-légendes :
-
-Carte :
-lignes bleues : les cours d'eau
-lignes noires : les découpages administratifs des départements d'Île-de-France
-lignes jaunes : le réseau du RER C
-pointillés gris : les voies ferroviaires
-hachures claires : l'Île-de-France
-hachures foncées : Paris
-points jaunes : les stations du RER C
-
-Réseau :
-points bleus : les comptes twitter des tweets de notre collecte
-points jaunes : les stations mentionnées dans les tweets
-trait gris : lien entre deux entités, c'est-à-dire soit un compte twitter qui répond à l'autre, soit la mention d'une station
+Tout d’abord je dois introduire mon utilisation du terme « voyageur.ses quotidien.nes », en effet, je l’emploie pour parler des personnes qui prennent régulièrement le RER C, mais il faut savoir qu’ils sont régulièrement appelés par la SNCF des « usager.es ». Je n’utiliserai pas ce terme car je trouve qu’il rend moins compte de l’expérience de ces personnes. Nous avons étudié le point de vue des voyageur.ses quotidien.nes du RER C par deux approches principales : la première à consiste en une grande collecte de tweets allant jusqu'au 14 juin 2024 et mentionnant "rerc" ainsi que d'autres mots clés liés à la vie des abords de voies comme "arbre", "branche", "incendie", "talus", "feuilles", "éboulement", "animaux" ou "chèvres". Pour comprendre la nature des tweets récoltés, il faut savoir que la ligne du RER C, comme d'autres lignes du transport francilien possède son compte twitter ainsi que des Community Managers qui ont pour rôle d'informer en temps réel les voyageur.ses, de répondre à leurs questions et notamment dans les perturbations de la circulation, ce compte @RERC_SNCF génère de nombreux tweets que je peux collecter ainsi que ceux contenant le #RERC. La seconde approche est de l'ordre de l'immersion, j'empruntais le RER C quotidiennement pendant les quatre mois de mon stage et j'ai pu vivre les retards, la fatigue et les chèvres sur les voies parmis les voyageur.ses.
diff --git a/src/App.scss b/src/App.scss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&display=swap");
 
 $rerc-color: #ffcf01;
 $main-width: 1200px;
@@ -23,6 +23,7 @@ body {
 
 .section {
   min-height: 100vh;
+  margin-top: 2rem;
   @media screen and (max-width: $main-width) {
     min-height: unset;
   }
@@ -31,7 +32,10 @@ body {
   min-height: 30vh;
   margin-top: 10rem;
   padding: 1rem 0;
-  font-size: .9em;
+  font-size: 0.9em;
+  a {
+    color: inherit;
+  }
   // background: rgba(0,0,0,0.1);
 }
 
@@ -201,6 +205,7 @@ main .section {
 .HomeContainer {
   min-height: 100vh;
   width: 100vw;
+  margin-bottom: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -227,6 +232,10 @@ main .section {
   .home-title {
     font-size: 5rem;
     margin: 0;
+    margin-top: 5rem;
+    @media screen and (max-width: $main-width) {
+      margin-top: 0;
+    }
   }
   .home-subtitle {
     font-size: 2rem;
@@ -256,14 +265,22 @@ main .section {
       // }
       li:not(:last-of-type):after {
         content: "|";
-        padding-left: .25rem;
-        padding-right: .25rem;
+        padding-left: 0.25rem;
+        padding-right: 0.25rem;
       }
     }
   }
   .abstract {
     // font-size: 1.2rem;
     margin: 2rem 0;
+    column-count: 3;
+    column-gap: 1rem;
+    @media screen and (max-width: $main-width) {
+      column-count: 1;
+    }
+    > p:first-of-type {
+      margin-top: 0;
+    }
   }
   .menu-container {
     .menu {
@@ -272,19 +289,20 @@ main .section {
       margin: 0;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
-      grid-gap: 10px;
-      grid-auto-rows: minmax(100px, auto);
+      grid-gap: 1rem;
+      grid-auto-rows: minmax(30vh, auto);
       li {
         display: flex;
         justify-content: stretch;
         .section-link {
-          background: rgba(0, 0, 0, 0.2);
+          background: rgba(0, 0, 0, 0.4);
           width: 100%;
           height: 100%;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: 0.5s ease all;
+          color: white;
           &:hover {
             background: rgba(0, 0, 0, 0.8);
             color: white;
@@ -295,12 +313,11 @@ main .section {
   }
 }
 
-.welcome-image{
+.welcome-image {
   max-width: $main-width;
   @media screen and (max-width: $main-width) {
     max-width: calc(100% - 2rem);
   }
-
 }
 
 .section.voyageurs {
@@ -327,12 +344,10 @@ main .section {
 }
 
 .TweetsMap {
-  .departements {
-    path {
+  .departement {
       stroke: grey;
       // fill: transparent;
     }
-  }
 
   // .rivieres {
   //   path {
@@ -353,71 +368,70 @@ main .section {
       opacity: 0;
     }
   }
-  .edges {
-    .edge {
-      transition: 0.5s ease all;
-      stroke: grey;
-      stroke-width: 1;
-      stroke-opacity: 0.1;
-      &.segment {
-        stroke: $rerc-color;
-        stroke-width: 2px;
-        stroke-opacity: 0.5;
-      }
-      &.is-hidden {
-        opacity: 0;
-      }
-      &.is-related {
-        opacity: .7;
-      }
-      &.is-active {
-        stroke: red;
-      }
-
+  .edge {
+    transition: 0.5s ease all;
+    stroke: grey;
+    stroke-width: 1;
+    stroke-opacity: 0.1;
+    &.segment {
+      stroke: $rerc-color;
+      stroke-width: 1.5px;
+      stroke-opacity: 0.5;
+    }
+    &.is-hidden {
+      opacity: 0;
+    }
+    &.is-related {
+      opacity: 0.7;
+    }
+    &.is-active {
+      stroke: red;
     }
   }
-  .nodes {
-    .node {
+
+  .node {
+    transition: 0.5s ease all;
+    pointer-events: all;
+    circle {
+      stroke: white;
+      opacity: 1;
       transition: 0.5s ease all;
-      pointer-events: all;
-      circle {
-        stroke: white;
-        opacity: 1;
-        transition: 0.5s ease all;
-      }
+    }
 
-      &.station {
-        circle {
-          fill: $rerc-color;
-        }
-      }
-      &.twitter_user {
-        circle {
-          fill: turquoise;
-        }
-      }
-      &.is-active,
-      &.is-active-secondary {
-        circle {
-          stroke: red;
-          // stroke-width: 3;
-        }
+    &.station {
+      circle {
+        fill: $rerc-color;
       }
-      &.station.is-active {
-        circle {
-          fill: red;
-        }
+    }
+    &.twitter_user {
+      circle {
+        fill: turquoise;
       }
-      &.is-hidden {
-        opacity: 0;
+    }
+    &.is-active,
+    &.is-active-secondary {
+      circle {
+        stroke: red;
+        stroke-width: 1.5;
       }
-      &.is-related {
-        opacity: .7;
+    }
+    &.station.is-active {
+      circle {
+        fill: red;
       }
-
+    }
+    &.is-hidden {
+      opacity: 0;
+    }
+    &.is-related {
+      opacity: 0.7;
     }
   }
 
+  .legend {
+    pointer-events: none;
+  }
+
   .tooltip-element-wrapper {
     pointer-events: none;
     .tooltip-element-container {
@@ -436,13 +450,13 @@ main .section {
         background: black;
         color: white;
         padding: 0.2rem;
-        font-size: .6rem;
+        font-size: 0.6rem;
         position: absolute;
         .tooltip-content {
           padding: 1rem;
           h5 {
             margin: 0;
-            font-size: .8rem;
+            font-size: 0.8rem;
           }
         }
       }
@@ -455,12 +469,12 @@ main .section {
   .hovered-tweets-container {
     padding: 1rem;
     opacity: 0;
-    transition: .5s ease all;
+    transition: 0.5s ease all;
     width: 30%;
     .HoveredTweets {
       opacity: 0;
-      transition: .5s ease all;
-      background: rgba(0,0,0,0.5);
+      transition: 0.5s ease all;
+      background: rgba(0, 0, 0, 0.5);
       color: white;
       padding: 1rem;
       p {
@@ -483,7 +497,7 @@ main .section {
     position: absolute;
     right: 1rem;
     top: 1rem;
-    transition: .5s ease all;
+    transition: 0.5s ease all;
     background: rgba(100, 100, 100, 0.3);
     width: 30%;
     max-height: calc(100% - 3rem);
@@ -662,22 +676,23 @@ main .section {
   }
 }
 
-.layout-text-only {
+.layout-text-only,
+.layout-illustrated {
   column-count: 2;
   column-gap: 1rem;
   @media screen and (max-width: $main-width) {
     column-count: 1;
   }
 }
 
-.layout-illustrated {
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-column-gap: 1rem;
-  @media screen and (max-width: $main-width) {
-    display: block;
-  }
-}
+// .layout-illustrated {
+//   display: grid;
+//   grid-template-columns: auto auto;
+//   grid-column-gap: 1rem;
+//   @media screen and (max-width: $main-width) {
+//     display: block;
+//   }
+// }
 .text-container {
   column-count: 2;
   column-gap: 1rem;
@@ -734,7 +749,6 @@ main .section {
       }
     }
   }
-
 }
 .yarl__fullsize.yarl__slide_wrapper {
   margin-top: 80px;
@@ -764,10 +778,11 @@ main .section {
   }
 }
 
-.Philippe-container {
-  max-height: 100vh;
-  max-width: 100vw;
+.section.Philippe-container {
+  max-height: 110vh;
+  // max-width: 100vw;
   box-sizing: border-box;
+  // margin-bottom: 2rem;
   .philippe {
     // max-width: 100vw;
     box-sizing: border-box;
@@ -808,7 +823,7 @@ main .section {
           align-items: flex-end;
           justify-content: center;
           > div {
-            background: rgba(0,0,0,0.6);
+            background: rgba(0, 0, 0, 0.6);
             color: white;
             padding: 0.5rem;
             font-size: 12px;