Clean CSS with scss

public/css/app.css

@@ -9199,11 +9199,28 @@ input[type=range]::-ms-thumb {
 
 .fa,
 .fas,
-.licence,
+.sb-btns > a[href*=agenda]:before,
+.sb-btns > a[href*=calendar]:before,
+.sb-btns > a[href*=events]:before,
+.sb-btns > a[href*="youtube.com"]:before,
+.sb-btns > a[href*=peertube]:before,
+.sb-btns > a[href*="tube.p2p.legal"]:before,
+.sb-btns > a[href*=chat]:before,
+.sb-btns > a[href*=forum]:before,
+.sb-btns > a[href*="demo.cesium.app"]:before,
+.sb-btns > a[href*="helloasso.com"]:before,
+.sb-btns > a[href*="opencollective.com"]:before,
+.sb-btns > a[href*="liberapay.com"]:before,
+.donate:before,
+.licence:before,
 .far,
 .fal,
 .fad,
-.fab {
+.fab,
+.sb-btns > a[href*="twitter.com"]:before,
+.sb-btns > a[href*=mastodon]:before,
+.sb-btns > a[href*="facebook.com"]:before,
+.sb-btns > a[href*="framasphere.org"]:before {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   display: inline-block;
@@ -9213,7 +9230,24 @@ input[type=range]::-ms-thumb {
   line-height: 1;
 }
 
-.licence {
+.sb-btns > a[href*=agenda]:before,
+.sb-btns > a[href*=calendar]:before,
+.sb-btns > a[href*=events]:before,
+.sb-btns > a[href*="youtube.com"]:before,
+.sb-btns > a[href*=peertube]:before,
+.sb-btns > a[href*="tube.p2p.legal"]:before,
+.sb-btns > a[href*="twitter.com"]:before,
+.sb-btns > a[href*=mastodon]:before,
+.sb-btns > a[href*="facebook.com"]:before,
+.sb-btns > a[href*="framasphere.org"]:before,
+.sb-btns > a[href*=chat]:before,
+.sb-btns > a[href*=forum]:before,
+.sb-btns > a[href*="demo.cesium.app"]:before,
+.sb-btns > a[href*="helloasso.com"]:before,
+.sb-btns > a[href*="opencollective.com"]:before,
+.sb-btns > a[href*="liberapay.com"]:before,
+.donate:before,
+.licence:before {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   display: inline-block;
@@ -9316,19 +9350,53 @@ input[type=range]::-ms-thumb {
 
 .fa.fa-pull-left,
 .fas.fa-pull-left,
-.fa-pull-left.licence,
+.sb-btns > a.fa-pull-left[href*=agenda]:before,
+.sb-btns > a.fa-pull-left[href*=calendar]:before,
+.sb-btns > a.fa-pull-left[href*=events]:before,
+.sb-btns > a.fa-pull-left[href*="youtube.com"]:before,
+.sb-btns > a.fa-pull-left[href*=peertube]:before,
+.sb-btns > a.fa-pull-left[href*="tube.p2p.legal"]:before,
+.sb-btns > a.fa-pull-left[href*=chat]:before,
+.sb-btns > a.fa-pull-left[href*=forum]:before,
+.sb-btns > a.fa-pull-left[href*="demo.cesium.app"]:before,
+.sb-btns > a.fa-pull-left[href*="helloasso.com"]:before,
+.sb-btns > a.fa-pull-left[href*="opencollective.com"]:before,
+.sb-btns > a.fa-pull-left[href*="liberapay.com"]:before,
+.fa-pull-left.donate:before,
+.fa-pull-left.licence:before,
 .far.fa-pull-left,
 .fal.fa-pull-left,
-.fab.fa-pull-left {
+.fab.fa-pull-left,
+.sb-btns > a.fa-pull-left[href*="twitter.com"]:before,
+.sb-btns > a.fa-pull-left[href*=mastodon]:before,
+.sb-btns > a.fa-pull-left[href*="facebook.com"]:before,
+.sb-btns > a.fa-pull-left[href*="framasphere.org"]:before {
   margin-right: 0.3em;
 }
 
 .fa.fa-pull-right,
 .fas.fa-pull-right,
-.fa-pull-right.licence,
+.sb-btns > a.fa-pull-right[href*=agenda]:before,
+.sb-btns > a.fa-pull-right[href*=calendar]:before,
+.sb-btns > a.fa-pull-right[href*=events]:before,
+.sb-btns > a.fa-pull-right[href*="youtube.com"]:before,
+.sb-btns > a.fa-pull-right[href*=peertube]:before,
+.sb-btns > a.fa-pull-right[href*="tube.p2p.legal"]:before,
+.sb-btns > a.fa-pull-right[href*=chat]:before,
+.sb-btns > a.fa-pull-right[href*=forum]:before,
+.sb-btns > a.fa-pull-right[href*="demo.cesium.app"]:before,
+.sb-btns > a.fa-pull-right[href*="helloasso.com"]:before,
+.sb-btns > a.fa-pull-right[href*="opencollective.com"]:before,
+.sb-btns > a.fa-pull-right[href*="liberapay.com"]:before,
+.fa-pull-right.donate:before,
+.fa-pull-right.licence:before,
 .far.fa-pull-right,
 .fal.fa-pull-right,
-.fab.fa-pull-right {
+.fab.fa-pull-right,
+.sb-btns > a.fa-pull-right[href*="twitter.com"]:before,
+.sb-btns > a.fa-pull-right[href*=mastodon]:before,
+.sb-btns > a.fa-pull-right[href*="facebook.com"]:before,
+.sb-btns > a.fa-pull-right[href*="framasphere.org"]:before {
   margin-left: 0.3em;
 }
 
@@ -15307,7 +15375,20 @@ readers do not read off random characters that represent icons */
 
 .fa,
 .fas,
-.licence {
+.sb-btns > a[href*=agenda]:before,
+.sb-btns > a[href*=calendar]:before,
+.sb-btns > a[href*=events]:before,
+.sb-btns > a[href*="youtube.com"]:before,
+.sb-btns > a[href*=peertube]:before,
+.sb-btns > a[href*="tube.p2p.legal"]:before,
+.sb-btns > a[href*=chat]:before,
+.sb-btns > a[href*=forum]:before,
+.sb-btns > a[href*="demo.cesium.app"]:before,
+.sb-btns > a[href*="helloasso.com"]:before,
+.sb-btns > a[href*="opencollective.com"]:before,
+.sb-btns > a[href*="liberapay.com"]:before,
+.donate:before,
+.licence:before {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
 }
@@ -15326,7 +15407,11 @@ readers do not read off random characters that represent icons */
   src: url(/fonts/fa-brands-400.eot?e2ca6541bff3a3e9f4799ee327b28c58) format("embedded-opentype"), url(/fonts/fa-brands-400.woff2?f075c50f89795e4cdb4d45b51f1a6800) format("woff2"), url(/fonts/fa-brands-400.woff?ad527cc5ec23d6da66e8a1d6772ea6d3) format("woff"), url(/fonts/fa-brands-400.ttf?8300bd7f30e0a313c1d772b49d96cb8e) format("truetype"), url(/fonts/fa-brands-400.svg?2f12242375edd68e9013ecfb59c672e9) format("svg");
 }
 
-.fab {
+.fab,
+.sb-btns > a[href*="twitter.com"]:before,
+.sb-btns > a[href*=mastodon]:before,
+.sb-btns > a[href*="facebook.com"]:before,
+.sb-btns > a[href*="framasphere.org"]:before {
   font-family: "Font Awesome 5 Brands";
   font-weight: 400;
 }
@@ -15342,127 +15427,93 @@ readers do not read off random characters that represent icons */
 
 /* BUTTONS ICONS (before) */
 
-.donate:before,
+.donate:before {
-a[href*="demo.cesium.app"]:before,
-a[href*="helloasso.com"]:before,
-a[href*="opencollective.com"]:before,
-a[href*="liberapay.com"]:before {
   padding-right: 5px;
   content: "\F4B9";
 }
 
-a[href*=chat],
+.sb-btns > a[href*="demo.cesium.app"]:before,
-a[href*=forum] {
+.sb-btns > a[href*="helloasso.com"]:before,
-  font-family: "Font Awesome 5 Free";
+.sb-btns > a[href*="opencollective.com"]:before,
-  font-weight: 900;
+.sb-btns > a[href*="liberapay.com"]:before {
+  padding-right: 5px;
+  content: "\F4B9";
+}
+
+.sb-btns > a[href*="demo.cesium.app"]:after,
+.sb-btns > a[href*="helloasso.com"]:after,
+.sb-btns > a[href*="opencollective.com"]:after,
+.sb-btns > a[href*="liberapay.com"]:after {
+  content: "Donner";
+}
+
+.sb-btns > a[href*=chat]:before,
+.sb-btns > a[href*=forum]:before {
   content: "\F086";
   padding-right: 5px;
 }
 
-a[href*="framasphere.org"] {
+.sb-btns > a[href*="framasphere.org"]:before {
-  font-family: "Font Awesome 5 Brands";
-  font-weight: 900;
   content: "\F791";
   padding-right: 5px;
 }
 
-a[href*="facebook.com"] {
+.sb-btns > a[href*="facebook.com"]:before {
-  font-family: "Font Awesome 5 Brands";
-  font-weight: 900;
   content: "\F09A";
   padding-right: 5px;
 }
 
-a[href*=mastodon] {
+.sb-btns > a[href*="facebook.com"]:after {
-  font-family: "Font Awesome 5 Brands";
+  content: "Facebook";
-  font-weight: 900;
+}
+
+.sb-btns > a[href*=mastodon]:before {
   content: "\F4F6";
   padding-right: 5px;
 }
 
-a[href*="twitter.com"] {
+.sb-btns > a[href*=mastodon]:after {
-  font-family: "Font Awesome 5 Brands";
+  content: "Mastodon";
-  font-weight: 900;
+}
+
+.sb-btns > a[href*="twitter.com"]:before {
   content: "\F099";
   padding-right: 5px;
 }
 
-a[href*="youtube.com"],
+.sb-btns > a[href*="twitter.com"]:after {
-a[href*=peertube],
+  content: "Twitter";
-a[href*="tube.p2p.legal"] {
+}
-  font-family: "Font Awesome 5 Free";
+
-  font-weight: 900;
+.sb-btns > a[href*="youtube.com"]:before,
+.sb-btns > a[href*=peertube]:before,
+.sb-btns > a[href*="tube.p2p.legal"]:before {
   content: "\F04B";
   padding-right: 5px;
 }
 
-a[href*=agenda],
+.sb-btns > a[href*=agenda]:before,
-a[href*=calendar],
+.sb-btns > a[href*=calendar]:before,
-a[href*=events] {
+.sb-btns > a[href*=events]:before {
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
   content: "\F073";
   padding-right: 5px;
 }
 
-/* BUTTONS TEXTS (after) */
+.sb-btns > a[href*=agenda]:after,
-
+.sb-btns > a[href*=calendar]:after,
-a[href*="facebook.com"]::after {
+.sb-btns > a[href*=events]:after {
-  content: "Facebook";
-}
-
-a[href*=agenda]::after,
-a[href*=calendar]::after,
-a[href*=events]::after {
   content: "Agenda";
 }
 
-a[href*="framasphere.org"]::after {
+.sb-btns > a[href*=agenda] a[href*=forum]::after,
-  content: "diaspora";
+.sb-btns > a[href*=calendar] a[href*=forum]::after,
-}
+.sb-btns > a[href*=events] a[href*=forum]::after {
-
-a[href*=forum]::after {
   content: "Forum";
 }
 
-a[href*=chat]::after {
+.sb-btns > a[href*=agenda] a[href*=chat]::after,
+.sb-btns > a[href*=calendar] a[href*=chat]::after,
+.sb-btns > a[href*=events] a[href*=chat]::after {
   content: "Chat";
 }
 
-a[href*="demo.cesium.app"]::after,
-a[href*="helloasso.com"]::after,
-a[href*="opencollective.com"]::after,
-a[href*="liberapay.com"]::after {
-  content: "Donner";
-}
-
-a[href*=mastodon]::after {
-  content: "Mastodon";
-}
-
-a[href*="twitter.com"]::after {
-  content: "Twitter";
-}
-
-a[href*=peertube]::after {
-  content: "Peertube";
-}
-
-a[href*="youtube.com"]::after {
-  content: "Youtube";
-}
-
-/* DEFINE DEFAULT USE FONT */
-
-@media (prefers-color-scheme: dark) {
-  .day.dark-scheme {
-    background: #333;
-    color: white;
-  }
-
-  .night.dark-scheme {
-    background: black;
-    color: #ddd;
-  }
-}
-

resources/sass/app.scss

@@ -9,105 +9,115 @@
 @import "solid.scss";
 @import "brands.scss";
 $icons-padding: 5px;
+
 .buttons::after{
   content:"Aller";
 }
 .licence{
-    @extend %fa-icon;
-    @extend .fas;
     &:before{
+        @extend %fa-icon;
+        @extend .fas;
         content: fa-content($fa-var-balance-scale);
         padding-right: $icons-padding;
     }
 }
 /* BUTTONS ICONS (before) */
-.donate,a[href*="demo.cesium.app"],a[href*="helloasso.com"],a[href*="opencollective.com"],a[href*="liberapay.com"]{
+.donate{
-
 &:before{
+    @extend %fa-icon;
+    @extend .fas;
 padding-right:5px;
 content: fa-content($fa-var-donate);
 }
 
 }
+.sb-btns > {
+    a[href*="demo.cesium.app"],a[href*="helloasso.com"],a[href*="opencollective.com"],a[href*="liberapay.com"]{
+        &:before{
+            @extend %fa-icon;
+            @extend .fas;
+        padding-right:$icons-padding;
+        content: fa-content($fa-var-donate);
+        }
+
+        &:after{
+            content:"Donner";
+        }
+    }
+    a[href*="chat"],a[href*="forum"]{
+    &:before{
+        @extend %fa-icon;
+        @extend .fas;
+        content: fa-content($fa-var-comments);
+        padding-right: $icons-padding;
+    }
+      }
+      a[href*="framasphere.org"]{
+    &:before{
+        @extend %fa-icon;
+        @extend .fab;
+        content: fa-content($fa-var-diaspora);
+        padding-right: $icons-padding;
+    }
+      }
+      a[href*="facebook.com"]{
+        &:before{
+            @extend %fa-icon;
+            @extend .fab;
+            content: fa-content($fa-var-facebook);
+            padding-right: $icons-padding;
+        }
+        &:after{
+            content: "Facebook";
+        }
+      }
+      a[href*="mastodon"]{
+        &:before{
+            @extend %fa-icon;
+            @extend .fab;
+            content: fa-content($fa-var-mastodon);
+            padding-right: $icons-padding;
+        }
+        &:after{
+            content: "Mastodon";
+        }
+      }
+      a[href*="twitter.com"]{
+        &:before{
+            @extend %fa-icon;
+            @extend .fab;
+            content: fa-content($fa-var-twitter);
+            padding-right: $icons-padding;
+        }
+        &:after{
+            content: "Twitter";
+        }
+      }
+      a[href*="youtube.com"],a[href*="peertube"],a[href*="tube.p2p.legal"]{
+        &:before{
+            @extend %fa-icon;
+            @extend .fas;
+            content: fa-content($fa-var-play);
+            padding-right: $icons-padding;
+        }
+      }
+      a[href*="agenda"],a[href*="calendar"],a[href*="events"]{
+        &:before{
+            @extend %fa-icon;
+            @extend .fas;
+            content: fa-content($fa-var-calendar-alt);
+            padding-right: $icons-padding;
+        }
+        &:after{
+            content: "Agenda";
+        }
+        a[href*="forum"]::after{
+            content:"Forum";
+            }
+            a[href*="chat"]::after{
+            content:"Chat";
+            }
+      }
 
-a[href*="chat"],a[href*="forum"]{
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  content: "\f086";
-  padding-right:5px;
-}
-a[href*="framasphere.org"]{
-  font-family: "Font Awesome 5 Brands";
-  font-weight: 900;
-  content: "\f791";
-  padding-right:5px;
-}
-a[href*="facebook.com"]{
-  font-family: "Font Awesome 5 Brands";
-  font-weight: 900;
-  content: "\f09a";
-  padding-right:5px;
-}
-a[href*="mastodon"]{
-font-family: "Font Awesome 5 Brands";
-font-weight: 900;
-content: "\f4f6";
-padding-right:5px;
-}
-a[href*="twitter.com"]{
-font-family: "Font Awesome 5 Brands";
-font-weight: 900;
-content: "\f099";
-padding-right:5px;
-}
-a[href*="youtube.com"],a[href*="peertube"],a[href*="tube.p2p.legal"]{
-font-family: "Font Awesome 5 Free";
-font-weight: 900;
-content: "\f04b";
-padding-right:5px;
-}
-a[href*="agenda"],a[href*="calendar"],a[href*="events"]{
-font-family: "Font Awesome 5 Free";
-font-weight: 900;
-content: "\f073";
-padding-right:5px;
-}
-/* BUTTONS TEXTS (after) */
-a[href*="facebook.com"]::after{
-content:"Facebook";
-}
-a[href*="agenda"]::after,a[href*="calendar"]::after,a[href*="events"]::after{
-content:"Agenda";
-}
-a[href*="framasphere.org"]::after{
-content:"diaspora";
-}
-a[href*="forum"]::after{
-content:"Forum";
-}
-a[href*="chat"]::after{
-content:"Chat";
-}
-a[href*="demo.cesium.app"]::after,a[href*="helloasso.com"]::after,a[href*="opencollective.com"]::after,a[href*="liberapay.com"]::after{
-content:"Donner";
-}
-a[href*="mastodon"]::after{
-content:"Mastodon";
-}
-a[href*="twitter.com"]::after{
-content:"Twitter";
-}
-
-a[href*="peertube"]::after{
-content:"Peertube";
-}
-a[href*="youtube.com"]::after{
-content:"Youtube";
-}
-/* DEFINE DEFAULT USE FONT */
-
-@media (prefers-color-scheme: dark) {
-  .day.dark-scheme   { background:  #333; color: white; }
-  .night.dark-scheme { background: black; color:  #ddd; }
 }