Setting up about page

This commit is contained in:
Karol Orzeł 2015-01-27 09:27:42 +01:00
parent 8e6e1cfaa4
commit eaadb386c8
6 changed files with 147 additions and 4 deletions

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, .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 .notebook .screen .screen-content-hover, .team .members .social-icons li, .team .members .social-icons li a, .logo h3, .logo ul.social-icons li, .logo ul.social-icons li a {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
transition: all 0.5s ease; }
@ -1347,6 +1347,55 @@ ul.pagination {
z-index: -1;
border-radius: 100%; }
.team {
background: #EEEEEE;
padding: 4rem 0;
text-align: center; }
.team:after {
content: "";
display: table;
clear: both; }
.team h2 {
color: #656161;
margin: 0;
line-height: 100%; }
.team p {
margin: 1rem 0; }
.team .members {
width: 100%;
text-align: left;
padding-top: 2rem; }
.team .members .member {
display: inline-block;
float: left;
width: 22%;
margin: 0 1rem; }
.team .members .member h4, .team .members .member .archive-list label, .archive-list .team .members .member label, .team .members .member .contact label, .contact .team .members .member label {
text-align: left;
margin-bottom: 0; }
.team .members .member hr {
margin: 1rem 0; }
.team .members .social-icons {
line-height: 2rem;
margin: 0;
list-style: none; }
.team .members .social-icons li {
float: left;
width: 2.1rem;
height: 2.1rem;
background: #fff;
border-radius: 100%;
text-align: center;
margin-right: 0.8rem; }
.team .members .social-icons li a {
color: #000;
display: block;
margin-top: 0.1rem; }
.team .members .social-icons li:hover {
background: rgba(255, 255, 255, 0.5); }
.team .members .social-icons li:hover i {
color: #87b672; }
.logo {
border-bottom: 1px solid #eaeaea; }
.logo h3 {

File diff suppressed because one or more lines are too long

View file

@ -3,6 +3,7 @@
@import "bottom";
@import "contact";
@import "text";
@import "team";
.logo {
h3 {

View file

@ -1,4 +1,4 @@
// Modular Showcase styling
// Modular Contact styling
.contact {
h4 {
text-align: left;

View file

@ -0,0 +1,64 @@
// variables
$module-bg: #EEEEEE;
// styling
.team {
background: $module-bg;
padding: 4rem 0;
text-align: center;
@include clearfix;
h2 {
color: $light-gray;
margin: 0;
line-height: 100%;
}
p {
margin: 1rem 0;
}
.members {
width: 100%;
text-align: left;
padding-top: 2rem;
.member {
display: inline-block;
float: left;
width: 22%;
margin: 0 1rem;
h4 {
text-align: left;
margin-bottom: 0;
}
hr {
margin: 1rem 0;
}
}
.social-icons {
line-height: 2rem;
margin: 0;
list-style: none;
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 {
@extend .default-animation;
color: $black;
display: block;
margin-top: 0.1rem;
}
&:hover {
background: transparentize($white, 0.5);
i {
color: $core-accent;
}
}
}
}
}
}

View file

@ -0,0 +1,29 @@
<div class="modular-row team">
{{ content }}
<div class="members">
{% for member in page.header.members %}
<div class="member">
<img src="{{page.media[member.image].url}}" alt="">
<h4>{{ member.name }}</h4>
<span>{{ member.title }}</span>
<hr>
<p>{{ member.info }}</p>
<ul class="social-icons">
<li>
<a href="{{ member.social_twitter }}">
<i class="fa fa-twitter"></i></a>
</li>
<li>
<a href="{{ member.social_facebook }}">
<i class="fa fa-facebook"></i></a>
</li>
<li>
<a href="{{ member.social_feed }}">
<i class="fa fa-rss"></i></a>
</li>
</ul>
</div>
{% endfor %}
</div>
<div class="callout-line"></div>
</div>