mirror of
https://github.com/webslides/WebSlides.git
synced 2025-08-25 06:00:55 +02:00
Merge branch 'sass' into dev
# Conflicts: # package.json # static/css/base.css # static/css/legacy/colors.css # static/js/webslides.js # static/js/webslides.min.js
This commit is contained in:
Antonio Laguna
@@ -1,8 +1,8 @@
|
||||
/*---------------------------------------------------------------------------------
|
||||
|
||||
App: WebSlides
|
||||
Version: 1.0.0
|
||||
Date: 2017-02-11
|
||||
Version: 1.3.0
|
||||
Date: 2017-04-20
|
||||
Description: A simple and versatile framework for building HTML presentations, landings, and portfolios.
|
||||
Authors: @jlantunez, @belelros, and @luissacristan
|
||||
Author URI: http://twitter.com/webslides
|
||||
@@ -47,12 +47,12 @@
|
||||
12. Avatars
|
||||
13. Tables
|
||||
14. Forms
|
||||
15. Longform Elements
|
||||
15. Longform Elements
|
||||
16. Safari Bug (flex-wrap)
|
||||
17. Slides Index: Thumbnails navigation gallery
|
||||
18. Print
|
||||
17. Print
|
||||
|
||||
----------------------------------------------------------------------------------- */
|
||||
|
||||
/*=========================================
|
||||
0. CSS Reset & Normalize
|
||||
=========================================== */
|
||||
@@ -322,10 +322,10 @@ html.ws-ready body {
|
||||
/* -- Hide scrollbar, but still being able to scroll -- */
|
||||
|
||||
#webslides {
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
-ms-overflow-style: none; /* IE 10+ */
|
||||
}
|
||||
#webslides::-webkit-scrollbar {
|
||||
display: none; /* Safari and Chrome */
|
||||
display: none; /* Safari and Chrome */
|
||||
}
|
||||
|
||||
/* -- Prototype faster - Vertical rhythm -- */
|
||||
@@ -402,14 +402,15 @@ nav a[rel="external"] em,
|
||||
z-index: 2;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
.wrap,header nav, footer nav {
|
||||
width: 90%;
|
||||
}
|
||||
.wrap,header nav, footer nav {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
.frame,.shadow {
|
||||
padding: 2.4rem;
|
||||
}
|
||||
|
||||
.radius {border-radius: .4rem;}
|
||||
|
||||
.alignright {
|
||||
@@ -1085,15 +1086,15 @@ p.text-subtitle svg {vertical-align: text-top;}
|
||||
/* -- Emoji (you'll love this) -- */
|
||||
|
||||
.text-emoji {
|
||||
font-size: 6.8rem;
|
||||
line-height: 8.8rem;
|
||||
font-size: 6.8rem;
|
||||
line-height: 8.8rem;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.text-emoji {
|
||||
font-size: 12.8rem;
|
||||
line-height: 16rem;
|
||||
}
|
||||
.text-emoji {
|
||||
font-size: 12.8rem;
|
||||
line-height: 16rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* -- Numbers (results, sales... 23,478,289 iphones) -- */
|
||||
@@ -1244,13 +1245,13 @@ img[class*="text-pull-"],figure[class*="text-pull-"] {
|
||||
--- */
|
||||
|
||||
.text-interview dt {
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.text-interview dt {
|
||||
.text-interview dt {
|
||||
margin-left: -34%;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
@@ -1540,7 +1541,7 @@ Aligned items [class*="content-"]=== */
|
||||
padding: 4.8rem;
|
||||
}
|
||||
form[class*="bg-"] {
|
||||
padding: 2.4rem;
|
||||
padding: 2.4rem;
|
||||
}
|
||||
[class*="content-"] > [class*="content-"] p {
|
||||
font-size: 1.8rem;
|
||||
@@ -1621,7 +1622,7 @@ opacity: 1;
|
||||
line-height: 4.8rem;
|
||||
}
|
||||
#counter a:hover {
|
||||
padding: .8rem;
|
||||
padding: .8rem;
|
||||
}
|
||||
#navigation p {
|
||||
margin-bottom: 0;
|
||||
@@ -1683,6 +1684,7 @@ a#previous {
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
/*fullscreen video
|
||||
<video class="background-video">
|
||||
*/
|
||||
@@ -1772,6 +1774,13 @@ a#previous {
|
||||
animation: anim 80s linear infinite;
|
||||
|
||||
}
|
||||
/*=== Background with a frame === */
|
||||
/*<span class="background" style="background-image:url('image.jpg')"></span>
|
||||
<span class="background frame"></span>*/
|
||||
|
||||
[class*="background"].frame {
|
||||
margin: 2.4rem;
|
||||
}
|
||||
|
||||
/*===============================================================
|
||||
6. Magic blocks with flexbox (Auto-fill & Equal Height)
|
||||
@@ -2764,7 +2773,7 @@ object-fit to re-frame images rather than just stretch and resize them === */
|
||||
/* -- imgs/frames size recommended:800x600 -- */
|
||||
[class*="card-"][class*="bg-"] figure img,
|
||||
[class*="card-"][class*="bg-"] figure iframe,
|
||||
/* -- Make small images/iframes larger -- */
|
||||
/* -- Make small images/iframes larger -- */
|
||||
.fullscreen [class*="card-"] figure img,
|
||||
.fullscreen [class*="card-"] figure iframe {
|
||||
position: absolute;
|
||||
@@ -2884,11 +2893,11 @@ blockquote p {
|
||||
line-height: 4rem;
|
||||
}
|
||||
blockquote p:last-child {
|
||||
margin-bottom: 3.2rem;
|
||||
margin-bottom: 3.2rem;
|
||||
}
|
||||
/* -- Interviews dl.text-interview -- */
|
||||
dd blockquote p:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.bg-apple blockquote p {
|
||||
font-family: "San Francisco", "Roboto", helvetica, arial, sans-serif;
|
||||
@@ -2912,7 +2921,7 @@ cite:before {
|
||||
/* Info: .wall will be deprecated soon. Use .text-quote ;) */
|
||||
|
||||
.text-quote,.wall {
|
||||
position: relative; /* Versatility: blockquote, p, h2... */
|
||||
position: relative; /* Versatility: blockquote, p, h2... */
|
||||
}
|
||||
.text-quote:before,.wall:before {
|
||||
position: absolute;
|
||||
@@ -3233,49 +3242,49 @@ button:disabled:hover {
|
||||
/* -- Posts = .wrap.longform -- */
|
||||
|
||||
.longform {
|
||||
width: 72rem;
|
||||
/* Why 72rem=720px?
|
||||
90-95 characters per line = better reading speed */
|
||||
width: 72rem;
|
||||
/* Why 72rem=720px?
|
||||
90-95 characters per line = better reading speed */
|
||||
}
|
||||
.longform .alignleft, .longform .alignright {
|
||||
max-width: 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
.longform img.aligncenter,.longform figure.aligncenter {
|
||||
margin-top: 3.2rem;
|
||||
margin-bottom: 3.2rem;
|
||||
}
|
||||
.longform ul,.longform ol {
|
||||
margin-bottom: 3.2rem;
|
||||
margin-bottom: 3.2rem;
|
||||
}
|
||||
.longform ul ol,.longform ol ul,.longform ul ul,.longform ol ol {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.longform figcaption p,.longform [class*="text-pull-"] p{
|
||||
line-height: 2.4rem;
|
||||
font-size: 1.6rem;
|
||||
line-height: 2.4rem;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
/* Mobile: video full width */
|
||||
.text-pull.embed {
|
||||
padding-bottom: 60.6%; /*without black borders; */
|
||||
margin-right: -2.4rem;
|
||||
margin-left: -2.4rem;
|
||||
padding-bottom: 60.6%; /*without black borders; */
|
||||
margin-right: -2.4rem;
|
||||
margin-left: -2.4rem;
|
||||
}
|
||||
@media (min-width:1280px) {
|
||||
.longform [class*="text-pull-"] {
|
||||
max-width: 32%;
|
||||
}
|
||||
.longform .text-pull-right {
|
||||
margin-right:-256px;
|
||||
}
|
||||
.longform .text-pull-left {
|
||||
margin-left:-256px;
|
||||
}
|
||||
.longform [class*="text-pull-"] {
|
||||
max-width: 32%;
|
||||
}
|
||||
.longform .text-pull-right {
|
||||
margin-right:-256px;
|
||||
}
|
||||
.longform .text-pull-left {
|
||||
margin-left:-256px;
|
||||
}
|
||||
}
|
||||
@media (min-width:1024px) {
|
||||
.longform .text-quote {
|
||||
margin-right: -4.8rem;
|
||||
margin-left: -4.8rem;
|
||||
}
|
||||
.longform .text-quote {
|
||||
margin-right: -4.8rem;
|
||||
margin-left: -4.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -3289,212 +3298,8 @@ Solution: stackoverflow.com/questions/34250282/flexbox-safari-bug-flex-wrap
|
||||
width: 0;
|
||||
}
|
||||
|
||||
|
||||
/*==============================================
|
||||
17. Slides Index: Thumbnails navigation gallery
|
||||
================================================ */
|
||||
|
||||
#webslides-zoomed {
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
-webkit-align-content: flex-start;
|
||||
align-content: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
background: transparent;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
@media (min-width: 1024px) {
|
||||
#webslides-zoomed>.wrap {
|
||||
padding-top: 12rem;
|
||||
padding-bottom: 12rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom {
|
||||
position: relative;
|
||||
-webkit-transition: .3s;
|
||||
transition: .3s;
|
||||
overflow: hidden;
|
||||
}
|
||||
#webslides-zoomed > .wrap > .grid > .column {
|
||||
width: 25%;
|
||||
-webkit-order: 0;
|
||||
order: 0;
|
||||
-webkit-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
-webkit-align-self: auto;
|
||||
align-self: auto;
|
||||
}
|
||||
|
||||
#webslides-zoomed .column > .wrap-zoom > .slide {
|
||||
transform: scale(0.25) translate(-150%, -150vh);
|
||||
/*transform: scale(0.34) translate(-99%, -99%); */ /* 3 colums */
|
||||
display: flex !important;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
clip: rect(0px auto auto 0);
|
||||
}
|
||||
|
||||
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom > .zoom-layer {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
#webslides-zoomed > .wrap > .grid > .column > .wrap-zoom:hover {
|
||||
transform: scale(1.02);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.text-slide-number {
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
margin: .8rem auto;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (orientation: portrait), screen and (max-width: 768px) and (orientation:landscape) {
|
||||
#webslides-zoomed .column {
|
||||
width: 50%;
|
||||
}
|
||||
#webslides-zoomed .column > .wrap-zoom > .slide {
|
||||
transform: scale(0.5) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 2/3) {
|
||||
#webslides-zoomed .column {
|
||||
width: 100%;
|
||||
}
|
||||
#webslides-zoomed .column > .wrap-zoom > .slide {
|
||||
transform: scale(0.5) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
#webslides.disabled, #webslides.zooming {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
#webslides.disabled {
|
||||
filter: blur(10px);
|
||||
}
|
||||
#webslides-zoomed.zooming {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
#webslides.zooming.in {
|
||||
-webkit-animation: bg-zoom-in 0.4s 1;
|
||||
animation: bg-zoom-in 0.4s 1;
|
||||
}
|
||||
|
||||
#webslides.zooming.out {
|
||||
-webkit-animation: bg-zoom-out 0.4s 1;
|
||||
animation: bg-zoom-out 0.4s 1;
|
||||
}
|
||||
|
||||
#webslides-zoomed.zooming.in {
|
||||
-webkit-animation: grid-zoom-in 0.4s 1;
|
||||
animation: grid-zoom-in 0.4s 1;
|
||||
}
|
||||
|
||||
#webslides-zoomed.zooming.out {
|
||||
-webkit-animation: grid-zoom-out 0.4s 1;
|
||||
animation: grid-zoom-out 0.4s 1;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bg-zoom-in {
|
||||
0% {
|
||||
filter: blur(0px);
|
||||
}
|
||||
100% {
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
@keyframes bg-zoom-in {
|
||||
0% {
|
||||
filter: blur(0px);
|
||||
}
|
||||
100% {
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bg-zoom-out {
|
||||
0% {
|
||||
filter: blur(10px);
|
||||
}
|
||||
100% {
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
@keyframes bg-zoom-out {
|
||||
0% {
|
||||
filter: blur(10px);
|
||||
}
|
||||
100% {
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes grid-zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@keyframes grid-zoom-in {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
filter: blur(10px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes grid-zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
filter: blur(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
@keyframes grid-zoom-out {
|
||||
0% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
filter: blur(0px);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1.2);
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*=========================================
|
||||
18. PRINT
|
||||
17. PRINT
|
||||
=========================================== */
|
||||
|
||||
@media print {
|
||||
@@ -39,9 +39,7 @@ WebSlides - Colors
|
||||
Base
|
||||
=========================================== */
|
||||
|
||||
body,
|
||||
/*index of slides: mini-slides same bg color as body */
|
||||
#webslides-zoomed .column > .wrap-zoom {
|
||||
body {
|
||||
color: #333;
|
||||
background-color: #f7f9fb;
|
||||
}
|
||||
@@ -90,20 +88,20 @@ acronym {
|
||||
|
||||
mark,
|
||||
ins {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
color: inherit;
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
::-webkit-selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
background-color: rgba(221,238,255, 0.8);
|
||||
}
|
||||
|
||||
pre {
|
||||
@@ -121,7 +119,7 @@ code,[class*="bg-"] pre {
|
||||
}
|
||||
|
||||
.bg-white code{
|
||||
background: rgba(0, 20, 80, 0.03);
|
||||
background: rgba(0, 20, 80, 0.03);
|
||||
}
|
||||
/*================================================
|
||||
Slides - Backgrounds <section class="bg-primary">
|
||||
@@ -220,7 +218,7 @@ Slides - Backgrounds <section class="bg-primary">
|
||||
|
||||
/*Covers/Longforms...*/
|
||||
.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*/
|
||||
@@ -252,18 +250,20 @@ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%);
|
||||
|
||||
/*Gray Gradient (horizontal)*/
|
||||
.bg-gradient-gray{
|
||||
background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
background: linear-gradient(90deg,#f7f9fb 0,#dee2e6 100%);
|
||||
color: #333;
|
||||
text-shadow: none;
|
||||
}
|
||||
/*Border/Frame*/
|
||||
.frame {
|
||||
border: .8rem solid #fff;
|
||||
}
|
||||
|
||||
[class*="background"].frame {
|
||||
border-width: .2rem;
|
||||
}
|
||||
/*Layer/Box Shadow*/
|
||||
.shadow,.pre {
|
||||
position: relative;
|
||||
position: relative;
|
||||
}
|
||||
.shadow:before,.shadow:after {
|
||||
box-shadow: 0 16px 24px rgba(0, 20, 80, 0.3);
|
||||
@@ -276,16 +276,16 @@ TYPOGRAPHY
|
||||
/* -- Horizontal separator -- */
|
||||
|
||||
.text-separator:before {
|
||||
background-color: rgba(170, 0, 0, 0.8);
|
||||
background-color: rgba(170, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
/* -- Pull Quote (Right/Left) -- */
|
||||
|
||||
[class*="text-pull-"] {
|
||||
border-top: 4px solid rgba(0, 0, 0, 0.5);
|
||||
border-top: 4px solid rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
img[class*="text-pull-"],figure[class*="text-pull-"] {
|
||||
border-top: none;
|
||||
border-top: none;
|
||||
}
|
||||
/* -- Context -- */
|
||||
|
||||
@@ -392,7 +392,7 @@ Features & Clients List
|
||||
}
|
||||
|
||||
.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;}*/
|
||||
|
||||
@@ -524,7 +524,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);
|
||||
}
|
||||
.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 {
|
||||
@@ -689,7 +689,7 @@ Cards
|
||||
/*== Figure Background === */
|
||||
|
||||
[class*="card-"][class*="bg-"] figure {
|
||||
background-color: rgba(0, 20, 80, 0.06);
|
||||
background-color: rgba(0, 20, 80, 0.06);
|
||||
}
|
||||
|
||||
/*== Ficaption Cards === */
|
||||
@@ -815,7 +815,7 @@ input[type="submit"],
|
||||
text-shadow: 0 1px 0 #123;
|
||||
}
|
||||
.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;}
|
||||
.bg-primary select,
|
||||
@@ -919,18 +919,3 @@ footer[role=contentinfo] {
|
||||
background-color:rgba(255,255,255 , 0.3);
|
||||
}
|
||||
*/
|
||||
|
||||
/*============================
|
||||
Slides Index
|
||||
============================== */
|
||||
|
||||
#webslides-zoomed .column > .wrap-zoom {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
#webslides-zoomed .column > .wrap-zoom:hover {
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.text-slide-number {
|
||||
/*background-color: rgba(255, 255, 255, 0.1);*/
|
||||
color: #abc;
|
||||
}
|
||||
3280
static/css/webslides.css
Normal file
3280
static/css/webslides.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user