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

Services Page Update

Browse source
This commit is contained in:
Karol Orzeł 2015-01-27 21:47:09 +01:00
parent 2a2fe0a635
commit 48f44d546e
5 changed files with 90 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
css-compiled/template.css
View file

@ -1207,6 +1207,29 @@ ul.pagination {
@media only all and (max-width: 47.938em) { @media only all and (max-width: 47.938em) {
.modular .bottom table td { .modular .bottom table td {
display: block; } } display: block; } }
.modular .bottom .services {
padding-top: 2rem; }
.modular .bottom .services .service {
width: 50%;
text-align: left;
display: block;
float: left; }
@media only all and (max-width: 47.938em) {
.modular .bottom .services .service {
width: 100%; } }
.modular .bottom .services .service .fa {
margin-top: 0.5rem;
width: 7rem;
height: 6rem;
font-size: 6rem;
float: left; }
.modular .bottom .services .service p {
margin-left: 7rem;
margin-top: 0.5rem;
margin-right: 1rem; }
.modular .bottom .services .service h4, .modular .bottom .services .service .archive-list label, .archive-list .modular .bottom .services .service label, .modular .bottom .services .service table th, .modular .bottom table .services .service th, .modular .bottom .services .service .contact label, .contact .modular .bottom .services .service label, .modular .bottom .services .service .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .modular .bottom .services .service .name, .modular .bottom .services .service .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .modular .bottom .services .service .button, .modular .bottom .services .service .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .modular .bottom .services .service button, .modular .bottom .services .service .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .modular .bottom .services .service button, .modular .bottom .services .service .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .modular .bottom .services .service button, .modular .bottom .services .service .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .modular .bottom .services .service button {
text-align: left;
margin-bottom: 0; }
.about hr { .about hr {
margin: 3rem 0; } margin: 3rem 0; }
@ -1368,19 +1391,28 @@ ul.pagination {
position: relative; position: relative;
z-index: 10; z-index: 10;
margin-top: 2rem; margin-top: 2rem;
min-height: 33rem; } min-height: 31rem;
text-align: center; }
.callout .pricing-container:after { .callout .pricing-container:after {
content: ""; content: "";
display: table; display: table;
clear: both; } clear: both; }
.callout .pricing-container .pricing-item { .callout .pricing-container .pricing-item {
display: block; display: inline-block;
float: left; width: 24.3%;
width: 24.5%;
margin-right: 0.3rem; margin-right: 0.3rem;
margin-bottom: 2rem; margin-bottom: 2rem;
vertical-align: middle; vertical-align: middle;
position: relative; } position: relative; }
@media only all and (max-width: 47.938em) {
.callout .pricing-container .pricing-item {
width: 100%; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.callout .pricing-container .pricing-item {
width: 100%; } }
@media only all and (min-width: 60em) and (max-width: 74.938em) {
.callout .pricing-container .pricing-item {
width: 22.5%; } }
.callout .pricing-container .pricing-item:hover { .callout .pricing-container .pricing-item:hover {
margin-top: -1rem; } margin-top: -1rem; }
.callout .pricing-container .pricing-item:hover .name { .callout .pricing-container .pricing-item:hover .name {

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

File diff suppressed because one or more lines are too long

28
scss/template/modular/_bottom.scss
View file

@ -58,6 +58,34 @@
} }
} }
} }
.services {
padding-top: 2rem;
.service {
width: 50%;
text-align: left;
display: block;
float: left;
@include breakpoint(mobile-only) {
width: 100%;
}
.fa {
margin-top: 0.5rem;
width: 7rem;
height: 6rem;
font-size: 6rem;
float: left;
}
p {
margin-left: 7rem;
margin-top: 0.5rem;
margin-right: 1rem;
}
h4 {
text-align: left;
margin-bottom: 0;
}
}
}
} }
} }
.about { .about {

17
scss/template/modular/_text.scss
View file

@ -142,16 +142,25 @@ $image-margin: 2rem;
z-index: 10; z-index: 10;
@include clearfix; @include clearfix;
margin-top: 2rem; margin-top: 2rem;
min-height: 33rem; min-height: 31rem;
text-align: center;
.pricing-item { .pricing-item {
@extend .default-animation; @extend .default-animation;
display: block; display: inline-block;
float: left; width: 24.3%;
width: 24.5%;
margin-right: 0.3rem; margin-right: 0.3rem;
margin-bottom: 2rem; margin-bottom: 2rem;
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
@include breakpoint(mobile-only) {
width: 100%;
}
@include breakpoint(tablet-range) {
width: 100%;
}
@include breakpoint(desktop-range) {
width: 22.5%;
}
&:hover { &:hover {
margin-top: -1rem; margin-top: -1rem;
.name { .name {

11
templates/modular/bottom.html.twig
View file

@ -6,4 +6,15 @@
{% if page.header.class == 'borderbottom' %} {% if page.header.class == 'borderbottom' %}
<hr> <hr>
{% endif %} {% endif %}
{% if page.header.services %}
<div class="services">
{% for service in page.header.services %}
<div class="service">
<i class="fa fa-{{ service.icon }}"></i>
<h4>{{ service.title }}</h4>
<p>{{ service.desc }}</p>
</div>
{% endfor %}
</div>
{% endif %}
</div> </div>