Changes:
* Added a Spicr demo to the index.page. * Some demo updates
This commit is contained in:
thednp
parent
ce0a5192b3
commit
6bfa00da75
|
|
@ -6,16 +6,15 @@
|
|||
/* GLOBAL STYLES
|
||||
-------------------------------------------------- */
|
||||
body {
|
||||
font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 24px; /* ~25px */
|
||||
letter-spacing: 0.02em;
|
||||
color: #ccc;
|
||||
background-color: #08263d;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.condensed { font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: normal !important;}
|
||||
.condensed {
|
||||
font-family: "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: normal !important
|
||||
}
|
||||
|
||||
/* smooth scroll */
|
||||
html {
|
||||
|
|
@ -259,10 +258,9 @@ h1.example-item span {
|
|||
|
||||
.media {float: left; margin: 5px 20px 0 0; height: auto; font-size: 64px; line-height: 64px; width: 64px; text-align: center}
|
||||
|
||||
|
||||
/* COLUMN STYLES
|
||||
-------------------------------------------------- */
|
||||
.columns { position: relative; width: auto; margin: 0 -20px; display:flex; flex-direction: column; }
|
||||
.columns { position: relative; width: 100%; margin: 0 -20px; display:flex; flex-wrap: wrap; }
|
||||
.columns > [class*="col"] { padding: 0 20px; position: relative }
|
||||
.columns.welcome {min-height:330px}
|
||||
|
||||
|
|
@ -290,30 +288,6 @@ h1.example-item span {
|
|||
}
|
||||
}
|
||||
|
||||
/* welcome */
|
||||
.col3.bg { /*min-height: 120px;*/ width: 32%; margin: 1.3% 1.3% 0 0; float: left; padding: 0; opacity:0 }
|
||||
|
||||
.col3.bg:nth-child(3),
|
||||
.col3.bg:nth-child(6),
|
||||
.col3.bg:nth-child(9) { margin: 1.3% 0 0 }
|
||||
|
||||
.welcome > .table > .cell {perspective: 600px; -webkit-perspective: 600px; }
|
||||
#blocks {
|
||||
transform: rotateY(-10deg); -webkit-transform: rotateY(-10deg); width: 90%;
|
||||
}
|
||||
|
||||
/*.replay { display: none; }*/
|
||||
|
||||
.frontpage { margin-top: 30%; }
|
||||
|
||||
.columns.welcome .col2:nth-child(2) { position: absolute; top: 0; z-index: -1; left: 20%; opacity: 0.5 }
|
||||
.kute-logo {
|
||||
margin-top: 12%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px){
|
||||
.columns.welcome .col2:nth-child(2) { position: relative; top: auto; left: auto; z-index: auto; opacity: 1 }
|
||||
}
|
||||
|
||||
/* STYLING CONTENT
|
||||
-------------------------------------------------- */
|
||||
|
|
@ -336,24 +310,18 @@ a:focus {
|
|||
}
|
||||
|
||||
hr {
|
||||
border: 1px solid #444;
|
||||
margin: 10px 0;
|
||||
border: 1px solid #444;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
|
||||
.d-block {display: block;}
|
||||
.d-flex {display: flex;}
|
||||
.d-none {display: none;}
|
||||
|
||||
.align-self-center {align-self: center;}
|
||||
.align-items-center {align-items: center;}
|
||||
.justify-content-space {justify-content: space-between;}
|
||||
.justify-content-even {justify-content: space-evenly;}
|
||||
|
||||
|
||||
|
||||
/* buttons */
|
||||
.btns .btn { float: left; line-height: 1; margin: 0 3px 3px 0}
|
||||
.btns {
|
||||
display: inline-flex;
|
||||
flex: 1 1 auto;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
.btns .btn { display:inline; line-height: 1; margin: 0 3px 3px 0;}
|
||||
.btn { padding: 12px 15px; color:#fff; border:0; background-color: #999; line-height: 44px; }
|
||||
.bg-gray { color:#fff; background-color: #555; fill: #555 }
|
||||
.btn.active { background-color: #2196F3 }
|
||||
|
|
@ -495,5 +463,761 @@ kbd {
|
|||
font-weight: bold
|
||||
}
|
||||
|
||||
.kute-logo,
|
||||
#rectangle {transform-origin: 50% 50%;}
|
||||
#rectangle {transform-origin: 50% 50%;}
|
||||
|
||||
.w-20{
|
||||
width:20% !important
|
||||
}
|
||||
.w-25{
|
||||
width:25% !important
|
||||
}
|
||||
.w-33{
|
||||
width:33.33% !important
|
||||
}
|
||||
.w-50{
|
||||
width:50% !important
|
||||
}
|
||||
.w-66{
|
||||
width:66.67% !important
|
||||
}
|
||||
.w-75{
|
||||
width:75% !important
|
||||
}
|
||||
.w-80{
|
||||
width:80% !important
|
||||
}
|
||||
.w-100{
|
||||
width:100% !important
|
||||
}
|
||||
.w-auto{
|
||||
width:auto !important
|
||||
}
|
||||
.h-20vh{
|
||||
height:20vh !important
|
||||
}
|
||||
.h-25vh{
|
||||
height:25vh !important
|
||||
}
|
||||
.h-33vh{
|
||||
height:33.33vh !important
|
||||
}
|
||||
.h-50vh{
|
||||
height:50vh !important
|
||||
}
|
||||
.h-66vh{
|
||||
height:66.67vh !important
|
||||
}
|
||||
.h-75vh{
|
||||
height:75vh !important
|
||||
}
|
||||
.h-80vh{
|
||||
height:80vh !important
|
||||
}
|
||||
.h-100{
|
||||
height:100% !important
|
||||
}
|
||||
.h-auto{
|
||||
height:auto !important
|
||||
}
|
||||
@media(min-width: 768px){
|
||||
.w-md-20{
|
||||
width:20% !important
|
||||
}
|
||||
.w-md-25{
|
||||
width:25% !important
|
||||
}
|
||||
.w-md-33{
|
||||
width:33.33% !important
|
||||
}
|
||||
.w-md-50{
|
||||
width:50% !important
|
||||
}
|
||||
.w-md-66{
|
||||
width:66.67% !important
|
||||
}
|
||||
.w-md-75{
|
||||
width:75% !important
|
||||
}
|
||||
.w-md-80{
|
||||
width:80% !important
|
||||
}
|
||||
.w-md-100{
|
||||
width:100% !important
|
||||
}
|
||||
.w-md-auto{
|
||||
width:auto !important
|
||||
}
|
||||
.h-md-20vh{
|
||||
height:20vh !important
|
||||
}
|
||||
.h-md-25vh{
|
||||
height:25vh !important
|
||||
}
|
||||
.h-md-33vh{
|
||||
height:33.33vh !important
|
||||
}
|
||||
.h-md-50vh{
|
||||
height:50vh !important
|
||||
}
|
||||
.h-md-66vh{
|
||||
height:66.67vh !important
|
||||
}
|
||||
.h-md-75vh{
|
||||
height:75vh !important
|
||||
}
|
||||
.h-md-80vh{
|
||||
height:80vh !important
|
||||
}
|
||||
.h-md-100{
|
||||
height:100% !important
|
||||
}
|
||||
.h-md-auto{
|
||||
height:auto !important
|
||||
}
|
||||
}
|
||||
.d-none{
|
||||
display:none
|
||||
}
|
||||
.d-inline{
|
||||
display:inline
|
||||
}
|
||||
.d-flex{
|
||||
display:flex
|
||||
}
|
||||
.d-block{
|
||||
display:block
|
||||
}
|
||||
@media(min-width: 768px){
|
||||
.d-md-none{
|
||||
display:none
|
||||
}
|
||||
.d-md-inline{
|
||||
display:inline
|
||||
}
|
||||
.d-md-flex{
|
||||
display:flex
|
||||
}
|
||||
.d-md-block{
|
||||
display:block
|
||||
}
|
||||
}
|
||||
.flex-row{
|
||||
flex-direction:row
|
||||
}
|
||||
.flex-row-reverse{
|
||||
flex-direction:row-reverse
|
||||
}
|
||||
.flex-column{
|
||||
flex-direction:column
|
||||
}
|
||||
.flex-column-reverse{
|
||||
flex-direction:column-reverse
|
||||
}
|
||||
.align-items-start{
|
||||
align-items:flex-start
|
||||
}
|
||||
.align-items-end{
|
||||
align-items:flex-end
|
||||
}
|
||||
.align-items-center{
|
||||
align-items:center
|
||||
}
|
||||
.align-items-baseline{
|
||||
align-items:baseline
|
||||
}
|
||||
.align-items-stretch{
|
||||
align-items:stretch
|
||||
}
|
||||
.align-self-start{
|
||||
align-self:flex-start
|
||||
}
|
||||
.align-self-end{
|
||||
align-self:flex-end
|
||||
}
|
||||
.align-self-center{
|
||||
align-self:center
|
||||
}
|
||||
.align-self-baseline{
|
||||
align-self:baseline
|
||||
}
|
||||
.align-self-stretch{
|
||||
align-self:stretch
|
||||
}
|
||||
.justify-content-start{
|
||||
justify-content:flex-start
|
||||
}
|
||||
.justify-content-end{
|
||||
justify-content:flex-end
|
||||
}
|
||||
.justify-content-center{
|
||||
justify-content:center
|
||||
}
|
||||
.justify-content-between{
|
||||
justify-content:space-between
|
||||
}
|
||||
.justify-content-around{
|
||||
justify-content:space-around
|
||||
}
|
||||
.align-content-start{
|
||||
align-content:flex-start
|
||||
}
|
||||
.align-content-end{
|
||||
align-content:flex-end
|
||||
}
|
||||
.align-content-center{
|
||||
align-content:center
|
||||
}
|
||||
.align-content-around{
|
||||
align-content:space-around
|
||||
}
|
||||
.align-content-stretch{
|
||||
align-content:stretch
|
||||
}
|
||||
.flex-fill{
|
||||
flex:1 1 auto !important
|
||||
}
|
||||
.flex-grow-1{
|
||||
flex-grow:1
|
||||
}
|
||||
.flex-grow-0{
|
||||
flex-grow:0
|
||||
}
|
||||
.flex-shrink-1{
|
||||
flex-shrink:1
|
||||
}
|
||||
.flex-shrink-0{
|
||||
flex-shrink:0
|
||||
}
|
||||
.flex-nowrap{
|
||||
flex-wrap:nowrap
|
||||
}
|
||||
.flex-wrap{
|
||||
flex-wrap:wrap
|
||||
}
|
||||
.flex-wrap-reverse{
|
||||
flex-wrap:wrap-reverse
|
||||
}
|
||||
@media(min-width: 768px){
|
||||
.flex-md-row{
|
||||
flex-direction:row
|
||||
}
|
||||
.flex-md-row-reverse{
|
||||
flex-direction:row-reverse
|
||||
}
|
||||
.flex-md-column{
|
||||
flex-direction:column
|
||||
}
|
||||
.flex-md-column-reverse{
|
||||
flex-direction:column-reverse
|
||||
}
|
||||
.align-items-md-start{
|
||||
align-items:flex-start
|
||||
}
|
||||
.align-items-md-end{
|
||||
align-items:flex-end
|
||||
}
|
||||
.align-items-md-center{
|
||||
align-items:center
|
||||
}
|
||||
.align-items-md-baseline{
|
||||
align-items:baseline
|
||||
}
|
||||
.align-items-md-stretch{
|
||||
align-items:stretch
|
||||
}
|
||||
.align-self-md-start{
|
||||
align-self:flex-start
|
||||
}
|
||||
.align-self-md-end{
|
||||
align-self:flex-end
|
||||
}
|
||||
.align-self-md-center{
|
||||
align-self:center
|
||||
}
|
||||
.align-self-md-baseline{
|
||||
align-self:baseline
|
||||
}
|
||||
.align-self-md-stretch{
|
||||
align-self:stretch
|
||||
}
|
||||
.justify-content-md-start{
|
||||
justify-content:flex-start
|
||||
}
|
||||
.justify-content-md-end{
|
||||
justify-content:flex-end
|
||||
}
|
||||
.justify-content-md-center{
|
||||
justify-content:center
|
||||
}
|
||||
.justify-content-md-between{
|
||||
justify-content:space-between
|
||||
}
|
||||
.justify-content-md-around{
|
||||
justify-content:space-around
|
||||
}
|
||||
.flex-md-fill{
|
||||
flex:1 1 auto !important
|
||||
}
|
||||
.flex-md-grow-1{
|
||||
flex-grow:1
|
||||
}
|
||||
.flex-md-grow-0{
|
||||
flex-grow:0
|
||||
}
|
||||
.flex-md-shrink-1{
|
||||
flex-shrink:1
|
||||
}
|
||||
.flex-md-shrink-0{
|
||||
flex-shrink:0
|
||||
}
|
||||
.flex-md-nowrap{
|
||||
flex-wrap:nowrap
|
||||
}
|
||||
.flex-md-wrap{
|
||||
flex-wrap:wrap
|
||||
}
|
||||
.flex-md-wrap-reverse{
|
||||
flex-wrap:wrap-reverse
|
||||
}
|
||||
}
|
||||
|
||||
.overflow-visible{
|
||||
overflow:visible
|
||||
}
|
||||
.overflow-hidden{
|
||||
overflow:hidden
|
||||
}
|
||||
.perspective{
|
||||
perspective:500px;
|
||||
backface-visibility:hidden
|
||||
}
|
||||
.perspective-1000{
|
||||
perspective:1000px;
|
||||
backface-visibility:hidden
|
||||
}
|
||||
.perspective-1500{
|
||||
perspective:1500px;
|
||||
backface-visibility:hidden
|
||||
}
|
||||
.m-0{
|
||||
margin:0 !important
|
||||
}
|
||||
.m-1{
|
||||
margin:.25rem !important
|
||||
}
|
||||
.m-2{
|
||||
margin:.5rem !important
|
||||
}
|
||||
.m-3{
|
||||
margin:1rem !important
|
||||
}
|
||||
.m-4{
|
||||
margin:1.5rem !important
|
||||
}
|
||||
.m-5{
|
||||
margin:3rem !important
|
||||
}
|
||||
.m-auto{
|
||||
margin:auto !important
|
||||
}
|
||||
.mx-0{
|
||||
margin-right:0 !important;
|
||||
margin-left:0 !important
|
||||
}
|
||||
.mx-1{
|
||||
margin-right:.25rem !important;
|
||||
margin-left:.25rem !important
|
||||
}
|
||||
.mx-2{
|
||||
margin-right:.5rem !important;
|
||||
margin-left:.5rem !important
|
||||
}
|
||||
.mx-3{
|
||||
margin-right:1rem !important;
|
||||
margin-left:1rem !important
|
||||
}
|
||||
.mx-4{
|
||||
margin-right:1.5rem !important;
|
||||
margin-left:1.5rem !important
|
||||
}
|
||||
.mx-5{
|
||||
margin-right:3rem !important;
|
||||
margin-left:3rem !important
|
||||
}
|
||||
.mx-auto{
|
||||
margin-right:auto !important;
|
||||
margin-left:auto !important
|
||||
}
|
||||
.my-0{
|
||||
margin-top:0 !important;
|
||||
margin-bottom:0 !important
|
||||
}
|
||||
.my-1{
|
||||
margin-top:.25rem !important;
|
||||
margin-bottom:.25rem !important
|
||||
}
|
||||
.my-2{
|
||||
margin-top:.5rem !important;
|
||||
margin-bottom:.5rem !important
|
||||
}
|
||||
.my-3{
|
||||
margin-top:1rem !important;
|
||||
margin-bottom:1rem !important
|
||||
}
|
||||
.my-4{
|
||||
margin-top:1.5rem !important;
|
||||
margin-bottom:1.5rem !important
|
||||
}
|
||||
.my-5{
|
||||
margin-top:3rem !important;
|
||||
margin-bottom:3rem !important
|
||||
}
|
||||
.my-auto{
|
||||
margin-top:auto !important;
|
||||
margin-bottom:auto !important
|
||||
}
|
||||
.mt-0{
|
||||
margin-top:0 !important
|
||||
}
|
||||
.mt-1{
|
||||
margin-top:.25rem !important
|
||||
}
|
||||
.mt-2{
|
||||
margin-top:.5rem !important
|
||||
}
|
||||
.mt-3{
|
||||
margin-top:1rem !important
|
||||
}
|
||||
.mt-4{
|
||||
margin-top:1.5rem !important
|
||||
}
|
||||
.mt-5{
|
||||
margin-top:3rem !important
|
||||
}
|
||||
.mt-auto{
|
||||
margin-top:auto !important
|
||||
}
|
||||
.mr-0{
|
||||
margin-right:0 !important
|
||||
}
|
||||
.mr-1{
|
||||
margin-right:.25rem !important
|
||||
}
|
||||
.mr-2{
|
||||
margin-right:.5rem !important
|
||||
}
|
||||
.mr-3{
|
||||
margin-right:1rem !important
|
||||
}
|
||||
.mr-4{
|
||||
margin-right:1.5rem !important
|
||||
}
|
||||
.mr-5{
|
||||
margin-right:3rem !important
|
||||
}
|
||||
.mr-auto{
|
||||
margin-right:auto !important
|
||||
}
|
||||
.mb-0{
|
||||
margin-bottom:0 !important
|
||||
}
|
||||
.mb-1{
|
||||
margin-bottom:.25rem !important
|
||||
}
|
||||
.mb-2{
|
||||
margin-bottom:.5rem !important
|
||||
}
|
||||
.mb-3{
|
||||
margin-bottom:1rem !important
|
||||
}
|
||||
.mb-4{
|
||||
margin-bottom:1.5rem !important
|
||||
}
|
||||
.mb-5{
|
||||
margin-bottom:3rem !important
|
||||
}
|
||||
.mb-auto{
|
||||
margin-bottom:auto !important
|
||||
}
|
||||
.ml-0{
|
||||
margin-left:0 !important
|
||||
}
|
||||
.ml-1{
|
||||
margin-left:.25rem !important
|
||||
}
|
||||
.ml-2{
|
||||
margin-left:.5rem !important
|
||||
}
|
||||
.ml-3{
|
||||
margin-left:1rem !important
|
||||
}
|
||||
.ml-4{
|
||||
margin-left:1.5rem !important
|
||||
}
|
||||
.ml-5{
|
||||
margin-left:3rem !important
|
||||
}
|
||||
.ml-auto{
|
||||
margin-left:auto !important
|
||||
}
|
||||
.p-0{
|
||||
padding:0 !important
|
||||
}
|
||||
.p-1{
|
||||
padding:.25rem !important
|
||||
}
|
||||
.p-2{
|
||||
padding:.5rem !important
|
||||
}
|
||||
.p-3{
|
||||
padding:1rem !important
|
||||
}
|
||||
.p-4{
|
||||
padding:1.5rem !important
|
||||
}
|
||||
.p-5{
|
||||
padding:3rem !important
|
||||
}
|
||||
.px-0{
|
||||
padding-right:0 !important;
|
||||
padding-left:0 !important
|
||||
}
|
||||
.px-1{
|
||||
padding-right:.25rem !important;
|
||||
padding-left:.25rem !important
|
||||
}
|
||||
.px-2{
|
||||
padding-right:.5rem !important;
|
||||
padding-left:.5rem !important
|
||||
}
|
||||
.px-3{
|
||||
padding-right:1rem !important;
|
||||
padding-left:1rem !important
|
||||
}
|
||||
.px-4{
|
||||
padding-right:1.5rem !important;
|
||||
padding-left:1.5rem !important
|
||||
}
|
||||
.px-5{
|
||||
padding-right:3rem !important;
|
||||
padding-left:3rem !important
|
||||
}
|
||||
.py-0{
|
||||
padding-top:0 !important;
|
||||
padding-bottom:0 !important
|
||||
}
|
||||
.py-1{
|
||||
padding-top:.25rem !important;
|
||||
padding-bottom:.25rem !important
|
||||
}
|
||||
.py-2{
|
||||
padding-top:.5rem !important;
|
||||
padding-bottom:.5rem !important
|
||||
}
|
||||
.py-3{
|
||||
padding-top:1rem !important;
|
||||
padding-bottom:1rem !important
|
||||
}
|
||||
.py-4{
|
||||
padding-top:1.5rem !important;
|
||||
padding-bottom:1.5rem !important
|
||||
}
|
||||
.py-5{
|
||||
padding-top:3rem !important;
|
||||
padding-bottom:3rem !important
|
||||
}
|
||||
.pt-0{
|
||||
padding-top:0 !important
|
||||
}
|
||||
.pt-1{
|
||||
padding-top:.25rem !important
|
||||
}
|
||||
.pt-2{
|
||||
padding-top:.5rem !important
|
||||
}
|
||||
.pt-3{
|
||||
padding-top:1rem !important
|
||||
}
|
||||
.pt-4{
|
||||
padding-top:1.5rem !important
|
||||
}
|
||||
.pt-5{
|
||||
padding-top:3rem !important
|
||||
}
|
||||
.pr-0{
|
||||
padding-right:0 !important
|
||||
}
|
||||
.pr-1{
|
||||
padding-right:.25rem !important
|
||||
}
|
||||
.pr-2{
|
||||
padding-right:.5rem !important
|
||||
}
|
||||
.pr-3{
|
||||
padding-right:1rem !important
|
||||
}
|
||||
.pr-4{
|
||||
padding-right:1.5rem !important
|
||||
}
|
||||
.pr-5{
|
||||
padding-right:3rem !important
|
||||
}
|
||||
.pb-0{
|
||||
padding-bottom:0 !important
|
||||
}
|
||||
.pb-1{
|
||||
padding-bottom:.25rem !important
|
||||
}
|
||||
.pb-2{
|
||||
padding-bottom:.5rem !important
|
||||
}
|
||||
.pb-3{
|
||||
padding-bottom:1rem !important
|
||||
}
|
||||
.pb-4{
|
||||
padding-bottom:1.5rem !important
|
||||
}
|
||||
.pb-5{
|
||||
padding-bottom:3rem !important
|
||||
}
|
||||
.pl-0{
|
||||
padding-left:0 !important
|
||||
}
|
||||
.pl-1{
|
||||
padding-left:.25rem !important
|
||||
}
|
||||
.pl-2{
|
||||
padding-left:.5rem !important
|
||||
}
|
||||
.pl-3{
|
||||
padding-left:1rem !important
|
||||
}
|
||||
.pl-4{
|
||||
padding-left:1.5rem !important
|
||||
}
|
||||
.pl-5{
|
||||
padding-left:3rem !important
|
||||
}
|
||||
.vertical-align-top{
|
||||
vertical-align:top
|
||||
}
|
||||
.vertical-align-middle{
|
||||
vertical-align:middle
|
||||
}
|
||||
.vertical-align-bottom{
|
||||
vertical-align:bottom
|
||||
}
|
||||
.vertical-align-baseline{
|
||||
vertical-align:baseline
|
||||
}
|
||||
.vertical-align-text-top{
|
||||
vertical-align:text-top
|
||||
}
|
||||
.vertical-align-text-bottom{
|
||||
vertical-align:text-bottom
|
||||
}
|
||||
@media(min-width: 768px){
|
||||
.vertical-align-md-top{
|
||||
vertical-align:top
|
||||
}
|
||||
.vertical-align-md-middle{
|
||||
vertical-align:middle
|
||||
}
|
||||
.vertical-align-md-bottom{
|
||||
vertical-align:bottom
|
||||
}
|
||||
.vertical-align-md-baseline{
|
||||
vertical-align:baseline
|
||||
}
|
||||
.vertical-align-md-text-top{
|
||||
vertical-align:text-top
|
||||
}
|
||||
.vertical-align-md-text-bottom{
|
||||
vertical-align:text-bottom
|
||||
}
|
||||
}
|
||||
.b-position-center-top{
|
||||
background-position:center top !important
|
||||
}
|
||||
.b-position-center{
|
||||
background-position:center center !important
|
||||
}
|
||||
.b-position-center-bottom{
|
||||
background-position:center bottom !important
|
||||
}
|
||||
.b-position-left-top{
|
||||
background-position:left top !important
|
||||
}
|
||||
.b-position-left-center{
|
||||
background-position:left center !important
|
||||
}
|
||||
.b-position-left-bottom{
|
||||
background-position:left bottom !important
|
||||
}
|
||||
.b-position-right-top{
|
||||
background-position:right top !important
|
||||
}
|
||||
.b-position-right-center{
|
||||
background-position:right center !important
|
||||
}
|
||||
.b-position-right-bottom{
|
||||
background-position:right bottom !important
|
||||
}
|
||||
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){
|
||||
.h-20vh{
|
||||
height:216px !important
|
||||
}
|
||||
.h-25vh{
|
||||
height:270px !important
|
||||
}
|
||||
.h-33vh{
|
||||
height:359.964px !important
|
||||
}
|
||||
.h-50vh{
|
||||
height:540px !important
|
||||
}
|
||||
.h-66vh{
|
||||
height:720.036px !important
|
||||
}
|
||||
.h-75vh{
|
||||
height:810px !important
|
||||
}
|
||||
.h-80vh{
|
||||
height:864px !important
|
||||
}
|
||||
.h-100{
|
||||
height:100% !important
|
||||
}
|
||||
.h-auto{
|
||||
height:auto !important
|
||||
}
|
||||
}
|
||||
@media screen and (-ms-high-contrast: active)and (min-width: 768px),(-ms-high-contrast: none)and (min-width: 768px){
|
||||
.h-md-20vh{
|
||||
height:216px !important
|
||||
}
|
||||
.h-md-25vh{
|
||||
height:270px !important
|
||||
}
|
||||
.h-md-33vh{
|
||||
height:359.964px !important
|
||||
}
|
||||
.h-md-50vh{
|
||||
height:540px !important
|
||||
}
|
||||
.h-md-66vh{
|
||||
height:720.036px !important
|
||||
}
|
||||
.h-md-75vh{
|
||||
height:810px !important
|
||||
}
|
||||
.h-md-80vh{
|
||||
height:864px !important
|
||||
}
|
||||
.h-md-100{
|
||||
height:100% !important
|
||||
}
|
||||
.h-md-auto{
|
||||
height:auto !important
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,210 +1,305 @@
|
|||
/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
*,*::before,*::after{
|
||||
box-sizing:border-box
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
body{
|
||||
margin:0;
|
||||
font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
|
||||
font-size:1rem;
|
||||
font-weight:400;
|
||||
line-height:1.5;
|
||||
color:#212529;
|
||||
background-color:#fff;
|
||||
-webkit-text-size-adjust:100%;
|
||||
-webkit-tap-highlight-color:rgba(0,0,0,0)
|
||||
}
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
main,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
[tabindex="-1"]:focus:not(:focus-visible){
|
||||
outline:0 !important
|
||||
}
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
hr{
|
||||
margin:1rem 0;
|
||||
color:inherit;
|
||||
background-color:currentColor;
|
||||
border:0;
|
||||
opacity:.25
|
||||
}
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
hr:not([size]){
|
||||
height:1px
|
||||
}
|
||||
[hidden],
|
||||
template {
|
||||
display: none;
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
margin-top:0;
|
||||
font-weight:500;
|
||||
line-height:1.2
|
||||
}
|
||||
a {
|
||||
background: transparent;
|
||||
h1{
|
||||
font-size:calc(1.375rem + 1.5vw)
|
||||
}
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
@media(min-width: 1200px){
|
||||
h1{
|
||||
font-size:2.5rem
|
||||
}
|
||||
}
|
||||
abbr[title] {
|
||||
border-bottom: 1px dotted;
|
||||
h2{
|
||||
font-size:calc(1.325rem + 0.9vw)
|
||||
}
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
@media(min-width: 1200px){
|
||||
h2{
|
||||
font-size:2rem
|
||||
}
|
||||
}
|
||||
dfn {
|
||||
font-style: italic;
|
||||
h3{
|
||||
font-size:calc(1.3rem + 0.6vw)
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
@media(min-width: 1200px){
|
||||
h3{
|
||||
font-size:1.75rem
|
||||
}
|
||||
}
|
||||
mark {
|
||||
background: #ff0;
|
||||
color: #000;
|
||||
h4{
|
||||
font-size:calc(1.275rem + 0.3vw)
|
||||
}
|
||||
small {
|
||||
font-size: 80%;
|
||||
@media(min-width: 1200px){
|
||||
h4{
|
||||
font-size:1.5rem
|
||||
}
|
||||
}
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
h5{
|
||||
font-size:1.25rem
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
h6{
|
||||
font-size:1rem
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
p{
|
||||
margin-top:0;
|
||||
margin-bottom:1rem
|
||||
}
|
||||
img {
|
||||
border: 0;
|
||||
abbr[title],abbr[data-original-title]{
|
||||
text-decoration:underline;
|
||||
-webkit-text-decoration:underline dotted;
|
||||
text-decoration:underline dotted;
|
||||
cursor:help;
|
||||
-webkit-text-decoration-skip-ink:none;
|
||||
text-decoration-skip-ink:none
|
||||
}
|
||||
svg:not(:root) {
|
||||
/*overflow: hidden;*/
|
||||
overflow: visible;
|
||||
address{
|
||||
margin-bottom:1rem;
|
||||
font-style:normal;
|
||||
line-height:inherit
|
||||
}
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
ol,ul{
|
||||
padding-left:2rem
|
||||
}
|
||||
hr {
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
ol,ul,dl{
|
||||
margin-top:0;
|
||||
margin-bottom:1rem
|
||||
}
|
||||
pre {
|
||||
overflow: auto;
|
||||
ol ol,ul ul,ol ul,ul ol{
|
||||
margin-bottom:0
|
||||
}
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
dt{
|
||||
font-weight:700
|
||||
}
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
dd{
|
||||
margin-bottom:.5rem;
|
||||
margin-left:0
|
||||
}
|
||||
button {
|
||||
overflow: visible;
|
||||
blockquote{
|
||||
margin:0 0 1rem
|
||||
}
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
b,strong{
|
||||
font-weight:bolder
|
||||
}
|
||||
button,
|
||||
html input[type="button"],
|
||||
input[type="reset"],
|
||||
input[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
cursor: pointer;
|
||||
small{
|
||||
font-size:.875em
|
||||
}
|
||||
button[disabled],
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
mark{
|
||||
padding:.2em;
|
||||
background-color:#fcf8e3
|
||||
}
|
||||
button::-moz-focus-inner,
|
||||
input::-moz-focus-inner {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
sub,sup{
|
||||
position:relative;
|
||||
font-size:.75em;
|
||||
line-height:0;
|
||||
vertical-align:baseline
|
||||
}
|
||||
input {
|
||||
line-height: normal;
|
||||
sub{
|
||||
bottom:-0.25em
|
||||
}
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
sup{
|
||||
top:-0.5em
|
||||
}
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
a{
|
||||
color:#0d6efd;
|
||||
text-decoration:underline
|
||||
}
|
||||
input[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
a:hover{
|
||||
color:#024dbc
|
||||
}
|
||||
input[type="search"]::-webkit-search-cancel-button,
|
||||
input[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
a:not([href]):not([class]),a:not([href]):not([class]):hover{
|
||||
color:inherit;
|
||||
text-decoration:none
|
||||
}
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
pre,code,kbd,samp{
|
||||
font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
|
||||
font-size:1em
|
||||
}
|
||||
legend {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
pre{
|
||||
display:block;
|
||||
margin-top:0;
|
||||
margin-bottom:1rem;
|
||||
overflow:auto;
|
||||
font-size:.875em;
|
||||
-ms-overflow-style:scrollbar
|
||||
}
|
||||
textarea {
|
||||
overflow: auto;
|
||||
pre code{
|
||||
font-size:inherit;
|
||||
color:inherit;
|
||||
word-break:normal
|
||||
}
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
code{
|
||||
font-size:.875em;
|
||||
color:#d63384;
|
||||
word-wrap:break-word
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
a>code{
|
||||
color:inherit
|
||||
}
|
||||
td,
|
||||
th {
|
||||
padding: 0;
|
||||
kbd{
|
||||
padding:.2rem .4rem;
|
||||
font-size:.875em;
|
||||
color:#fff;
|
||||
background-color:#212529;
|
||||
border-radius:.2rem
|
||||
}
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
kbd kbd{
|
||||
padding:0;
|
||||
font-size:1em;
|
||||
font-weight:700
|
||||
}
|
||||
*:before,
|
||||
*:after {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
figure{
|
||||
margin:0 0 1rem
|
||||
}
|
||||
html {
|
||||
font-size: 10px;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
img,svg{
|
||||
vertical-align:middle
|
||||
}
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: inherit;
|
||||
table{
|
||||
caption-side:bottom;
|
||||
border-collapse:collapse
|
||||
}
|
||||
figure {
|
||||
margin: 0;
|
||||
caption{
|
||||
padding-top:.5rem;
|
||||
padding-bottom:.5rem;
|
||||
color:#6c757d;
|
||||
text-align:left
|
||||
}
|
||||
img {
|
||||
/*vertical-align: middle;*/
|
||||
th{
|
||||
text-align:inherit;
|
||||
text-align:-webkit-match-parent
|
||||
}
|
||||
thead,tbody,tfoot,tr,td,th{
|
||||
border-color:inherit;
|
||||
border-style:solid;
|
||||
border-width:0
|
||||
}
|
||||
label{
|
||||
display:inline-block
|
||||
}
|
||||
button{
|
||||
border-radius:0
|
||||
}
|
||||
button:focus{
|
||||
outline:1px dotted;
|
||||
outline:5px auto -webkit-focus-ring-color
|
||||
}
|
||||
input,button,select,optgroup,textarea{
|
||||
margin:0;
|
||||
font-family:inherit;
|
||||
font-size:inherit;
|
||||
line-height:inherit
|
||||
}
|
||||
button,input{
|
||||
overflow:visible
|
||||
}
|
||||
button,select{
|
||||
text-transform:none
|
||||
}
|
||||
[role=button]{
|
||||
cursor:pointer
|
||||
}
|
||||
select{
|
||||
word-wrap:normal
|
||||
}
|
||||
[list]::-webkit-calendar-picker-indicator{
|
||||
display:none
|
||||
}
|
||||
button,[type=button],[type=reset],[type=submit]{
|
||||
-webkit-appearance:button
|
||||
}
|
||||
button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){
|
||||
cursor:pointer
|
||||
}
|
||||
::-moz-focus-inner{
|
||||
padding:0;
|
||||
border-style:none
|
||||
}
|
||||
textarea{
|
||||
resize:vertical
|
||||
}
|
||||
fieldset{
|
||||
min-width:0;
|
||||
padding:0;
|
||||
margin:0;
|
||||
border:0
|
||||
}
|
||||
legend{
|
||||
float:left;
|
||||
width:100%;
|
||||
padding:0;
|
||||
margin-bottom:.5rem;
|
||||
font-size:calc(1.275rem + 0.3vw);
|
||||
line-height:inherit;
|
||||
white-space:normal
|
||||
}
|
||||
@media(min-width: 1200px){
|
||||
legend{
|
||||
font-size:1.5rem
|
||||
}
|
||||
}
|
||||
legend+*{
|
||||
clear:left
|
||||
}
|
||||
::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-text,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-year-field{
|
||||
padding:0
|
||||
}
|
||||
::-webkit-inner-spin-button{
|
||||
height:auto
|
||||
}
|
||||
[type=search]{
|
||||
outline-offset:-2px;
|
||||
-webkit-appearance:textfield
|
||||
}
|
||||
::-webkit-search-decoration{
|
||||
-webkit-appearance:none
|
||||
}
|
||||
::-webkit-color-swatch-wrapper{
|
||||
padding:0
|
||||
}
|
||||
::-webkit-file-upload-button{
|
||||
font:inherit;
|
||||
-webkit-appearance:button
|
||||
}
|
||||
output{
|
||||
display:inline-block
|
||||
}
|
||||
iframe{
|
||||
border:0
|
||||
}
|
||||
summary{
|
||||
display:list-item;
|
||||
cursor:pointer
|
||||
}
|
||||
progress{
|
||||
vertical-align:baseline
|
||||
}
|
||||
[hidden]{
|
||||
display:none !important
|
||||
}
|
||||
162
demo/assets/css/spicr-theme.css
Normal file
162
demo/assets/css/spicr-theme.css
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
/* Spicr theme | thednp © 2020 | MIT-License */
|
||||
|
||||
.text-left{
|
||||
text-align:left
|
||||
}
|
||||
.text-center{
|
||||
text-align:center
|
||||
}
|
||||
.text-right{
|
||||
text-align:right
|
||||
}
|
||||
@media(min-width: 768px){
|
||||
.text-md-left{
|
||||
text-align:left
|
||||
}
|
||||
.text-md-center{
|
||||
text-align:center
|
||||
}
|
||||
.text-md-right{
|
||||
text-align:right
|
||||
}
|
||||
}
|
||||
.center-block{
|
||||
display:block;
|
||||
margin-left:auto;
|
||||
margin-right:auto
|
||||
}
|
||||
.float-right{
|
||||
float:right !important
|
||||
}
|
||||
.float-left{
|
||||
float:left !important
|
||||
}
|
||||
.float-none{
|
||||
float:none !important
|
||||
}
|
||||
.font-weight-normal{
|
||||
font-weight:normal
|
||||
}
|
||||
.font-weight-bold{
|
||||
font-weight:bold
|
||||
}
|
||||
|
||||
#SpicrDemo{
|
||||
height:600px
|
||||
}
|
||||
.spicr .lead{
|
||||
margin:0;
|
||||
font-weight:bold;
|
||||
text-transform:uppercase;
|
||||
color:#fff
|
||||
}
|
||||
.overlay{
|
||||
background:rgba(0,0,0,.45);
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
width:100%;
|
||||
height:100%
|
||||
}
|
||||
.spicr-carousel-navigation>*{
|
||||
vertical-align:text-bottom
|
||||
}
|
||||
@media(min-width: 479px){
|
||||
.spicr-control.long-shadows{
|
||||
transition:opacity .3s ease-in
|
||||
}
|
||||
.spicr-control.long-shadows .arrow-prev{
|
||||
margin-left:-280px;
|
||||
padding:0px 5px 0px 250px;
|
||||
transform:translate(-100%)
|
||||
}
|
||||
.spicr-control.long-shadows .arrow-next{
|
||||
margin-right:-280px;
|
||||
padding:0px 250px 0px 5px;
|
||||
transform:translate(100%)
|
||||
}
|
||||
.spicr-control.long-shadows .arrow-prev,.spicr-control.long-shadows .arrow-next{
|
||||
transition:all 1s ease-in
|
||||
}
|
||||
.spicr:hover .spicr-control.long-shadows .arrow-prev,.spicr:hover .spicr-control.long-shadows .arrow-next{
|
||||
transition-duration:.3s;
|
||||
transition-timing-function:ease-out
|
||||
}
|
||||
.spicr-control.long-shadows:focus .arrow-prev,.spicr-control.long-shadows:focus .arrow-next{
|
||||
transform:translate(0%)
|
||||
}
|
||||
.spicr:hover .spicr-control.long-shadows .arrow-prev{
|
||||
transform:translate(0%)
|
||||
}
|
||||
.spicr:hover .spicr-control.long-shadows .arrow-next{
|
||||
transform:translate(0%)
|
||||
}
|
||||
.spicr-control.long-shadows .spicr-icon{
|
||||
width:40px;
|
||||
height:40px
|
||||
}
|
||||
.spicr-control.long-shadows .arrow-next,.spicr-control.long-shadows .arrow-prev{
|
||||
border-radius:40px;
|
||||
margin-top:-20px
|
||||
}
|
||||
.spicr-control.long-shadows:focus .arrow-prev{
|
||||
transform:translate(0%)
|
||||
}
|
||||
.spicr-control.long-shadows:focus .arrow-next{
|
||||
transform:translate(0%)
|
||||
}
|
||||
.spicr-control.long-shadows .arrow-prev,.spicr-control.long-shadows .arrow-next{
|
||||
display:block;
|
||||
width:auto;
|
||||
height:auto;
|
||||
background-color:#000;
|
||||
background-color:rgba(0,0,0,.3)
|
||||
}
|
||||
}
|
||||
.spicr-carousel h4{
|
||||
margin-top:0
|
||||
}
|
||||
.spicr-slider{
|
||||
font-size:calc(0.5rem + 1.5vw);
|
||||
line-height:calc(0.6rem + 1.5vw)
|
||||
}
|
||||
.spicr-slider h1{
|
||||
font-size:calc(1.375rem + 1.5vw);
|
||||
letter-spacing:-1px;
|
||||
margin:0
|
||||
}
|
||||
.spicr-slider h2{
|
||||
font-size:calc(1.375rem + 0.9vw);
|
||||
letter-spacing:0;
|
||||
margin:0
|
||||
}
|
||||
.features-carousel .spicr-pages{
|
||||
top:.5rem
|
||||
}
|
||||
.features-carousel .spicr-pages li{
|
||||
line-height:1.5rem;
|
||||
padding:.5rem 1rem
|
||||
}
|
||||
@media(min-width: 768px){
|
||||
.featurette-heading span{
|
||||
font-size:24px;
|
||||
line-height:1;
|
||||
letter-spacing:-1px
|
||||
}
|
||||
.spicr-slider{
|
||||
font-size:1rem;
|
||||
line-height:1.8rem
|
||||
}
|
||||
.spicr-slider h1{
|
||||
font-size:42px;
|
||||
line-height:1;
|
||||
letter-spacing:-2px;
|
||||
margin:0 0 1.5rem
|
||||
}
|
||||
.spicr-slider h2{
|
||||
font-size:36px;
|
||||
line-height:1;
|
||||
letter-spacing:-1px;
|
||||
margin:0 0 1.5rem
|
||||
}
|
||||
}
|
||||
|
|
@ -1,68 +1,14 @@
|
|||
var frontpage = document.getElementsByClassName('frontpage'),
|
||||
rectangle = document.getElementById('rectangle'),
|
||||
star = document.getElementById('star'),
|
||||
hexagon = document.getElementById('hexagon'),
|
||||
cat = document.getElementById('cat'),
|
||||
circle = document.getElementById('circle'),
|
||||
head = document.getElementById('head'),
|
||||
winkyFace = document.getElementById('winky-face'),
|
||||
dropInitial = document.getElementById('drop-initial'),
|
||||
drop = document.getElementById('drop'),
|
||||
mouth = document.getElementById('mouth'),
|
||||
eyeLeft = document.getElementById('eye-left'),
|
||||
eyeRight = document.getElementById('eye-right'),
|
||||
heading = document.querySelector('h2.nomargin'),
|
||||
plead = document.querySelector('p.lead')
|
||||
var SpicrMainDemo = document.getElementById('SpicrDemo');
|
||||
|
||||
var t0 = KUTE.to(rectangle,{translateX:0, opacity:1 }, { easing:'easingCubicOut'}),
|
||||
t1 = KUTE.fromTo(rectangle,{path:rectangle, attr: {fill: rectangle.getAttribute('fill') }}, {path:star, attr: {fill: star.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
|
||||
t2 = KUTE.fromTo(rectangle,{path:star, rotateZ: 0, attr: {fill: rectangle.getAttribute('fill') }}, {path:hexagon, rotateZ: 360, attr: {fill: hexagon.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
|
||||
t3 = KUTE.fromTo(rectangle,{path:hexagon, attr: {fill: rectangle.getAttribute('fill') }}, {path:cat, attr: {fill: cat.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
|
||||
t4 = KUTE.fromTo(rectangle,{path:cat, attr: {fill: rectangle.getAttribute('fill') }}, {path:circle, attr: {fill: circle.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
|
||||
t5 = KUTE.fromTo(rectangle,{path:circle, attr: {fill: rectangle.getAttribute('fill') }}, {path:head, attr: {fill: head.getAttribute('fill') }}, {morphPrecision: 5, easing:'easingCubicOut'}),
|
||||
t6 = KUTE.fromTo(dropInitial,{path: dropInitial,opacity:1},{path: drop,opacity:1}, {morphPrecision: 5, easing:'easingCubicOut', onComplete: mergeLogo}),
|
||||
t7 = KUTE.to(mouth,{opacity:1}),
|
||||
t8 = KUTE.to(eyeLeft,{opacity:1}),
|
||||
t9 = KUTE.to(eyeRight,{opacity:1}),
|
||||
t10 = KUTE.fromTo(winkyFace,{opacity:0,translateY:50},{opacity:1,translateY:0},{easing:'easingCubicOut'}),
|
||||
t11 = KUTE.to(eyeLeft,{path:'#eye-left-closed'}, {morphPrecision: 5}, {easing:'easingCubicOut'}),
|
||||
t12 = KUTE.to(eyeRight,{path:'#eye-right-closed'}, {morphPrecision: 5}, {easing:'easingCubicOut'}),
|
||||
t13 = KUTE.to(mouth,{path:'#mouth-happy'}, {morphPrecision: 5, easing:'easingCubicOut', duration:3500}),
|
||||
loop1 = KUTE.to(rectangle,{ attr: {fill: '#52aef7' }}, {duration: 1500}),
|
||||
loop2 = KUTE.to(rectangle,{ attr: {fill: '#f98f6d' }}, {duration: 1500}),
|
||||
loop3 = KUTE.to(rectangle,{ attr: {fill: '#f95054' }}, {duration: 1500}),
|
||||
loop4 = KUTE.to(rectangle,{ attr: {fill: '#ffd626' }}, {duration: 1500}),
|
||||
loop5 = KUTE.to(rectangle,{ attr: {fill: '#d661ea' }}, {duration: 1500}),
|
||||
showText = KUTE.to(heading,{opacity: 1},{duration: 3000}),
|
||||
showText1 = KUTE.fromTo(heading,{ text: ''},{ text:heading.getAttribute('data-text')},{duration: 1500}),
|
||||
showText2 = KUTE.fromTo(plead,{ text:''}, { text:plead.getAttribute('data-text')},{duration: 3500, onComplete: textComplete}),
|
||||
showBTNS = KUTE.allFromTo('.btns .btn',{opacity: 0, translate3d: [150,50,0]}, {opacity: 1, translate3d: [0,0,0]},{duration: 500, offset: 250, delay: 500, easing: 'easingBackOut'})
|
||||
|
||||
function mergeLogo(){
|
||||
rectangle.setAttribute('d', rectangle.getAttribute('d')+ drop.getAttribute('d') )
|
||||
dropInitial.style.opacity = 0
|
||||
}
|
||||
function textComplete(){
|
||||
heading.removeAttribute('data-text')
|
||||
plead.removeAttribute('data-text')
|
||||
showBTNS.start()
|
||||
function initMainSpicr(){
|
||||
new Spicr(SpicrMainDemo);
|
||||
}
|
||||
|
||||
t0.chain(t1)
|
||||
t1.chain(t2)
|
||||
t2.chain(t3)
|
||||
t3.chain(t4)
|
||||
t4.chain([t5,t6])
|
||||
t6.chain([t7,t8,t9])
|
||||
t9.chain([t10,t11,t12,t13])
|
||||
function loadCarouselMedia(){
|
||||
new dll(SpicrMainDemo,initMainSpicr)
|
||||
}
|
||||
|
||||
t8.chain([loop1,showText,showText1])
|
||||
showText1.chain(showText2)
|
||||
|
||||
loop1.chain(loop2)
|
||||
loop2.chain(loop3)
|
||||
loop3.chain(loop4)
|
||||
loop4.chain(loop5)
|
||||
loop5.chain(loop1)
|
||||
|
||||
t0.start()
|
||||
document.addEventListener('DOMContentLoaded', function loadWrapper(){
|
||||
loadCarouselMedia();
|
||||
document.removeEventListener('DOMContentLoaded', loadWrapper, false)
|
||||
}, false);
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
198
demo/index.html
198
demo/index.html
|
|
@ -16,8 +16,12 @@
|
|||
<!-- RESET CSS -->
|
||||
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
|
||||
|
||||
<!-- Spicr CSS -->
|
||||
<link type="text/css" href="https://cdn.jsdelivr.net/npm/spicr/dist/css/spicr.min.css" rel="stylesheet">
|
||||
|
||||
<!-- DEMO KUTE CSS -->
|
||||
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
|
||||
<link type="text/css" href="./assets/css/spicr-theme.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
|
|
@ -28,7 +32,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1 class="active">KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
@ -71,78 +75,136 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-wrap">
|
||||
<div class="columns welcome">
|
||||
<div class="col2">
|
||||
<div class="frontpage">
|
||||
<h2 class="nomargin" data-text="Welcome to KUTE.js" style="opacity: 0;">Welcome to KUTE.js!</h2>
|
||||
<p class="lead" data-text="The modern, completely reworked and fully featured animation engine for the modern web."></p>
|
||||
<p class="btns">
|
||||
<a class="btn btn-orange" style="opacity: 0;" href="https://github.com/thednp/kute.js/archive/master.zip">Download</a>
|
||||
<a class="btn btn-red" style="opacity: 0;" href="https://github.com/thednp/kute.js">Github</a>
|
||||
<a class="btn btn-pink" style="opacity: 0;" href="http://www.jsdelivr.com/#!kute.js">CDN 1</a>
|
||||
<a class="btn btn-olive" style="opacity: 0;" href="https://cdnjs.com/libraries/kute.js">CDN 2</a>
|
||||
<a class="btn btn-indigo" style="opacity: 0;" href="https://npmjs.com/kute.js">NPM</a>
|
||||
|
||||
</p>
|
||||
<div id="SpicrDemo" class="spicr spicr-slider" data-interval="false" >
|
||||
<div class="spicr-inner">
|
||||
<div class="item">
|
||||
<div class="item-bg spicr-layer bg-blue" data-translate="x:-100%" data-duration="700" data-easing="easingCubicInOut" data-src="https://picsum.photos/id/992/1680/720.jpg">
|
||||
<div class="overlay"></div>
|
||||
</div>
|
||||
<div class="content-wrap h-100"> <!-- IE9 fix -->
|
||||
<div class="d-flex align-items-center h-100">
|
||||
<div class="flex-column w-md-50 text-center" style="margin: 0 auto">
|
||||
<div class="spicr-layer" data-translate="x:-250" data-duration="600" data-easing="easingCubicInOut">
|
||||
<h1>Welcome to KUTE.js!</h1>
|
||||
</div>
|
||||
<div class="spicr-layer" data-translate="x:-250" data-delay="350" data-duration="700" data-easing="easingCubicInOut">
|
||||
<p class="lead condensed">The JavaScript animation engine of the future</p>
|
||||
</div>
|
||||
<div class="spicr-layer" data-translate="x:-250" data-delay="450" data-duration="800" data-easing="easingCubicInOut">
|
||||
<p>The magic behind <a class="text-light font-weight-bold" href="https://thednp.github.io/spicr/">Spicr</a>, the result of hard work,
|
||||
the bridge between old and new, the dream and inspiration.</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="btns">
|
||||
<a class="btn btn-red spicr-layer" href="https://github.com/thednp/kute.js/archive/master.zip" data-translate="x:-250" data-delay="750" data-duration="900" data-easing="easingCircularInOut">Download</a>
|
||||
<a class="btn btn-olive spicr-layer" href="https://thednp.github.io/kute.js" data-translate="x:-250" data-delay="650" data-duration="800" data-easing="easingCircularInOut">Github</a>
|
||||
<a class="btn btn-indigo spicr-layer" href="https://www.npmjs.com/package/kute.js" data-translate="x:-250" data-delay="550" data-duration="700" data-easing="easingCircularInOut">NPM</a>
|
||||
<a class="btn btn-blue spicr-layer" href="https://www.jsdelivr.com/package/npm/kute.js" data-translate="x:-250" data-delay="450" data-duration="600" data-easing="easingCircularInOut">CDN</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col2">
|
||||
<svg class="kute-logo" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" width="100%">
|
||||
<path id="rectangle" style="transform: translateX(-250px); opacity: 0;" fill="#e91b1f" d="M559,597.4H302.1H43.6c-21,0-38-17-38-38V408.8V223.6V44c0-21,17-38,38-38h105.6H300h160.3H559
|
||||
c21,0,38,17,38,38v184v331.4C597,580.4,580,597.4,559,597.4z"/>
|
||||
<path id="star" visibility="hidden" fill="#FF5722" d="M302.1,17.9c16,29,81.4,147.7,98.2,178.2c31.1,6,62.3,11.9,93.4,17.9c35.5,6.8,71,13.6,106.5,20.4
|
||||
c-46.4,49.5-92.7,99-139.1,148.5c1.1,8.5,6.7,53.4,12.4,99.1c5.7,45.3,11.4,91.4,12.9,102.9c-36-16.9-158.8-74.5-184.2-86.4
|
||||
c-28.5,13.4-151.3,71-184.2,86.4c0.4-3.2,13.3-106.6,13.3-106.6s10.1-81,11.9-95.3C96.8,333.5,50.4,284,4,234.5
|
||||
c34.4-6.6,68.8-13.2,103.3-19.8c32.2-6.2,64.4-12.3,96.5-18.5C221,165.1,286.5,46.2,302.1,17.9z"/>
|
||||
<path id="circle" visibility="hidden" fill="#9C27B0" d="M157,367a210,210 0 1,0 420,0a210,210 0 1,0 -420,0z"/>
|
||||
<path id="cat" visibility="hidden" fill="#ffd626" d="M519.8,118.6C518.4,90.8,483.3,78,460,82.5c-51.1,9.7-59.4,67.2-48.3,109.4c5.4,20.5,15.1,42.7,13.6,64.3
|
||||
c-1.3,19.5-7.8,39.2-20.7,54.1c1-0.1,2.2-0.3,3.2-0.4c-1,0.1-2.2,0.3-3.2,0.4c-12.9,2-25.3,7.4-29.6,9.6
|
||||
c-0.9-13.3-1.8-24.5-2.3-31.9c-0.4-10.3-0.8-18.6-1.1-23.9c-1-12.6-15.9-25.3-28.2-33.7c-8.8-6-16.5-9.8-16.5-9.8
|
||||
c13.8-10.2,19.8-17.6,21.6-23.9c2.3-8,4.3-35.1,4.3-35.1s1.1-6,1.1-15.2c0-11.6-2-22.6-5.7-32.9h0.1c0,0,25.4-45.8,14.7-60.1
|
||||
c-8.9-11.7-46.3,16.7-46.3,16.7c-16.3-12.6-36.9-20.2-59.1-20.2c-6,0-11.9,0.5-17.7,1.7c0,0-7.4-41.3-27.3-39.7
|
||||
c-19.8,1.7-29.3,72.8-29.3,72.8l0.1,0.1c-8.3,9.9-14.7,21.6-18.4,34.3c0,0-11.2,26.4-10.3,42.7c0.9,16.2,15.9,31.2,25.6,42.3
|
||||
l18.9,19.1c0,0,2.8,3.1,6.9,6.9c-0.4,0.3-3.1,1.5-7,3.8c-11.1,6.4-31.5,20.5-36,41.5c-0.4,1.9-0.8,4-1,6.1
|
||||
c-1.7,12.8-1.4,30.1-0.4,46.6c-5.9-4.1-25.5-15.8-40.3-4.3c-0.6,0.5-1.1,0.9-1.8,1.4c-16.5,13.9-25.4,34.4-25.4,53.8
|
||||
c0,9.7,3.7,29.1,12,50.4c1,2.8,2.3,5.6,3.6,8.4c4.6,10.3,10.2,20.8,17.2,30.6c6.8,9.7,14.8,18.6,24.1,26c0,0-24.2,13.8-33,32.7
|
||||
s-6.6,28.1,3.3,29.7c10.1,1.7,57.1-21.8,57.1-21.8c-0.6,2.9-1.5,6.1-2.6,9.6c-5.7,9.7-12.8,22.2-7.3,31.4c1.8,2.9,4.8,5.6,9.8,7.7
|
||||
c20.8,8.8,41.2,2.3,50.8-8.4c2.9-3.2,4.8-6.6,5.6-10.3c1.1-6.1,1-19.3,0.5-34.3c0,0,39.5,9.9,74.9-4c2.9,21.4,5.5,38.8,6.1,43.2
|
||||
c0.1,0.9,0.4,1.7,0.6,2.4c2,4.5,9.9,17.5,34.8,14.5c12.6-1.5,19.4-7.8,22.8-12.8c1.1-1.7,1.9-3.4,2.2-5.4c0.1-1.1,0.1-2.4-0.1-3.6
|
||||
c-0.8-1.8-1.5-4.1-2.3-6.8c-3.1-8.5-7.7-21.6-10.7-33h0.1c0,0,1.3,0.3,3.4,0.8c11.7,2.8,50.3,11.5,53.1,9.3
|
||||
c3.3-2.4,5.7-10.6,2.6-24.2c-3.8-16.5-38.5-24.7-38.5-24.7s3.7-4.8,9.2-12.5c14.2-19.8,40.4-58.3,46.4-80.4
|
||||
c7.7-27.9,9.3-58.7-4.2-74.9c20.3-37.8,27.5-78.3,15.1-120c-5.4-18-21.7-63.1,0.9-75.9c8.9-5,25.9-8.4,30.1,4.7
|
||||
c0,0-7.8,8.7-9.2,14.4c-1.3,5.9-1.9,16.2,14,18.1C502.4,162.3,521.4,150.6,519.8,118.6z"/>
|
||||
<path id="hexagon" visibility="hidden" fill="#4CAF50" d="M447,45.4H153L6.1,300L153,554.6h294L593.9,300L447,45.4z"/>
|
||||
<path id="head" visibility="hidden" fill="#2196F3" d="M505.1,520.1c-15.5-13-26-49.1-50.6-67.2c-61.6-45-107.4-15-77.4,20.1
|
||||
c14.3,16.8,27.2,13.2,40.5,25.2c20.1,18.6,3.1,40.7-15.5,39.2c-10.4-0.8-16.5-10.4-38.2-17.6c-34.9-11.7-84.2-11.2-164.7-24.4
|
||||
c-109.4-17.8-230.6-111-182-241C62.5,133.5,115.5,62.5,244.8,62.5c170.5,0,213.5,140.7,248.4,210c16.3,32.3,22.7,26.2,36.1,44.8
|
||||
c12.2,17.1,1.5,46.1-22.9,37.9c-53.7-17.8-77.1,27.2-23.2,62.9c14.5,9.7,59.3,15,73.8,24.7C610.8,478.6,553,560.1,505.1,520.1
|
||||
L505.1,520.1z"/>
|
||||
<path id="winky-face" fill="rgba(0,0,0,0.5)" style="opacity:0" d="M347.1,289.3l-13-16.5c-20.1,25.7-15.8,25.2-35.6,0l-13,16.5c-5.1,6.6-14.8-1.3-9.7-7.6
|
||||
c25.2-32.3,19.9-32.8,40.5-6.4c20.4-26,14.8-26.7,40.5,6.4c2,2.8,1.3,6.6-1.5,8.7C352.7,292.1,349.1,291.6,347.1,289.3L347.1,289.3z
|
||||
M118,289.3l-13-16.5c-20.1,25.7-15.8,25.2-35.6,0l-13,16.5c-5.1,6.6-14.8-1.3-9.7-7.6c25.2-32.3,19.9-32.8,40.5-6.4
|
||||
c20.4-26,14.8-26.7,40.5,6.4c2,2.8,1.3,6.6-1.5,8.7C123.6,292.1,120.1,291.6,118,289.3L118,289.3z"/>
|
||||
<path id="drop" visibility="hidden" d="M558.6,365.4c-13,20.4,23.4,44,36.7,23.7C608.2,368.9,571.8,345.3,558.6,365.4z"/>
|
||||
<path id="drop-initial" style="opacity:0" fill="#2196F3" d="M505.2,327.1"/>
|
||||
<path id="mouth-happy" visibility="hidden" d="M251.9,259c-2,26.5-24.2,46.8-50.4,46.8c-26.5,0-48.4-20.4-50.4-46.6c0-2,1.3-3.8,3.3-3.8
|
||||
h93.9C250.4,255.2,251.9,256.9,251.9,259L251.9,259z"/>
|
||||
<path id="mouth" style="opacity:0" fill="#000" d="M173.6,270.5c18,0.4,37.1,0.2,55.9,0c17.3-0.2,17.2,27.3-0.6,27.4c-24.5,0.2-29.4,0.4-54.6,0
|
||||
C158.9,297.8,156.9,270.2,173.6,270.5z"/>
|
||||
<path id="eye-left-closed" visibility="hidden" d="M123.1,221.8c-11.5-9.7-35.1-9.7-46.6,0c-10.9,9.4-25.5-7.1-14.5-16.8c19.9-16.8,55.7-16.8,75.6,0
|
||||
C148.6,214.4,133.8,231.5,123.1,221.8z"/>
|
||||
<path id="eye-right-closed" visibility="hidden" d="M339.7,221.8c-11.5-9.7-35.1-9.7-46.6,0c-10.9,9.4-25.7-7.1-14.5-16.8c19.9-16.8,55.7-16.8,75.6,0
|
||||
C365.4,214.4,350.7,231.2,339.7,221.8z"/>
|
||||
<path id="eye-right" style="opacity:0" fill="#000" d="M316.2,236.1c-31.6,0-48.7-21.4-37.5-31.1c19.9-16.8,55.7-16.8,75.6,0
|
||||
C365.4,214.4,350.9,236.1,316.2,236.1z"/>
|
||||
<path id="eye-left" style="opacity:0" fill="#000" d="M99.4,236.1c-31.6,0-48.7-21.4-37.5-31.1c19.9-16.8,55.7-16.8,75.6,0
|
||||
C148.7,214.4,134.1,236.1,99.4,236.1z"/>
|
||||
</svg>
|
||||
|
||||
<div class="item perspective-1500">
|
||||
<div class="item-bg spicr-layer bg-olive" data-rotate="x:90" data-transform-origin="z:50%v" data-duration="700" data-easing="easingCubicInOut" data-src="https://picsum.photos/id/931/1680/720.jpg">
|
||||
<div class="overlay"></div>
|
||||
</div>
|
||||
<div class="content-wrap h-100"><!-- IE9 fix -->
|
||||
<div class="columns h-100 align-content-center">
|
||||
<div class="col2 h-md-100"><!-- IE9 fix -->
|
||||
<div class="d-flex perspective align-items-end align-items-md-center h-md-100">
|
||||
<div class="spicr-layer" data-translate="y:10%" data-rotate="x:90" data-transform-origin="z:50%" data-duration="800" data-easing="easingCubicInOut">
|
||||
<h1>Forward Looking</h1>
|
||||
<p>The modern JavaScript powering the core functionality, the modular architecture, the solid and complete components are all geared towards the future of web development.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col2 h-md-100">
|
||||
<div class="d-flex perspective align-items-start align-items-md-center h-md-100">
|
||||
<div class="spicr-layer" data-translate="y:10%" data-rotate="x:90" data-transform-origin="z:50%" data-duration="900" data-delay="350" data-easing="easingCubicInOut">
|
||||
<h1>Knowing the Past</h1>
|
||||
<p>While KUTE.js was re-developed to support mainly modern browsers, it also leaves the door open to old browsers with its legacy components, tools and polyfills.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-bg spicr-layer bg-pink" data-translate="y:-100%" data-duration="700" data-easing="easingCubicInOut" data-src="https://picsum.photos/id/668/1680/720.jpg">
|
||||
<div class="overlay"></div>
|
||||
</div>
|
||||
<div class="content-wrap h-100">
|
||||
<div class="columns align-content-center h-100">
|
||||
<div class="col2 h-md-100">
|
||||
<div class="d-flex align-items-start align-items-md-center h-md-100">
|
||||
<div class="w-100 flex-column"> <!-- IE9 fix -->
|
||||
<div class="spicr-layer" data-translate="y:-150" data-duration="800" data-delay="550" data-easing="easingCircularOut">
|
||||
<h1>ECMA Script 2015</h1>
|
||||
</div>
|
||||
<div class="spicr-layer" data-translate="y:-150" data-duration="900" data-delay="650" data-easing="easingCircularOut">
|
||||
<p>Inside the sources you will find fast & modern JavaScript code with solid build tools. Everything and anything can be done with SVGElement,
|
||||
HTML attributes, CSS transform, etc.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col2 h-md-100"> <!-- IE9 fix -->
|
||||
<div class="d-flex align-items-end align-items-md-center h-md-100">
|
||||
<div class="w-100 flex-column"> <!-- IE9 fix -->
|
||||
<div class="spicr-layer" data-translate="y:-150" data-duration="700" data-delay="350" data-easing="easingCircularOut">
|
||||
<h1>Cubic Bezier Easing</h1>
|
||||
</div>
|
||||
<div class="spicr-layer" data-translate="y:-150" data-duration="800" data-delay="450" data-easing="easingCircularOut">
|
||||
<p>While the library includes Robert Penner's <a href="http://robertpenner.com/easing/">easing functions</a>, KUTE.js also includes its own
|
||||
<a href="https://github.com/thednp/CubicBezier">CubicBezier Easing</a> class to provide fast and accurate easing for your animation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item perspective-1500">
|
||||
<div class="item-bg spicr-layer bg-indigo" data-rotate="y:90" data-transform-origin="z:-50%" data-duration="1000" data-easing="easingCubicInOut" data-src="https://picsum.photos/id/581/1680/720.jpg">
|
||||
<div class="overlay"></div>
|
||||
</div>
|
||||
<div class="content-wrap h-100">
|
||||
<div class="d-flex w-md-75 align-items-center text-md-center justify-content-md-center h-100" style="margin: 0 auto">
|
||||
<div class="spicr-layer" data-rotate="y:90" data-transform-origin="z:-50%" data-duration="1200" data-easing="easingCubicInOut">
|
||||
<h1><span>What's not to love about it?</span></h1>
|
||||
<p>Yeah, the open source, modular and fully featured animation engine for the modern web, fully documented and MIT Licensed.</p>
|
||||
<p>Any question? Find answers <a href="https://stackoverflow.com/search?q=kute.js">here</a>, or post them <a href="https://github.com/thednp/kute.js/issues">here</a>!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- pages -->
|
||||
<ol class="spicr-pages d-flex flex-row justify-content-center">
|
||||
<li data-slide-to="0" class=""></li>
|
||||
<li data-slide-to="1"></li>
|
||||
<li data-slide-to="2"></li>
|
||||
<li data-slide-to="3"></li>
|
||||
</ol>
|
||||
<a class="left spicr-control long-shadows" data-slide="prev">
|
||||
<span class="arrow-prev">
|
||||
<svg class="spicr-icon" viewBox="0 0 1024 1024">
|
||||
<path d="M658 686l-60 60-256-256 256-256 60 60-196 196z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
<a class="right spicr-control long-shadows" data-slide="next">
|
||||
<span class="arrow-next">
|
||||
<svg class="spicr-icon" viewBox="0 0 1024 1024">
|
||||
<path d="M366 698l196-196-196-196 60-60 256 256-256 256z"></path>
|
||||
</svg>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="featurettes dark">
|
||||
<div class="featurettes dark mt-0">
|
||||
<div class="content-wrap">
|
||||
<div class="columns">
|
||||
<div class="col3">
|
||||
|
|
@ -221,6 +283,8 @@
|
|||
|
||||
<script src="./src/polyfill.min.js"></script>
|
||||
<script src="./src/kute.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/spicr/dist/js/spicr.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dll.js@1.5.5/dist/dll.min.js"></script>
|
||||
<script src="./assets/js/scripts.js"></script>
|
||||
<script src="./assets/js/home.js"></script>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1 class="active">KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* KUTE.js Base v2.0.10 (http://thednp.github.io/kute.js)
|
||||
* KUTE.js Base v2.0.11 (http://thednp.github.io/kute.js)
|
||||
* Copyright 2015-2020 © thednp
|
||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
*/
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
(global = global || self, global.KUTE = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var version = "2.0.10";
|
||||
var version = "2.0.11";
|
||||
|
||||
var KUTE = {};
|
||||
|
||||
|
|
|
|||
4
demo/src/kute-base.min.js
vendored
4
demo/src/kute-base.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* KUTE.js Extra v2.0.10 (http://thednp.github.io/kute.js)
|
||||
* KUTE.js Extra v2.0.11 (http://thednp.github.io/kute.js)
|
||||
* Copyright 2015-2020 © thednp
|
||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
*/
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
(global = global || self, global.KUTE = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var version = "2.0.10";
|
||||
var version = "2.0.11";
|
||||
|
||||
var KUTE = {};
|
||||
|
||||
|
|
|
|||
4
demo/src/kute-extra.min.js
vendored
4
demo/src/kute-extra.min.js
vendored
File diff suppressed because one or more lines are too long
4
demo/src/kute.min.js
vendored
4
demo/src/kute.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -32,7 +32,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
<div class="content-wrap">
|
||||
<nav class="navbar">
|
||||
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-space">
|
||||
<div class="nav-wrapper d-flex align-items-center justify-content-between">
|
||||
<ul class="nav">
|
||||
<li class="btn-group active"><a href="#" data-function="toggle">Components <span class="caret"></span></a>
|
||||
<ul class="subnav">
|
||||
|
|
|
|||
4
dist/kute.esm.js
vendored
4
dist/kute.esm.js
vendored
|
|
@ -1,9 +1,9 @@
|
|||
/*!
|
||||
* KUTE.js Standard v2.0.10 (http://thednp.github.io/kute.js)
|
||||
* KUTE.js Standard v2.0.11 (http://thednp.github.io/kute.js)
|
||||
* Copyright 2015-2020 © thednp
|
||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
*/
|
||||
var version = "2.0.10";
|
||||
var version = "2.0.11";
|
||||
|
||||
var KUTE = {};
|
||||
|
||||
|
|
|
|||
4
dist/kute.esm.min.js
vendored
4
dist/kute.esm.min.js
vendored
File diff suppressed because one or more lines are too long
4
dist/kute.js
vendored
4
dist/kute.js
vendored
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* KUTE.js Standard v2.0.10 (http://thednp.github.io/kute.js)
|
||||
* KUTE.js Standard v2.0.11 (http://thednp.github.io/kute.js)
|
||||
* Copyright 2015-2020 © thednp
|
||||
* Licensed under MIT (https://github.com/thednp/kute.js/blob/master/LICENSE)
|
||||
*/
|
||||
|
|
@ -9,7 +9,7 @@
|
|||
(global = global || self, global.KUTE = factory());
|
||||
}(this, (function () { 'use strict';
|
||||
|
||||
var version = "2.0.10";
|
||||
var version = "2.0.11";
|
||||
|
||||
var KUTE = {};
|
||||
|
||||
|
|
|
|||
4
dist/kute.min.js
vendored
4
dist/kute.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "kute.js",
|
||||
"version": "2.0.10",
|
||||
"version": "2.0.11",
|
||||
"description": "JavaScript animation engine of the future is called KUTE.js.",
|
||||
"main": "dist/kute.min.js",
|
||||
"module": "dist/kute.esm.js",
|
||||
|
|
|
|||
Loading…
Reference in a new issue