css/media-queries.css

@@ -14,9 +14,15 @@
     padding-right: 5px;
   }
 
+  footer #footer-links {
+    text-align: center;
+    width: 100%;
+  }
+
   /* Icons */
   footer  #footer-icons { display: none; }
-  footer  #footer-logo { display: none; }
+  /*footer  #footer-logo { display: none; }*/
+  footer  #footer-left { display: none; }
 
   /* Go To Top Button */
   #go-top { margin-left: -22px; }

css/style.css

@@ -1729,18 +1729,50 @@ footer {
 	justify-content: center;
 	text-align: center;
 	align-items: center;
-	height: 82px;
  }
 
+/* there is no logo anymore in the footer
+ * TODO: d-white.png should probably be removed since is not used elsewhere
  footer #footer-logo {
-   height: 45px;
+   background: url("../images/d-white.png") no-repeat center;
-   width: 15%;
+   background-size: contain;
-   background: url("../images/d-white.png") no-repeat left center;
+   margin-bottom: 0;
-   background-size: 40px 40px;
+   margin-left: 1dvw;
-   margin-left: 30px;
    opacity: 0.7;
-   display: inline-block;
  }
+*/
+
+footer #footer-left {
+  display: flex;
+  width: 150px;
+  background: transparent;
+  align-items: center;
+  margin-left: 10px;
+}
+
+#footer-copyleft {
+  background: url("../images/by-sa.png") no-repeat center;
+  background-size: contain;
+  margin-bottom: 0;
+  margin-left: 1dvw;
+  opacity: 0.7;
+}
+
+/* there is no logo anymore in the footer
+#footer-logo a {
+  display: flex;
+  width: 45px;
+  height: 45px;
+  margin-bottom: 0;
+}
+*/
+
+#footer-copyleft a {
+  display: flex;
+  width: 120px;
+  height: 40px;
+  margin-bottom: 0;
+}
 
  footer .dot {
    height: 5px;
@@ -1753,28 +1785,40 @@ footer {
 
  footer #footer-links {
 	 text-align: center;
-	 width: 60%;
+	 width: calc(100% - 300px);
  }
 
  footer ul.footer-links {
    display: flex;
-   justify-content: center;
+   justify-content: space-evenly;
    align-items: center;
-   padding-left: 0;
+   padding-left: 10%;
+   padding-right: 10%;
    margin-bottom: 24px;
    margin-top: 12px;
   }
 
- footer ul.footer-icons {
+footer ul.footer-icons-left {
-   display: flex;
+  display: inline-flex;
-   justify-content: end;
+  width: 100%;
-   margin-right: 30px;
+  justify-content: left;
-   align-items: center;
+  align-items: center;
- }
+  margin: 0;
+  padding: 0;
+}
+
+footer ul.footer-icons-right{
+  display: inline-flex;
+  width: 100%;
+  justify-content: right;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
 
  footer div#footer-links ul li {
-   padding-left: 20px;
+   padding-left: 8px;
-   padding-right: 20px;
+   padding-right: 8px;
    margin: 0;
    padding-top: 13px;
    font-weight: 600;
@@ -1790,25 +1834,25 @@ footer {
  }
 
  footer #footer-icons {
-	 width: 25%;
+	 width: 150px;
 	 background: transparent;
 	 margin-left: auto;
-	 margin-right: auto;
+	 margin-right: 10px;
 	 text-align: center;
-	 margin-bottom: 24px;
-	margin-top: 12px;
 }
 
  footer #footer-icons ul li {
  margin: 0;
- padding-right: 10px;
+ margin-right: 1dvw;;
- padding-top: 10px;
+ text-align: center;
- text-align: right;
  }
 
  footer #footer-icons ul li .fa-fw {
+   display: flex;
    color: white;
    opacity: 0.7;
+   height: 45px;
+   align-items: center;
  }
 
  footer #footer-icons ul li .fa-fw:hover {

languages.yaml

@@ -1,24 +1,24 @@
 en:
   Terms_Of_Service: "Terms Of Service"
   Privacy_Policy: "Privacy Policy"
-  Changelog: "Changelog"
+  Changelog: "Change­log"
 
 fr:
   Terms_Of_Service: "Conditions d'utilisation"
   Privacy_Policy: "Politique de confidentialité"
-  Changelog: "Changelog"
+  Changelog: "Change­log"
 
 es:
   Terms_Of_Service: "Al utilizar cualquiera"
   Privacy_Policy: "Política de Privacidad"
-  Changelog: "Changelog"
+  Changelog: "Change­log"
 
 de:
-  Terms_Of_Service: "Nutzungsbedingungen"
+  Terms_Of_Service: "Nutzungs­bedingungen"
-  Privacy_Policy: "Datenschutzerklärung"
+  Privacy_Policy: "Datenschutz­erklärung"
-  Changelog: "Changelog"
+  Changelog: "Change­log"
 
 it:
   Terms_Of_Service: "Utilizzando i servizi"
   Privacy_Policy: "Informativa sulla privacy"
-  Changelog: "Changelog"
+  Changelog: "Change­log"

templates/partials/footer.html.twig

@@ -6,22 +6,26 @@
   </div>
 </div>
 <footer>
-    <div id="footer-logo" ><a href="{{ base_url }}/contact"></a></div>
+    <div id="footer-left">
+        <ul class="footer-icons-left">
+        <div id="footer-copyleft"><a href="https://git.disroot.org/Disroot/Website#license"></a></div>
+        </ul>
+    </div>
     <div id="footer-links">
         <ul class="footer-links">
-            <li>Copyleft Disroot.org</li>
+            <li><a href="{{ base_url }}/tos">{{ 'Terms_Of_Service'|t }}</a></li>
             <li><span class="dot"></span></li>
-            <li><a href="https://disroot.org/tos">{{ 'Terms_Of_Service'|t }}</a></li>
+            <li><a href="{{ base_url }}/privacy_policy">{{ 'Privacy_Policy'|t }}</a></li>
             <li><span class="dot"></span></li>
-            <li><a href="https://disroot.org/privacy_policy">{{ 'Privacy_Policy'|t }}</a></li>
+            <li><a href="{{ base_url }}/changelog">{{ 'Changelog'|t }}</a></li>
             <li><span class="dot"></span></li>
-            <li><a href="https://disroot.org/changelog">{{ 'Changelog'|t }}</a></li>
+            <li><a href="{{ base_url }}/tor">{{ 'Tor Onion'|t }}</a></li>
         </ul>
     </div>
     <div id="footer-icons">
-        <ul class="footer-icons">
+        <ul class="footer-icons-right">
-        <li><a  href="https://nixnet.social/disroot"><i class="fa fa-mastodon fa-fw fa-3x"></i></a></li>
+        <li><a href="https://nixnet.social/disroot"><i class="fa fa-mastodon fa-fw fa-3x"></i></a></li>
-        <li><a  href="/blog.atom"><i class="fa fa-rss-square fa-fw fa-3x"></i></a></li>
+        <li><a href="{{ base_url }}/blog.atom"><i class="fa fa-rss-square fa-fw fa-3x"></i></a></li>
         </ul>
     </div>
 </footer>