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

Services Pricing Updates

Browse source
This commit is contained in:
Karol Orzeł 2015-01-27 20:45:32 +01:00
parent 52bfedea3e
commit 2a2fe0a635
4 changed files with 148 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
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"); 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-weight: normal;
font-style: 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 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 { .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 {
-webkit-transition: all 0.5s ease; -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease; -moz-transition: all 0.5s ease;
transition: all 0.5s ease; } transition: all 0.5s ease; }
@ -274,7 +274,7 @@ b, strong, label, th {
clear: both; } clear: both; }
.footer a { .footer a {
color: #9A9898; } 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 .callout table th, .callout table .footer th, .footer .callout table tr:last-child td a, .callout table tr:last-child td .footer a { .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 .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .footer .name, .footer .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .footer .button, .footer .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .footer button, .footer .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .footer button, .footer .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .footer button, .footer .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .footer button {
line-height: 2rem; line-height: 2rem;
margin-top: 0; margin-top: 0;
text-align: left; text-align: left;
@ -409,7 +409,7 @@ body {
font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif; font-family: "Helvetica Neue", "HelveticaNeue-Light", "Helvetica Neue Light", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 400; } font-weight: 400; }
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 { h1, h2, h3, h4, .archive-list label, .modular .bottom table th, .contact label, .callout .pricing-container .pricing-item .name, .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, h5, h6 {
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
text-rendering: optimizeLegibility; } text-rendering: optimizeLegibility; }
@ -439,17 +439,17 @@ h2 {
h3 { h3 {
font-size: -1rem; } } font-size: -1rem; } }
h4, .archive-list label, .modular .bottom table th, .contact label, .callout table th, .callout table tr:last-child td a { h4, .archive-list label, .modular .bottom table th, .contact label, .callout .pricing-container .pricing-item .name, .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 {
font-size: 1.2rem; font-size: 1.2rem;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
color: #656161; } color: #656161; }
@media only all and (min-width: 48em) and (max-width: 59.938em) { @media only all and (min-width: 48em) and (max-width: 59.938em) {
h4, .archive-list label, .modular .bottom table th, .contact label, .callout table th, .callout table tr:last-child td a { h4, .archive-list label, .modular .bottom table th, .contact label, .callout .pricing-container .pricing-item .name, .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 {
font-size: 1.35rem; } } font-size: 1.35rem; } }
@media only all and (max-width: 47.938em) { @media only all and (max-width: 47.938em) {
h4, .archive-list label, .modular .bottom table th, .contact label, .callout table th, .callout table tr:last-child td a { h4, .archive-list label, .modular .bottom table th, .contact label, .callout .pricing-container .pricing-item .name, .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 {
font-size: 1.25rem; } } font-size: 1.25rem; } }
h1 { h1 {
@ -755,12 +755,12 @@ td {
border-bottom: 0; } border-bottom: 0; }
.list-item .list-blog-header { .list-item .list-blog-header {
position: relative; } 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 .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 { .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 .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .list-item .list-blog-header .name, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .list-item .list-blog-header .button, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .list-item .list-blog-header button, .list-item .list-blog-header .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .list-item .list-blog-header button, .list-item .list-blog-header .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button {
text-align: left; text-align: left;
margin-bottom: 1.5rem; } 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 .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 { .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 .pricing-container .pricing-item .name a, .callout .pricing-container .pricing-item .list-item .list-blog-header .name a, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .button a, .callout .pricing-container .pricing-item .foot .list-item .list-blog-header .button a, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .archive-list button a, .callout .pricing-container .pricing-item .foot .archive-list .list-item .list-blog-header button a, .list-item .list-blog-header .archive-list .callout .pricing-container .pricing-item .foot button a, .archive-list .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button a, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .contact button a, .callout .pricing-container .pricing-item .foot .contact .list-item .list-blog-header button a, .list-item .list-blog-header .contact .callout .pricing-container .pricing-item .foot button a, .contact .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button a {
color: #656161; } 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 .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 { .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 .pricing-container .pricing-item .name a:hover, .callout .pricing-container .pricing-item .list-item .list-blog-header .name a:hover, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .button a:hover, .callout .pricing-container .pricing-item .foot .list-item .list-blog-header .button a:hover, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .archive-list button a:hover, .callout .pricing-container .pricing-item .foot .archive-list .list-item .list-blog-header button a:hover, .list-item .list-blog-header .archive-list .callout .pricing-container .pricing-item .foot button a:hover, .archive-list .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button a:hover, .list-item .list-blog-header .callout .pricing-container .pricing-item .foot .contact button a:hover, .callout .pricing-container .pricing-item .foot .contact .list-item .list-blog-header button a:hover, .list-item .list-blog-header .contact .callout .pricing-container .pricing-item .foot button a:hover, .contact .callout .pricing-container .pricing-item .foot .list-item .list-blog-header button a:hover {
color: #87b672; } color: #87b672; }
.list-item .list-blog-header img { .list-item .list-blog-header img {
display: block; display: block;
@ -858,7 +858,7 @@ div#breadcrumbs {
padding-left: 0; } } padding-left: 0; } }
#sidebar .sidebar-content { #sidebar .sidebar-content {
margin-bottom: 3rem; } 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 .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 { #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 .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item #sidebar .sidebar-content .name, #sidebar .sidebar-content .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot #sidebar .sidebar-content .button, #sidebar .sidebar-content .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list #sidebar .sidebar-content button, #sidebar .sidebar-content .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot #sidebar .sidebar-content button, #sidebar .sidebar-content .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact #sidebar .sidebar-content button, #sidebar .sidebar-content .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot #sidebar .sidebar-content button {
margin-bottom: 1rem; margin-bottom: 1rem;
text-align: left; } text-align: left; }
#sidebar .sidebar-content p, #sidebar .sidebar-content ul { #sidebar .sidebar-content p, #sidebar .sidebar-content ul {
@ -872,7 +872,7 @@ ul.pagination {
margin-top: 5rem; margin-top: 5rem;
text-align: center; } text-align: center; }
.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 { .archive-list h4, .archive-list label, .archive-list .modular .bottom table th, .modular .bottom table .archive-list th, .archive-list .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .archive-list .name, .archive-list .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .archive-list .button, .callout .pricing-container .pricing-item .foot .archive-list button, .archive-list .callout .pricing-container .pricing-item .foot button {
text-align: left; } text-align: left; }
.archive-list input { .archive-list input {
width: 50%; width: 50%;
@ -1134,7 +1134,7 @@ ul.pagination {
width: 100%; } } width: 100%; } }
.modular .features .feature i.fa { .modular .features .feature i.fa {
font-size: 2rem; } 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 .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 { .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 .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .modular .features .feature .name, .modular .features .feature .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .modular .features .feature .button, .modular .features .feature .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .modular .features .feature button, .modular .features .feature .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .modular .features .feature button, .modular .features .feature .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .modular .features .feature button, .modular .features .feature .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .modular .features .feature button {
margin: 0; margin: 0;
font-size: 1.1rem; } font-size: 1.1rem; }
.modular .features .feature p { .modular .features .feature p {
@ -1156,7 +1156,7 @@ ul.pagination {
padding-right: 2rem; } padding-right: 2rem; }
.modular .features.big .feature-content.icon-offset { .modular .features.big .feature-content.icon-offset {
margin-left: 1rem; } 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 .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 { .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 .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .modular .features.big .feature-content .name, .modular .features.big .feature-content .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .modular .features.big .feature-content .button, .modular .features.big .feature-content .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .modular .features.big .feature-content button, .modular .features.big .feature-content .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .modular .features.big .feature-content button, .modular .features.big .feature-content .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .modular .features.big .feature-content button, .modular .features.big .feature-content .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .modular .features.big .feature-content button {
font-size: 1.2rem; } font-size: 1.2rem; }
.modular .features.big .feature-content p { .modular .features.big .feature-content p {
padding: 0; } padding: 0; }
@ -1211,7 +1211,7 @@ ul.pagination {
.about hr { .about hr {
margin: 3rem 0; } 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 { .contact h4, .contact .modular .bottom table th, .modular .bottom table .contact th, .contact label, .contact .callout .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .contact .name, .contact .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .contact .button, .callout .pricing-container .pricing-item .foot .contact button, .contact .callout .pricing-container .pricing-item .foot button {
text-align: left; } text-align: left; }
.contact input { .contact input {
width: 50%; width: 50%;
@ -1364,26 +1364,52 @@ ul.pagination {
margin: 0.4375rem 0 0 -0.625rem; margin: 0.4375rem 0 0 -0.625rem;
z-index: -1; z-index: -1;
border-radius: 100%; } border-radius: 100%; }
.callout table { .callout .pricing-container {
position: relative; position: relative;
z-index: 11; } z-index: 10;
.callout table td { margin-top: 2rem;
min-height: 33rem; }
.callout .pricing-container:after {
content: "";
display: table;
clear: both; }
.callout .pricing-container .pricing-item {
display: block;
float: left;
width: 24.5%;
margin-right: 0.3rem;
margin-bottom: 2rem;
vertical-align: middle;
position: relative; }
.callout .pricing-container .pricing-item:hover {
margin-top: -1rem; }
.callout .pricing-container .pricing-item:hover .name {
padding: 1rem 0; }
.callout .pricing-container .pricing-item:hover .foot {
padding: 1.5rem 0; }
.callout .pricing-container .pricing-item div {
background: #f7f7f7; } background: #f7f7f7; }
.callout table th { .callout .pricing-container .pricing-item .name {
background: #87b672; background: #87b672;
color: #fff; } color: #fff;
.callout table tr:first-child td { padding: 0.5rem 0; }
.callout .pricing-container .pricing-item .info {
line-height: 3rem;
border-bottom: #EEEEEE 1px solid; }
.callout .pricing-container .pricing-item .price {
font-weight: bold; font-weight: bold;
color: #656161; color: #656161;
font-size: 3.5rem; font-size: 3.5rem;
font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-family: "novecento_sans_widedemibold", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight: normal; } font-weight: normal;
.callout table tr:last-child td { border-bottom: #EEEEEE 1px solid;
line-height: 5rem; }
.callout .pricing-container .pricing-item .foot {
background: #87b672; background: #87b672;
color: #fff; color: #fff;
text-align: center; text-align: center;
padding: 1rem 0; } padding: 1rem 0; }
.callout table tr:last-child td a { .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 {
margin: 0; margin: 0;
padding: 0; padding: 0;
width: 9rem; width: 9rem;
@ -1392,8 +1418,10 @@ ul.pagination {
color: #fff; color: #fff;
display: inline-block; display: inline-block;
background: rgba(255, 255, 255, 0.25); } background: rgba(255, 255, 255, 0.25); }
.callout table tr:last-child td a:hover { .callout .pricing-container .pricing-item .foot .button:hover, .callout .pricing-container .pricing-item .foot .archive-list button:hover, .archive-list .callout .pricing-container .pricing-item .foot button:hover, .callout .pricing-container .pricing-item .foot .contact button:hover, .contact .callout .pricing-container .pricing-item .foot button:hover {
background: rgba(255, 255, 255, 0.15); } background: rgba(255, 255, 255, 0.15); }
.callout .pricing-container .pricing-item sup {
font-size: 2rem; }
.team { .team {
background: #EEEEEE; background: #EEEEEE;
@ -1426,11 +1454,11 @@ ul.pagination {
text-align: center; text-align: center;
margin: 0; margin: 0;
margin-bottom: 2rem; } } 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 .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 { .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 .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .team .members .member .name, .team .members .member .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .team .members .member .button, .team .members .member .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .team .members .member button, .team .members .member .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .team .members .member button, .team .members .member .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .team .members .member button, .team .members .member .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .team .members .member button {
text-align: left; text-align: left;
margin-bottom: 0; } margin-bottom: 0; }
@media only all and (max-width: 47.938em) { @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 .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 { .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 .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .team .members .member .name, .team .members .member .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .team .members .member .button, .team .members .member .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .team .members .member button, .team .members .member .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .team .members .member button, .team .members .member .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .team .members .member button, .team .members .member .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .team .members .member button {
text-align: center; } } text-align: center; } }
.team .members .member hr { .team .members .member hr {
margin: 1rem 0; } margin: 1rem 0; }
@ -1469,7 +1497,7 @@ ul.pagination {
float: left; } float: left; }
.logo h3 a { .logo h3 a {
color: #9A9898; } 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 .callout table th, .callout table .logo th, .logo .callout table tr:last-child td a, .callout table tr:last-child td .logo a { .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 .pricing-container .pricing-item .name, .callout .pricing-container .pricing-item .logo .name, .logo .callout .pricing-container .pricing-item .foot .button, .callout .pricing-container .pricing-item .foot .logo .button, .logo .callout .pricing-container .pricing-item .foot .archive-list button, .callout .pricing-container .pricing-item .foot .archive-list .logo button, .logo .archive-list .callout .pricing-container .pricing-item .foot button, .archive-list .callout .pricing-container .pricing-item .foot .logo button, .logo .callout .pricing-container .pricing-item .foot .contact button, .callout .pricing-container .pricing-item .foot .contact .logo button, .logo .contact .callout .pricing-container .pricing-item .foot button, .contact .callout .pricing-container .pricing-item .foot .logo button {
text-align: left; } text-align: left; }
.logo ul { .logo ul {
margin: 0; margin: 0;

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

File diff suppressed because one or more lines are too long

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

@ -137,33 +137,60 @@ $image-margin: 2rem;
z-index: -1; z-index: -1;
border-radius: 100%; border-radius: 100%;
} }
table { .pricing-container {
position: relative; position: relative;
z-index: 11; z-index: 10;
td { @include clearfix;
margin-top: 2rem;
min-height: 33rem;
.pricing-item {
@extend .default-animation;
display: block;
float: left;
width: 24.5%;
margin-right: 0.3rem;
margin-bottom: 2rem;
vertical-align: middle;
position: relative;
&:hover {
margin-top: -1rem;
.name {
padding: 1rem 0;
}
.foot {
padding: 1.5rem 0;
}
}
div {
background: $main-bg; background: $main-bg;
} }
th { .name {
@extend .default-animation;
background: $core-accent; background: $core-accent;
@extend h4; @extend h4;
color: $white; color: $white;
padding: 0.5rem 0;
} }
tr:first-child { .info {
td { line-height: 3rem;
border-bottom: $border-color 1px solid;
}
.price {
font-weight: bold; font-weight: bold;
color: $light-gray; color: $light-gray;
font-size: 3.5rem; font-size: 3.5rem;
font-family: $font-family-header; font-family: $font-family-header;
font-weight: normal; font-weight: normal;
border-bottom: $border-color 1px solid;
line-height: 5rem;
} }
} .foot {
tr:last-child { @extend .default-animation;
td {
background: $core-accent; background: $core-accent;
color: $white; color: $white;
text-align: center; text-align: center;
padding: 1rem 0; padding: 1rem 0;
a { .button {
@extend h4; @extend h4;
@extend .default-animation; @extend .default-animation;
margin: 0; margin: 0;
@ -177,10 +204,11 @@ $image-margin: 2rem;
&:hover { &:hover {
background: transparentize($white, 0.85); background: transparentize($white, 0.85);
} }
}
}
sup {
font-size: 2rem;
} }
} }
} }
} }
}

22
templates/modular/text.html.twig
View file

@ -1,5 +1,24 @@
<div class="modular-row callout"> <div class="modular-row callout">
{{ content }} {{ content }}
{% if page.header.pricing %}
<div class="pricing-container">
{% for item in page.header.pricing %}
<div class="pricing-item">
<div class="name">{{ item.name }}</div>
<div class="price">{{ item.price }}</div>
{% for line in item.options %}
<div class="info">
{{ line.line }}
</div>
{% endfor %}
<div class="foot">
<a class="button" href="{{ item.button_url }}">{{ item.button_text }}</a>
</div>
</div>
{% endfor %}
</div>
{% endif %}
{% if page.header.portfolio %}
<div class="notebooks"> <div class="notebooks">
{% for portfolio in page.header.portfolio %} {% for portfolio in page.header.portfolio %}
<div class="notebook"> <div class="notebook">
@ -9,5 +28,8 @@
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{% endif %}
<div class="callout-line"></div> <div class="callout-line"></div>
</div> </div>