improve mobile rendering of donations and footer (#75)

please check thoroughly. be caution noob work :)

Co-authored-by: antilopa <antilopa@disroot.org>
Reviewed-on: #75
Reviewed-by: meaz <meaz@no-reply@disroot.org>
Co-authored-by: avg_joe <jh@disroot.org>
Co-committed-by: avg_joe <jh@disroot.org>

css/media-queries.css

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

css/style.css

@@ -936,14 +936,15 @@ img.transparent {
 .goals-item {
   position: relative;
   width: 28% !important;
-  min-width: 200px;
-  min-height: 180px;
+  min-width: 250px;
+  max-width: 350px;
+  min-height: 250px;
   border: none;
   box-shadow: 10px 10px 38px 0px rgba(0, 0, 0, 0.25);
   margin: 2% !important;
   color: #555;
   background-color: #ffffff;
-  padding: 3%;
+  padding: 20px 3% 0;
 }
 
 .goals-item-lock {
@@ -956,7 +957,7 @@ img.transparent {
 
 .goals .center {
     text-align: center;
-    margin: -1em 0 3em;
+    margin: 0;
 }
 
 .goals .right {
@@ -1180,14 +1181,42 @@ footer {
    align-items: center;
 }
 
-footer #footer-logo {
-  height: 45px;
-  width: 15%;
-  background: url("../images/d-white.png") no-repeat left center;
-  background-size: 40px 40px;
-  margin-left: 30px;
+footer #footer-left {
+  display:flex;
+  width: 150px;
+  background: transparent;
+  align-items: center;
+  margin-left: 10px;
+}
+
+#footer-logo {
+  background: url("../images/d-white.png") no-repeat center;
+  background-size: contain;
+  margin-bottom:0;
+  margin-left: 1dvw;
   opacity: 0.7;
-  display: inline-block;
+}
+
+#footer-copyleft {
+  background: url("../images/by-sa.png") no-repeat center;
+  background-size: contain;
+  margin-bottom:0;
+  margin-left: 1dvw;
+  opacity: 0.7;
+}
+
+#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 {
@@ -1201,26 +1230,45 @@ footer .dot {
 
 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%;
  }
 
-footer ul.footer-icons {
-  display: flex;
-  justify-content: end;
-  margin-right: 30px;
+ footer #footer-icons {
+  width: 150px;
+  background: transparent;
+  text-align: center;
+  margin-right: 10px;
+}
+
+footer ul.footer-icons-left {
+  display: inline-flex;
+  width:100%;
+  justify-content: left;
   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-right: 20px;
+  padding-left: 8px;
+  padding-right: 8px;
   margin: 0;
   padding-top: 13px;
 }
@@ -1232,24 +1280,18 @@ footer #footer-links a:hover {
     color: #FFFFFF;
 }
 
-footer #footer-icons {
-    width: 25%;
-    background: transparent;
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-  }
-
 footer #footer-icons ul li {
 margin: 0;
-padding-right: 10px;
-padding-top: 10px;
-text-align: right;
+margin-right: 1dvw;;
+text-align: center;
 }
 
 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: "Nutzungs­bedingungen"
   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

@@ -1,9 +1,14 @@
 <footer>
-    <div id="footer-logo" ><a href="{{ base_url }}/contact"></a></div>
+    <div id="footer-left" >
+        <ul class="footer-icons-left">
+        {#<div id="footer-logo"><a href="{{ base_url == '' ? '/#home' : base_url }}"></a></div>#}
+        <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><span class="dot"></span></li>
+            {#<li><a href="https://git.disroot.org/Disroot/Website#license">{{ 'Copyleft Disroot.org'|t }}</a></li>
+            <li><span class="dot"></span></li>#}
             <li><a href="{{ base_url }}/tos">{{ 'Terms_Of_Service'|t }}</a></li>
             <li><span class="dot"></span></li>
             <li><a href="{{ base_url }}/privacy_policy">{{ 'Privacy_Policy'|t }}</a></li>
@@ -14,7 +19,7 @@
         </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="{{ base_url }}/blog.atom"><i class="fa fa-rss-square fa-fw fa-3x"></i></a></li>
         </ul>