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

Portfolio updates

Browse source
This commit is contained in:
Karol Orzeł 2015-01-28 09:34:29 +01:00
parent a1d1f3a079
commit 22f4d62697
4 changed files with 99 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
css-compiled/template.css
View file

@ -1429,24 +1429,52 @@ ul.pagination {
.portfolio { .portfolio {
padding: 2rem 0.938rem; padding: 2rem 0.938rem;
padding-top: 2rem; padding-top: 2rem;
padding-bottom: 1rem;
text-align: center; } text-align: center; }
@media only all and (max-width: 59.938em) { @media only all and (max-width: 59.938em) {
.portfolio { .portfolio {
text-align: center; } } text-align: center; } }
.portfolio h2 { .portfolio h2 {
color: #656161; } color: #656161; }
.portfolio .notebooks .notebook { .portfolio .notebooks {
width: 24%; margin-top: 4rem; }
min-width: inherit; } .portfolio .notebooks .notebook-row {
.portfolio .notebooks .notebook h4, .portfolio .notebooks .notebook .archive-list label, .archive-list .portfolio .notebooks .notebook label, .portfolio .notebooks .notebook .modular .bottom table th, .modular .bottom table .portfolio .notebooks .notebook th, .portfolio .notebooks .notebook .contact label, .contact .portfolio .notebooks .notebook label, .portfolio .notebooks .notebook .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .portfolio .notebooks .notebook .name, .portfolio .notebooks .notebook .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook .button, .portfolio .notebooks .notebook .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .portfolio .notebooks .notebook button, .portfolio .notebooks .notebook .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook button, .portfolio .notebooks .notebook .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .portfolio .notebooks .notebook button, .portfolio .notebooks .notebook .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook button { box-shadow: inset 0px -90px 0px -20px #f7f7f7;
text-align: left; margin-left: -14rem;
margin-left: 2rem; margin-right: -14rem;
margin-right: 1rem; padding-left: 14rem;
margin-bottom: 0; } padding-right: 14rem;
.portfolio .notebooks .notebook p { background: #EEEEEE;
margin-top: 0; padding-bottom: 2rem; }
margin-left: 2rem; .portfolio .notebooks .notebook-row .notebook {
margin-right: 1rem; } min-width: 24%; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.portfolio .notebooks .notebook-row .notebook {
width: 100%; } }
@media only all and (min-width: 60em) and (max-width: 74.938em) {
.portfolio .notebooks .notebook-row .notebook {
min-width: 24%;
float: none; } }
.portfolio .notebooks .notebook-row .notebook h4, .portfolio .notebooks .notebook-row .notebook .archive-list label, .archive-list .portfolio .notebooks .notebook-row .notebook label, .portfolio .notebooks .notebook-row .notebook .modular .bottom table th, .modular .bottom table .portfolio .notebooks .notebook-row .notebook th, .portfolio .notebooks .notebook-row .notebook .contact label, .contact .portfolio .notebooks .notebook-row .notebook label, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .portfolio .notebooks .notebook-row .notebook .name, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook .button, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .portfolio .notebooks .notebook-row .notebook button, .portfolio .notebooks .notebook-row .notebook .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .portfolio .notebooks .notebook-row .notebook button {
text-align: left;
margin-bottom: 0; }
.portfolio .notebooks .notebook-row .notebook p {
margin-top: 0; }
.portfolio .notebooks .notebook-row .notebook .desc {
width: 20rem;
margin-left: 2rem; }
@media only all and (min-width: 60em) and (max-width: 74.938em) {
.portfolio .notebooks .notebook-row .notebook .desc {
width: 100%; } }
@media only all and (max-width: 47.938em) {
.portfolio .notebooks .notebook-row .notebook .desc {
width: 100%; } }
@media only all and (max-width: 30em) {
.portfolio .notebooks .notebook-row .notebook .desc {
width: 90%; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.portfolio .notebooks .notebook-row .notebook .desc {
width: 100%; } }
.logo { .logo {
border-bottom: 1px solid #eaeaea; } border-bottom: 1px solid #eaeaea; }

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

File diff suppressed because one or more lines are too long

57
scss/template/modular/_portfolio.scss
View file

@ -8,27 +8,56 @@ $image-margin: 2rem;
.portfolio { .portfolio {
padding: $text-padding $content-padding; padding: $text-padding $content-padding;
padding-top: $text-padding; padding-top: $text-padding;
padding-bottom: 1rem;
text-align: center; text-align: center;
@include breakpoint(desktop-only) { @include breakpoint(desktop-only) {
text-align: center; text-align: center;
} }
h2 { h2 {
color: $light-gray; color: $light-gray;
} }
.notebooks { .notebooks {
.notebook { margin-top: 4rem;
width: 24%; .notebook-row {
min-width: inherit; box-shadow: inset 0px -90px 0px -20px $main-bg;
h4 { margin-left: -$padding-horiz;
text-align: left; margin-right: -$padding-horiz;
margin-left: 2rem; padding-left: $padding-horiz;
margin-right: 1rem; padding-right: $padding-horiz;
margin-bottom: 0; background: $text-bg;
} padding-bottom: 2rem;
p { .notebook {
margin-top: 0; min-width: 24%;
margin-left: 2rem; @include breakpoint(tablet-range) {
margin-right: 1rem; width: 100%;
}
@include breakpoint(desktop-range) {
min-width: 24%;
float: none;
}
h4 {
text-align: left;
margin-bottom: 0;
}
p {
margin-top: 0;
}
.desc {
width: 20rem;
margin-left: 2rem;
@include breakpoint(desktop-range) {
width: 100%;
}
@include breakpoint(mobile-only) {
width: 100%;
}
@include breakpoint(small-mobile-range) {
width: 90%;
}
@include breakpoint(tablet-range) {
width: 100%;
}
}
} }
} }
} }

20
templates/modular/portfolio.html.twig
View file

@ -1,13 +1,19 @@
<div class="modular-row portfolio"> <div class="modular-row portfolio">
{{ content }} {{ content }}
{% if page.header.portfolio %} {% if page.header.portfolio %}
<div class="notebooks"> <div class="notebooks">
{% for portfolio in page.header.portfolio %} {% for row in page.header.portfolio|batch(4) %}
<div class="notebook"> <div class="notebook-row">
<h4>{{ portfolio.title }}</h4> {% for portfolio in row %}
<p>{{ portfolio.desc }}</p> <div class="notebook">
<div class='screen'><div class="screen-content" style="background-image: url({{ page.media[portfolio.image].url }})" ></div><div class="screen-content-hover"><i class="fa fa-plus-square"></i></div></div> <div class="desc">
<div class='keyboard'></div> <h4>{{ portfolio.title }}</h4>
<p>{{ portfolio.desc }}</p>
</div>
<div class='screen'><div class="screen-content" style="background-image: url({{ page.media[portfolio.image].url }})" ></div><div class="screen-content-hover"><i class="fa fa-plus-square"></i></div></div>
<div class='keyboard'></div>
</div>
{% endfor %}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>