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

Setting up portfolio

Browse source
This commit is contained in:
Karol Orzeł 2015-01-28 00:55:56 +01:00
parent f8f2b1cd21
commit a1d1f3a079
6 changed files with 291 additions and 208 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

217
css-compiled/template.css
View file

@ -68,7 +68,7 @@ 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");
font-weight: normal;
font-style: normal; }
.default-animation, #body, .archive-list button, .modular .showcase .button, .modular .showcase .archive-list button, .archive-list .modular .showcase button, .modular .showcase .contact button, .contact .modular .showcase button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .modular .bottom .button, .modular .bottom .archive-list button, .archive-list .modular .bottom button, .modular .bottom .contact button, .contact .modular .bottom button, .contact input, .contact textarea, .contact button, .callout .notebook .screen .screen-content-hover, .callout .pricing-container .pricing-item, .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .foot, .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button, .team .members .social-icons li, .team .members .social-icons li a, .logo h3, .logo ul.social-icons li, .logo ul.social-icons li a {
.default-animation, #body, .archive-list button, .modular .showcase .button, .modular .showcase .archive-list button, .archive-list .modular .showcase button, .modular .showcase .contact button, .contact .modular .showcase button, .modular .slideme_container .arrow, .modular .slideme_container .pagination .numbers li, .modular .bottom .button, .modular .bottom .archive-list button, .archive-list .modular .bottom button, .modular .bottom .contact button, .contact .modular .bottom button, .contact input, .contact textarea, .contact button, .callout .pricing-container .pricing-item, .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .foot, .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button, .team .members .social-icons li, .team .members .social-icons li a, .logo h3, .logo ul.social-icons li, .logo ul.social-icons li a, .notebook .screen .screen-content-hover {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease; }
@ -1294,99 +1294,6 @@ ul.pagination {
left: 0;
bottom: 0;
z-index: 0; }
.callout .notebook {
display: inline-block;
text-align: left;
min-width: 33%;
position: relative;
z-index: 10; }
@media only all and (min-width: 60em) and (max-width: 74.938em) {
.callout .notebook {
width: 100%;
float: none; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.callout .notebook {
width: 100%;
float: none; } }
@media only all and (max-width: 47.938em) {
.callout .notebook {
width: 100%;
float: none; } }
@media only all and (max-width: 30em) {
.callout .notebook {
width: 150%;
margin-left: -3.8rem;
float: none; } }
.callout .notebook .screen:before {
content: "";
position: absolute;
border-radius: 50%;
background: #E5EBED;
height: 0.25rem;
width: 0.25rem;
margin: 0.3125rem 0 0 8.625rem; }
.callout .notebook .screen {
background: #464C51;
border-radius: 0.5rem 0.5rem 0 0;
height: 11.72rem;
width: 18.28rem;
margin: 0 auto; }
.callout .notebook .screen .screen-content {
height: 10.1rem;
width: 16.73rem;
position: absolute;
z-index: 1;
margin-top: 0.8rem;
margin-left: 0.8rem;
background-size: cover;
background-repeat: no-repeat; }
.callout .notebook .screen .screen-content-hover {
height: 10.1rem;
width: 16.73rem;
position: absolute;
z-index: 2;
opacity: 0;
margin-top: 0.8rem;
margin-left: 0.8rem;
background-color: #87b672; }
.callout .notebook .screen .screen-content-hover .fa-plus-square {
font-size: 5rem;
color: #464C51;
margin-top: 2.5rem;
margin-left: 5.9rem; }
.callout .notebook .screen .screen-content-hover:hover {
opacity: 0.8; }
.callout .notebook .screen:after {
content: "";
position: absolute;
background: #161B21;
height: 10rem;
width: 16.63rem;
border-radius: 0.125rem;
margin: 0.875rem 0 0 0.8125rem;
transition: background 1s ease-in-out; }
.callout .notebook .keyboard {
background: #DFDCDC;
border-radius: 0 0 0.3125rem 0.3125rem;
height: 1.25rem;
width: 21.88rem;
margin: 0 auto; }
.callout .notebook .keyboard:after {
content: "";
position: absolute;
background: #757979;
height: 0.375rem;
width: 3.125rem;
margin: 0 0 0 9.375rem;
border-radius: 0 0 0.5rem 0.5rem; }
.callout .keyboard:before {
content: "";
position: absolute;
height: 0.5rem;
width: 23.13rem;
margin: 0.4375rem 0 0 -0.625rem;
z-index: -1;
border-radius: 100%; }
.callout .pricing-container {
position: relative;
z-index: 10;
@ -1519,6 +1426,28 @@ ul.pagination {
.team .members .social-icons li:hover i {
color: #87b672; }
.portfolio {
padding: 2rem 0.938rem;
padding-top: 2rem;
text-align: center; }
@media only all and (max-width: 59.938em) {
.portfolio {
text-align: center; } }
.portfolio h2 {
color: #656161; }
.portfolio .notebooks .notebook {
width: 24%;
min-width: inherit; }
.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 {
text-align: left;
margin-left: 2rem;
margin-right: 1rem;
margin-bottom: 0; }
.portfolio .notebooks .notebook p {
margin-top: 0;
margin-left: 2rem;
margin-right: 1rem; }
.logo {
border-bottom: 1px solid #eaeaea; }
.logo h3 {
@ -1554,4 +1483,104 @@ ul.pagination {
.logo ul.social-icons li:hover {
background: rgba(255, 255, 255, 0.5); }
.notebook {
display: inline-block;
text-align: left;
min-width: 33%;
position: relative;
z-index: 10; }
@media only all and (min-width: 60em) and (max-width: 74.938em) {
.notebook {
width: 100%;
float: none; } }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
.notebook {
width: 100%;
float: none; } }
@media only all and (max-width: 47.938em) {
.notebook {
width: 100%;
float: none; } }
@media only all and (max-width: 30em) {
.notebook {
width: 150%;
margin-left: -3.8rem;
float: none; } }
.notebook .screen:before {
content: "";
position: absolute;
border-radius: 50%;
background: #E5EBED;
height: 0.25rem;
width: 0.25rem;
margin: 0.3125rem 0 0 8.625rem; }
.notebook .screen {
background: #464C51;
border-radius: 0.5rem 0.5rem 0 0;
height: 11.72rem;
width: 18.28rem;
margin: 0 auto; }
.notebook .screen .screen-content {
height: 10.1rem;
width: 16.73rem;
position: absolute;
z-index: 1;
margin-top: 0.8rem;
margin-left: 0.8rem;
background-size: cover;
background-repeat: no-repeat; }
.notebook .screen .screen-content-hover {
height: 10.1rem;
width: 16.73rem;
position: absolute;
z-index: 2;
opacity: 0;
margin-top: 0.8rem;
margin-left: 0.8rem;
background-color: #87b672; }
.notebook .screen .screen-content-hover .fa-plus-square {
font-size: 5rem;
color: #464C51;
margin-top: 2.5rem;
margin-left: 5.9rem; }
.notebook .screen .screen-content-hover:hover {
opacity: 0.8; }
.notebook .screen:after {
content: "";
position: absolute;
background: #161B21;
height: 10rem;
width: 16.63rem;
border-radius: 0.125rem;
margin: 0.875rem 0 0 0.8125rem;
transition: background 1s ease-in-out; }
.notebook .keyboard {
background: #DFDCDC;
border-radius: 0 0 0.3125rem 0.3125rem;
height: 1.25rem;
width: 21.88rem;
margin: 0 auto; }
.notebook .keyboard:after {
content: "";
position: absolute;
background: #757979;
height: 0.375rem;
width: 3.125rem;
margin: 0 0 0 9.375rem;
border-radius: 0 0 0.5rem 0.5rem; }
.keyboard:before {
content: "";
position: absolute;
height: 0.5rem;
width: 23.13rem;
margin: 0.4375rem 0 0 -0.625rem;
z-index: -1;
border-radius: 100%; }
/*# sourceMappingURL=template.css.map */

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

File diff suppressed because one or more lines are too long

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

@ -4,6 +4,7 @@
@import "contact";
@import "text";
@import "team";
@import "portfolio";
.logo {
h3 {
@ -53,4 +54,115 @@
}
}
}
}
}
// macbook
.notebook{
display: inline-block;
text-align: left;
min-width: 33%;
position: relative;
z-index: 10;
@include breakpoint(desktop-range) {
width: 100%;
float: none;
}
@include breakpoint(tablet-range) {
width: 100%;
float: none;
}
@include breakpoint(mobile-only) {
width: 100%;
float: none;
}
@include breakpoint(small-mobile-range) {
width: 150%;
margin-left: -3.8rem;
float: none;
}
}
.notebook .screen:before {
content: "";
position: absolute;
border-radius: 50%;
background: #E5EBED;
height: 0.25rem;
width: 0.25rem;
margin: 0.3125rem 0 0 8.625rem;
}
.notebook .screen{
background:#464C51;
border-radius: 0.5rem 0.5rem 0 0;
height: 11.72rem;
width: 18.28rem;
margin: 0 auto;
.screen-content {
height: 10.1rem;
width: 16.73rem;
position: absolute;
z-index: 1;
margin-top: 0.8rem;
margin-left: 0.8rem;
background-size: cover;
background-repeat: no-repeat
}
.screen-content-hover {
@extend .default-animation;
height: 10.1rem;
width: 16.73rem;
position: absolute;
z-index: 2;
opacity: 0;
margin-top: 0.8rem;
margin-left: 0.8rem;
background-color: $core-accent;
.fa-plus-square {
font-size: 5rem;
color: #464C51;
margin-top: 2.5rem;
margin-left: 5.9rem;
}
&:hover {
opacity: 0.8;
}
}
}
.notebook .screen:after{
content: "";
position: absolute;
background: #161B21;
height: 10rem;
width: 16.63rem;
border-radius: 0.125rem;
margin: 0.875rem 0 0 0.8125rem;
transition: background 1s ease-in-out;
}
.notebook .keyboard {
background: #DFDCDC;
border-radius: 0 0 0.3125rem 0.3125rem;
height: 1.25rem;
width: 21.88rem;
margin: 0 auto;
}
.notebook .keyboard:after {
content: "";
position: absolute;
background: #757979;
height: 0.375rem;
width: 3.125rem;
margin: 0 0 0 9.375rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.keyboard:before {
content: "";
position: absolute;
height: 0.5rem;
width: 23.13rem;
margin: 0.4375rem 0 0 -0.625rem;
z-index: -1;
border-radius: 100%;
}

35
scss/template/modular/_portfolio.scss Normal file
View file

@ -0,0 +1,35 @@
// variables
$text-bg: #EEEEEE;
$text-padding: 2rem;
$image-margin: 2rem;
// styling
.portfolio {
padding: $text-padding $content-padding;
padding-top: $text-padding;
text-align: center;
@include breakpoint(desktop-only) {
text-align: center;
}
h2 {
color: $light-gray;
}
.notebooks {
.notebook {
width: 24%;
min-width: inherit;
h4 {
text-align: left;
margin-left: 2rem;
margin-right: 1rem;
margin-bottom: 0;
}
p {
margin-top: 0;
margin-left: 2rem;
margin-right: 1rem;
}
}
}
}

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

@ -26,117 +26,6 @@ $image-margin: 2rem;
bottom: 0;
z-index: 0;
}
// macbook
.notebook{
display: inline-block;
text-align: left;
min-width: 33%;
position: relative;
z-index: 10;
@include breakpoint(desktop-range) {
width: 100%;
float: none;
}
@include breakpoint(tablet-range) {
width: 100%;
float: none;
}
@include breakpoint(mobile-only) {
width: 100%;
float: none;
}
@include breakpoint(small-mobile-range) {
width: 150%;
margin-left: -3.8rem;
float: none;
}
}
.notebook .screen:before {
content: "";
position: absolute;
border-radius: 50%;
background: #E5EBED;
height: 0.25rem;
width: 0.25rem;
margin: 0.3125rem 0 0 8.625rem;
}
.notebook .screen{
background:#464C51;
border-radius: 0.5rem 0.5rem 0 0;
height: 11.72rem;
width: 18.28rem;
margin: 0 auto;
.screen-content {
height: 10.1rem;
width: 16.73rem;
position: absolute;
z-index: 1;
margin-top: 0.8rem;
margin-left: 0.8rem;
background-size: cover;
background-repeat: no-repeat
}
.screen-content-hover {
@extend .default-animation;
height: 10.1rem;
width: 16.73rem;
position: absolute;
z-index: 2;
opacity: 0;
margin-top: 0.8rem;
margin-left: 0.8rem;
background-color: $core-accent;
.fa-plus-square {
font-size: 5rem;
color: #464C51;
margin-top: 2.5rem;
margin-left: 5.9rem;
}
&:hover {
opacity: 0.8;
}
}
}
.notebook .screen:after{
content: "";
position: absolute;
background: #161B21;
height: 10rem;
width: 16.63rem;
border-radius: 0.125rem;
margin: 0.875rem 0 0 0.8125rem;
transition: background 1s ease-in-out;
}
.notebook .keyboard {
background: #DFDCDC;
border-radius: 0 0 0.3125rem 0.3125rem;
height: 1.25rem;
width: 21.88rem;
margin: 0 auto;
}
.notebook .keyboard:after {
content: "";
position: absolute;
background: #757979;
height: 0.375rem;
width: 3.125rem;
margin: 0 0 0 9.375rem;
border-radius: 0 0 0.5rem 0.5rem;
}
.keyboard:before {
content: "";
position: absolute;
height: 0.5rem;
width: 23.13rem;
margin: 0.4375rem 0 0 -0.625rem;
z-index: -1;
border-radius: 100%;
}
.pricing-container {
position: relative;
z-index: 10;

18
templates/modular/portfolio.html.twig Normal file
View file

@ -0,0 +1,18 @@
<div class="modular-row portfolio">
{{ content }}
{% if page.header.portfolio %}
<div class="notebooks">
{% for portfolio in page.header.portfolio %}
<div class="notebook">
<h4>{{ portfolio.title }}</h4>
<p>{{ portfolio.desc }}</p>
<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>
{% endif %}
<div class="callout-line"></div>
</div>