redesign the footer with better spacing

footer.php

@@ -15,36 +15,41 @@
 </div><!-- #wrapper -->
 
 <div id="footer" role="contentinfo">
-		<div id="wrapfooter">
+	<main class="wrapfooter">
 
-			<div class="col logo">
+		<p class="col logo">
 			<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo get_template_directory_uri(). '/images/logogris.png'; ?>" width="105" height="40" alt="Hangar org" /></a>
-			</div>
-			<div class="col org">
-			<?php _e( 'Fundació AAVC Hangar', 'hangar' ); ?> <br />
-			<?php _e( 'Emilia Coranty 16', 'hangar' ); ?><br />
-			<?php _e( '08018 Barcelona Espanya', 'hangar' ); ?>
-
-			</div>
-			<div class="col tels">
+		</p>
+		<p class="col org">
+			Fundació AAVC Hangar<br />
+			Emilia Coranty 16<br />
+			08018 Barcelona Espanya<br />
 			CIF: G-63157655<br />
+		</p>
+		<p class="col tels">
 			Tel.+34 93 308 4041<br />
 			Fax +34 93 307 1211<br />
-		  </div>
-			<div class="col inf">
 			info(at)hangar.org<br />
-				<?php _e( '[:en]Office: Monday to Thursday from 10&nbsp;am to 2&nbsp;pm and from 4&nbsp;pm to 6&nbsp;pm. Friday from 10&nbsp;am to 2&nbsp;pm.[:es]Oficina: de lunes a jueves de 10 a 14&nbsp;h y de 16 a 18&nbsp;h. Viernes de 10 a 14&nbsp;h.[:ca]Oficina: dilluns a dijous de 10 a 14&nbsp;h i de 16 a 18&nbsp;h. Divendres de 10 a 14&nbsp;h.[:]' ); ?>
-          </div>
-		<div class="col legal">
-				<a href="<?php echo get_permalink(275); ?>"><?php _e( 'Legal advice', 'hangar' ); ?></a>
-		</div>
-            <div class="alignright credits">
-				<a href="http://wordpress.org/">Powered by Wordpress</a><br />
-				<?php _e( 'Design:', 'hangar' ); ?><a href="http://folchstudio.com/">Folch Studio</a><br />
-				<?php _e( 'Development:', 'hangar' ); ?> <a href="http://www.enfusion.es/">Enfusión</a>
-            </div>
+		</p>
+		<p class="col inf">
+			<?php _e( '
+			  [:en]Office: Monday to Thursday from 10&nbsp;am to 2&nbsp;pm and from 4&nbsp;pm to 6&nbsp;pm. Friday from 10&nbsp;am to 2&nbsp;pm.[:]
+				[:es]Oficina: de lunes a jueves de 10 a 14&nbsp;h y de 16 a 18&nbsp;h. Viernes de 10 a 14&nbsp;h.[:]
+				[:ca]Oficina: dilluns a dijous de 10 a 14&nbsp;h i de 16 a 18&nbsp;h. Divendres de 10 a 14&nbsp;h.[:]
+				' ); ?>
+		</p>
+		<!-- <p class="col legal">
+		</p> -->
+		<p class="alignright credits">
+			<a href="https://wordpress.org/">Powered by Wordpress</a><br />
+			<?php _e( 'Original Design:', 'hangar' ); ?><a href="https://folchstudio.com/">Folch Studio</a><br />
+			<?php _e( 'Original Development:', 'hangar' ); ?> <a href="https://www.enfusion.es/">Enfusión</a>
+			<?php _e( 'Development and design:', 'hangar' ); ?> <a href="https://git.hangar.org/">Hangar</a>
+			<br />
+			<a href="<?php echo get_permalink(275); ?>"><?php _e( 'Legal advice', 'hangar' ); ?></a><br />
+		</p>
 
-		</div><!-- #fwrapfooter -->
+	</div><!-- .fwrapfooter -->
 </div><!-- #footer -->
 <script type="text/javascript">
 jQuery('#logoslider').cycle({

languages/ca.po

@@ -126,12 +126,15 @@ msgid "Legal advice"
 msgstr "Avís legal"
 
 #: ../footer.php:42
-msgid "Design:"
-msgstr "Disseny:"
+msgid "Original Design:"
+msgstr "Disseny original:"
 
 #: ../footer.php:43
-msgid "Development:"
-msgstr "Desenvolupament:"
+msgid "Original Development:"
+msgstr "Desenvolupament original:"
+
+msgid "Design and Development:"
+msgstr "Disseny i desenvolupament:"
 
 #: ../seccions.php:53
 #: ../seccions.php:85

languages/es_ES.po

@@ -130,12 +130,16 @@ msgid "Legal advice"
 msgstr "Aviso legal"
 
 #: ../footer.php:42
-msgid "Design:"
-msgstr "Diseño:"
+msgid "Original Design:"
+msgstr "Diseño original:"
 
 #: ../footer.php:43
-msgid "Development:"
-msgstr "Desarrollo:"
+msgid "Original Development:"
+msgstr "Desarrollo original:"
+
+msgid "Design and Development:"
+msgstr "Diseño y desarrollo:"
+
 
 #: ../seccions.php:53
 #: ../seccions.php:85

style.css

@@ -12,6 +12,18 @@ Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-backgr
 ---------------------------------------------
 @import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|Droid+Serif:regular,italic,bold,bolditalic&subset=latin); */
 
+
+
+/* variables
+--------------------------------------------- */
+
+html {
+	--hangar-body-font-size: 12px;
+	--hangar-body-font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
+	--sherif-font-family: 'Droid Serif',  Times, serif;
+	--sans-sherif-font-family:'Droid Sans',arial,sans-serif;
+}
+
 /* Reset
 --------------------------------------------- */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
@@ -47,7 +59,7 @@ body {
 	background-image: url('images/motiufons.gif');
 	background-repeat:repeat-x repeat-y;
 	background-color: transparent;
-	font-size: 0.8rem /*12px*/;
+	font-size: var(--hangar-body-font-size);
 	font-family:'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
 	letter-spacing: 1px;
 }
@@ -122,22 +134,16 @@ body {
 
 
 #footer {
-	padding: 0px 0px 30px 0px;
+	padding: 20px 0px 30px 0px;
 	clear: both;
-	font-size: 1rem;
 	background-color: #f1f1f1;
 	bottom: 0;
 	position: relative;
-	height:50px; /* abans 120px */
+	min-height:50px;
 	letter-spacing:0.5px;
 	color:#888888;
 }
 
-#wrapfooter {
-	max-width: 1237px;
-	padding: 20px 0px 0px 20px;
-	z-index: 0; font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
-}
 
 .aligncenter {
 	margin:0 auto;
@@ -294,7 +300,7 @@ ul.sidebar a, p.meta a,  p.logged-in-as a, a.post-edit-link, #footer a {
 
 /* Lists
 --------------------------------------------- */
-#content ul li {font-size:12px;}
+#content ul li {font-size:var(--hangar-body-font-size);}
 
 #content #page ul, #content .post ul {
 	padding:20px 0px 10px 25px;
@@ -411,7 +417,7 @@ ul.menu ul.sub-menu li a:hover {text-decoration: underline;}
 	text-decoration:none;
 }
 #sidebar-primary .logo p {
-font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
+	font-family: var(--hangar-body-font-family);
 	font-style:italic;
 	font-size:13px;
 }
