Setting up services

This commit is contained in:
Karol Orzeł 2015-01-27 11:42:52 +01:00
parent 51b7d9c92c
commit 52bfedea3e
4 changed files with 209 additions and 127 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, .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 .notebook .screen .screen-content-hover, .callout table tr:last-child td a, .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; }
@ -274,7 +274,7 @@ b, strong, label, th {
clear: both; }
.footer a {
color: #9A9898; }
.footer h4, .footer .archive-list label, .archive-list .footer label, .footer .modular .bottom table th, .modular .bottom table .footer th, .footer .contact label, .contact .footer label {
.footer h4, .footer .archive-list label, .archive-list .footer label, .footer .modular .bottom table th, .modular .bottom table .footer th, .footer .contact label, .contact .footer label, .footer .callout table th, .callout table .footer th, .footer .callout table tr:last-child td a, .callout table tr:last-child td .footer a {
line-height: 2rem;
margin-top: 0;
text-align: left;
@ -409,7 +409,7 @@ body {
font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400; }
h1, h2, h3, h4, .archive-list label, .modular .bottom table th, .contact label, h5, h6 {
h1, h2, h3, h4, .archive-list label, .modular .bottom table th, .contact label, .callout table th, .callout table tr:last-child td a, h5, h6 {
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
text-rendering: optimizeLegibility; }
@ -439,17 +439,17 @@ h2 {
h3 {
font-size: -1rem; } }
h4, .archive-list label, .modular .bottom table th, .contact label {
h4, .archive-list label, .modular .bottom table th, .contact label, .callout table th, .callout table tr:last-child td a {
font-size: 1.2rem;
font-weight: normal;
text-align: center;
text-transform: uppercase;
color: #656161; }
@media only all and (min-width: 48em) and (max-width: 59.938em) {
h4, .archive-list label, .modular .bottom table th, .contact label {
h4, .archive-list label, .modular .bottom table th, .contact label, .callout table th, .callout table tr:last-child td a {
font-size: 1.35rem; } }
@media only all and (max-width: 47.938em) {
h4, .archive-list label, .modular .bottom table th, .contact label {
h4, .archive-list label, .modular .bottom table th, .contact label, .callout table th, .callout table tr:last-child td a {
font-size: 1.25rem; } }
h1 {
@ -755,12 +755,12 @@ td {
border-bottom: 0; }
.list-item .list-blog-header {
position: relative; }
.list-item .list-blog-header h4, .list-item .list-blog-header .archive-list label, .archive-list .list-item .list-blog-header label, .list-item .list-blog-header .modular .bottom table th, .modular .bottom table .list-item .list-blog-header th, .list-item .list-blog-header .contact label, .contact .list-item .list-blog-header label {
.list-item .list-blog-header h4, .list-item .list-blog-header .archive-list label, .archive-list .list-item .list-blog-header label, .list-item .list-blog-header .modular .bottom table th, .modular .bottom table .list-item .list-blog-header th, .list-item .list-blog-header .contact label, .contact .list-item .list-blog-header label, .list-item .list-blog-header .callout table th, .callout table .list-item .list-blog-header th, .list-item .list-blog-header .callout table tr:last-child td a, .callout table tr:last-child td .list-item .list-blog-header a {
text-align: left;
margin-bottom: 1.5rem; }
.list-item .list-blog-header h4 a, .list-item .list-blog-header .archive-list label a, .archive-list .list-item .list-blog-header label a, .list-item .list-blog-header .modular .bottom table th a, .modular .bottom table .list-item .list-blog-header th a, .list-item .list-blog-header .contact label a, .contact .list-item .list-blog-header label a {
.list-item .list-blog-header h4 a, .list-item .list-blog-header .archive-list label a, .archive-list .list-item .list-blog-header label a, .list-item .list-blog-header .modular .bottom table th a, .modular .bottom table .list-item .list-blog-header th a, .list-item .list-blog-header .contact label a, .contact .list-item .list-blog-header label a, .list-item .list-blog-header .callout table th a, .callout table .list-item .list-blog-header th a, .list-item .list-blog-header .callout table tr:last-child td a a, .callout table tr:last-child td .list-item .list-blog-header a a {
color: #656161; }
.list-item .list-blog-header h4 a:hover, .list-item .list-blog-header .archive-list label a:hover, .archive-list .list-item .list-blog-header label a:hover, .list-item .list-blog-header .modular .bottom table th a:hover, .modular .bottom table .list-item .list-blog-header th a:hover, .list-item .list-blog-header .contact label a:hover, .contact .list-item .list-blog-header label a:hover {
.list-item .list-blog-header h4 a:hover, .list-item .list-blog-header .archive-list label a:hover, .archive-list .list-item .list-blog-header label a:hover, .list-item .list-blog-header .modular .bottom table th a:hover, .modular .bottom table .list-item .list-blog-header th a:hover, .list-item .list-blog-header .contact label a:hover, .contact .list-item .list-blog-header label a:hover, .list-item .list-blog-header .callout table th a:hover, .callout table .list-item .list-blog-header th a:hover, .list-item .list-blog-header .callout table tr:last-child td a a:hover, .callout table tr:last-child td .list-item .list-blog-header a a:hover {
color: #87b672; }
.list-item .list-blog-header img {
display: block;
@ -858,7 +858,7 @@ div#breadcrumbs {
padding-left: 0; } }
#sidebar .sidebar-content {
margin-bottom: 3rem; }
#sidebar .sidebar-content h4, #sidebar .sidebar-content .archive-list label, .archive-list #sidebar .sidebar-content label, #sidebar .sidebar-content .modular .bottom table th, .modular .bottom table #sidebar .sidebar-content th, #sidebar .sidebar-content .contact label, .contact #sidebar .sidebar-content label {
#sidebar .sidebar-content h4, #sidebar .sidebar-content .archive-list label, .archive-list #sidebar .sidebar-content label, #sidebar .sidebar-content .modular .bottom table th, .modular .bottom table #sidebar .sidebar-content th, #sidebar .sidebar-content .contact label, .contact #sidebar .sidebar-content label, #sidebar .sidebar-content .callout table th, .callout table #sidebar .sidebar-content th, #sidebar .sidebar-content .callout table tr:last-child td a, .callout table tr:last-child td #sidebar .sidebar-content a {
margin-bottom: 1rem;
text-align: left; }
#sidebar .sidebar-content p, #sidebar .sidebar-content ul {
@ -872,7 +872,7 @@ ul.pagination {
margin-top: 5rem;
text-align: center; }
.archive-list h4, .archive-list label, .archive-list .modular .bottom table th, .modular .bottom table .archive-list th {
.archive-list h4, .archive-list label, .archive-list .modular .bottom table th, .modular .bottom table .archive-list th, .archive-list .callout table th, .callout table .archive-list th, .archive-list .callout table tr:last-child td a, .callout table tr:last-child td .archive-list a {
text-align: left; }
.archive-list input {
width: 50%;
@ -1134,7 +1134,7 @@ ul.pagination {
width: 100%; } }
.modular .features .feature i.fa {
font-size: 2rem; }
.modular .features .feature h4, .modular .features .feature .archive-list label, .archive-list .modular .features .feature label, .modular .features .feature .bottom table th, .modular .bottom table .features .feature th, .modular .features .feature .contact label, .contact .modular .features .feature label {
.modular .features .feature h4, .modular .features .feature .archive-list label, .archive-list .modular .features .feature label, .modular .features .feature .bottom table th, .modular .bottom table .features .feature th, .modular .features .feature .contact label, .contact .modular .features .feature label, .modular .features .feature .callout table th, .callout table .modular .features .feature th, .modular .features .feature .callout table tr:last-child td a, .callout table tr:last-child td .modular .features .feature a {
margin: 0;
font-size: 1.1rem; }
.modular .features .feature p {
@ -1156,7 +1156,7 @@ ul.pagination {
padding-right: 2rem; }
.modular .features.big .feature-content.icon-offset {
margin-left: 1rem; }
.modular .features.big .feature-content h4, .modular .features.big .feature-content .archive-list label, .archive-list .modular .features.big .feature-content label, .modular .features.big .feature-content .bottom table th, .modular .bottom table .features.big .feature-content th, .modular .features.big .feature-content .contact label, .contact .modular .features.big .feature-content label {
.modular .features.big .feature-content h4, .modular .features.big .feature-content .archive-list label, .archive-list .modular .features.big .feature-content label, .modular .features.big .feature-content .bottom table th, .modular .bottom table .features.big .feature-content th, .modular .features.big .feature-content .contact label, .contact .modular .features.big .feature-content label, .modular .features.big .feature-content .callout table th, .callout table .modular .features.big .feature-content th, .modular .features.big .feature-content .callout table tr:last-child td a, .callout table tr:last-child td .modular .features.big .feature-content a {
font-size: 1.2rem; }
.modular .features.big .feature-content p {
padding: 0; }
@ -1208,7 +1208,10 @@ ul.pagination {
.modular .bottom table td {
display: block; } }
.contact h4, .contact .modular .bottom table th, .modular .bottom table .contact th, .contact label {
.about hr {
margin: 3rem 0; }
.contact h4, .contact .modular .bottom table th, .modular .bottom table .contact th, .contact label, .contact .callout table th, .callout table .contact th, .contact .callout table tr:last-child td a, .callout table tr:last-child td .contact a {
text-align: left; }
.contact input {
width: 50%;
@ -1361,6 +1364,36 @@ ul.pagination {
margin: 0.4375rem 0 0 -0.625rem;
z-index: -1;
border-radius: 100%; }
.callout table {
position: relative;
z-index: 11; }
.callout table td {
background: #f7f7f7; }
.callout table th {
background: #87b672;
color: #fff; }
.callout table tr:first-child td {
font-weight: bold;
color: #656161;
font-size: 3.5rem;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight: normal; }
.callout table tr:last-child td {
background: #87b672;
color: #fff;
text-align: center;
padding: 1rem 0; }
.callout table tr:last-child td a {
margin: 0;
padding: 0;
width: 9rem;
font-size: 1rem;
line-height: 2.5rem;
color: #fff;
display: inline-block;
background: rgba(255, 255, 255, 0.25); }
.callout table tr:last-child td a:hover {
background: rgba(255, 255, 255, 0.15); }
.team {
background: #EEEEEE;
@ -1393,11 +1426,11 @@ ul.pagination {
text-align: center;
margin: 0;
margin-bottom: 2rem; } }
.team .members .member h4, .team .members .member .archive-list label, .archive-list .team .members .member label, .team .members .member .modular .bottom table th, .modular .bottom table .team .members .member th, .team .members .member .contact label, .contact .team .members .member label {
.team .members .member h4, .team .members .member .archive-list label, .archive-list .team .members .member label, .team .members .member .modular .bottom table th, .modular .bottom table .team .members .member th, .team .members .member .contact label, .contact .team .members .member label, .team .members .member .callout table th, .callout table .team .members .member th, .team .members .member .callout table tr:last-child td a, .callout table tr:last-child td .team .members .member a {
text-align: left;
margin-bottom: 0; }
@media only all and (max-width: 47.938em) {
.team .members .member h4, .team .members .member .archive-list label, .archive-list .team .members .member label, .team .members .member .modular .bottom table th, .modular .bottom table .team .members .member th, .team .members .member .contact label, .contact .team .members .member label {
.team .members .member h4, .team .members .member .archive-list label, .archive-list .team .members .member label, .team .members .member .modular .bottom table th, .modular .bottom table .team .members .member th, .team .members .member .contact label, .contact .team .members .member label, .team .members .member .callout table th, .callout table .team .members .member th, .team .members .member .callout table tr:last-child td a, .callout table tr:last-child td .team .members .member a {
text-align: center; } }
.team .members .member hr {
margin: 1rem 0; }
@ -1436,7 +1469,7 @@ ul.pagination {
float: left; }
.logo h3 a {
color: #9A9898; }
.logo h4, .logo .archive-list label, .archive-list .logo label, .logo .modular .bottom table th, .modular .bottom table .logo th, .logo .contact label, .contact .logo label {
.logo h4, .logo .archive-list label, .archive-list .logo label, .logo .modular .bottom table th, .modular .bottom table .logo th, .logo .contact label, .contact .logo label, .logo .callout table th, .callout table .logo th, .logo .callout table tr:last-child td a, .callout table tr:last-child td .logo a {
text-align: left; }
.logo ul {
margin: 0;

File diff suppressed because one or more lines are too long

View File

@ -1,4 +1,4 @@
// Modular Showcase styling
// Modular Bottom styling
.modular {
.bottom {
text-align: center;
@ -46,7 +46,7 @@
@extend h4;
text-align: left;
@include breakpoint(mobile-only) {
display: none;
display: none;
}
}
td {
@ -54,10 +54,14 @@
vertical-align: top;
border: 0 none;
@include breakpoint(mobile-only) {
display: block;
display: block;
}
}
}
}
}
.about {
hr {
margin: 3rem 0;
}
}

View File

@ -27,115 +27,160 @@ $image-margin: 2rem;
z-index: 0;
}
// macbook
.notebook{
display: inline-block;
text-align: left;
min-width: 33%;
position: relative;
z-index: 10;
// 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;
@include breakpoint(desktop-range) {
width: 100%;
float: none;
}
&:hover {
opacity: 0.8;
@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 .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%;
}
.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%;
}
table {
position: relative;
z-index: 11;
td {
background: $main-bg;
}
th {
background: $core-accent;
@extend h4;
color: $white;
}
tr:first-child {
td {
font-weight: bold;
color: $light-gray;
font-size: 3.5rem;
font-family: $font-family-header;
font-weight: normal;
}
}
tr:last-child {
td {
background: $core-accent;
color: $white;
text-align: center;
padding: 1rem 0;
a {
@extend h4;
@extend .default-animation;
margin: 0;
padding: 0;
width: 9rem;
font-size: 1rem;
line-height: 2.5rem;
color: $white;
display: inline-block;
background: transparentize($white, 0.75);
&:hover {
background: transparentize($white, 0.85);
}
}
}
}
}
}