mirror/webslides
1
0
Fork 0
mirror of https://github.com/webslides/WebSlides.git synced 2025-08-18 02:41:37 +02:00
Code Issues Releases Wiki Activity

Updating CSS to catch up with Master

Browse Source
This commit is contained in:
Antonio Laguna
2017-02-23 08:30:57 +01:00
parent 76ea07d8db
commit 2ef3f986ed
2 changed files with 228 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

472
static/css/base.css
View File

@@ -1,8 +1,8 @@
/*--------------------------------------------------------------------------------- /*---------------------------------------------------------------------------------
App: WebSlides App: WebSlides
Version: 0.1 Version: 1.0.0
Date: 2017-01-08 Date: 2017-02-11
Description: A simple and versatile framework for building HTML presentations, landings, and portfolios. Description: A simple and versatile framework for building HTML presentations, landings, and portfolios.
Author: José Luis Antúnez Author: José Luis Antúnez
Author URI: http://twitter.com/jlantunez Author URI: http://twitter.com/jlantunez
@@ -25,7 +25,6 @@
3.1 Logo 3.1 Logo
4. Navigation 4. Navigation
4.1 Navbars 4.1 Navbars
4.2 Tabs
5. SLIDES (vertically and horizontally centered) 5. SLIDES (vertically and horizontally centered)
5.1 Mini container & Alignment 5.1 Mini container & Alignment
5.2 Counter / Navigation Slides 5.2 Counter / Navigation Slides
@@ -60,7 +59,7 @@
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, bbbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0 } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, bbbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0 }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block; display: block;
} }
body { body {
line-height: 1; line-height: 1;
@@ -303,6 +302,11 @@ body {
overflow-x: hidden; overflow-x: hidden;
} }
/* == Prototype faster - Vertical rhythm == */
body.baseline {
background: url(../images/baseline.png) left top .8rem/.8rem;
}
/* /*
#webslides.vertical {cursor: s-resize; } #webslides.vertical {cursor: s-resize; }
*/ */
@@ -339,7 +343,7 @@ nav a[rel="external"] em,
/*Layer/Box Shadow*/ /*Layer/Box Shadow*/
.shadow { .shadow {
position: relative; position: relative;
} }
.shadow:before,.shadow:after { .shadow:before,.shadow:after {
z-index: -1; z-index: -1;
@@ -670,9 +674,9 @@ li .browser {margin-bottom: 0;
content: "● ● ●"; content: "● ● ●";
} }
@media (min-width:768px) { @media (min-width:768px) {
.browser:before { .browser:before {
font-size: 1.6rem; font-size: 1.6rem;
} }
} }
@@ -728,21 +732,21 @@ Auto-fill & Equal height === */
} }
/* Grid (Sidebar + Main) .grid.sm */ /* Grid (Sidebar + Main) .grid.sm */
.grid.sm .column:nth-child(1) { .grid.sm .column:nth-child(1) {
width: 30% width: 30%
} }
.grid.sm .column:nth-child(2) { .grid.sm .column:nth-child(2) {
width: 70%; width: 70%;
} }
/* Grid (Main + Sidebar) .grid.ms */ /* Grid (Main + Sidebar) .grid.ms */
.grid.ms .column:nth-child(1) { .grid.ms .column:nth-child(1) {
width: 70% width: 70%
} }
.grid.ms .column:nth-child(2) { .grid.ms .column:nth-child(2) {
width: 30%; width: 30%;
} }
/* Grid (Sidebar + Main + Sidebar) .grid.sms */ /* Grid (Sidebar + Main + Sidebar) .grid.sms */
.grid.sms .column:nth-child(2) { .grid.sms .column:nth-child(2) {
width: 50%; width: 50%;
} }
} }
@@ -803,7 +807,7 @@ ul.description {
} }
.description + p{ .description + p{
margin-top: 3.2rem; margin-top: 3.2rem;
} }
.description li { .description li {
@@ -814,7 +818,7 @@ margin-top: 3.2rem;
transition: .3s; transition: .3s;
} }
.description li:hover{ .description li:hover{
padding-left: .4rem; padding-left: .4rem;
} }
ul.description li,.column ul li {list-style: none;margin-left: 0;} ul.description li,.column ul li {list-style: none;margin-left: 0;}
@@ -826,7 +830,7 @@ h2 svg, h3 svg, h4 svg {
margin-top: -.8rem; margin-top: -.8rem;
} }
.text-intro svg,.wall p svg,.try svg { .text-intro svg,.wall p svg,.try svg {
margin-top: -.4rem; margin-top: -.4rem;
} }
.flexblock li h2 svg,.flexblock li h3 svg {margin-top: 0; .flexblock li h2 svg,.flexblock li h3 svg {margin-top: 0;
} }
@@ -904,8 +908,8 @@ h1+img,h2+img,h3+img {
[class*="content-"] > [class*="content-"] h2, [class*="content-"] > [class*="content-"] h2,
[class*="content-"] > [class*="content-"] h3, [class*="content-"] > [class*="content-"] h3,
[class*="content-"] > [class*="content-"] h4 { [class*="content-"] > [class*="content-"] h4 {
font-size: 2.4rem; font-size: 2.4rem;
line-height: 4rem; line-height: 4rem;
} }
/*========================================= /*=========================================
2.1. Headings with background 2.1. Headings with background
@@ -918,7 +922,7 @@ li[class*="bg-"],p[class*="bg-"] {
} }
h1 [class*="bg-"],h2 [class*="bg-"],h3 [class*="bg-"] { h1 [class*="bg-"],h2 [class*="bg-"],h3 [class*="bg-"] {
padding: .4rem .8rem; padding: .4rem .8rem;
} }
/*========================================= /*=========================================
@@ -944,7 +948,7 @@ padding: .4rem .8rem;
@media (min-width: 768px) { @media (min-width: 768px) {
.text-landing { .text-landing {
letter-spacing: 1.6rem; letter-spacing: 1.6rem;
} }
} }
/* -- Subtitle (Before h1, h2) -- /* -- Subtitle (Before h1, h2) --
p.subtitle + h1/h2 */ p.subtitle + h1/h2 */
@@ -992,7 +996,7 @@ p.text-subtitle svg {vertical-align: text-top;}
/* -- Magazine Two Columns -- */ /* -- Magazine Two Columns -- */
@media (min-width: 768px) { @media (min-width: 768px) {
.text-cols { .text-cols {
-webkit-column-count: 2; -webkit-column-count: 2;
-moz-column-count: 2; -moz-column-count: 2;
column-count: 2; column-count: 2;
@@ -1000,10 +1004,10 @@ p.text-subtitle svg {vertical-align: text-top;}
-moz-column-gap: 4.8rem; -moz-column-gap: 4.8rem;
column-gap: 4.8rem; column-gap: 4.8rem;
text-align: left; text-align: left;
} }
.text-landing + .text-cols{ .text-landing + .text-cols{
margin-top: 3.2rem; margin-top: 3.2rem;
} }
} }
.text-cols p:first-child:first-letter { .text-cols p:first-child:first-letter {
font-size: 11rem; font-size: 11rem;
@@ -1033,7 +1037,7 @@ margin-top: 3.2rem;
margin-bottom: .6rem; margin-bottom: .6rem;
} }
.column .text-context:before { .column .text-context:before {
width:100%; width:100%;
} }
/* -- Separator/Symbols (stars ***...) -- */ /* -- Separator/Symbols (stars ***...) -- */
@@ -1043,63 +1047,63 @@ width:100%;
/* -- Separator -- */ /* -- Separator -- */
.text-separator { .text-separator {
margin-top:2.4rem; margin-top:2.4rem;
} }
.text-separator:before { .text-separator:before {
position: absolute; position: absolute;
width: 16%; width: 16%;
height: .4rem; height: .4rem;
content: ""; content: "";
margin-top:-1.6rem; margin-top:-1.6rem;
left: 0; left: 0;
} }
@media (min-width: 568px) { @media (min-width: 568px) {
.text-separator { .text-separator {
width: 80%; width: 80%;
margin-top: 0; margin-top: 0;
margin-left: 20%; margin-left: 20%;
} }
.text-separator:before { .text-separator:before {
margin-top: 1.2rem; margin-top: 1.2rem;
} }
} }
/* -- Pull Quote (Right/Left) -- */ /* -- Pull Quote (Right/Left) -- */
[class*="text-pull"] { [class*="text-pull"] {
position: relative; position: relative;
font-size: 2.4rem; font-size: 2.4rem;
line-height: 4rem; line-height: 4rem;
font-weight: 400; font-weight: 400;
margin-right: 2.4rem; margin-right: 2.4rem;
margin-left: 2.4rem; margin-left: 2.4rem;
} }
[class*="text-pull-"] { [class*="text-pull-"] {
padding-top: 1.4rem; padding-top: 1.4rem;
margin-top: .8rem; margin-top: .8rem;
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
[class*="text-pull"] { [class*="text-pull"] {
margin-right: -4rem; margin-right: -4rem;
margin-left: -4rem; margin-left: -4rem;
} }
} }
@media (min-width: 568px) { @media (min-width: 568px) {
[class*="text-pull-"] { [class*="text-pull-"] {
width: 32rem; width: 32rem;
} }
.text-pull-right { .text-pull-right {
float: right; float: right;
margin-right: -2.4rem; margin-right: -2.4rem;
margin-left: 2.4rem; margin-left: 2.4rem;
} }
.text-pull-left { .text-pull-left {
float: left; float: left;
margin-left: -2.4rem; margin-left: -2.4rem;
margin-right: 2.4rem; margin-right: 2.4rem;
} }
} }
/* -- Info Messages (error, warning, success... -- */ /* -- Info Messages (error, warning, success... -- */
@@ -1165,8 +1169,8 @@ footer,
header p, header p,
footer p { footer p {
line-height: 4.8rem; line-height: 4.8rem;
margin-bottom: 0; margin-bottom: 0;
} }
header[role=banner] img, header[role=banner] img,
@@ -1193,7 +1197,7 @@ section footer {
/*desktop only? Add @media (min-width: 1025px)*/ /*desktop only? Add @media (min-width: 1025px)*/
header[role=banner] { header[role=banner] {
opacity: 0; opacity: 0;
} }
/*=== Show Header[role=banner] === */ /*=== Show Header[role=banner] === */
header[role=banner]:hover { header[role=banner]:hover {
@@ -1201,10 +1205,10 @@ header[role=banner]:hover {
} }
@media (max-width: 767px) { @media (max-width: 767px) {
footer .alignleft, footer .alignright { footer .alignleft, footer .alignright {
float: none; float: none;
display: block; display: block;
} }
} }
@@ -1293,89 +1297,18 @@ nav.aligncenter ul, .aligncenter nav ul {
} }
nav.navbar ul li { nav.navbar ul li {
/*====full float li a ====*/ /*====full float li a ====*/
-webkit-flex: 1 1 auto; -webkit-flex: 1 1 auto;
flex: 1 1 auto; flex: 1 1 auto;
} }
@media (max-width: 568px) { @media (max-width: 568px) {
nav.navbar ul { nav.navbar ul {
-webkit-flex-flow: column wrap; -webkit-flex-flow: column wrap;
flex-flow: column wrap; flex-flow: column wrap;
padding: 0; padding: 0;
} }
nav.navbar li a{justify-content:flex-start; nav.navbar li a{justify-content:flex-start;
}
}
/*=== 4.2. Tabs === */
ul.tabs {
display: inline-block;
margin-bottom: 3.2rem;
}
ul.tabs li {
position: relative;
display: table-cell;
/*ftext-transform: uppercase;
letter-spacing: .1rem;*/
padding: .8rem 2.4rem;
cursor: pointer;
}
.tabs li:before {
position: absolute;
content: "";
display: table;
clear: both;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
-webkit-transition: width 200ms ease, opacity 200ms ease;
transition: width 200ms ease, opacity 200ms ease;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tabs li.current:before {
opacity: 1;
width: 100%;
}
ul.tabs li.current {
font-weight: 600;
}
/*.tabs li:after{
position: relative;
right: -2.8rem;
font-size:1.6rem;
font-weight:300;
content: "*";
}
.tabs li:last-child:after {
display: none;
}
*/
.tab-content {
display: none;
}
.tab-content.current {
display: inherit;
-webkit-animation: fadeIn ease-in 1;
animation: fadeIn ease-in 1;
-webkit-animation-duration: .3s;
animation-duration: .3s;
}
@media (max-width: 400px) {
.tabs li {
display: block;
} }
} }
@@ -1388,13 +1321,13 @@ Vertically and horizontally centered
* = All HTML elements will have those styles.*/ * = All HTML elements will have those styles.*/
section * { section * {
-webkit-animation: fadeIn 0.3s ease-in-out; -webkit-animation: fadeIn 0.3s ease-in-out;
animation: fadeIn 0.3s ease-in-out; animation: fadeIn 0.3s ease-in-out;
} }
section .background,section .background-video, section .background,section .background-video,
[class*="background-"].light,[class*="background-"].dark { [class*="background-"].light,[class*="background-"].dark {
-webkit-animation-duration:0s; -webkit-animation-duration:0s;
animation-duration:0s; animation-duration:0s;
} }
/*=== Section = Slide === */ /*=== Section = Slide === */
@@ -1416,17 +1349,17 @@ section,.slide
} }
@media (min-width: 1024px) { @media (min-width: 1024px) {
section, .slide { section, .slide {
padding-top: 12rem; padding-top: 12rem;
padding-bottom: 12rem; padding-bottom: 12rem;
} }
} }
/*slide no padding (full card, .embed> youtube video...) */ /*slide no padding (full card, .embed> youtube video...) */
.fullscreen { .fullscreen {
padding: 0; padding: 0;
/* Fixed/Visible header? /* Fixed/Visible header?
padding:8.2rem 0 0 0; padding:8.2rem 0 0 0;
*/ */
} }
/* slide alignment - top */ /* slide alignment - top */
@@ -1452,12 +1385,12 @@ padding:8.2rem 0 0 0;
.wrap[class*="bg-"],.wrap.frame, .wrap[class*="bg-"],.wrap.frame,
[class*="content-"][class*="bg-"], [class*="content-"][class*="bg-"],
[class*="content-"].frame, [class*="align"][class*="bg-"]{ [class*="content-"].frame, [class*="align"][class*="bg-"]{
padding: 4.8rem; padding: 4.8rem;
} }
[class*="content-"] > [class*="content-"] p { [class*="content-"] > [class*="content-"] p {
font-size: 1.8rem; font-size: 1.8rem;
line-height: 3.2rem; line-height: 3.2rem;
} }
.content-center { .content-center {
@@ -1466,7 +1399,7 @@ padding:8.2rem 0 0 0;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
[class*="content-"] { [class*="content-"] {
width: 50%; width: 50%;
} }
.content-left { .content-left {
@@ -1475,45 +1408,45 @@ padding:8.2rem 0 0 0;
.content-right { .content-right {
float: right; float: right;
} }
[class*="content-"] + [class*="content-"] { [class*="content-"] + [class*="content-"] {
padding-left:2.4rem; padding-left:2.4rem;
margin-bottom: 4.8rem; margin-bottom: 4.8rem;
} }
[class*="content-"] + [class*="size-"] { [class*="content-"] + [class*="size-"] {
margin-top: 6.4rem; margin-top: 6.4rem;
clear:both; clear:both;
} }
[class*="content-"]:before, [class*="content-"]:before,
[class*="content-"]:after { [class*="content-"]:after {
content: ""; content: "";
display: table; display: table;
} }
[class*="content-"]:after { [class*="content-"]:after {
clear: both; clear: both;
} }
} }
/* === 5.2 Counter / Navigation Slides === */ /* === 5.2 Counter / Navigation Slides === */
#navigation { #navigation {
position: fixed; position: fixed;
width: 24.4rem; width: 24.4rem;
margin-right: auto; margin-right: auto;
margin-left: auto; margin-left: auto;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
/* hover/visibility */ /* hover/visibility */
z-index: 3; z-index: 3;
} }
#navigation { #navigation {
-webkit-animation: fadeIn 16s; -webkit-animation: fadeIn 16s;
animation: fadeIn 16s; animation: fadeIn 16s;
opacity:0; opacity:0;
} }
#navigation:hover { #navigation:hover {
opacity: 1; opacity: 1;
} }
/* -- navigation arrow always visible? -- */ /* -- navigation arrow always visible? -- */
@@ -1556,14 +1489,14 @@ a#previous {
left: 3.2rem; left: 3.2rem;
} }
@media (max-width:1024px) { @media (max-width:1024px) {
#navigation { #navigation {
background: url('../images/swipe.svg') no-repeat center top; background: url('../images/swipe.svg') no-repeat center top;
background-size: 4.8rem; background-size: 4.8rem;
-webkit-animation: fadeIn 6s; -webkit-animation: fadeIn 6s;
animation: fadeIn 6s; animation: fadeIn 6s;
} }
#navigation a, #counter {display: none; #navigation a, #counter {display: none;
} }
} }
/*=== 5.3 Slides - Background Images === */ /*=== 5.3 Slides - Background Images === */
@@ -1583,12 +1516,12 @@ animation: fadeIn 6s;
background-size: cover background-size: cover
} }
.background-top { .background-top {
background-position: top; background-position: top;
background-size: cover; background-size: cover;
} }
.background-bottom { .background-bottom {
background-position: bottom; background-position: bottom;
background-size: cover; background-size: cover;
} }
/*fullscreen video /*fullscreen video
@@ -1611,10 +1544,10 @@ background-size: cover;
background-position: center top; background-position: center top;
} }
.background-right-top { .background-right-top {
background-position: right top; background-position: right top;
} }
.background-left-top { .background-left-top {
background-position: left top; background-position: left top;
} }
.background-center-bottom, .background-center-bottom,
.background-left-bottom, .background-left-bottom,
@@ -1624,7 +1557,7 @@ background-size: cover;
} }
@media (min-width:1024px) { @media (min-width:1024px) {
.background-left-bottom { .background-left-bottom {
background-position: left bottom; background-position: left bottom;
} }
.background-right-bottom { .background-right-bottom {
@@ -1661,14 +1594,14 @@ background-size: cover;
filter: alpha(opacity=5); filter: alpha(opacity=5);
} }
@media (max-width:1023px) { @media (max-width:1023px) {
[class*="background-"] { [class*="background-"] {
opacity: 0.20; opacity: 0.20;
-webkit-animation: fadeIn ease-in 0.20; -webkit-animation: fadeIn ease-in 0.20;
animation: fadeIn ease-in 0.20; animation: fadeIn ease-in 0.20;
} }
.background-video { .background-video {
opacity: 0.80; opacity: 0.80;
} }
} }
/*=== Animated Background Image === */ /*=== Animated Background Image === */
@@ -1729,8 +1662,8 @@ Blocks Links li>a = .flexblock.blink (.blink required)
transition: .3s; transition: .3s;
} }
.flexblock li:hover{ .flexblock li:hover{
-webkit-transform: translateY(-.2rem); -webkit-transform: translateY(-.2rem);
transform: translateY(-.2rem); transform: translateY(-.2rem);
} }
.flexblock.aligncenter li {text-align: center;} .flexblock.aligncenter li {text-align: center;}
@@ -1797,8 +1730,8 @@ div + ul, div + ol{
} }
.column .flexblock.features>li{width: 100%;} .column .flexblock.features>li{width: 100%;}
footer .flexblock.features>li {margin-bottom: 0; footer .flexblock.features>li {margin-bottom: 0;
} }
} }
@@ -1818,15 +1751,15 @@ div + ul, div + ol{
display: block; display: block;
} }
.features li span,.features li svg { .features li span,.features li svg {
font-size: 6.4rem; font-size: 6.4rem;
line-height: 1; line-height: 1;
display: block; display: block;
margin: 0; margin: 0;
} }
.features li img {width: 6.4rem;} .features li img {width: 6.4rem;}
.features li span sup { .features li span sup {
font-size: 3rem; font-size: 3rem;
} }
@media (min-width:1200px) { @media (min-width:1200px) {
@@ -1870,7 +1803,7 @@ div + ul, div + ol{
} }
.clients li:hover { .clients li:hover {
z-index: 1; z-index: 1;
} }
/*================================================== /*==================================================
6.3 flexblock.steps <ul class="flexblock steps"> 6.3 flexblock.steps <ul class="flexblock steps">
@@ -1972,19 +1905,19 @@ About, Philosophy...
} }
.specs li span,.specs li svg { .specs li span,.specs li svg {
font-size: 6.4rem; font-size: 6.4rem;
line-height: 1; line-height: 1;
display: block; display: block;
margin: 0; margin: 0;
} }
.specs li img {width: 6.4rem;} .specs li img {width: 6.4rem;}
.specs li span { .specs li span {
font-weight: 300; font-weight: 300;
} }
.specs li span sup { .specs li span sup {
font-size: 3rem; font-size: 3rem;
} }
@@ -2001,18 +1934,18 @@ About, Philosophy...
=================================================== */ =================================================== */
.flexblock.reasons li { .flexblock.reasons li {
text-align: left; text-align: left;
width: 100%; width: 100%;
counter-increment: list; counter-increment: list;
} }
.reasons li:hover{ .reasons li:hover{
-webkit-transform: translateY(-.2rem); -webkit-transform: translateY(-.2rem);
transform: translateY(-.2rem); transform: translateY(-.2rem);
} }
.reasons li:before { .reasons li:before {
content: counter(list)'.'; content: counter(list)'.';
font-size: 6.4rem; font-size: 6.4rem;
line-height: 1; line-height: 1;
} }
.reasons li:after { .reasons li:after {
position: relative; position: relative;
@@ -2022,12 +1955,12 @@ transform: translateY(-.2rem);
display: block; display: block;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.reasons li { .reasons li {
padding-left: 8.8rem; padding-left: 8.8rem;
/* You need two digits? (1-10)*/ /* You need two digits? (1-10)*/
/*padding-left: 12rem; */ /*padding-left: 12rem; */
} }
.reasons li:before { .reasons li:before {
position: absolute; position: absolute;
left: 2.4rem; left: 2.4rem;
} }
@@ -2078,7 +2011,7 @@ img size recommended:800x600px
transition: .1s; transition: .1s;
} }
.gallery li:hover figcaption:before { .gallery li:hover figcaption:before {
top:.3rem; top:.3rem;
} }
.aligncenter .gallery li figcaption:before { .aligncenter .gallery li figcaption:before {
margin-left: 0; margin-left: 0;
@@ -2086,9 +2019,9 @@ top:.3rem;
} }
.gallery li footer { .gallery li footer {
position: relative; position: relative;
padding:1.2rem 0 0; padding:1.2rem 0 0;
margin-top: .8rem; margin-top: .8rem;
} }
@media (min-width:600px) { @media (min-width:600px) {
.flexblock.gallery { .flexblock.gallery {
@@ -2140,15 +2073,15 @@ margin-top: .8rem;
transition: all 0.3s linear; transition: all 0.3s linear;
} }
li .overlay { li .overlay {
align-items: center; align-items: center;
} }
li .overlay h2 { li .overlay h2 {
text-transform: uppercase; text-transform: uppercase;
margin: 0; margin: 0;
padding: 0 2.4rem; padding: 0 2.4rem;
letter-spacing: .2rem; letter-spacing: .2rem;
width: 100%; width: 100%;
text-align: center; text-align: center;
} }
.overlay p, .overlay p,
@@ -2971,34 +2904,19 @@ input[type="checkbox"] {
height: auto; height: auto;
padding: 4px; padding: 4px;
} }
button[type="submit"],textarea {
button {
width: auto;
}
button[type="submit"] {
width: 100%; width: 100%;
} }
/*input:hover, textarea:hover, select:hover {
-webkit-transform: translateY(-.2rem);
transform: translateY(-.2rem);
}*/
input:focus,
textarea:focus,
select:focus {
border-width: 1px;
}
textarea { textarea {
padding: .7rem; padding: .7rem;
} }
button { button {
width: auto;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
} }
.button { .button {
display: inline-block; display: inline-block;
line-height: 4.8rem; line-height: 4.8rem;
@@ -3051,6 +2969,12 @@ legend {
letter-spacing:.1rem; letter-spacing:.1rem;
font-weight: 400; font-weight: 400;
} }
/*=== Focus === */
input:focus,
textarea:focus,
select:focus {
border-width: 1px;
}
/*=== App Store Badges === */ /*=== App Store Badges === */
/* Change width and height: 216x64px, 162x48px, 135x40... */ /* Change width and height: 216x64px, 162x48px, 135x40... */
@@ -3067,11 +2991,11 @@ legend {
} }
@media (min-width:1024px) { @media (min-width:1024px) {
[class*="badge-"] { [class*="badge-"] {
width: 162px; width: 162px;
height: 48px; height: 48px;
line-height: 4.8rem; line-height: 4.8rem;
} }
} }
.badge-ios { .badge-ios {
background-image: url("../images/bt-appstore.png"); background-image: url("../images/bt-appstore.png");
@@ -3087,8 +3011,8 @@ legend {
a.button:hover, a.button:hover,
button[type="submit"]:hover, button[type="submit"]:hover,
input[type="submit"]:hover { input[type="submit"]:hover {
-webkit-transform:scale(1.01); -webkit-transform:scale(1.01);
transform: scale(1.01); transform: scale(1.01);
} }
[class*="badge-"]:hover { [class*="badge-"]:hover {
opacity: 0.7; opacity: 0.7;

81
static/css/colors.css
View File

@@ -81,27 +81,27 @@ hr:after {
color: #333; color: #333;
} }
bbbr, abbr,
acronym { acronym {
border-bottom: 1px dotted #333; border-bottom: 1px dotted #333;
} }
mark, mark,
ins { ins {
background-color: rgba(221,238,255, 0.8); background-color: rgba(221,238,255, 0.8);
color: inherit; color: inherit;
} }
::-moz-selection { ::-moz-selection {
background-color: rgba(221,238,255, 0.8); background-color: rgba(221,238,255, 0.8);
} }
::-webkit-selection { ::-webkit-selection {
background-color: rgba(221,238,255, 0.8); background-color: rgba(221,238,255, 0.8);
} }
::selection { ::selection {
background-color: rgba(221,238,255, 0.8); background-color: rgba(221,238,255, 0.8);
} }
pre { pre {
@@ -119,7 +119,7 @@ code,[class*="bg-"] pre {
} }
.bg-white code{ .bg-white code{
background: rgba(0, 20, 80, 0.03); background: rgba(0, 20, 80, 0.03);
} }
/*================================================ /*================================================
Slides - Backgrounds <section class="bg-primary"> Slides - Backgrounds <section class="bg-primary">
@@ -170,6 +170,10 @@ Slides - Backgrounds <section class="bg-primary">
.bg-white { .bg-white {
background-color: #fff; background-color: #fff;
} }
[class*="bg-"] .bg-white {
text-shadow: none;
color: #333;
}
/* BG Apple Keynote*/ /* BG Apple Keynote*/
@@ -214,7 +218,7 @@ Slides - Backgrounds <section class="bg-primary">
/*Covers/Longforms...*/ /*Covers/Longforms...*/
.bg-trans-gradient{ .bg-trans-gradient{
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
} }
/*Horizontal Gradient*/ /*Horizontal Gradient*/
@@ -246,9 +250,9 @@ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
/*Gray Gradient (horizontal)*/ /*Gray Gradient (horizontal)*/
.bg-gradient-gray{ .bg-gradient-gray{
background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%); background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
color: #333; color: #333;
text-shadow: none; text-shadow: none;
} }
/*Border/Frame*/ /*Border/Frame*/
.frame { .frame {
@@ -257,7 +261,7 @@ text-shadow: none;
/*Layer/Box Shadow*/ /*Layer/Box Shadow*/
.shadow,.pre { .shadow,.pre {
position: relative; position: relative;
} }
.shadow:before,.shadow:after { .shadow:before,.shadow:after {
box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3); box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
@@ -270,13 +274,13 @@ TYPOGRAPHY
/* -- Horizontal separator -- */ /* -- Horizontal separator -- */
.text-separator:before { .text-separator:before {
background-color: rgba(170, 0, 0, 0.8); background-color: rgba(170, 0, 0, 0.8);
} }
/* -- Pull Quote (Right/Left) -- */ /* -- Pull Quote (Right/Left) -- */
[class*="text-pull-"] { [class*="text-pull-"] {
border-top: 4px solid rgba(0, 0, 0, 0.5); border-top: 4px solid rgba(0, 0, 0, 0.5);
} }
/* -- Context -- */ /* -- Context -- */
@@ -359,31 +363,6 @@ nav li.email a:hover {
background: #dd4b39; background: #dd4b39;
} }
/*=========================================
Tabs
=========================================== */
ul.tabs li {
border: 1px solid rgba(0, 20, 80, 0.1);
border-right: none;
}
ul.tabs li:last-child {
border-right: 1px solid rgba(0, 20, 80, 0.1);
}
ul.tabs li.current {
background: rgba(255, 255, 255, 0.09);
}
ul.tabs li:before {
background-color: #44d;
}
/*=================================================== /*===================================================
.flexblock li hover/active .flexblock li hover/active
===================================================== */ ===================================================== */
@@ -395,7 +374,7 @@ ul.tabs li:before {
} }
/*========================================= /*=========================================
Features & Clients List Features & Clients List
=========================================== */ =========================================== */
.features li,.clients li { .features li,.clients li {
@@ -408,7 +387,7 @@ Features & Clients List
} }
.features li:hover,.clients li:hover { .features li:hover,.clients li:hover {
box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08); box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
} }
/*.features li span,.features li svg{color: #44d;}*/ /*.features li span,.features li svg{color: #44d;}*/
@@ -431,7 +410,7 @@ box-shadow: 0 8px 16px rgba(0,20,80,.02),0 4px 16px rgba(0,0,0,.08);
} }
/*=========================================== /*===========================================
flexblock.steps flexblock.steps
============================================= */ ============================================= */
.steps li:nth-child(1) { .steps li:nth-child(1) {
@@ -540,7 +519,7 @@ Gallery li+.overlay+image
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
} }
.gallery li footer { .gallery li footer {
border-top:1px solid rgba(0,20,80,0.1); border-top:1px solid rgba(0,20,80,0.1);
} }
.gallery li a { .gallery li a {
@@ -705,7 +684,7 @@ Cards
/*== Figure Background === */ /*== Figure Background === */
[class*="card-"][class*="bg-"] figure { [class*="card-"][class*="bg-"] figure {
background-color: rgba(0, 20, 80, 0.06); background-color: rgba(0, 20, 80, 0.06);
} }
/*== Ficaption Cards === */ /*== Ficaption Cards === */
@@ -724,7 +703,7 @@ background-color: rgba(0, 20, 80, 0.06);
border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; border-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
-webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; -webkit-border-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
-moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%; -moz-border-image: -moz-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent) 1 100%;
} }
} }
@@ -758,7 +737,7 @@ tr:nth-child(even)>td:hover {
/*============================ /*============================
Browser (Screenshots) Browser (Screenshots)
============================== */ ============================== */
.browser { .browser {
@@ -804,10 +783,10 @@ input:focus::-moz-placeholder {
input:focus::-webkit-input-placeholder { input:focus::-webkit-input-placeholder {
color: #ddd; color: #ddd;
} }
a.button,[class*="badge-"] a.button,[class*="badge-"],
button[type="submit"], button[type="submit"],
input { input {
box-shadow: 0px 10px 16px -8px rgba(0, 20, 80, 0.3); box-shadow: 0 10px 16px -8px rgba(0, 20, 80, 0.3);
} }
button, button,
@@ -818,7 +797,7 @@ button[type="submit"],
input[type="submit"], input[type="submit"],
.button,.button:hover, .button,.button:hover,
button[type="submit"]:hover, button[type="submit"]:hover,
input[type="submit"]:hover input[type="submit"]:hover
{ {
border: 1px solid #44d; border: 1px solid #44d;
} }
@@ -831,7 +810,7 @@ input[type="submit"],
text-shadow: 0 1px 0 #123; text-shadow: 0 1px 0 #123;
} }
.button:active,button[type="submit"]:active,input[type="submit"]:active { .button:active,button[type="submit"]:active,input[type="submit"]:active {
background-color: #17d; background-color: #17d;
} }
.ghost,.ghost:hover {background: none;color: inherit;text-shadow: none;} .ghost,.ghost:hover {background: none;color: inherit;text-shadow: none;}
.bg-primary select, .bg-primary select,
@@ -839,7 +818,7 @@ background-color: #17d;
.bg-primary .button, .bg-primary .button,
.bg-primary button,.bg-primary button:hover, .bg-primary button,.bg-primary button:hover,
.bg-primary input, .bg-primary input,
[class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost [class*="bg-gradient-"] .button,[class*="bg-"] a.button.ghost
{ {
border-color: #fff; border-color: #fff;
} }