@@ -459,7 +465,7 @@ ul.sidebar li.widget_pages ul li.page_item ul.children {
 	max-width: 100%;
 	width: 130px;
 	margin:4px;
-	font-size:12px;
+	font-size:var(--hangar-body-font-size);
 	float:right;
 	border: 1px solid #ababab;
 	background-color:#e5e5e5;
@@ -471,8 +477,8 @@ ul.sidebar li.widget_pages ul li.page_item ul.children {
 	float:right;
 	background:#666666;
 	border:none;
-	font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
-	font-size:12px;
+	font-family: var(--hangar-body-font-family);
+	font-size:var(--hangar-body-font-size);
 	color:#fff;
 	cursor:pointer;
 	-webkit-border-radius: 15px;
@@ -503,8 +509,8 @@ ul.sidebar li.widget_recent_comments ul#recentcomments li.recentcomments a {
 }
 /* --- Calendar Widget --- */
 table#wp-calendar caption {
-	font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
-	font-size:12px;
+	font-family: var(--hangar-body-font-family);
+	font-size:var(--hangar-body-font-size);
 	line-height:18px;
 	font-style:italic;
 	text-align:left;
@@ -572,12 +578,12 @@ ul.sidebar li.widget_sociallinks a.delicious {
 #content.mix #lateca {display:inline-block; height:58px;margin-bottom:10px; width:200px;overflow:hidden;}
 
 #content.unic p{	padding:0px 0px 15px 0px;
-	font-size: 12px;
+	font-size: var(--hangar-body-font-size);
 	line-height:17px;}
 
 #content .post p {
 	padding:0px 0px 15px 0px;
-	font-size: 12px;
+	font-size: var(--hangar-body-font-size);
 	line-height:17px;
 }
 #content .post p small {
