Revert "fomobremen specific logo and styling"

This reverts commit 93e031aabd.

js/public/img/icons/favicon.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:#3c3c3c;stroke-opacity:0" d="m -5.801,-6.164 h 72.69 v 72.871 h -72.69 z"/><g data-name="icon"><g data-name="header"><path d="M 22.046275,57.767824 H 21.898116 L 15.171689,53.856422 Q 14.964267,53.737894 14.964267,53.50084 L 14.845739,16.223989 q 0.02963,-0.207422 0.207423,-0.32595 22.964673,-13.2750625 23.083201,-13.2750625 0.118527,0 6.874586,3.9410343 l 0.05926,0.059264 0.05926,0.029632 v 0.029632 h 0.02963 l 0.05926,0.1185274 0.02963,4.5040395 q -0.02963,0.237054 -0.207423,0.355582 L 26.165101,22.535571 v 3.407661 q 11.911998,-6.874586 12.030525,-6.874586 0.0889,0 3.496557,1.985333 3.407661,1.955701 3.407661,1.985333 h 0.02963 v 0.02963 q 0.02963,0.02963 0.02963,0.05926 0.02963,0 0.02963,0 0.02963,0 0.02963,0.02963 l 0.02963,0.148159 h 0.02963 v 4.444776 q 0,0.207423 -0.207423,0.32595 l -18.845848,10.904516 0.02963,16.208614 q 0,0.207423 -0.207423,0.32595 -3.852138,2.25202 -4.000298,2.25202 z M 26.194733,33.677141 44.06273,23.365262 38.195626,19.927969 26.194733,26.861819 Z m -4.563303,22.994305 -0.0889,-36.298999 -5.867103,-3.437294 0.0889,36.328632 z M 21.927748,19.661282 44.003466,6.9195928 38.136363,3.5119316 16.060645,16.253621 Z" style="stroke-opacity:1;fill:#ffffff;stroke:#ffffff;stroke-width:0.782;stroke-dasharray:none"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path style="opacity:1;fill:#fea72b;fill-opacity:1;stroke:none;stroke-opacity:1" d="M-5.801-6.164h72.69v72.871h-72.69z"/><g data-name="Calque 2"><g data-name="header"><path d="M26.58 27.06q0 8-4.26 12.3a12.21 12.21 0 0 1-9 3.42 12.21 12.21 0 0 1-9-3.42Q0 35.1 0 27.06q0-8.04 4.26-12.3a12.21 12.21 0 0 1 9-3.42 12.21 12.21 0 0 1 9 3.42q4.32 4.24 4.32 12.3zM13.29 17q-5.67 0-5.67 10.06t5.67 10.08q5.71 0 5.71-10.08T13.29 17z" style="fill:#3a384c;fill-opacity:1" transform="translate(14.627 5.256) scale(1.15671)"/><path d="M9 6.78a7.37 7.37 0 0 1-.6-3 7.37 7.37 0 0 1 .6-3A8.09 8.09 0 0 1 12.83 0a7.05 7.05 0 0 1 3.69.84 7.37 7.37 0 0 1 .6 3 7.37 7.37 0 0 1-.6 3 7.46 7.46 0 0 1-3.87.84A6.49 6.49 0 0 1 9 6.78z" style="fill:#fff" transform="translate(14.627 5.256) scale(1.15671)"/></g></g></svg>

