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

Footer initial

Browse source
This commit is contained in:
Karol Orzeł 2015-01-16 14:39:31 +01:00
parent d79339a7fa
commit f1d9cb3458
9 changed files with 210 additions and 168 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

152
css-compiled/template.css
View file

@ -1,5 +1,5 @@
@import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata|Pacifico); @import url(//fonts.googleapis.com/css?family=Montserrat:400|Raleway:300,400,600|Inconsolata|Pacifico);
#header #logo h3, #header #logo ul.social-icons, #header #navbar ul.navigation, #header #navbar .panel-activation, #footer p { #header .logo h3, #header .logo ul.social-icons, #header #navbar ul.navigation, #header #navbar .panel-activation {
position: relative; position: relative;
top: 50%; top: 50%;
-webkit-transform: translateY(-50%); -webkit-transform: translateY(-50%);
@ -69,16 +69,16 @@ b, strong, label, th {
src: url("./fonts/Novecentosanswide-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/Novecentosanswide-Medium-webfont.woff2") format("woff2"), url("./fonts/Novecentosanswide-Medium-webfont.woff") format("woff"), url("./fonts/Novecentosanswide-Medium-webfont.ttf") format("truetype"), url("./fonts/Novecentosanswide-Medium-webfont.svg#novecento_sans_widemedium") format("svg"); src: url("./fonts/Novecentosanswide-Medium-webfont.eot?#iefix") format("embedded-opentype"), url("./fonts/Novecentosanswide-Medium-webfont.woff2") format("woff2"), url("./fonts/Novecentosanswide-Medium-webfont.woff") format("woff"), url("./fonts/Novecentosanswide-Medium-webfont.ttf") format("truetype"), url("./fonts/Novecentosanswide-Medium-webfont.svg#novecento_sans_widemedium") format("svg");
font-weight: normal; font-weight: normal;
font-style: normal; } font-style: normal; }
.default-animation, #body, #header #logo h3, #header #logo ul.social-icons li, .modular .showcase .button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .callout .notebook .screen .screen-content-hover { .default-animation, #body, .modular .showcase .button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .callout .notebook .screen .screen-content-hover, .logo h3, .logo ul.social-icons li {
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
transition: all 0.5s ease; } transition: all 0.5s ease; }
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer { .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .modular .footer {
padding-left: 14rem; padding-left: 14rem;
padding-right: 14rem; } padding-right: 14rem; }
@media only all and (max-width: 47.938em) { @media only all and (max-width: 47.938em) {
.padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, #footer { .padding-horiz, .fullwidth #header, .fullwidth #breadcrumbs, .fullwidth .blog-header, .fullwidth .blog-content-item, .fullwidth .content-wrapper, .fullwidth ul.pagination, .fullwidth #body > .modular-row, #body, #header, .modular .footer {
padding-left: 8rem; padding-left: 8rem;
padding-right: 8rem; } } padding-right: 8rem; } }
@ -93,40 +93,10 @@ b, strong, label, th {
height: 12rem; height: 12rem;
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15); } box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15); }
#header > .grid, #header #logo, #header #navbar, #header .social-navigation { #header > .grid, #header .logo, #header #navbar, #header .social-navigation {
height: 50%; } height: 50%; }
#header #logo { #header .fa {
border-bottom: 1px solid #eaeaea; } color: #000; }
#header #logo h3 {
font-size: 2.5rem;
font-family: "Pacifico", "monospace";
line-height: 2rem;
margin: 0;
float: left; }
#header #logo h3 a {
color: #9A9898; }
#header #logo ul {
margin: 0;
padding: 0;
list-style: none; }
#header #logo ul.social-icons {
float: right;
line-height: 2rem;
margin: 0; }
#header #logo ul.social-icons li {
float: left;
width: 2.1rem;
height: 2.1rem;
background: #fff;
border-radius: 100%;
text-align: center;
margin-right: 0.8rem; }
#header #logo ul.social-icons li a {
color: #000;
display: block;
margin-top: 0.1rem; }
#header #logo ul.social-icons li:hover {
background: rgba(255, 255, 255, 0.5); }
#header #navbar { #header #navbar {
font-size: 1.1rem; } font-size: 1.1rem; }
#header #navbar ul { #header #navbar ul {
@ -206,38 +176,6 @@ b, strong, label, th {
.header-image #header #navbar ul.navigation ul li a:hover { .header-image #header #navbar ul.navigation ul li a:hover {
color: #558042; } color: #558042; }
#footer {
position: absolute;
background: #333;
height: 6rem;
right: 0;
bottom: 0;
left: 0;
color: #999;
text-align: center;
z-index: 1; }
#footer a:hover {
color: #fff; }
#footer .totop {
position: absolute;
bottom: 5rem;
text-align: center;
left: 0;
right: 0; }
#footer .totop span {
font-size: 1.7rem;
line-height: 2.5rem;
background: #333;
width: 3rem;
height: 2rem;
border-radius: 0;
display: inline-block;
text-align: top; }
#footer p {
margin: 0; }
#footer p .fa {
color: #fff; }
body { body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400; } font-weight: 400; }
@ -914,6 +852,49 @@ ul.pagination {
box-shadow: none; box-shadow: none;
font-size: 1rem; } font-size: 1rem; }
.modular .footer {
background: #333;
width: 100%;
padding-top: 4rem; }
.modular .footer:after {
content: "";
display: table;
clear: both; }
.modular .footer a, .modular .footer a:hover, .modular .footer h4 {
color: #fff; }
.modular .footer h4 {
line-height: 2rem;
margin-top: 0; }
.modular .footer .footer-items {
margin-top: 2rem; }
@supports not (flex-wrap: wrap) {
.modular .footer .footer-items {
overflow: hidden; } }
.modular .footer .footer-items:after {
content: "";
display: table;
clear: both; }
.modular .footer .footer-module {
display: block;
float: left;
width: 25%;
vertical-align: top; }
@media only all and (min-width: 30.063em) and (max-width: 47.938em) {
.modular .footer .footer-module {
margin-top: 1rem;
width: 50%; } }
@media only all and (max-width: 30em) {
.modular .footer .footer-module {
margin-top: 1rem;
width: 100%; } }
.modular .footer .logo {
border-bottom: 0 none;
color: #fff; }
.modular .footer .logo:after {
content: "";
display: table;
clear: both; }
.callout { .callout {
background: #EEEEEE; background: #EEEEEE;
padding: 2rem 0.938rem; padding: 2rem 0.938rem;
@ -1011,4 +992,37 @@ ul.pagination {
.modular .modular-row:last-child { .modular .modular-row:last-child {
margin-bottom: 2rem; } margin-bottom: 2rem; }
.logo {
border-bottom: 1px solid #eaeaea; }
.logo h3 {
font-size: 2.5rem;
font-family: "Pacifico", "monospace";
line-height: 2rem;
margin: 0;
float: left; }
.logo h3 a {
color: #9A9898; }
.logo ul {
margin: 0;
padding: 0;
list-style: none; }
.logo ul.social-icons {
float: right;
line-height: 2rem;
margin: 0; }
.logo ul.social-icons li {
float: left;
width: 2.1rem;
height: 2.1rem;
background: #fff;
border-radius: 100%;
text-align: center;
margin-right: 0.8rem; }
.logo ul.social-icons li a {
color: #000;
display: block;
margin-top: 0.1rem; }
.logo ul.social-icons li:hover {
background: rgba(255, 255, 255, 0.5); }
/*# sourceMappingURL=template.css.map */ /*# sourceMappingURL=template.css.map */

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

File diff suppressed because one or more lines are too long

3
scss/template.scss
View file

@ -30,9 +30,6 @@
// Header // Header
@import "template/header"; @import "template/header";
// Footer
@import "template/footer";
// Typography // Typography
@import "template/typography"; @import "template/typography";

43
scss/template/_footer.scss
View file

@ -1,43 +0,0 @@
// Footer styling
#footer {
position: absolute;
background: #333;
height: $footer-height;
right: 0;
bottom: 0;
left: 0;
@extend .padding-horiz;
color: #999;
text-align: center;
z-index: 1;
a:hover {
color: #fff;
}
.totop {
position: absolute;
bottom: $footer-height - 1rem;
text-align: center;
left: 0;
right: 0;
span {
font-size: 1.7rem;
line-height: 2.5rem;
background: #333;
width: 3rem;
height: 2rem;
border-radius: $border-radius;
display: inline-block;
text-align: top;
}
}
p {
@extend %vertical-align;
margin: 0;
.fa {
color: #fff;
}
}
}

44
scss/template/_header.scss
View file

@ -10,54 +10,20 @@
box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15); box-shadow: 0 0.05rem 1rem rgba(0,0,0, 0.15);
// set heights for vertical centering // set heights for vertical centering
> .grid, #logo, #navbar, .social-navigation { > .grid, .logo, #navbar, .social-navigation {
height: 50%; height: 50%;
} }
.fa {
color: $black;
}
#logo { .logo {
h3 { h3 {
@extend .default-animation;
@extend %vertical-align; @extend %vertical-align;
font-size: 2.5rem;
font-family: $font-family-logo;
line-height: 2rem;
margin: 0;
float: left;
a {
color: $core-text;
} }
}
border-bottom: 1px solid $body-border;
ul { ul {
margin: 0;
padding: 0;
list-style: none;
&.social-icons { &.social-icons {
@extend %vertical-align; @extend %vertical-align;
float: right;
line-height: 2rem;
margin: 0;
li {
@extend .default-animation;
float: left;
width: 2.1rem;
height: 2.1rem;
background: $white;
border-radius: 100%;
text-align: center;
margin-right: 0.8rem;
a {
color: $black;
display: block;
margin-top: 0.1rem;
}
&:hover {
background: transparentize($white, 0.5);
}
}
} }
} }
} }

47
scss/template/modular/_all.scss
View file

@ -1,6 +1,7 @@
@import "showcase"; @import "showcase";
@import "features"; @import "features";
@import "bottom"; @import "bottom";
@import "footer";
@import "text"; @import "text";
.modular { .modular {
@ -8,3 +9,49 @@
margin-bottom: 2rem; margin-bottom: 2rem;
} }
} }
.logo {
h3 {
@extend .default-animation;
font-size: 2.5rem;
font-family: $font-family-logo;
line-height: 2rem;
margin: 0;
float: left;
a {
color: $core-text;
}
}
border-bottom: 1px solid $body-border;
ul {
margin: 0;
padding: 0;
list-style: none;
&.social-icons {
float: right;
line-height: 2rem;
margin: 0;
li {
@extend .default-animation;
float: left;
width: 2.1rem;
height: 2.1rem;
background: $white;
border-radius: 100%;
text-align: center;
margin-right: 0.8rem;
a {
color: $black;
display: block;
margin-top: 0.1rem;
}
&:hover {
background: transparentize($white, 0.5);
}
}
}
}
}