@@ -591,7 +597,7 @@ ul.sidebar li.widget_sociallinks a.delicious {
 	margin:10px 0px 20px 0px;
 	padding:0px 0px 0px 16px;
 	background:url(images/blockquote-border.jpg) 0 0 repeat-y;
-	font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
+	font-family: var(--hangar-body-font-family);
 	line-height:21px;
 	font-style:italic;
 }
@@ -600,7 +606,7 @@ ul.sidebar li.widget_sociallinks a.delicious {
 }
 #content blockquote p cite {
 	padding:5px 0px 0px 0px;
-	font-size:12px;
+	font-size:var(--hangar-body-font-size);
 	font-weight:bold;
 }
 #content address {
@@ -649,8 +655,8 @@ ul.sidebar li.widget_sociallinks a.delicious {
 	display: block;
 }
 #content p.wp-caption-text {
-	font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
-	font-size:12px;
+	font-family: var(--hangar-body-font-family);
+	font-size:var(--hangar-body-font-size);
 	font-style:italic;
 	line-height:18px;
 	padding:7px 0px 10px 0px;
@@ -669,7 +675,7 @@ ul.sidebar li.widget_sociallinks a.delicious {
 }
 #content .post p.meta span, #content .page p.meta span, #content p.meta span {
 	padding:0px 0px 0px 0px;
-	font-size:12px;
+	font-size:var(--hangar-body-font-size);
 	line-height:14px;
 }
 
@@ -686,7 +692,7 @@ ul.sidebar li.widget_sociallinks a.delicious {
 }
 
 #content.resultats p{
-	font-size:12px;
+	font-size:var(--hangar-body-font-size);
 	line-height:17px;
 	padding-bottom:10px;
 }