js/public/img/icons/safari-pinned-tab.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path style="display:inline;opacity:1;fill:#000000;fill-opacity:1;stroke:#3c3c3c;stroke-opacity:0" d="m -5.801,-6.164 h 72.69 v 72.871 h -72.69 z"/><g data-name="icon"><g data-name="header"><path d="M 22.046275,57.767824 H 21.898116 L 15.171689,53.856422 Q 14.964267,53.737894 14.964267,53.50084 L 14.845739,16.223989 q 0.02963,-0.207422 0.207423,-0.32595 22.964673,-13.2750625 23.083201,-13.2750625 0.118527,0 6.874586,3.9410343 l 0.05926,0.059264 0.05926,0.029632 v 0.029632 h 0.02963 l 0.05926,0.1185274 0.02963,4.5040395 q -0.02963,0.237054 -0.207423,0.355582 L 26.165101,22.535571 v 3.407661 q 11.911998,-6.874586 12.030525,-6.874586 0.0889,0 3.496557,1.985333 3.407661,1.955701 3.407661,1.985333 h 0.02963 v 0.02963 q 0.02963,0.02963 0.02963,0.05926 0.02963,0 0.02963,0 0.02963,0 0.02963,0.02963 l 0.02963,0.148159 h 0.02963 v 4.444776 q 0,0.207423 -0.207423,0.32595 l -18.845848,10.904516 0.02963,16.208614 q 0,0.207423 -0.207423,0.32595 -3.852138,2.25202 -4.000298,2.25202 z M 26.194733,33.677141 44.06273,23.365262 38.195626,19.927969 26.194733,26.861819 Z m -4.563303,22.994305 -0.0889,-36.298999 -5.867103,-3.437294 0.0889,36.328632 z M 21.927748,19.661282 44.003466,6.9195928 38.136363,3.5119316 16.060645,16.253621 Z" style="stroke-opacity:1;fill:#ffffff;stroke:#ffffff;stroke-width:0.782;stroke-dasharray:none"/></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60"><path style="opacity:1;fill:#fea72b;fill-opacity:1;stroke:none;stroke-opacity:1" d="M-5.801-6.164h72.69v72.871h-72.69z"/><g data-name="Calque 2"><g data-name="header"><path d="M26.58 27.06q0 8-4.26 12.3a12.21 12.21 0 0 1-9 3.42 12.21 12.21 0 0 1-9-3.42Q0 35.1 0 27.06q0-8.04 4.26-12.3a12.21 12.21 0 0 1 9-3.42 12.21 12.21 0 0 1 9 3.42q4.32 4.24 4.32 12.3zM13.29 17q-5.67 0-5.67 10.06t5.67 10.08q5.71 0 5.71-10.08T13.29 17z" style="fill:#3a384c;fill-opacity:1" transform="translate(14.627 5.256) scale(1.15671)"/><path d="M9 6.78a7.37 7.37 0 0 1-.6-3 7.37 7.37 0 0 1 .6-3A8.09 8.09 0 0 1 12.83 0a7.05 7.05 0 0 1 3.69.84 7.37 7.37 0 0 1 .6 3 7.37 7.37 0 0 1-.6 3 7.46 7.46 0 0 1-3.87.84A6.49 6.49 0 0 1 9 6.78z" style="fill:#fff" transform="translate(14.627 5.256) scale(1.15671)"/></g></g></svg>

js/src/common.scss

