New social icons (#683)

- added TikTok - added Mastodon - social-color.scss in alphabetical order - social icons by alphabetical order - some misspellings...
epfl-si · Oct 5, 2023 · 21c7364 · 21c7364
1 parent da84449
commit 21c7364
Show file tree

Hide file tree

Showing 11 changed files with 119 additions and 79 deletions.
diff --git a/assets/components/atoms/social-icon/social-icon-group.twig b/assets/components/atoms/social-icon/social-icon-group.twig
@@ -4,21 +4,30 @@
 
 <ul class="social-icon-list list-inline">
   <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative } %}
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'E-mail', icon: 'icon-mail-plane', round: round, discrete: discrete, negative: negative } %}
   </li>
   <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'X', icon: 'icon-x', round: round, discrete: discrete, negative: negative } %}
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative } %}
   </li>
   <li>
     {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative } %}
   </li>
   <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'E-mail', icon: 'icon-mail-plane', round: round, discrete: discrete, negative: negative } %}
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'LinkedIn', icon: 'icon-linkedin', round: round, discrete: discrete, negative: negative } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Mastodon', icon: 'icon-mastodon', round: round, discrete: discrete, negative: negative } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'TikTok', icon: 'icon-tiktok', round: round, discrete: discrete, negative: negative } %}
   </li>
   <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Whatsapp', icon: 'icon-whatsapp', round: round, discrete: discrete, negative: negative } %}
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'WhatsApp', icon: 'icon-whatsapp', round: round, discrete: discrete, negative: negative } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'X', icon: 'icon-x', round: round, discrete: discrete, negative: negative } %}
   </li>
   <li>
-    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Linkedin', icon: 'icon-linkedin', round: round, discrete: discrete, negative: negative } %}
+    {% include '@atoms/social-icon/social-icon-single.twig' with { pretty_name: 'Youtube', icon: 'icon-youtube', round: round, discrete: discrete, negative: negative } %}
   </li>
 </ul>
diff --git a/assets/components/atoms/social-icon/social-icon-link-group.twig b/assets/components/atoms/social-icon/social-icon-link-group.twig
@@ -7,15 +7,25 @@
     {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Facebook', icon: 'icon-facebook', round: round, discrete: discrete, negative: negative, url: 'https://www.facebook.com/epflcampus' } %}
   </li>
   <li>
-    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on X', icon: 'icon-x', round: round, discrete: discrete, negative: negative, url: 'https://x.com/epfl_en' } %}
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative, url: 'http://instagram.com/epflcampus' } %}
   </li>
   <li>
-    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Instagram', icon: 'icon-instagram', round: round, discrete: discrete, negative: negative, url: 'http://instagram.com/epflcampus' } %}
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on LinkedIn', icon: 'icon-linkedin', round: round, discrete: discrete, negative: negative, url: 'https://www.linkedin.com/school/epfl/' } %}
   </li>
+  {%  if social_mastodon %}
   <li>
-    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Youtube', icon: 'icon-youtube', round: round, discrete: discrete, negative: negative, url: 'https://www.youtube.com/user/epflnews' } %}
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Mastodon', icon: 'icon-mastodon', round: round, discrete: discrete, negative: negative, url: 'https://joinmastodon.org/' } %}
   </li>
+  {% endif %}
+    {%  if social_tiktok %}
   <li>
-    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on LinkedIn', icon: 'icon-linkedin', round: round, discrete: discrete, negative: negative, url: 'https://www.linkedin.com/school/epfl/' } %}
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on TikTok', icon: 'icon-tiktok', round: round, discrete: discrete, negative: negative, url: 'https://www.tiktok.com/@epflstudents' } %}
+  </li>
+  {% endif %}
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on X', icon: 'icon-x', round: round, discrete: discrete, negative: negative, url: 'https://x.com/epfl_en' } %}
+  </li>
+  <li>
+    {% include '@atoms/social-icon/social-icon-single-link.twig' with { pretty_name: 'Follow us on Youtube', icon: 'icon-youtube', round: round, discrete: discrete, negative: negative, url: 'https://www.youtube.com/user/epflnews' } %}
   </li>
 </ul>
diff --git a/assets/components/atoms/social-icon/social-icon.scss b/assets/components/atoms/social-icon/social-icon.scss
@@ -80,6 +80,18 @@ a.social-icon {
   background-color: $linkedin;
 }
 
+.social-icon-mastodon {
+  background-color: $mastodon;
+}
+
+.social-icon-tiktok {
+  background-color: $tiktok;
+}
+
+.social-icon-tiktok svg {
+  transform:scale(1.3);
+}
+
 .social-icon-youtube {
   background-color: $youtube;
 }

