wip

OpenUpSA · Nov 14, 2024 · 72bd77a · 72bd77a
1 parent 58a2621
commit 72bd77a
Showing 1 changed file with 44 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -44,8 +44,6 @@
             .scrolly {
                 width: 100%;
                 position: relative;
-                font-family: 'Balto', sans-serif;
-                color: #474747;
             }
 
             .scrolly * {
@@ -105,7 +103,7 @@
                 transform: translate(-50%, -50%);
                 width: 1000px;
                 max-width: 100%;
-                aspect-ratio: 16 / 9;
+                aspect-ratio: 16 / 16;
                 z-index: -1;
                 overflow: hidden;
             }
@@ -221,18 +219,19 @@
             }
 
             .scrolly .scrolly-chart-title {
-                background-color: #fff;
+                background-color: #000;
                 padding: 0.5em 1em;
                 text-align: center;
                 display: inline-block;
-                font-size: 1.1em;
+                font-size: 1em;
                 font-weight: 500;
+                color: #fff;
             }
 
             .scrolly .scrolly-chart-legend {
                 text-align: center;
                 display: inline-block;
-                background-color: #fff;
+                background-color: #000;
                 padding: 0.5em 1em;
             }
 
@@ -241,16 +240,20 @@
             }
 
             .scrolly .scrolly-legend-color {
-                width: 15px;
-                height: 15px;
+                width: 0.9em;
+                height: 0.9em;
                 display: inline-block;
                 margin-right: 4px;
                 border-radius: 2px;
+                position: relative;
+                top: 3px;
             }
 
             .scrolly .scrolly-legend-text {
                 display: inline-block;
                 font-size: 0.8em;
+                margin-right: 1em;
+                color: #fff;
             }
 
             .scrolly .scrolly-chart-label-container {
@@ -260,9 +263,10 @@
             .scrolly .scrolly-chart-label {
                 display: inline-block;
                 text-align: center;
-                font-size: 0.8em;
+                font-size: 0.7em;
                 margin-top: 1em;
-                background-color: #fff;
+                background-color: #000;
+                color: #fff;
                 padding: 0.5em 1em;
             }
 
@@ -272,11 +276,12 @@
             }
 
             .scrolly {
-                font-size: 22px;
+                font-family: 'Balto', sans-serif;
+                font-size: 16px;
             }
 
             .scrolly h1 {
-                font-size: 30px;
+                font-size: 1.5em;
                 margin: unset;
                 margin-bottom: 0.8em;
                 padding: unset;
@@ -297,7 +302,7 @@
             }
 
             .scrolly .scrolly-big {
-                font-size: 40px;
+                font-size: 1.5em;
             }
 
             .scrolly p {
@@ -328,8 +333,6 @@
                 border-radius: 5px;
             }
 
-
-
             /* ANNOTATIONS */
 
             .scrolly .scrolly-annotation-label {
@@ -376,6 +379,29 @@
                 top: 10%;
                 transform: translateX(-50%);
             }
+
+
+            /* RESPONSIVENESS */
+
+            @media (min-width: 768px) {
+
+                .scrolly {
+                    font-size: 22px;
+                }
+
+                .scrolly .scrolly-background {
+                    aspect-ratio: 16 / 9;
+                }
+
+                .scrolly .scrolly-legend-text {
+                    font-size: 0.7em;
+                }
+
+
+
+            }
+
+
         </style>
 
         <div class="scrolly-indicator"></div>
@@ -731,7 +757,7 @@ <h1 class="scrolly-secondary">What we did</h1>
             /// PINS
 
 
-
+            /*
             ScrollTrigger.create({
                 trigger: ".scrolly-section[data-section-label='they-visited']",
                 pin: true,
@@ -820,7 +846,8 @@ <h1 class="scrolly-secondary">What we did</h1>
                 endTrigger: ".scrolly-section[data-section-label='unhygenic-toilets2']",
                 end: 'top top',
                 pinSpacing: false
-            });
+            }); */
+
 
             ScrollTrigger.create({
                 trigger: ".scrolly-section[data-section-label='conclusion']",