2024 (#389)

* Preparing 2024 * Move to HK Grotesk font * To black font color * Upgrade favicon * Add iframe top menu * update colors * update form * Update banner * Test new events * Move ok-panel * Update python, node and lektor * " * Update ODD logo * intro text and images * svg this year and links * Who text * Final changes * Update content/events/2024/contents+es_es.lr Co-authored-by: Adrià Mercader <[email protected]> --------- Co-authored-by: Adrià Mercader <[email protected]>
okfn · Oct 25, 2023 · 5086d62 · 5086d62
1 parent 9229339
commit 5086d62
Show file tree

Hide file tree

Showing 45 changed files with 3,877 additions and 2,211 deletions.
diff --git a/.github/workflows/build-and-deploy.yml b/.github/workflows/build-and-deploy.yml
@@ -9,15 +9,15 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Set up Python 3.8
+      - name: Set up Python 3.10
         uses: actions/setup-python@v1
         with:
-          python-version: 3.8
+          python-version: "3.10"
 
-      - name: Set up Node.js 12
+      - name: Set up Node.js 16
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 16.x
 
       - name: Install python dependencies
         run: |

diff --git a/.github/workflows/update-data.yml b/.github/workflows/update-data.yml
@@ -28,7 +28,7 @@ jobs:
 
       - name: Update Data
         run: |
-          python ./etl/2023.py
+          python ./etl/2024.py
           git config user.name "opendataday[bot]"
           git config user.email "[email protected]"
           git add -A

diff --git a/Datasets/Events 2024.csv b/Datasets/Events 2024.csv
@@ -0,0 +1,3 @@
+event_date,event_name,event_photo_url,event_purpose,event_report_url,event_tweet_url,event_video_url,has_event_report,latitude,longitude,online_event_url,organisers,place,slug,url,world_region_code,world_region_text
+,Some test 2024 ODD event,,,,,,False,33.91,63.0,,Open data cordoba,Cordoba,some-test-2024-odd-event,,,
+,Third event,,Some purpose,,,,False,-33.901,-64.81,,OKFN Cordoba,Cordoba,third-event,https://okfn.org,,
diff --git a/README.md b/README.md
@@ -74,6 +74,10 @@ These will need to be resolved by editing the input spreadsheet.
 
 There are three bits of setup we need to do each year:
 
+Before we start, we will need a Google Form and a Google Sheet to collect the event data.  
+This is the 2023 form: https://docs.google.com/forms/d/e/1FAIpQLSc5wiXeUur8GHMKmi1TQIMxwk107eMJVN6UVoibIfUwGZfc7A/viewform  
+The Google Sheet identificators must be added to the `/etl/202x.py` file.  
+This script will attempt to read the data from the Google Sheet so you need to ensure this sheet is public.
 
 - **1. Create a new import job:**
     - Create `./etl/202x.py` based on a previous year's file

diff --git a/assets/favicon.ico b/assets/favicon.ico
diff --git a/assets/images/banner.svg b/assets/images/banner.svg
diff --git a/assets/images/logo-odd.png b/assets/images/logo-odd.png
diff --git a/assets/js/map.js b/assets/js/map.js
@@ -1,4 +1,4 @@
-var url = 'https://raw.githubusercontent.com/okfn/opendataday/master/databags/events-2023.json';
+var url = 'https://raw.githubusercontent.com/okfn/opendataday/master/databags/events-2024.json';
 mapboxgl.accessToken = 'pk.eyJ1Ijoib2tmbiIsImEiOiJjaXlrOW5yczgwMDEzMnlwaWd2ZzF6MDQ3In0.2UJlkR69zbu4-3YRJJgN5w';
 
 var clusterRadius = 50,
@@ -150,9 +150,9 @@ map.on('load', function () {
         "circle-color": [
           "step",
           ["get", "point_count"],
-          '#0086FF',     // blue
-          10, '#FF4900', // red from count 10 up
-          20, '#FFB900'  // yellow from count 20 up
+          '#00d1ff',     // blue
+          10, '#e077ff', // red from count 10 up
+          20, '#e4ff36'  // yellow from count 20 up
         ],
         "circle-radius": 18
       }

diff --git a/assets/scss/_colours.scss b/assets/scss/_colours.scss
@@ -3,6 +3,9 @@ $yellow: #E4FF36;
 $blue: #00D1FF;
 $secblue: #9ab201;
 $purple: #E077FF;
+$fancy-green: #e4ff36;
 $red: #FF80DB;
 $green: #AEFFEC;
 $orange: #FF6200;
+$dark-grey: #2D2D2D;
+$white: #FFFFFF;
diff --git a/assets/scss/_home.scss b/assets/scss/_home.scss
@@ -3,7 +3,7 @@ body {
     background-color: $yellow;
     width: 100%;
     display: table;
-    background-image: url("../images/banner.png");
+    background-image: url("../images/banner.svg");
     background-size: cover;
     background-position: center;
     @media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (min-width: 720px),
@@ -27,16 +27,13 @@ body {
         line-height: 1.5;
 
         span {
-          background-color: $black;
-          @include rev-text;
           position: relative;
           z-index: 1;
           display: inline-block;
 
           &:after {
             content: "\00a0";
             display: block;
-            background-color: $black;
             position: absolute;
             left: 100%;
             top: 0;
@@ -51,6 +48,11 @@ body {
           &.l2 {
             top: -0.3em;
           }
+
+          &.l3 {
+            top: -0.3em;
+            font-weight: normal;
+          }
         }
       }
 
@@ -126,6 +128,9 @@ body {
         @media (min-width: $max-screen) {
           max-width: 500px;
         }
+        & svg{
+          width: 450px;
+        }
       }
     }
 
@@ -134,7 +139,7 @@ body {
         padding: $gutter $gutter $gutter/2 $gutter;
 
         h2 {
-          color: $blue;
+          color: $black;
         }
 
         @media (min-width: $max-screen) {
@@ -158,8 +163,7 @@ body {
       }
     }
     .this-year {
-      background-color: $purple;
-      @include rev-text;
+      background-color: $white;
       position: relative;
 
       @media (min-width: $large-screen) {
@@ -173,18 +177,12 @@ body {
           bottom: 0;
           left: 100%;
           width: 50vw;
-          background-color: $purple;
+          background-color: $white;
         }
       }
 
       header {
         padding: $gutter $gutter 0 $gutter;
-
-        @media (min-width: $max-screen) {
-          padding-right: 0;
-          text-align: right;
-          float: right;
-        }
       }
 
       .theme {
@@ -278,7 +276,6 @@ body {
 
     &#who {
       background-color: $blue;
-      @include rev-text;
       @media (min-width: $max-screen) {
         position: relative;
         padding-bottom: 50px;
@@ -332,7 +329,7 @@ body {
 
             span {
               display: inline-block;
-              background-color: #fff;
+              background-color: $black;
               padding: 1.2em;
               border-radius: 50%;
 
@@ -357,7 +354,7 @@ body {
           padding-right: $gutter;
 
           h2 {
-            color: $blue;
+            color: $black;
           }
 
           svg {
@@ -457,8 +454,7 @@ body {
     }
 
     &#support {
-      background-color: $purple;
-      @include rev-text;
+      background-color: $fancy-green;
 
       & > div {
         padding-bottom: $gutter;
@@ -467,7 +463,7 @@ body {
           padding: $gutter $gutter 0;
 
           & + a {
-            @include button(#fff, $purple);
+            @include button($black, $white);
             margin: $gutter;
           }
         }
@@ -539,3 +535,25 @@ body {
     }
   }
 }
+
+.intro2-box {
+  padding: 25px;
+  font-size: small;
+  border: 3px solid $black;
+}
+
+.oddbtn {
+  background-color: $black;
+  color: $white;
+  padding: 20px 45px;
+  margin-top: 25px;
+  margin-bottom: 25px;
+  text-decoration: none;
+  display: block;
+  border-radius: 12px;
+  font-weight: bold;
+  text-align: center;
+  width: 250px;
+  margin-left: auto;
+  margin-right: auto;
+}
diff --git a/assets/scss/_ok-ribbon.scss b/assets/scss/_ok-ribbon.scss
@@ -0,0 +1,14 @@
+#ok-panel {
+    border-color: $dark-grey;
+}
+
+#ok-panel-wrapper {
+    float: right;
+}
+
+#ok-panel-wrapper:not([data-breakpoint*='px'])>.ok-ribbon {
+    margin-top: 0;
+    background-color: $dark-grey;
+    margin-bottom: 1.5em;
+    background-color: transparent;
+}
diff --git a/assets/scss/_type.scss b/assets/scss/_type.scss
@@ -1,4 +1,4 @@
-$base-font-family: 'Noto Sans', sans-serif;
+$base-font-family: 'HK Grotesk', sans-serif;
 $base-font-size: 1em;
 $base-line-height: 1.5;
 $heading-line-height: 1.2;

diff --git a/assets/scss/main.scss b/assets/scss/main.scss
@@ -1,5 +1,6 @@
 @import "colours";
 @import "type";
+@import 'ok-ribbon';
 @import "sizes";
 @import "mixins";
 @import "description_list";