@@ -704,7 +710,7 @@ ul.sidebar li.widget_sociallinks a.delicious {
 #content.resultats div#navi {display:block; height:30px;}
 
 a.post-edit-link {
-	font-size:12px;
+	font-size:var(--hangar-body-font-size);
 }
 #content p.previous {
 	float:left;
@@ -725,7 +731,11 @@ a.post-edit-link {
 
 
 p.blue {color: #0043F6;}
-p.curt {padding-bottom:1px!important;line-height:12px!important;font-size:12px!important; }
+p.curt {
+	padding-bottom:1px!important;
+	line-height:var(--hangar-body-font-size)!important;
+	font-size:var(--hangar-body-font-size)!important;
+}
 p.peullarg {padding-bottom:20px;}
 
 
@@ -824,7 +834,13 @@ span.cat a{text-transform: uppercase; letter-spacing:normal}
 
 #sidebar-secondary .boxentry {margin-right: 0px; margin-left:0px;}
 
-#sidebar-secondary .boxentry p.meta{clear:both;overflow:hidden;font-size:12px; line-height:14px;padding-bottom:14px;}
+#sidebar-secondary .boxentry p.meta{
+	clear:both;
+	overflow:hidden;
+	font-size:var(--hangar-body-font-size);
+	line-height:14px;
+	padding-bottom:14px;
+}
 
 #content.mix .boxentry {margin-right:4px; margin-left:4px;}
 
@@ -872,9 +888,9 @@ a.peutots {margin-bottom:15px;}
 .nofons {background-color:transparent!important;}
 .nopadding {padding-bottom:0px!important;}
 
-p.carrec{ font-size: 12px; line-height:14px; padding-bottom:20px;}
+p.carrec{ font-size: var(--hangar-body-font-size); line-height:14px; padding-bottom:20px;}
 p.carrec:before {content: " - ";}
-p.boxcurta{font-size:12px; line-height:12px; padding-bottom:2px;}
+p.boxcurta{font-size:var(--hangar-body-font-size); line-height:var(--hangar-body-font-size); padding-bottom:2px;}
 span.categ a{text-transform:uppercase; color: #666666;}
 span.categ a:after {content: " ─ ";}
 /* breadcrum */
@@ -907,8 +923,8 @@ p#sidebarr {display: inline-block; height:16px; overflow:hidden;  margin: 2px 0
 }
 #content .post #author-description h2 {
 	padding:0px;
-	font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
-	font-size:12px;
+	font-family: var(--hangar-body-font-family);
+	font-size:var(--hangar-body-font-size);
 	font-weight:normal;
 }
 #content .post #author-description h2 span {
@@ -917,7 +933,7 @@ p#sidebarr {display: inline-block; height:16px; overflow:hidden;  margin: 2px 0
 	letter-spacing:0.1em;
 }
 #content .post #author-description p, .page-link  {
-	font-family: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
+	font-family: var(--hangar-body-font-family);
 	font-size:13px;
 	line-height:18px;
 	font-style:italic;
@@ -958,8 +974,8 @@ p.cf-sb {clear:both; }
     color: #FFFFFF;
     cursor: pointer;
     float: right;
-    font-family: 'Helvetica Neue',Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif;
-    font-size: 12px;
+	font-family: var(--hangar-body-font-family);
+    font-size: var(--hangar-body-font-size);
     margin: 4px;
     padding: 2px;
     width: 55px; }
@@ -994,8 +1010,8 @@ ul.catlist li {display:inline}
 	line-height:19px;
 }
 #comments-content p.moderation {
-	font-family:'Droid Serif',  Times, serif;
-	font-size:12px;
+	font-family:var(--sherif-font-family);
+	font-size:var(--hangar-body-font-size);
 	font-style:italic;
 	color:#999;
 }
@@ -1019,7 +1035,7 @@ ul.catlist li {display:inline}
 }
 .comment-meta {
 	padding:0px 0px 10px 0px;
-	font-size:12px;
+	font-size:var(--hangar-body-font-size);
 }
 .comment-gravatar {
 	margin:1px 15px 0px 0px;
@@ -1034,12 +1050,12 @@ ul.catlist li {display:inline}
 	float:right;
 }
 a.comment-reply-link {
-	font-size:12px;
+	font-size:var(--hangar-body-font-size);
 	font-weight:bold;
 }
 p.logged-in-as {
-	font-family:'Droid Serif',  Times, serif;
-	font-size:12px;
+	font-family:var(--sherif-font-family);
+	font-size:var(--hangar-body-font-size);
 	font-style:italic;
 }
 #comments-content ol li.post.pingback {
@@ -1056,7 +1072,7 @@ span.fn {color: #0043f6;}
 a#cancel-comment-reply-link {
 	padding:3px 0px 0px 0px;
 	float:right;
-	font-size:12px;
+	font-size:var(--hangar-body-font-size);
 }
 #content .post #comments-content #respond h3#reply-title {
 	padding:30px 0px 6px 0px;
