redesign the footer with better spacing

This commit is contained in:
jorge 2022-07-12 22:28:05 +02:00
parent e343a4b04e
commit 59828039a3
2 changed files with 154 additions and 115 deletions

View File

@ -1,72 +1,77 @@
<?php
/**
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content
* after. Calls sidebar-footer.php for bottom widgets.
*
* @package Hangar
* @subpackage template
* @since Twenty Ten 1.0
*/
* The template for displaying the footer.
*
* Contains the closing of the id=main div and all content
* after. Calls sidebar-footer.php for bottom widgets.
*
* @package Hangar
* @subpackage template
* @since Twenty Ten 1.0
*/
?>
</div><!-- #main -->
</div><!-- #main -->
</div><!-- #wrapper -->
<div id="footer" role="contentinfo">
<div id="wrapfooter">
<div id="footer" role="contentinfo">
<main class="wrapfooter">
<div 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' ); ?>
<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>
</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 />
info(at)hangar.org<br />
</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>
<div class="col tels">
CIF: G-63157655<br />
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>
</div><!-- #fwrapfooter -->
</div><!-- #footer -->
<script type="text/javascript">
jQuery('#logoslider').cycle({
fx: 'scrollLeft',
delay: -1000
});
jQuery('#logoslider2').cycle({
fx: 'scrollLeft',
delay: -1000
});
jQuery('#logoslider3').cycle({
fx: 'scrollLeft',
delay: -1000
});
</script>
</div><!-- .fwrapfooter -->
</div><!-- #footer -->
<script type="text/javascript">
jQuery('#logoslider').cycle({
fx: 'scrollLeft',
delay: -1000
});
jQuery('#logoslider2').cycle({
fx: 'scrollLeft',
delay: -1000
});
jQuery('#logoslider3').cycle({
fx: 'scrollLeft',
delay: -1000
});
</script>
<?php
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
/* Always have wp_footer() just before the closing </body>
* tag of your theme, or you will break many plugins, which
* generally use this hook to reference JavaScript files.
*/
wp_footer();
wp_footer();
?>
</body>
</html>

146
style.css
View File

@ -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;