libretic/grav-theme-libretic
6
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Polishing footer

Browse source
This commit is contained in:
Karol Orzeł 2015-01-19 12:43:44 +01:00
parent e6d1e26eb3
commit 10df81cded
4 changed files with 146 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
css-compiled/template.css
View file

@ -904,6 +904,44 @@ ul.pagination {
content: "";
display: table;
clear: both; }
.modular .footer .quickmenu {
margin: 0;
padding: 0;
list-style: none; }
.modular .footer .quickmenu i {
padding-right: 0.5rem;
color: #fff; }
.modular .footer .quickmenu li a {
color: #9A9898; }
.modular .footer .footer-modules {
display: block;
padding-bottom: 1.5rem; }
.modular .footer .footer-modules:after {
content: "";
display: table;
clear: both; }
.modular .footer .footer-copyright {
width: 50%;
display: inline-block;
float: left;
text-align: left; }
.modular .footer .footer-menu {
float: right;
display: inline-block;
width: 50%;
text-align: right; }
.modular .footer .footer-menu ul {
margin: 0;
padding: 0;
list-style: none; }
.modular .footer .footer-menu ul li {
display: inline-block; }
.modular .footer .footer-menu ul li:after {
content: "/";
margin: 0 0.5rem;
display: inline-block; }
.modular .footer .footer-menu ul li:last-child:after {
display: none; }
.callout {
background: #EEEEEE;

2
css-compiled/template.css.map
View file

File diff suppressed because one or more lines are too long

93
scss/template/modular/_footer.scss
View file

@ -25,32 +25,79 @@
.footer-module {
&.large {
width: 40%;
}
display:block;
float: left;
width: 20%;
vertical-align: top;
padding-right: 2rem;
@include breakpoint(large-mobile-range) {
margin-top: 1rem;
width: 50%;
}
@include breakpoint(small-mobile-range) {
margin-top: 1rem;
width: 100%;
}
span {
@include clearfix;
}
strong {
color: $white;
}
}
display:block;
float: left;
width: 20%;
vertical-align: top;
padding-right: 2rem;
@include breakpoint(large-mobile-range) {
margin-top: 1rem;
width: 50%;
}
.logo {
border-bottom: 0 none;
@include breakpoint(small-mobile-range) {
margin-top: 1rem;
width: 100%;
}
span {
@include clearfix;
}
strong {
color: $white;
}
hr {}
}
.logo {
border-bottom: 0 none;
@include clearfix;
color: $white;
}
.quickmenu {
margin: 0;
padding: 0;
list-style: none;
i {
padding-right: 0.5rem;
color: $white;
}
li a {
color: $core-text;
}
}
.footer-modules {
@include clearfix;
display: block;
padding-bottom: 1.5rem;
}
.footer-copyright {
width: 50%;
display: inline-block;
float: left;
text-align: left;
}
.footer-menu {
float: right;
display: inline-block;
width: 50%;
text-align: right;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
&:after {
content: "/";
margin: 0 0.5rem;
display: inline-block;
}
&:last-child {
&:after {
display: none;
}
}
}
}
}
}
}

68
templates/modular/footer.html.twig
View file

@ -1,42 +1,48 @@
<div class="modular-row footer {{ page.header.class}}">
<div class="footer-items">
<div class="footer-module large">
<div class="logo">
<h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ config.site.title }}</a></h3>
{% block social %}
{% include 'partials/social.html.twig' %}
{% endblock %}
<div class="footer-module large">
<div class="logo">
<h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ config.site.title }}</a></h3>
{% block social %}
{% include 'partials/social.html.twig' %}
{% endblock %}
</div>
{% if page.header.description %}
<p>{{ page.header.description }}</p>
{% endif %}
</div>
{% if page.header.description %}
<p>{{ page.header.description }}</p>
{% endif %}
</div>
<div class="footer-module"><h4>{{ page.header.contact_title }}</h4>
<p>
{% for item in site.contact.address %}
<span>{{ item.line }}</span>
{% endfor %}
</p>
<p>{{ site.author.email }}</p>
<p><strong>{{ site.contact.gps }}</strong></p>
</div>
<div class="footer-module"><h4>{{ page.header.links_title }}</h4>
<div class="footer-module"><h4>{{ page.header.contact_title }}</h4>
<p>
{% for item in site.contact.address %}
<span>{{ item.line }}</span>
{% endfor %}
</p>
<p>{{ site.author.email }}</p>
<p><strong>{{ site.contact.gps }}</strong></p>
</div>
<div class="footer-module"><h4>{{ page.header.links_title }}</h4>
<ul class="quickmenu">
{% for module in page.collection() %}
<li><i class="fa fa-chevron-right"></i><a href="#{{ _self.pageLinkName(module.menu) }}">{{ module.menu }}</a></li>
{% endfor %}
</ul>
{% for module in site.quicklinks %}
<li><i class="fa fa-chevron-right"></i><a href="#{{ module.url }}">{{ module.text }}</a></li>
{% endfor %}
</ul>
</div>
<div class="footer-module">
<h4>{{ page.header.newsletter_title }}</h4>
<p>{{ page.header.newsletter_description }}</p>
</div>
</div>
{{ content }}
<div class="footer-modules">
<div class="footer-copyright">
{{ site.author.copyright }}
</div>
<div class="footer-menu">
<ul class="othermenu">
{% for module in site.othermenu %}
<li><a href="#{{ module.url }}">{{ module.text }}</a></li>
{% endfor %}
</ul>
</div>
{{ content }}
</div>
</div>
</div>