From 08439200308fb5f6de2e6359b765e86a849f99fb Mon Sep 17 00:00:00 2001
From: Le Libre Au Quotidien <contact@lelibreauquotidien.fr>
Date: Sun, 25 Oct 2020 18:34:49 +0100
Subject: [PATCH] CSS

---
 public/css/app.css      | 285 +++++++++++++++++++++-------------------
 resources/sass/app.scss |  54 ++++----
 2 files changed, 181 insertions(+), 158 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index 7f38485..87149cd 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -1,139 +1,5 @@
 @charset "UTF-8";
 
-/* DEFINE FONTFACE */
-
-.buttons::after {
-  content: "Aller";
-}
-
-/* BUTTONS ICONS (before) */
-
-.donate::before,
-a[href*="demo.cesium.app"]::before,
-a[href*="helloasso.com"]::before,
-a[href*="opencollective.com"]::before,
-a[href*="liberapay.com"]::before {
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  content: "\F4B9";
-  padding-right: 5px;
-}
-
-a[href*=chat]::before,
-a[href*=forum]::before {
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  content: "\F086";
-  padding-right: 5px;
-}
-
-a[href*="framasphere.org"]::before {
-  font-family: "Font Awesome 5 Brands";
-  font-weight: 900;
-  content: "\F791";
-  padding-right: 5px;
-}
-
-a[href*="facebook.com"]::before {
-  font-family: "Font Awesome 5 Brands";
-  font-weight: 900;
-  content: "\F09A";
-  padding-right: 5px;
-}
-
-a[href*=mastodon]::before {
-  font-family: "Font Awesome 5 Brands";
-  font-weight: 900;
-  content: "\F4F6";
-  padding-right: 5px;
-}
-
-a[href*="twitter.com"]::before {
-  font-family: "Font Awesome 5 Brands";
-  font-weight: 900;
-  content: "\F099";
-  padding-right: 5px;
-}
-
-a[href*="youtube.com"]::before,
-a[href*=peertube]::before,
-a[href*="tube.p2p.legal"]::before {
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  content: "\F04B";
-  padding-right: 5px;
-}
-
-a[href*=agenda]::before,
-a[href*=calendar]::before,
-a[href*=events]::before {
-  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;
-  }
-}
-
 #choicebox {
   display: flex;
   flex-direction: column;
@@ -9333,6 +9199,7 @@ input[type=range]::-ms-thumb {
 
 .fa,
 .fas,
+.licence,
 .far,
 .fal,
 .fad,
@@ -9346,6 +9213,16 @@ input[type=range]::-ms-thumb {
   line-height: 1;
 }
 
+.licence {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+}
+
 .fa-lg {
   font-size: 1.3333333333em;
   line-height: 0.75em;
@@ -9439,6 +9316,7 @@ input[type=range]::-ms-thumb {
 
 .fa.fa-pull-left,
 .fas.fa-pull-left,
+.fa-pull-left.licence,
 .far.fa-pull-left,
 .fal.fa-pull-left,
 .fab.fa-pull-left {
@@ -9447,6 +9325,7 @@ input[type=range]::-ms-thumb {
 
 .fa.fa-pull-right,
 .fas.fa-pull-right,
+.fa-pull-right.licence,
 .far.fa-pull-right,
 .fal.fa-pull-right,
 .fab.fa-pull-right {
@@ -15427,7 +15306,8 @@ readers do not read off random characters that represent icons */
 }
 
 .fa,
-.fas {
+.fas,
+.licence {
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
 }
@@ -15451,3 +15331,138 @@ readers do not read off random characters that represent icons */
   font-weight: 400;
 }
 
+.buttons::after {
+  content: "Aller";
+}
+
+.licence:before {
+  content: "\F24E";
+  padding-right: 5px;
+}
+
+/* BUTTONS ICONS (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],
+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;
+  }
+}
+
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 77babea..0d61751 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1,55 +1,72 @@
 
-/* DEFINE FONTFACE */
-$button-color:#2196F3;
+@import 'softbox';
+@import 'choicebox';
+@import 'home';
+// MATERIALIZE CSS
+@import 'materialize/sass/materialize.scss';
 
+@import "fontawesome.scss";
+@import "solid.scss";
+@import "brands.scss";
+$icons-padding: 5px;
 .buttons::after{
   content:"Aller";
 }
+.licence{
+    @extend %fa-icon;
+    @extend .fas;
+    &:before{
+        content: fa-content($fa-var-balance-scale);
+        padding-right: $icons-padding;
+    }
+}
 /* BUTTONS ICONS (before) */
-.donate::before,a[href*="demo.cesium.app"]::before,a[href*="helloasso.com"]::before,a[href*="opencollective.com"]::before,a[href*="liberapay.com"]::before{
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  content: "\f4b9";
-  padding-right:5px;
+.donate,a[href*="demo.cesium.app"],a[href*="helloasso.com"],a[href*="opencollective.com"],a[href*="liberapay.com"]{
+
+&:before{
+padding-right:5px;
+content: fa-content($fa-var-donate);
 }
 
-a[href*="chat"]::before,a[href*="forum"]::before{
+}
+
+a[href*="chat"],a[href*="forum"]{
   font-family: "Font Awesome 5 Free";
   font-weight: 900;
   content: "\f086";
   padding-right:5px;
 }
-a[href*="framasphere.org"]::before{
+a[href*="framasphere.org"]{
   font-family: "Font Awesome 5 Brands";
   font-weight: 900;
   content: "\f791";
   padding-right:5px;
 }
-a[href*="facebook.com"]::before{
+a[href*="facebook.com"]{
   font-family: "Font Awesome 5 Brands";
   font-weight: 900;
   content: "\f09a";
   padding-right:5px;
 }
-a[href*="mastodon"]::before{
+a[href*="mastodon"]{
 font-family: "Font Awesome 5 Brands";
 font-weight: 900;
 content: "\f4f6";
 padding-right:5px;
 }
-a[href*="twitter.com"]::before{
+a[href*="twitter.com"]{
 font-family: "Font Awesome 5 Brands";
 font-weight: 900;
 content: "\f099";
 padding-right:5px;
 }
-a[href*="youtube.com"]::before,a[href*="peertube"]::before,a[href*="tube.p2p.legal"]::before{
+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"]::before,a[href*="calendar"]::before,a[href*="events"]::before{
+a[href*="agenda"],a[href*="calendar"],a[href*="events"]{
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 content: "\f073";
@@ -94,12 +111,3 @@ content:"Youtube";
   .night.dark-scheme { background: black; color:  #ddd; }
 }
 
-@import 'softbox';
-@import 'choicebox';
-@import 'home';
-// MATERIALIZE CSS
-@import 'materialize/sass/materialize.scss';
-
-@import "fontawesome.scss";
-@import "solid.scss";
-@import "brands.scss";