(move modernizr up) |
(include demo style) |
||
Line 194: | Line 194: | ||
</style> | </style> | ||
+ | |||
+ | |||
+ | |||
+ | <style> | ||
+ | @font-face { | ||
+ | font-family: 'arrows'; | ||
+ | src: url('../fonts/arrows/arrows.eot'); | ||
+ | src: url('../fonts/arrows/arrows.eot?#iefix') format('embedded-opentype'), | ||
+ | url('../fonts/arrows/arrows.woff') format('woff'), | ||
+ | url('../fonts/arrows/arrows.ttf') format('truetype'), | ||
+ | url('../fonts/arrows/arrows.svg#arrows') format('svg'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | } | ||
+ | |||
+ | .bb-custom-wrapper { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: relative; | ||
+ | /* box-sizing: border-box; */ | ||
+ | } | ||
+ | |||
+ | .bb-custom-wrapper .bb-bookblock { | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | -webkit-perspective: 2000px; | ||
+ | perspective: 2000px; | ||
+ | } | ||
+ | |||
+ | .bb-custom-side { | ||
+ | width: 50%; | ||
+ | float: left; | ||
+ | height: 100%; | ||
+ | overflow: hidden; | ||
+ | background: #93D1D5; | ||
+ | /* Centering with flexbox */ | ||
+ | display: -webkit-box; | ||
+ | display: -moz-box; | ||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | -webkit-flex-direction: row; | ||
+ | flex-direction: row; | ||
+ | -webkit-flex-wrap: wrap; | ||
+ | flex-wrap: wrap; | ||
+ | -webkit-box-pack: center; | ||
+ | -moz-box-pack: center; | ||
+ | -webkit-justify-content: center; | ||
+ | justify-content: center; | ||
+ | -webkit-box-align: center; | ||
+ | -moz-box-align: center; | ||
+ | -webkit-align-items: center; | ||
+ | align-items: center; | ||
+ | } | ||
+ | |||
+ | .bb-custom-firstpage h1 { | ||
+ | font-size: 2.625em; | ||
+ | line-height: 1.3; | ||
+ | margin: 0; | ||
+ | font-weight: 300; | ||
+ | background: #93D1D5; | ||
+ | } | ||
+ | |||
+ | .bb-custom-firstpage h1 span { | ||
+ | display: block; | ||
+ | font-size: 60%; | ||
+ | opacity: 0.3; | ||
+ | padding: 0 0 0.6em 0.1em; | ||
+ | } | ||
+ | |||
+ | .bb-custom-firstpage { | ||
+ | text-align: center; | ||
+ | padding-top: 15%; | ||
+ | width: 50%; | ||
+ | float: left; | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | .bb-custom-side p { | ||
+ | padding: 8%; | ||
+ | font-size: 1.8em; | ||
+ | font-weight: 300; | ||
+ | } | ||
+ | |||
+ | .bb-custom-wrapper h3 { | ||
+ | font-size: 1.4em; | ||
+ | font-weight: 300; | ||
+ | margin: 0.4em 0 1em; | ||
+ | } | ||
+ | |||
+ | .bb-custom-wrapper>nav { | ||
+ | width: 100%; | ||
+ | height: 40px; | ||
+ | margin: 1em auto 0; | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | z-index: 1000; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #page-nav { | ||
+ | width: 100%; | ||
+ | height: 40px; | ||
+ | margin: 1em auto 0; | ||
+ | position: fixed; | ||
+ | bottom: 20px; | ||
+ | z-index: 1000; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | #page-nav a { | ||
+ | display: inline-block; | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | text-align: center; | ||
+ | border-radius: 2px; | ||
+ | background: #93D1D5; | ||
+ | color: #fff; | ||
+ | font-size: 0; | ||
+ | margin: 2px; | ||
+ | } | ||
+ | |||
+ | .bb-custom-wrapper>nav a { | ||
+ | display: inline-block; | ||
+ | width: 40px; | ||
+ | height: 40px; | ||
+ | text-align: center; | ||
+ | border-radius: 2px; | ||
+ | background: #93D1D5; | ||
+ | color: #fff; | ||
+ | font-size: 0; | ||
+ | margin: 2px; | ||
+ | } | ||
+ | |||
+ | #page-nav a:hover { | ||
+ | opacity: 0.6; | ||
+ | } | ||
+ | |||
+ | .bb-custom-wrapper>nav a:hover { | ||
+ | opacity: 0.6; | ||
+ | } | ||
+ | |||
+ | .bb-custom-icon:before { | ||
+ | font-family: 'arrows'; | ||
+ | speak: none; | ||
+ | font-style: normal; | ||
+ | font-weight: normal; | ||
+ | font-variant: normal; | ||
+ | text-transform: none; | ||
+ | line-height: 1; | ||
+ | font-size: 30px; | ||
+ | line-height: 40px; | ||
+ | display: block; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | } | ||
+ | |||
+ | .bb-custom-icon-first:before, | ||
+ | .bb-custom-icon-last:before { | ||
+ | content: "\e002"; | ||
+ | } | ||
+ | |||
+ | .bb-custom-icon-arrow-left:before, | ||
+ | .bb-custom-icon-arrow-right:before { | ||
+ | content: "\e003"; | ||
+ | } | ||
+ | |||
+ | .bb-custom-icon-arrow-left:before, | ||
+ | .bb-custom-icon-first:before { | ||
+ | -webkit-transform: rotate(180deg); | ||
+ | transform: rotate(180deg); | ||
+ | } | ||
+ | |||
+ | /* No JS */ | ||
+ | .no-js .bb-custom-wrapper { | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .no-js .bb-custom-content { | ||
+ | height: 470px; | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 61.75em) { | ||
+ | .bb-custom-side { | ||
+ | font-size: 70%; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media screen and (max-width: 33em) { | ||
+ | .bb-custom-side { | ||
+ | font-size: 60%; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | |||
<style> | <style> | ||
Line 1,645: | Line 1,839: | ||
(function($){ | (function($){ | ||
var isPhantom = /Phantom/.test(navigator.userAgent), | var isPhantom = /Phantom/.test(navigator.userAgent), | ||
− | supportTouch = !isPhantom && "ontouchend" in document, | + | supportTouch = !isPhantom && ("ontouchend" in document), |
scrollEvent = "touchmove scroll", | scrollEvent = "touchmove scroll", | ||
// Use touch events or map it to mouse events | // Use touch events or map it to mouse events |
Revision as of 12:43, 27 October 2020
![](images/HP/1Overview/1.png)
![](images/HP/1Overview/2.png)
![](images/HP/1Overview/3.png)
![](images/HP/1Overview/4.png)