45
scss/template/modular/_footer.scss Normal file
View file

@ -0,0 +1,45 @@
// Modular Showcase styling
.modular {
.footer {
background: #333;
width: 100%;
@extend .padding-horiz;
padding-top: 4rem;
@include clearfix;
a, a:hover, h4 {
color: $white;
}
h4 {
line-height: 2rem;
margin-top: 0;
}
.footer-items {
margin-top: 2rem;
@supports not (flex-wrap: wrap) {
overflow: hidden;
}
@include clearfix;
}
.footer-module {
display:block;
float: left;
width: 25%;
vertical-align: top;
@include breakpoint(large-mobile-range) {
margin-top: 1rem;
width: 50%;
}
@include breakpoint(small-mobile-range) {
margin-top: 1rem;
width: 100%;
}
}
.logo {
border-bottom: 0 none;
@include clearfix;
color: $white;
}
hr {}
}
}

24
templates/modular/footer.html.twig Normal file
View file

@ -0,0 +1,24 @@
<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>
{% if page.header.description %}
<p>{{ page.header.description }}</p>
{% endif %}
</div>
<div class="footer-module"><h4>{{ page.header.contact_title }}</h4></div>
<div class="footer-module"><h4>{{ page.header.links_title }}</h4></div>
<div class="footer-module">
<h4>{{ page.header.newsletter_title }}</h4>
<p>{{ page.header.newsletter_description }}</p>
</div>
</div>
{{ content }}
</div>
</div>

10
templates/partials/base.html.twig
View file

@ -42,7 +42,7 @@
{% block header %} {% block header %}
<header id="header"> <header id="header">
<div id="logo"> <div class="logo">
<h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ config.site.title }}</a></h3> <h3><a href="{{ base_url == '' ? '/' : base_url }}">{{ config.site.title }}</a></h3>
{% block social %} {% block social %}
{% include 'partials/social.html.twig' %} {% include 'partials/social.html.twig' %}
@ -66,14 +66,6 @@
</section> </section>
{% endblock %} {% endblock %}
{% block footer %}
<footer id="footer">
<div class="totop">
<span><a href="#" id="toTop"><i class="fa fa-arrow-up"></i></a></span>
</div>
<p><a href="http://getgrav.org">Grav</a> was <i class="fa fa-code"></i> with <i class="fa fa-heart"></i> by <a href="http://www.rockettheme.com">RocketTheme</a>.</p>
</footer>
{% endblock %}
</div> </div>
<div class="sb-slidebar sb-left sb-width-thin"> <div class="sb-slidebar sb-left sb-width-thin">
<div id="panel"> <div id="panel">