diff --git a/assets/components/atoms/social-icon/social-icon.yml b/assets/components/atoms/social-icon/social-icon.yml
@@ -22,9 +22,12 @@ variants:
 notes: |
 
   Icons to accomodate social boxes. The available social networks are:
+  * `e-mail`
   * `facebook`
   * `instagram`
-  * `x`
-  * `e-mail`
-  * `whatsapp`
   * `linkedin`
+  * `mastodon`
+  * `tiktok`
+  * `whatsapp`
+  * `x`
+  * `youtube`
diff --git a/assets/components/molecules/social/social-follow.twig b/assets/components/molecules/social/social-follow.twig
@@ -6,7 +6,7 @@
         <p class="social-share-text">
           Suivez nous sur <span class="sr-only">les réseaux sociaux</span>
         </p>
-        {% include '@atoms/social-icon/social-icon-link-group.twig' with { discrete: true } %}
+        {% include '@atoms/social-icon/social-icon-link-group.twig' with { discrete: true, social_mastodon: true, social_tiktok: true } %}
       </div>
 
     </div>

diff --git a/assets/components/molecules/social/social.twig b/assets/components/molecules/social/social.twig
@@ -9,17 +9,17 @@
         <ul class="social-icon-list list-inline">
           <li>
             {% include '@atoms/social-icon/social-icon-single-link.twig' with {
-              pretty_name: 'Share on Facebook',
-              icon: 'icon-facebook',
+              pretty_name: 'Share by e-mail',
+              icon: 'icon-mail-plane',
               round: round,
               discrete: true,
               url: '#'
             } %}
           </li>
           <li>
             {% include '@atoms/social-icon/social-icon-single-link.twig' with {
-              pretty_name: 'Share on X',
-              icon: 'icon-x',
+              pretty_name: 'Share on Facebook',
+              icon: 'icon-facebook',
               round: round,
               discrete: true,
               url: '#'
@@ -36,8 +36,8 @@
           </li>
           <li>
             {% include '@atoms/social-icon/social-icon-single-link.twig' with {
-              pretty_name: 'Share by e-mail',
-              icon: 'icon-mail-plane',
+              pretty_name: 'Share on X',
+              icon: 'icon-x',
               round: round,
               discrete: true,
               url: '#'

diff --git a/assets/components/organisms/footer/footer-legal.twig b/assets/components/organisms/footer/footer-legal.twig
@@ -8,7 +8,7 @@
     <a href="https://go.epfl.ch/protection-des-donnees/">Protection des données</a>
   </div>
   <div>
-    <p>&copy; 2021 EPFL, tous droits réservés</p>
+    <p>&copy; 2023 EPFL, tous droits réservés</p>
   </div>
 </div>
 {% endif %}
@@ -20,7 +20,7 @@
     <a href="https://go.epfl.ch/privacy-policy/">Privacy policy</a>
   </div>
   <div>
-    <p>&copy; 2021 EPFL, all rights reserved</p>
+    <p>&copy; 2023 EPFL, all rights reserved</p>
   </div>
 </div>
 {% endif %}
@@ -32,7 +32,7 @@
       <a href="https://go.epfl.ch/privacy-policy/">Datenschutzerklärung</a>
     </div>
     <div>
-      <p>&copy; 2021 EPFL, alle Rechte vorbehalten</p>
+      <p>&copy; 2023 EPFL, alle Rechte vorbehalten</p>
     </div>
   </div>
 {% endif %}
diff --git a/assets/config/data.json b/assets/config/data.json
@@ -84,13 +84,15 @@
     "linkedin",
     "lock",
     "mail-plane",
+    "mastodon",
     "triangle",
     "search",
     "search-bold",
     "twitter",
     "upload",
     "whatsapp",
     "planet",
+    "tiktok",
     "youtube",
     "x"
   ],

diff --git a/assets/config/social-color.scss b/assets/config/social-color.scss
@@ -4,76 +4,78 @@
  */
 
 
+$amazon: #ff9900;
+$android: #a4c639;
+$apple: #a6b1b7;
+$deviantart: #05cc47;
+$discord: #7289da;
+$dribbble: #ea4c89;
 $facebook: #3b5998;
-$twitter: #1da1f2;
-$youtube: #ff0000;
-$instagrammagenta: #d9317a;
-$instagrammagenta-2: #e33f5f;
-$instagramblue: #5258cf;
+$fivehundredpx: #0099e5;
+$flickrblue: #006add;
+$flickrpink: #f40083;
+$foursquareblue: #2d5be3;
+$foursquarenavy: #073282;
+$foursquarepink: #f94877;
+$googleblue: #4285f4;
+$googlegreen: #34a853;
+$googleplus: #db4437;
+$googlered: #ea4335;
+$googleyellow: #fbbc05;
 $instagramblue-2: #6559ca;
-$instagrampurple: #893dc2;
+$instagramblue: #5258cf;
+$instagrammagenta-2: #e33f5f;
+$instagrammagenta: #d9317a;
+$instagramorange-2: #f77638;
+$instagramorange: #f46f30;
 $instagrampurple-2: #bc318f;
+$instagrampurple: #893dc2;
 $instagramred: #f50000;
-$instagramorange: #f46f30;
-$instagramorange-2: #f77638;
-$instagramyellow: #fec564;
 $instagramyellow-2: #fec66d;
-$googleblue: #4285f4;
-$googlered: #ea4335;
-$googleyellow: #fbbc05;
-$googlegreen: #34a853;
-$pinterest: #bd081c;
-$googleplus: #db4437;
+$instagramyellow: #fec564;
 $linkedin: #007bb5;
-$vimeoblue: #1ab7ea;
-$tumblr: #2c4762;
-$snapchat: #fffc00;
-$whatsappgreen: #25d366;
-$whatsappteal1: #075e54;
-$whatsappteal2: #128c7e;
-$apple: #a6b1b7;
-$amazon: #ff9900;
-$microsoftred: #f35022;
-$microsoftgreen: #80bb03;
+$listlyblue: #52b1b3;
+$listlyorange: #df6d46;
+$mastodon: #6364ff;
+$medium: #02b875;
 $microsoftblue: #03a5f0;
+$microsoftgreen: #80bb03;
+$microsoftred: #f35022;
 $microsoftyellow: #ffb903;
-$foursquarepink: #f94877;
-$foursquarenavy: #073282;
-$foursquareblue: #2d5be3;
-$swarm: #ffa633;
-$medium: #02b875;
+$pinterest: #bd081c;
+$pocket: #ee4056;
+$quora: #aa2200;
+$quorablue: #2b6dad;
+$reddit: #ff5700;
 $skypeblue: #00aff0;
 $skypedkblue: #0078d7;
-$android: #a4c639;
-$stumbleupon: #e94826;
-$flickrpink: #f40083;
-$flickrblue: #006add;
-$yahoo: #430297;
-$soundcloud: #ff5500;
-$spotifygreen: #1ed760;
-$spotifydarkgreen: #1db954;
-$dribbble: #ea4c89;
-$slackpurple: #4d394b;
-$slackskyblue: #70cadb;
-$slackmosss: #3eb890;
-$slackpink: #e01765;
-$slackyellow: #e8a723;
 $slackgreenblue: #1a937d;
-$slackviolet: #472a49;
+$slackmosss: #3eb890;
 $slackolive: #65863a;
+$slackpink: #e01765;
+$slackpurple: #4d394b;
 $slackred: #cc2027;
-$reddit: #ff5700;
-$deviantart: #05cc47;
-$pocket: #ee4056;
-$quora: #aa2200;
-$quorablue: #2b6dad;
-$slideshareorange: #e68523;
+$slackskyblue: #70cadb;
+$slackviolet: #472a49;
+$slackyellow: #e8a723;
 $slideshareblue: #00a0dc;
-$fivehundredpx: #0099e5;
-$vk: #4a76a8;
-$listlyorange: #df6d46;
-$listlyblue: #52b1b3;
-$vine: #00b489;
+$slideshareorange: #e68523;
+$snapchat: #fffc00;
+$soundcloud: #ff5500;
+$spotifydarkgreen: #1db954;
+$spotifygreen: #1ed760;
 $steam: #171a21;
-$discord: #7289da;
+$stumbleupon: #e94826;
+$swarm: #ffa633;
+$tiktok: #000000;
+$tumblr: #2c4762;
+$twitter: #1da1f2;
+$vimeoblue: #1ab7ea;
+$vine: #00b489;
+$vk: #4a76a8;
+$whatsappgreen: #25d366;
+$whatsappteal1: #075e54;
+$whatsappteal2: #128c7e;
 $x: #000000;
+$yahoo: #430297;
+$youtube: #ff0000;
diff --git a/assets/icons/mastodon.svg b/assets/icons/mastodon.svg
diff --git a/assets/icons/tiktok.svg b/assets/icons/tiktok.svg