@@ -120,7 +120,7 @@ a.list-item {
 
   h2 {
     display: inline;
-    background: #ffffff;
+    background: $secondary;
     padding: 2px 7.5px;
     text-transform: uppercase;
     font-size: 1.25rem;

js/src/components/Event/DateCalendarIcon.vue

@@ -19,7 +19,6 @@
   >
     <div class="datetime-container-header" />
     <div class="datetime-container-content">
-      <time :datetime="dateObj.toISOString()" class="wkday">{{ wkday }}</time>
       <time :datetime="dateObj.toISOString()" class="day">{{ day }}</time>
       <time :datetime="dateObj.toISOString()" class="month">{{ month }}</time>
     </div>
@@ -40,10 +39,6 @@ export default class DateCalendarIcon extends Vue {
     return new Date(this.$props.date);
   }
 
-  get wkday(): string {
-    return this.dateObj.toLocaleString(undefined, { weekday: "short" });
-  }
-
   get month(): string {
     return this.dateObj.toLocaleString(undefined, { month: "short" });
   }
@@ -67,17 +62,17 @@ div.datetime-container {
   overflow-y: hidden;
   overflow-x: hidden;
   align-items: stretch;
-  width: calc(55px * var(--small));
+  width: calc(40px * var(--small));
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
-  height: calc(55px * var(--small));
+  height: calc(40px * var(--small));
   background: #fff;
 
   .datetime-container-header {
-    height: calc(12px * var(--small));
+    height: calc(10px * var(--small));
     background: #f3425f;
   }
   .datetime-container-content {
-    height: calc(43px * var(--small));
+    height: calc(30px * var(--small));
   }
 
   time {
@@ -85,13 +80,6 @@ div.datetime-container {
     font-weight: 600;
     color: $violet-3;
 
-    &.wkday {
-      padding: 2px 0;
-      font-size: 12px;
-      line-height: 12px;
-      text-transform: uppercase;
-    }
-
     &.month {
       padding: 2px 0;
       font-size: 12px;

js/src/components/Event/EventCard.vue

@@ -67,7 +67,6 @@
             <inline-address
               dir="auto"
               v-if="event.physicalAddress"
-              class="event-subtitle"
               :physical-address="event.physicalAddress"
             />
             <div
@@ -149,8 +148,8 @@ export default class EventCard extends Vue {
 
 a.card {
   display: block;
-  background: #ffffff;
+  background: $secondary;
-  color: #000000;
+  color: #3c376e;
 
   &:hover {
     // box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
@@ -161,7 +160,7 @@ a.card {
   }
 
   border-radius: 5px;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
   transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
 
   &:after {
@@ -251,7 +250,7 @@ a.card {
       font-size: 18px;
       line-height: 24px;
       display: -webkit-box;
-      -webkit-line-clamp: 2;
+      -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       overflow: hidden;
       font-weight: bold;
@@ -263,22 +262,10 @@ a.card {
 
     .event-subtitle {
       font-size: 0.85rem;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
     }
 
     .organizer-name {
       font-size: 14px;
-      display: -webkit-box;
-      -webkit-line-clamp: 1;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-
-    .event-organizer {
-      background-color: #21bef3;
     }
   }
 }

js/src/components/Event/EventMetadataBlock.vue

@@ -34,7 +34,7 @@ export default class EventMetadataBlock extends Vue {
 h2 {
   font-size: 1.8rem;
   font-weight: 500;
-  color: rgb(0, 0, 0);
+  color: $violet;
 }
 
 div.eventMetadataBlock {

js/src/components/Event/EventParticipationCard.vue

@@ -523,7 +523,7 @@ article.box {
             line-height: 24px;
             margin: auto 0;
             font-weight: bold;
-            color: #ffffff;
+            color: $title-color;
           }
         }
       }
@@ -531,7 +531,7 @@ article.box {
   }
 
   .identity-header {
-    background: #21bef3;
+    background: $yellow-2;
     display: flex;
     padding: 5px;
 

js/src/components/Footer.vue

@@ -1,5 +1,22 @@
 <template>
   <footer class="footer" ref="footer">
+    <picture>
+      <source
+        :srcset="`/img/pics/footer_${random}-1024w.webp 1x, /img/pics/footer_${random}-1920w.webp 2x`"
+        type="image/webp"
+      />
+      <source
+        :srcset="`/img/pics/footer_${random}-1024w.jpg 1x, /img/pics/footer_${random}-1920w.jpg 2x`"
+        type="image/jpeg"
+      />
+      <img
+        :src="`/img/pics/footer_${random}-1024w.jpg`"
+        alt=""
+        width="5234"
+        height="2189"
+        loading="lazy"
+      />
+    </picture>
     <ul>
       <li>
         <b-select
@@ -44,7 +61,6 @@
     <div class="content has-text-centered">
       <i18n
         tag="span"
-        color="#fff"
         path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
       >
         <a rel="external" slot="mobilizon" href="https://joinmobilizon.org">{{
@@ -55,7 +71,6 @@
           rel="external"
           href="https://joinmobilizon.org/hall-of-fame"
           slot="contributors"
-          color="#fff"
           >{{ $t("more than 1360 contributors") }}</a
         >
       </i18n>
@@ -145,7 +160,7 @@ footer.footer {
   a {
     color: $white;
     text-decoration: underline;
-    text-decoration-color: #fff;
+    text-decoration-color: $secondary;
 
     &:focus {
       background-color: #000;

js/src/components/Group/GroupMemberCard.vue

@@ -105,7 +105,7 @@ export default class GroupMemberCard extends Vue {
   }
 
   .identity-header {
-    background: #21bef3;
+    background: $yellow-2;
     display: flex;
     padding: 5px;
 

js/src/components/Logo.vue

@@ -1,26 +1,27 @@
 <template>
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
-    <title>Fomo Logo</title>
+    <title>Mobilizon Logo</title>
     <g data-name="header">
       <path
-        d="M 62.099803,46.107167 H 61.977828 L 56.44017,42.887031 q -0.170765,-0.09758 -0.170765,-0.292739 L 56.171825,11.905419 Q 56.19622,11.734654 56.34259,11.637074 75.248692,0.70812735 75.346272,0.70812735 q 0.09758,0 5.659633,3.24453105 l 0.04879,0.04879 0.04879,0.024395 v 0.024395 h 0.02439 l 0.04879,0.09758 0.02439,3.7080355 Q 81.176669,8.0510134 81.0303,8.1485933 L 65.490704,17.101547 v 2.805422 q 9.806778,-5.659633 9.904357,-5.659633 0.07318,0 2.878607,1.634463 2.805422,1.610068 2.805422,1.634463 h 0.0244 v 0.02439 q 0.02439,0.0244 0.02439,0.04879 0.02439,0 0.02439,0 0.02439,0 0.02439,0.0244 l 0.02439,0.121975 h 0.02439 v 3.659245 q 0,0.170765 -0.170764,0.268345 l -15.515202,8.977349 0.0244,13.344049 q 0,0.170765 -0.170764,0.268344 -3.171347,1.854018 -3.293321,1.854018 z m 3.415295,-19.833111 14.710168,-8.489449 -4.830205,-2.829817 -9.879963,5.708423 z m -3.756825,18.930497 -0.07319,-29.883838 -4.830204,-2.829817 0.07319,29.908234 z M 62.002223,14.735235 80.176476,4.2453981 75.346272,1.4399765 57.172019,11.929814 Z m 0.414714,30.469318 2.488287,-1.414908 -0.04879,-13.344049 q 0.0244,-0.19516 0.170765,-0.292739 l 15.539596,-8.952955 v -2.854211 q -15.295646,8.830979 -15.368831,8.830979 -0.317135,0 -0.34153,-0.341529 l -0.02439,-9.928753 q 0,-0.170765 0.170765,-0.268345 L 80.518005,7.6606939 V 4.8308773 L 62.343752,15.320715 Z"
+        d="M0 45.82l3.18-40.8a29.88 29.88 0 015.07-.36 27.74 27.74 0 014.95.36l4.86 17.16a92.19 92.19 0 012.34 10.08h.36a92.19 92.19 0 012.34-10.08L28 5.02a29.23 29.23 0 015-.36 29.23 29.23 0 015 .36l3.18 40.8a13.61 13.61 0 01-3.63.42 23.41 23.41 0 01-3.63-.24l-1.2-19.92q-.36-5.52-.48-12.84h-.44l-7.32 26.51a25.62 25.62 0 01-4 .3 23.36 23.36 0 01-3.84-.3L9.36 13.24H9q-.3 8.94-.48 12.84L7.26 46a22.47 22.47 0 01-3.6.24A13.75 13.75 0 010 45.82zM74 31.06q0 8-4.26 12.3a12.21 12.21 0 01-9 3.42 12.21 12.21 0 01-9-3.42q-4.26-4.26-4.26-12.3t4.24-12.31a12.21 12.21 0 019-3.42 12.21 12.21 0 019 3.42Q74 23.02 74 31.06zM60.75 20.98q-5.67 0-5.67 10.08t5.67 10.08q5.67 0 5.67-10.08t-5.67-10.08zM103.2 19.75q2.7 4.11 2.7 11.28T102 42.31a13.18 13.18 0 01-10 4.11 31.41 31.41 0 01-11.34-2V2.2l.4-.45h2.76A4 4 0 0187 2.83a5.38 5.38 0 01.93 3.57v11.94a12.08 12.08 0 017.56-2.7 8.71 8.71 0 017.71 4.11zm-9.72 2a7.28 7.28 0 00-5.58 2.82v16a15 15 0 004.08.54 5.25 5.25 0 004.68-2.67q1.68-2.67 1.68-7.59 0-9.03-4.86-9.1zM121 22v23.94a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3V24.75q0-3.24-2.7-3.24h-.72a9.32 9.32 0 01-.3-2.58 10.7 10.7 0 01.3-2.7 39.63 39.63 0 014.38-.24h1a5.19 5.19 0 014 1.62A6.27 6.27 0 01121 22z"
-        stroke="#ffffff"
-        stroke-opacity="1"
       />
       <path
-        d="m 98.667864,46.107167 q -0.09758,0 -0.09758,-0.02439 h -0.04879 l -5.513264,-3.220136 q -0.146369,-0.09758 -0.170764,-0.268344 l -0.07319,-30.688873 q 0.0244,-0.170765 0.170764,-0.268345 18.906104,-10.92894665 19.003684,-10.92894665 0.0732,0 2.8786,1.63446305 l 2.80543,1.634463 h 0.0244 v 0.024395 h 0.0244 v 0.024395 h 0.0244 l 0.0244,0.04879 v 0.024395 q 0.0244,0.09758 0.0244,0.09758 0.0244,0 0.0244,0.024395 l 0.0732,30.6888729 q 0,0.19516 -0.17076,0.292739 Q 98.789839,46.107167 98.667864,46.107167 Z M 98.35073,45.204553 98.25315,15.320715 93.422946,12.490898 93.520526,42.399132 Z M 98.59468,14.735235 116.76893,4.2453981 111.93873,1.4399765 93.764475,11.929814 Z M 99.009394,45.204553 117.18365,34.714716 117.11046,4.8064824 98.936209,15.320715 Z m 2.805426,-4.513069 q -0.34153,0 -0.34153,-0.317135 l -0.0732,-23.467961 q 0.0244,-0.170765 0.17077,-0.268345 12.6122,-7.3184911 12.73417,-7.3184911 0.31714,0 0.31714,0.3415296 l 0.0732,23.4923565 q -0.0244,0.14637 -0.17076,0.24395 -12.6122,7.294096 -12.70978,7.294096 z m 0.31713,-7.269701 6.39148,-3.708036 -0.0488,-16.320235 -6.39148,3.708035 z m 0,6.367087 11.56322,-6.684222 -4.83021,-2.805422 -6.73301,3.903196 z m 11.90475,-7.245306 -0.0732,-22.297003 -4.80581,2.781026 0.0488,16.68616 z"
+        d="M119.82.84a7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.93 7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.93z"
-        stroke="#ffffff"
+        fill="#fff"
-        stroke-opacity="1"
       />
       <path
-        d="m 135.28472,46.107167 q -0.12198,0 -0.12198,-0.02439 h -0.0488 l -5.51326,-3.220136 q -0.14637,-0.09758 -0.17077,-0.268344 l -0.0732,-30.688873 q 0.0244,-0.170765 0.17076,-0.268345 18.90611,-10.92894665 19.00369,-10.92894665 0.0732,0 2.903,1.63446305 l 2.80542,1.634463 v 0.024395 h 0.0244 v 0.024395 h 0.0244 l 0.0244,0.04879 0.0488,0.1463698 0.0732,30.6888729 q 0,0.19516 -0.14637,0.292739 -3.19574,1.829623 -3.24453,1.854018 -0.0244,0 -0.0732,0 l -0.12197,-0.02439 -4.26912,-2.488287 0.0244,4.903389 q -0.0244,0.170765 -0.17076,0.268345 -3.19574,1.854018 -3.24453,1.878413 -0.0244,0 -0.0732,0 -0.0488,0 -0.0976,0 -0.0244,-0.0244 -0.0488,-0.04879 l -4.24472,-2.463892 0.0244,4.878994 q 0,0.19516 -0.17076,0.292739 -3.19574,1.854018 -3.29332,1.854018 z m -0.34153,-0.902614 -0.0976,-29.883838 -4.83021,-2.829817 0.0976,29.908234 z m 0.24395,-30.469318 18.17425,-10.4898369 -4.8302,-2.8054216 -18.17426,10.4898375 z m 7.61123,25.931854 -0.0732,-25.907459 -4.04956,2.341917 0.0488,21.223625 z m 7.83078,-4.51307 -0.0732,-25.907458 -4.04957,2.317522 0.0732,21.223624 z m -15.0273,9.050534 2.48829,-1.414908 -0.0732,-26.883257 q 0,-0.170765 0.14637,-0.29274 4.78142,-2.756632 4.879,-2.756632 0.34153,0 0.34153,0.34153 l 0.0732,26.468543 2.46389,-1.414908 v -5.269314 l -0.0732,-21.589549 q 0,-0.19516 0.17076,-0.292739 4.78142,-2.7810271 4.879,-2.7810271 0.31713,0 0.31713,0.3415296 l 0.0976,26.4929375 2.46389,-1.439303 -0.0732,-29.9082336 -18.17425,10.5142326 z"
+        d="M139.08 40.42h2a10.23 10.23 0 01.6 3.18 9.24 9.24 0 01-.18 2.1 38.47 38.47 0 01-5.64.54q-6.48 0-6.48-7v-37l.36-.42h2.88a3.94 3.94 0 013.12 1.05 5.52 5.52 0 01.9 3.57v31.31q-.02 2.67 2.44 2.67zM155.94 22v23.94a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3V24.75q0-3.24-2.7-3.24h-.72a9.32 9.32 0 01-.3-2.58 10.7 10.7 0 01.3-2.7 39.63 39.63 0 014.38-.24h1a5.19 5.19 0 014.05 1.62 6.27 6.27 0 011.43 4.39z"
-        stroke="#ffffff"
-        stroke-opacity="1"
       />
       <path
-        d="m 171.85278,46.107167 q -0.0976,0 -0.0976,-0.02439 h -0.0488 l -5.51326,-3.220136 q -0.14637,-0.09758 -0.17077,-0.268344 l -0.0732,-30.688873 q 0.0244,-0.170765 0.17076,-0.268345 18.90611,-10.92894665 19.00369,-10.92894665 0.0732,0 2.8786,1.63446305 l 2.80542,1.634463 h 0.0244 v 0.024395 h 0.0244 v 0.024395 h 0.0244 l 0.0244,0.04879 v 0.024395 q 0.0244,0.09758 0.0244,0.09758 0.0244,0 0.0244,0.024395 l 0.0732,30.6888729 q 0,0.19516 -0.17077,0.292739 -18.8817,10.904552 -19.00368,10.904552 z m -0.31713,-0.902614 -0.0976,-29.883838 -4.83021,-2.829817 0.0976,29.908234 z M 171.7796,14.735235 189.95385,4.2453981 185.12365,1.4399765 166.94939,11.929814 Z m 0.41471,30.469318 18.17425,-10.489837 -0.0732,-29.9082336 -18.17425,10.5142326 z m 2.80542,-4.513069 q -0.34153,0 -0.34153,-0.317135 l -0.0732,-23.467961 q 0.0244,-0.170765 0.17076,-0.268345 12.6122,-7.3184911 12.73418,-7.3184911 0.31713,0 0.31713,0.3415296 l 0.0732,23.4923565 q -0.0244,0.14637 -0.17077,0.24395 -12.6122,7.294096 -12.70978,7.294096 z m 0.31714,-7.269701 6.39148,-3.708036 -0.0488,-16.320235 -6.39148,3.708035 z m 0,6.367087 11.56321,-6.684222 -4.8302,-2.805422 -6.73301,3.903196 z m 11.90474,-7.245306 -0.0732,-22.297003 -4.80581,2.781026 0.0488,16.68616 z"
+        d="M154.8 2.84a7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.93 7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.93z"
-        stroke="#ffffff"
+        fill="#fff"
-        stroke-opacity="1"
+      />
+      <path
+        d="M163.08 39.22l8.76-11.82q1.32-1.8 4.8-5.7l-.18-.3a63.09 63.09 0 01-7.74.42H163a9.79 9.79 0 01-.24-2.34 15.8 15.8 0 01.42-3.3h20.4a16.31 16.31 0 011 4.26 4.1 4.1 0 01-.78 2.34L175 34.66a64.65 64.65 0 01-4.56 5.7l.18.24q3.12-.3 5.22-.3h2.58a15.35 15.35 0 006.12-.9 9.4 9.4 0 01.72 3.12q0 3.42-4.32 3.42h-18a14.27 14.27 0 01-.9-3.93 5.08 5.08 0 011.04-2.79zM215.88 31.06q0 8-4.26 12.3a13.63 13.63 0 01-18.06 0q-4.26-4.26-4.26-12.3t4.26-12.31a13.63 13.63 0 0118.06 0q4.26 4.27 4.26 12.31zm-13.29-10.08q-5.67 0-5.67 10.08t5.67 10.08q5.67 0 5.67-10.08t-5.67-10.08zM247 25.84v13.32a11 11 0 001.2 5.64 7 7 0 01-4.41 1.56q-2.43 0-3.33-1.14a5.69 5.69 0 01-.9-3.54V27.4a7.74 7.74 0 00-.72-3.87 2.78 2.78 0 00-2.58-1.17 8.62 8.62 0 00-6.3 3v20.58a20.85 20.85 0 01-3.66.3 23 23 0 01-3.78-.3v-29.7l.42-.36h2.76q3.42 0 4.08 3.6 4.38-3.84 8.73-3.84t6.42 2.82a12.17 12.17 0 012.07 7.38z"
+      />
+      <path
+        d="M57.26 10.75a7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.84 7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.84zM198.26 10.75a7.37 7.37 0 01-.6-3 7.37 7.37 0 01.6-3 8.09 8.09 0 013.87-.84 7.05 7.05 0 013.69.84 7.37 7.37 0 01.6 3 7.37 7.37 0 01-.6 3 7.46 7.46 0 01-3.87.84 6.49 6.49 0 01-3.69-.84z"
+        fill="#fff"
       />
     </g>
   </svg>

js/src/components/NavBar.vue

@@ -1,7 +1,7 @@
 <template>
   <b-navbar
     id="navbar"
-    type="is-bleuvert"
+    type="is-secondary"
     wrapper-class="container"
     :active.sync="mobileNavbarActive"
   >
@@ -344,7 +344,7 @@ nav {
     }
 
     &.is-active {
-      background: #1d1d1d;
+      background: $secondary;
     }
 
     span.icon.is-medium {

js/src/components/Settings/SettingMenuSection.vue

@@ -40,12 +40,12 @@ export default class SettingMenuSection extends Vue {
 <style lang="scss" scoped>
 li {
   font-size: 1.3rem;
-  background-color: #007292;
+  background-color: $secondary;
   color: $background-color;
   margin: 2px auto;
 
   &.active {
-    background-color: #0000;
+    background-color: #fea72b;
   }
 
   a,
@@ -54,7 +54,7 @@ li {
     margin: 5px 0;
     display: block;
     padding: 5px 10px;
-    color: rgb(0, 0, 0);
+    color: inherit;
     font-weight: 500;
   }
 }

js/src/variables.scss

@@ -3,44 +3,44 @@
 @import "~bulma/sass/utilities/derived-variables.sass";
 
 $bleuvert: #1e7d97;
-$jaune: #fff;
+$jaune: #ffd599;
-$violet: #3d8770;
+$violet: #424056;
 
 /**
  * Text body, paragraphs
  */
-$violet-1: #000000;
+$violet-1: #3a384c;
-$violet-2: #000000;
+$violet-2: #474467;
 
 /**
  * Titles, dark borders, buttons
  */
-$violet-3: #000000;
+$violet-3: #3c376e;
 
 /**
  * Borders
  */
-$borders: #b6abff;
+$borders: #d7d6de;
-$backgrounds: #745bff;
+$backgrounds: #ecebf2;
 
 /**
  * Text
  */
-$purple-1: #83ff72;
+$purple-1: #757199;
 
 /**
  * Background
  */
-$purple-2: #ff9543;
+$purple-2: #cdcaea;
-$purple-3: #77e4ff;
+$purple-3: #e6e4f4;
 
-$orange-2: #b90097;
+$orange-2: #ed8d07;
-$orange-3: #95d7ac;
+$orange-3: #d35204;
 
-$yellow-1: #51ff00;
+$yellow-1: #ffd599;
-$yellow-2: #00ff99;
+$yellow-2: #fff1de;
-$yellow-3: #0099ff;
+$yellow-3: #fbd5cb;
-$yellow-4: #ffebc1;
+$yellow-4: #f7ba30;
 
 $primary: $bleuvert;
 $primary-invert: findColorInvert($primary);
@@ -95,8 +95,8 @@ $colors: map-merge(
 );
 
 // Navbar
-$navbar-background-color: #1d1d1d;
+$navbar-background-color: $secondary;
-$navbar-item-color: $bleuvert;
+$navbar-item-color: $background-color;
 $navbar-height: 4rem;
 
 // Footer
@@ -112,7 +112,7 @@ main > .container {
   min-height: 70vh;
 }
 
-$title-color: #ffffff;
+$title-color: #3c376e;
 $title-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
   serif;
 $title-weight: 700;
@@ -120,7 +120,7 @@ $title-size: 40px;
 $title-sub-size: 45px;
 $title-sup-size: 30px;
 
-$subtitle-color: #000000;
+$subtitle-color: #3a384c;
 $subtitle-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
   serif;
 $subtitle-weight: 400;
@@ -129,7 +129,7 @@ $subtitle-sub-size: 30px;
 $subtitle-sup-size: 15px;
 
 .subtitle {
-  background: #ffffff;
+  background: $secondary;
   display: inline;
   padding: 3px 8px;
   margin: 15px auto 30px;

js/src/views/Event/Edit.vue

@@ -555,7 +555,7 @@ section {
 
   nav.navbar {
     min-height: 2rem !important;
-    background: lighten($primary, 10%);
+    background: lighten($secondary, 10%);
 
     .container {
       min-height: 2rem;
@@ -563,7 +563,7 @@ section {
       .navbar-menu,
       .navbar-end {
         display: flex !important;
-        background: lighten($primary, 10%);
+        background: lighten($secondary, 10%);
       }
 
       .navbar-end {

js/src/views/Event/Event.vue

@@ -1310,8 +1310,8 @@ div.sidebar {
       a {
         display: inline-block;
         padding: 0.3rem;
-        background: #fff;
+        background: $secondary;
-        color: #1e7d97;
+        color: #111;
 
         &:empty {
           display: none;

js/src/views/Group/Group.vue

@@ -1210,19 +1210,19 @@ div.container {
     margin-top: 15px;
 
     &.presentation {
-      border: 2px solid $violet-1;
+      border: 2px solid $purple-2;
       padding: 0 0 10px;
       position: relative;
       flex-direction: column;
 
       h1 {
-        color: $violet-1;
+        color: $purple-1;
         font-size: 2rem;
         font-weight: 500;
       }
 
       .button.is-outlined {
-        border-color: $violet-1;
+        border-color: $purple-2;
       }
 
       & > *:not(img) {

js/src/views/Home.vue

@@ -71,6 +71,104 @@
         }}</b-message>
       </section>
     </div>
+    <div id="picture" v-if="config && (!currentUser.id || !currentActor.id)">
+      <div class="picture-container">
+        <picture>
+          <source
+            media="(max-width: 799px)"
+            srcset="/img/pics/homepage-480w.webp"
+            type="image/webp"
+          />
+          <source
+            media="(max-width: 799px)"
+            srcset="/img/pics/homepage-480w.jpg"
+            type="image/jpeg"
+          />
+
+          <source
+            media="(max-width: 1024px)"
+            srcset="/img/pics/homepage-1024w.webp"
+            type="image/webp"
+          />
+          <source
+            media="(max-width: 1024px)"
+            srcset="/img/pics/homepage-1024w.jpg"
+            type="image/jpeg"
+          />
+
+          <source
+            media="(max-width: 1920px)"
+            srcset="/img/pics/homepage-1920w.webp"
+            type="image/webp"
+          />
+          <source
+            media="(max-width: 1920px)"
+            srcset="/img/pics/homepage-1920w.jpg"
+            type="image/jpeg"
+          />
+
+          <source
+            media="(min-width: 1921px)"
+            srcset="/img/pics/homepage.webp"
+            type="image/webp"
+          />
+          <source
+            media="(min-width: 1921px)"
+            srcset="/img/pics/homepage.jpg"
+            type="image/jpeg"
+          />
+
+          <img
+            src="/img/pics/homepage-1024w.jpg"
+            width="3840"
+            height="2719"
+            alt=""
+            loading="lazy"
+          />
+        </picture>
+      </div>
+      <div class="container section">
+        <div class="columns">
+          <div class="column">
+            <h3 class="title">{{ $t("A practical tool") }}</h3>
+            <p
+              v-html="
+                $t(
+                  'Mobilizon is a tool that helps you <b>find, create and organise events</b>.'
+                )
+              "
+            />
+          </div>
+          <div class="column">
+            <h3 class="title">{{ $t("An ethical alternative") }}</h3>
+            <p
+              v-html="
+                $t(
+                  'Ethical alternative to Facebook events, groups and pages, Mobilizon is a <b>tool designed to serve you</b>. Period.'
+                )
+              "
+            />
+          </div>
+          <div class="column">
+            <h3 class="title">{{ $t("A federated software") }}</h3>
+            <p
+              v-html="
+                $t(
+                  'Mobilizon is not a giant platform, but a <b>multitude of interconnected Mobilizon websites</b>.'
+                )
+              "
+            />
+          </div>
+        </div>
+        <div class="buttons">
+          <a
+            class="button is-primary is-large"
+            href="https://joinmobilizon.org"
+            >{{ $t("Learn more about Mobilizon") }}</a
+          >
+        </div>
+      </div>
+    </div>
     <div class="container section" v-if="config && loggedUserSettings">
       <section v-if="currentActor.id && (welcomeBack || newRegisteredUser)">
         <b-message type="is-info" v-if="welcomeBack">{{
@@ -565,6 +663,7 @@ section.hero {
     left: 0;
     width: 100%;
     height: 100%;
+    opacity: 0.3;
     z-index: -1;
     background: url("../../public/img/pics/homepage_background-1024w.png");
     background-size: cover;

js/src/views/Posts/Edit.vue

@@ -9,7 +9,7 @@
         <h1 class="title" v-else>
           {{ $t("Add a new post") }}
         </h1>
-        <subtitle color="#fff">{{ $t("General information") }}</subtitle>
+        <subtitle>{{ $t("General information") }}</subtitle>
         <picture-upload
           v-model="pictureFile"
           :textFallback="$t('Headline picture')"
@@ -373,7 +373,7 @@ export default class EditPost extends mixins(GroupMixin, PostMixin) {
 form {
   nav.navbar {
     min-height: 2rem !important;
-    background: lighten($primary, 10%);
+    background: lighten($secondary, 10%);
 
     .container {
       min-height: 2rem;
@@ -381,7 +381,7 @@ form {
       .navbar-menu,
       .navbar-end {
         display: flex !important;
-        background: lighten($primary, 10%);
+        background: lighten($secondary, 10%);
         flex-wrap: wrap;
       }