@@ -1068,18 +1084,18 @@ a#cancel-comment-reply-link {
 }
 form#commentform p.comment-notes {
 	padding:5px 0px 15px 0px;
-	font-family:'Droid Serif',  Times, serif;
-	font-size:12px;
+	font-family:var(--sherif-font-family);
+	font-size:var(--hangar-body-font-size);
 	font-style:italic;
 }
 form#commentform input#author, form#commentform input#email, form#commentform input#url {
-	font-family:'Droid Sans', arial, sans-serif;
+	font-family:var(--sans-serif-font-family);
 	height:22px;
 }
 form#commentform textarea#comment {
 	width:90%;
 	padding:3px;
-	font-family:'Droid Sans', arial, sans-serif;
+	font-family:var(--sans-serif-font-family);
 }
 form#commentform p.comment-form-author, form#commentform p.comment-form-email, form#commentform p.comment-form-url, form#commentform p.comment-form-comment {
 	padding:10px 0px 0px 0px;
@@ -1089,8 +1105,8 @@ form#commentform p.form-submit input#submit {
 	padding:6px 8px 6px 8px;
 	background:#333333;
 	border:none;
-	font-family:'Droid Sans', arial, sans-serif;
-	font-size:12px;
+	font-family:var(--sans-serif-font-family);
+	font-size:var(--hangar-body-font-size);
 	color:#fff;
 	cursor:pointer;
 }
@@ -1116,8 +1132,8 @@ form#commentform p.form-submit input#submit {
 .gallery .gallery-caption {
 	margin-left: 0;
 	padding: 5px 0px 8px 0px;
-	font-family:'Droid Serif',  Times, serif;
-	font-size: 12px;
+	font-family:var(--sherif-font-family);
+	font-size: var(--hangar-body-font-size);
 	font-style: italic;
 	line-height: 16px; color: #03F;
 	display: block!important;
@@ -1125,13 +1141,30 @@ form#commentform p.form-submit input#submit {
 
 /* Footer
 --------------------------------------------- */
-#footer p {
-	line-height:19px;
-	font-size:11px;
-	color: #808080;
+.wrapfooter {
+	max-width: 1237px;
+	padding: 20px 0px 0px 20px;
+	z-index: 0;
+	font-size: var(--hangar-body-font-size);
+	font-family: var(--hangar-body-font-family);
+	display:flex;
+	justify-content: space-between;
 }
 
+.wrapfooter p {
+	line-height:19px;
+	font-size:var(--hangar-body-font-size);
+	color: #808080;
+}
 .center {text-align:center;}
+/* .col {float: left; } */
+.logo { width:140px; margin:0;}
+.org,.tels,.inf,.legal,.credits {
+	width: calc((100% - 140px)/5)
+}
+.credits a{color: #A3A7A5!important;}
+
+/* .center {text-align:center;}
 .col {float: left; }
 .logo { width:140px; margin:0;}
 .org { width:278px;}
@@ -1139,7 +1172,8 @@ form#commentform p.form-submit input#submit {
 .inf{width: 267px;}
 .legal {width:68px;padding-top:30px;padding-left: 30px;}
 .credits {width:150px; font-size:9px; color: #A3A7A5; margin-top:9px;}
-.credits a{color: #A3A7A5!important;}
+.credits a{color: #A3A7A5!important;} */
+
 
 /* Archives
 --------------------------------------------- */
@@ -1147,8 +1181,8 @@ h1.archive {
 	margin:0px 0px 25px 0px;
 	padding: 0px 0px 10px 0px;
 	border-bottom:1px dotted #333333;
-	font-family:'Droid Serif',  Times, serif;
-	font-size:12px;
+	font-family:var(--sherif-font-family);
+	font-size:var(--hangar-body-font-size);
 	font-weight:normal;
 	font-style:italic;
 	letter-spacing:0.1em;