Merge pull request #75 from Psycojoker/youtube
Youtube + update material + fix
This commit is contained in:
abeudin
GitHub
commit
5358d06365
@ -472,3 +472,26 @@ blockquote:after {
|
||||
blockquote p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
video.responsive-video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.youtube-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.youtube-container iframe, .youtube-container object, .youtube-container embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 77%;
|
||||
width: 77%;
|
||||
margin-left: 11.5%;
|
||||
margin-right: 11.5%;
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
<section class="bordered-picture baguette" style="position: relative;">
|
||||
<div class="caption">
|
||||
<img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" src="" alt="">
|
||||
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
|
||||
<video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="none" muted>
|
||||
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
|
||||
</video>
|
||||
{% if caption %}
|
||||
|
||||
@ -21,7 +21,7 @@
|
||||
<video autoplay loop muted class="fillWidth">
|
||||
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
|
||||
</video>
|
||||
<img class="lazy full-picture" src="{{ video.generate_thumbnail("2000") }}">
|
||||
<img class="lazy full-picture responsive-video" src="{{ video.generate_thumbnail("2000") }}">
|
||||
</div>
|
||||
</section>
|
||||
{% else %}
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
{% set format = settings.ffmpeg.extension %}
|
||||
{{ video.copy() }}
|
||||
<img class="lazy" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
|
||||
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
|
||||
<video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
|
||||
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
|
||||
</video>
|
||||
{% if caption %}
|
||||
|
||||
@ -0,0 +1,5 @@
|
||||
<section class="bordered-picture">
|
||||
<div class="youtube-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</section>
|
||||
@ -230,3 +230,25 @@ footer a {
|
||||
font-family: 'montserrat', sans-serif;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
video.responsive-video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.youtube-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
.youtube-container iframe, .youtube-container object, .youtube-container embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
5
prosopopee/themes/light/templates/sections/youtube.html
Normal file
5
prosopopee/themes/light/templates/sections/youtube.html
Normal file
@ -0,0 +1,5 @@
|
||||
<section class="pictures-group">
|
||||
<div class="youtube-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ video_id }}" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</section>
|
||||
@ -4311,52 +4311,42 @@ nav .input-field label.active i {
|
||||
.navbar-fixed nav {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 601px) {
|
||||
nav.nav-extended .nav-wrapper {
|
||||
min-height: 64px;
|
||||
}
|
||||
nav,nav .nav-wrapper i,nav a.button-collapse,nav a.button-collapse i {
|
||||
height:64px;
|
||||
line-height: 64px;
|
||||
line-height:64px
|
||||
}
|
||||
.navbar-fixed {
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: local(Roboto Thin), url("../fonts/roboto/Roboto-Thin.eot");
|
||||
src: url("../fonts/roboto/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"), url("../fonts/roboto/Roboto-Thin.woff") format("woff"), url("../fonts/roboto/Roboto-Thin.ttf") format("truetype");
|
||||
src: local(Roboto Thin), url("../fonts/Roboto-Thin.eot");
|
||||
src: url("../fonts/Roboto-Thin.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Thin.woff2") format("woff2"), url("../fonts/Roboto-Thin.woff") format("woff"), url("../fonts/Roboto-Thin.ttf") format("truetype");
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: local(Roboto Light), url("../fonts/roboto/Roboto-Light.eot");
|
||||
src: url("../fonts/roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Light.woff2") format("woff2"), url("../fonts/roboto/Roboto-Light.woff") format("woff"), url("../fonts/roboto/Roboto-Light.ttf") format("truetype");
|
||||
src: local(Roboto Light), url("../fonts/Roboto-Light.eot");
|
||||
src: url("../fonts/Roboto-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Light.woff2") format("woff2"), url("../fonts/Roboto-Light.woff") format("woff"), url("../fonts/Roboto-Light.ttf") format("truetype");
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: local(Roboto Regular), url("../fonts/roboto/Roboto-Regular.eot");
|
||||
src: url("../fonts/roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), url("../fonts/roboto/Roboto-Regular.woff") format("woff"), url("../fonts/roboto/Roboto-Regular.ttf") format("truetype");
|
||||
src: local(Roboto Regular), url("../fonts/Roboto-Regular.eot");
|
||||
src: url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Regular.woff2") format("woff2"), url("../fonts/Roboto-Regular.woff") format("woff"), url("../fonts/Roboto-Regular.ttf") format("truetype");
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../fonts/roboto/Roboto-Medium.eot");
|
||||
src: url("../fonts/roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), url("../fonts/roboto/Roboto-Medium.woff") format("woff"), url("../fonts/roboto/Roboto-Medium.ttf") format("truetype");
|
||||
src: url("../fonts/Roboto-Medium.eot");
|
||||
src: url("../fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Medium.woff2") format("woff2"), url("../fonts/Roboto-Medium.woff") format("woff"), url("../fonts/Roboto-Medium.ttf") format("truetype");
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Roboto";
|
||||
src: url("../fonts/roboto/Roboto-Bold.eot");
|
||||
src: url("../fonts/roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), url("../fonts/roboto/Roboto-Bold.woff") format("woff"), url("../fonts/roboto/Roboto-Bold.ttf") format("truetype");
|
||||
src: url("../fonts/Roboto-Bold.eot");
|
||||
src: url("../fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Roboto-Bold.woff2") format("woff2"), url("../fonts/Roboto-Bold.woff") format("woff"), url("../fonts/Roboto-Bold.ttf") format("truetype");
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
659
prosopopee/themes/material/static/css/mediaelementplayer.css
Normal file
659
prosopopee/themes/material/static/css/mediaelementplayer.css
Normal file
@ -0,0 +1,659 @@
|
||||
div.audio-player {
|
||||
width: 450px;
|
||||
height: 70px;
|
||||
margin: 0 auto;
|
||||
background: #28b67e;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.audio-player h2 {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #ececec;
|
||||
text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
|
||||
padding: 2px 0 0 10px;
|
||||
}
|
||||
/* Accessibility: hide screen reader texts (and prefer "top" for RTL languages).
|
||||
Reference: http://blog.rrwd.nl/2015/04/04/the-screen-reader-text-class-why-and-how/ */
|
||||
.mejs__offscreen {
|
||||
clip: rect(1px, 1px, 1px, 1px); /* IE8-IE11 - no support for clip-path */
|
||||
clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
|
||||
position: absolute !important;
|
||||
height: 1px;
|
||||
width: 1px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mejs__container {
|
||||
position: relative;
|
||||
font-family: "Helvetica", Arial, serif;
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
text-indent: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.mejs__container * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Hide native play button from iOS to favor plugin button */
|
||||
.mejs__container video::-webkit-media-controls-start-playback-button {
|
||||
display: none !important;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.mejs__fill-container,
|
||||
.mejs__fill-container .mejs__container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mejs__fill-container {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mejs__container:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.mejs__iframe-overlay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mejs__embed,
|
||||
.mejs__embed body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mejs__fullscreen {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.mejs__container-fullscreen {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mejs__container-fullscreen .mejs__mediaelement,
|
||||
.mejs__container-fullscreen video {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.mejs__clear {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
/* Start: LAYERS */
|
||||
.mejs__background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mejs__mediaelement {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.mejs__poster {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background-size: contain;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
:root .mejs__poster-img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mejs__poster-img {
|
||||
border: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.mejs__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
.mejs__layer {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mejs__overlay-play {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mejs__overlay-button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: -40px 0 0 -40px;
|
||||
background: url("../img/mejs-controls.svg") no-repeat;
|
||||
background-position: 0 -39px;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mejs__overlay:hover > .mejs__overlay-button {
|
||||
background-position: -80px -39px;
|
||||
}
|
||||
|
||||
.mejs__overlay-loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: -40px 0 0 -40px;
|
||||
}
|
||||
|
||||
.mejs__overlay-loading-bg-img {
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: transparent url("../img/mejs-controls.svg") -160px -40px no-repeat;
|
||||
-webkit-animation: mejs-loading-spinner 1s linear infinite;
|
||||
-moz-animation: mejs-loading-spinner 1s linear infinite;
|
||||
animation: mejs-loading-spinner 1s linear infinite;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@-moz-keyframes mejs-loading-spinner {
|
||||
100% {
|
||||
-moz-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes mejs-loading-spinner {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes mejs-loading-spinner {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* End: LAYERS */
|
||||
|
||||
/* Start: CONTROL BAR */
|
||||
.mejs__controls {
|
||||
position: absolute;
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0 10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mejs__button,
|
||||
.mejs__time,
|
||||
.mejs__time-rail {
|
||||
float: left;
|
||||
margin: 0;
|
||||
width: 32px;
|
||||
height: 40px;
|
||||
font-size: 10px;
|
||||
line-height: 10px;
|
||||
}
|
||||
|
||||
.mejs__button > button {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
text-decoration: none;
|
||||
margin: 10px 6px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
border: 0;
|
||||
background: transparent url("../img/mejs-controls.svg");
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* :focus for accessibility */
|
||||
.mejs__button > button:focus {
|
||||
outline: dotted 1px #999;
|
||||
}
|
||||
|
||||
.mejs__container-keyboard-inactive a,
|
||||
.mejs__container-keyboard-inactive a:focus,
|
||||
.mejs__container-keyboard-inactive button,
|
||||
.mejs__container-keyboard-inactive button:focus,
|
||||
.mejs__container-keyboard-inactive [role=slider],
|
||||
.mejs__container-keyboard-inactive [role=slider]:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
/* End: CONTROL BAR */
|
||||
|
||||
/* Start: Time (Current / Duration) */
|
||||
.mejs__time {
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 24px;
|
||||
width: auto;
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
padding: 16px 6px 0 6px;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
/* End: Time (Current / Duration) */
|
||||
|
||||
/* Start: Play/Pause/Stop */
|
||||
.mejs__play > button {
|
||||
background-position: 0 0;
|
||||
}
|
||||
|
||||
.mejs__pause > button {
|
||||
background-position: -20px 0;
|
||||
}
|
||||
|
||||
.mejs__replay > button {
|
||||
background-position: -280px 0;
|
||||
}
|
||||
|
||||
/* End: Play/Pause/Stop */
|
||||
|
||||
/* Start: Progress Bar */
|
||||
.mejs__time-rail {
|
||||
direction: ltr;
|
||||
width: 200px;
|
||||
padding-top: 10px;
|
||||
height: 40px;
|
||||
position: relative;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.mejs__time-total,
|
||||
.mejs__time-buffering,
|
||||
.mejs__time-loaded,
|
||||
.mejs__time-current,
|
||||
.mejs__time-handle,
|
||||
.mejs__time-float,
|
||||
.mejs__time-float-current,
|
||||
.mejs__time-float-corner,
|
||||
.mejs__time-marker {
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 10px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.mejs__time-total {
|
||||
margin: 5px 0 0 0;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mejs__time-buffering {
|
||||
width: 100%;
|
||||
background: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
||||
background-size: 15px 15px;
|
||||
animation: buffering-stripes 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes buffering-stripes {
|
||||
from {
|
||||
background-position: 0 0;
|
||||
}
|
||||
to {
|
||||
background-position: 30px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.mejs__time-loaded {
|
||||
background: rgba(255, 255, 255, .3);
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.mejs__time-current {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.mejs__time-handle {
|
||||
display: none;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
width: 10px;
|
||||
background: #fff;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
border: solid 2px #333;
|
||||
top: -2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mejs__time-float {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background: #eee;
|
||||
width: 36px;
|
||||
height: 17px;
|
||||
border: solid 1px #333;
|
||||
top: -26px;
|
||||
margin-left: -18px;
|
||||
text-align: center;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
.mejs__time-float-current {
|
||||
margin: 2px;
|
||||
width: 30px;
|
||||
display: block;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mejs__time-float-corner {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
line-height: 0;
|
||||
border: solid 5px #eee;
|
||||
border-color: #eee transparent transparent transparent;
|
||||
border-radius: 0;
|
||||
top: 15px;
|
||||
left: 13px;
|
||||
}
|
||||
|
||||
.mejs__long-video .mejs__time-float {
|
||||
width: 48px;
|
||||
}
|
||||
|
||||
.mejs__long-video .mejs__time-float-current {
|
||||
width: 44px;
|
||||
}
|
||||
|
||||
.mejs__long-video .mejs__time-float-corner {
|
||||
left: 18px;
|
||||
}
|
||||
|
||||
.mejs__broadcast {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
/* End: Progress Bar */
|
||||
|
||||
/* Start: Fullscreen */
|
||||
.mejs__fullscreen-button > button {
|
||||
background-position: -80px 0;
|
||||
}
|
||||
|
||||
.mejs__unfullscreen > button {
|
||||
background-position: -100px 0;
|
||||
}
|
||||
|
||||
/* End: Fullscreen */
|
||||
|
||||
/* Start: Mute/Volume */
|
||||
.mejs__mute > button {
|
||||
background-position: -60px 0;
|
||||
}
|
||||
|
||||
.mejs__unmute > button {
|
||||
background-position: -40px 0;
|
||||
}
|
||||
|
||||
.mejs__volume-button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mejs__volume-button > .mejs__volume-slider {
|
||||
display: none;
|
||||
height: 115px;
|
||||
width: 25px;
|
||||
background: rgba(50, 50, 50, 0.7);
|
||||
border-radius: 0;
|
||||
top: -115px;
|
||||
left: 5px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mejs__volume-button:hover {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.mejs__volume-total {
|
||||
position: absolute;
|
||||
left: 11px;
|
||||
top: 8px;
|
||||
width: 2px;
|
||||
height: 100px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mejs__volume-current {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mejs__volume-handle {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 100%;
|
||||
width: 16px;
|
||||
height: 6px;
|
||||
margin: 0 0 -3px -7px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
cursor: ns-resize;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.mejs__horizontal-volume-slider {
|
||||
height: 36px;
|
||||
width: 56px;
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.mejs__horizontal-volume-total {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 16px;
|
||||
width: 50px;
|
||||
height: 8px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1px;
|
||||
border-radius: 2px;
|
||||
background: rgba(50, 50, 50, 0.8);
|
||||
}
|
||||
|
||||
.mejs__horizontal-volume-current {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 1px;
|
||||
border-radius: 2px;
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.mejs__horizontal-volume-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* End: Mute/Volume */
|
||||
|
||||
/* Start: Track (Captions and Chapters) */
|
||||
.mejs__captions-button, .mejs__chapters-button {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.mejs__captions-button > button {
|
||||
background-position: -140px 0;
|
||||
}
|
||||
|
||||
.mejs__chapters-button > button {
|
||||
background-position: -302px 0;
|
||||
}
|
||||
|
||||
.mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector {
|
||||
visibility: hidden;
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
right: -51px;
|
||||
width: 85px;
|
||||
background: rgba(50, 50, 50, 0.7);
|
||||
border: solid 1px transparent;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mejs__chapters-button > .mejs__chapters-selector {
|
||||
width: 110px;
|
||||
}
|
||||
|
||||
.mejs__captions-button > .mejs__captions-selector, .mejs__chapters-button > .mejs__chapters-selector {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.mejs__captions-selector-list, .mejs__chapters-selector-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
list-style-type: none !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mejs__captions-selector-list-item, .mejs__chapters-selector-list-item {
|
||||
margin: 0 0 6px 0;
|
||||
padding: 0 10px;
|
||||
list-style-type: none !important;
|
||||
display: block;
|
||||
color: #fff;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mejs__captions-selector-list-item:hover, .mejs__chapters-selector-list-item:hover {
|
||||
background-color: rgb(200, 200, 200) !important;
|
||||
background-color: rgba(255, 255, 255, 0.4) !important;
|
||||
}
|
||||
|
||||
.mejs__captions-selector-input, .mejs__chapters-selector-input {
|
||||
clear: both;
|
||||
float: left;
|
||||
margin: 3px 3px 0 5px;
|
||||
position: absolute;
|
||||
left: -1000px;
|
||||
}
|
||||
|
||||
.mejs__captions-selector-label, .mejs__chapters-selector-label {
|
||||
width: 55px;
|
||||
float: left;
|
||||
padding: 4px 0 0 0;
|
||||
line-height: 15px;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mejs__captions-selected, .mejs__chapters-selected {
|
||||
color: rgba(33, 248, 248, 1);
|
||||
}
|
||||
|
||||
.mejs__captions-translations {
|
||||
font-size: 10px;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.mejs__captions-layer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
text-align: center;
|
||||
line-height: 20px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.mejs__captions-layer a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.mejs__captions-layer[lang=ar] {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.mejs__captions-position {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 15px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.mejs__captions-position-hover {
|
||||
bottom: 35px;
|
||||
}
|
||||
|
||||
.mejs__captions-text, .mejs__captions-text * {
|
||||
padding: 0;
|
||||
background: rgba(20, 20, 20, 0.5);
|
||||
white-space: pre-wrap;
|
||||
box-shadow: 5px 0 0 rgba(20, 20, 20, 0.5), -5px 0 0 rgba(20, 20, 20, 0.5);
|
||||
}
|
||||
|
||||
/* End: Track (Captions and Chapters) */
|
||||
@ -9,7 +9,7 @@ main {
|
||||
}
|
||||
|
||||
.parallax-container {
|
||||
height: 720px;
|
||||
height: 800px;
|
||||
min-height: 250px;
|
||||
margin-bottom: 20px;
|
||||
background-color: rgba(0, 0, 0, .4);
|
||||
@ -61,6 +61,9 @@ main {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.caption__overlay h5 {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.caption .card-panel {
|
||||
margin: 0;
|
||||
@ -80,20 +83,6 @@ main {
|
||||
margin-right: 11.5%;
|
||||
}
|
||||
|
||||
.pictures-line {
|
||||
min-width: 77%;
|
||||
width: 77%;
|
||||
margin-left: 11.5%;
|
||||
margin-right: 11.5%;
|
||||
display: flex;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.pictures-line .picture img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.small-card {
|
||||
height: 400px;
|
||||
}
|
||||
@ -184,3 +173,32 @@ video.fillWidth {
|
||||
padding-top:10px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.bordered-picture img {
|
||||
height: 77%;
|
||||
width: 77%;
|
||||
margin-left: 11.5%;
|
||||
margin-right: 11.5%;
|
||||
}
|
||||
|
||||
.pictures-line {
|
||||
display: flex;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.pictures-line .picture img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pictures-line .separator {
|
||||
min-width: 0.5em;
|
||||
}
|
||||
|
||||
@media only screen and (max-device-width : 992px) {
|
||||
|
||||
.pictures-line {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
534
prosopopee/themes/material/static/css/style.css
Normal file
534
prosopopee/themes/material/static/css/style.css
Normal file
@ -0,0 +1,534 @@
|
||||
i {
|
||||
line-height:inherit
|
||||
}
|
||||
img.responsive-img {
|
||||
max-width:100%;
|
||||
height:auto
|
||||
}
|
||||
footer.page-footer {
|
||||
padding-top:20px;
|
||||
background-color:#ba68c8
|
||||
}
|
||||
footer.page-footer .footer-copyright {
|
||||
overflow:hidden;
|
||||
min-height:50px;
|
||||
display:-webkit-flex;
|
||||
display:-ms-flexbox;
|
||||
display:flex;
|
||||
-webkit-align-items:center;
|
||||
-ms-flex-align:center;
|
||||
align-items:center;
|
||||
padding:10px 0px;
|
||||
color:rgba(255,255,255,0.8);
|
||||
background-color:rgba(51,51,51,0.08)
|
||||
}
|
||||
.de {
|
||||
text-align:center
|
||||
}
|
||||
.material-icons {
|
||||
text-rendering:optimizeLegibility;
|
||||
-webkit-font-feature-settings:'liga';
|
||||
-moz-font-feature-settings:'liga';
|
||||
font-feature-settings:'liga'
|
||||
}
|
||||
.db {
|
||||
margin:0 auto;
|
||||
max-width:1280px;
|
||||
width:90%
|
||||
}
|
||||
@media only screen and (min-width: 601px) {
|
||||
.db {
|
||||
width:85%
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 993px) {
|
||||
.db {
|
||||
width:70%
|
||||
}
|
||||
}
|
||||
.cx {
|
||||
padding-top:1rem;
|
||||
padding-bottom:1rem
|
||||
}
|
||||
.e {
|
||||
margin-left:auto;
|
||||
margin-right:auto;
|
||||
margin-bottom:20px
|
||||
}
|
||||
.e:after {
|
||||
content:"";
|
||||
display:table;
|
||||
clear:both
|
||||
}
|
||||
.e .d {
|
||||
float:left;
|
||||
box-sizing:border-box;
|
||||
padding:0 .75rem;
|
||||
min-height:1px
|
||||
}
|
||||
.e .d.gu {
|
||||
width:100%;
|
||||
margin-left:auto;
|
||||
left:auto;
|
||||
right:auto
|
||||
}
|
||||
@media only screen and (min-width: 601px) {
|
||||
.e .d.hf {
|
||||
width:50%;
|
||||
margin-left:auto;
|
||||
left:auto;
|
||||
right:auto
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 993px) {
|
||||
.e .d.hx {
|
||||
width:33.3333333333%;
|
||||
margin-left:auto;
|
||||
left:auto;
|
||||
right:auto
|
||||
}
|
||||
}
|
||||
nav {
|
||||
color:#fff;
|
||||
background-color:#ba68c8;
|
||||
width:100%;
|
||||
height:56px;
|
||||
line-height:56px
|
||||
}
|
||||
nav.nav-extended {
|
||||
height:auto
|
||||
}
|
||||
nav.nav-extended .nav-wrapper {
|
||||
min-height:56px;
|
||||
height:auto
|
||||
}
|
||||
nav a {
|
||||
color:#fff
|
||||
}
|
||||
nav i,nav i.material-icons {
|
||||
display:block;
|
||||
font-size:24px;
|
||||
height:56px;
|
||||
line-height:56px
|
||||
}
|
||||
nav .nav-wrapper {
|
||||
position:relative;
|
||||
height:100%
|
||||
}
|
||||
@media only screen and (min-width: 993px) {
|
||||
nav a.button-collapse {
|
||||
display: unset !important;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
nav .button-collapse {
|
||||
float:left;
|
||||
position:relative;
|
||||
z-index:1;
|
||||
height:56px;
|
||||
margin:0 18px
|
||||
}
|
||||
nav .button-collapse i {
|
||||
height:56px;
|
||||
line-height:56px
|
||||
}
|
||||
nav .brand-logo {
|
||||
position:absolute;
|
||||
color:#fff;
|
||||
display:inline-block;
|
||||
font-size:2.1rem;
|
||||
padding:0;
|
||||
white-space:nowrap
|
||||
}
|
||||
@media only screen and (max-width: 992px) {
|
||||
nav .brand-logo {
|
||||
left:50%;
|
||||
-webkit-transform:translateX(-50%);
|
||||
transform:translateX(-50%)
|
||||
}
|
||||
}
|
||||
nav .brand-logo i,nav .brand-logo i.material-icons {
|
||||
float:left;
|
||||
margin-right:15px
|
||||
}
|
||||
@font-face {
|
||||
font-family:"Roboto";
|
||||
src:local(Roboto Thin),url("../fonts/Roboto-Thin.eot");
|
||||
src:url("../fonts/Roboto-Thin.eot?#iefix") format("embedded-opentype"),url("../fonts/Roboto-Thin.woff2") format("woff2"),url("../fonts/Roboto-Thin.woff") format("woff"),url("../fonts/Roboto-Thin.ttf") format("truetype");
|
||||
font-weight:200
|
||||
}
|
||||
@font-face {
|
||||
font-family:"Roboto";
|
||||
src:local(Roboto Light),url("../fonts/Roboto-Light.eot");
|
||||
src:url("../fonts/Roboto-Light.eot?#iefix") format("embedded-opentype"),url("../fonts/Roboto-Light.woff2") format("woff2"),url("../fonts/Roboto-Light.woff") format("woff"),url("../fonts/Roboto-Light.ttf") format("truetype");
|
||||
font-weight:300
|
||||
}
|
||||
@font-face {
|
||||
font-family:"Roboto";
|
||||
src:local(Roboto Regular),url("../fonts/Roboto-Regular.eot");
|
||||
src:url("../fonts/Roboto-Regular.eot?#iefix") format("embedded-opentype"),url("../fonts/Roboto-Regular.woff2") format("woff2"),url("../fonts/Roboto-Regular.woff") format("woff"),url("../fonts/Roboto-Regular.ttf") format("truetype");
|
||||
font-weight:400
|
||||
}
|
||||
@font-face {
|
||||
font-family:"Roboto";
|
||||
src:url("../fonts/Roboto-Medium.eot");
|
||||
src:url("../fonts/Roboto-Medium.eot?#iefix") format("embedded-opentype"),url("../fonts/Roboto-Medium.woff2") format("woff2"),url("../fonts/Roboto-Medium.woff") format("woff"),url("../fonts/Roboto-Medium.ttf") format("truetype");
|
||||
font-weight:500
|
||||
}
|
||||
@font-face {
|
||||
font-family:"Roboto";
|
||||
src:url("../fonts/Roboto-Bold.eot");
|
||||
src:url("../fonts/Roboto-Bold.eot?#iefix") format("embedded-opentype"),url("../fonts/Roboto-Bold.woff2") format("woff2"),url("../fonts/Roboto-Bold.woff") format("woff"),url("../fonts/Roboto-Bold.ttf") format("truetype");
|
||||
font-weight:700
|
||||
}
|
||||
a {
|
||||
text-decoration:none
|
||||
}
|
||||
html {
|
||||
line-height:1.5;
|
||||
font-family:"Roboto", sans-serif;
|
||||
font-weight:normal;
|
||||
color:rgba(0,0,0,0.87)
|
||||
}
|
||||
@media only screen and (min-width: 0) {
|
||||
html {
|
||||
font-size:14px
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 992px) {
|
||||
html {
|
||||
font-size:14.5px
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 1200px) {
|
||||
html {
|
||||
font-size:15px
|
||||
}
|
||||
}
|
||||
h1 {
|
||||
font-weight:400;
|
||||
line-height:1.1
|
||||
}
|
||||
h1 {
|
||||
font-size:4.2rem;
|
||||
line-height:110%;
|
||||
margin:2.1rem 0 1.68rem 0
|
||||
}
|
||||
footer.page-footer .footer-copyright {
|
||||
font-weight:300
|
||||
}
|
||||
/*!
|
||||
* Waves v0.6.0
|
||||
* http://fian.ic.id/Waves
|
||||
*
|
||||
* Copyright 2014 Alfiana E. Sibuea and other contributors
|
||||
* Released under the MIT license
|
||||
* https://github.com/fians/Waves/blob/master/LICENSE
|
||||
*/
|
||||
::-webkit-input-placeholder {
|
||||
color:#d1d1d1
|
||||
}
|
||||
:-moz-placeholder {
|
||||
color:#d1d1d1
|
||||
}
|
||||
::-moz-placeholder {
|
||||
color:#d1d1d1
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
color:#d1d1d1
|
||||
}
|
||||
[type="radio"]:not(:checked) {
|
||||
position:absolute;
|
||||
left:-9999px;
|
||||
opacity:0
|
||||
}
|
||||
[type="radio"]:not(:checked)+label {
|
||||
position:relative;
|
||||
padding-left:35px;
|
||||
cursor:pointer;
|
||||
display:inline-block;
|
||||
height:25px;
|
||||
line-height:25px;
|
||||
font-size:1rem;
|
||||
transition:.28s ease;
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none
|
||||
}
|
||||
[type="radio"]:not(:checked)+label:before,[type="radio"]:not(:checked)+label:after {
|
||||
border-radius:50%
|
||||
}
|
||||
[type="radio"]:not(:checked)+label:before,[type="radio"]:not(:checked)+label:after {
|
||||
border:2px solid #5a5a5a
|
||||
}
|
||||
[type="radio"]:not(:checked)+label:after {
|
||||
-webkit-transform:scale(0);
|
||||
transform:scale(0)
|
||||
}
|
||||
[type="radio"]:disabled:not(:checked)+label:before {
|
||||
background-color:transparent;
|
||||
border-color:rgba(0,0,0,0.26)
|
||||
}
|
||||
[type="radio"]:disabled:not(:checked)+label:before {
|
||||
border-color:rgba(0,0,0,0.26)
|
||||
}
|
||||
[type="checkbox"]:not(:checked) {
|
||||
position:absolute;
|
||||
left:-9999px;
|
||||
opacity:0
|
||||
}
|
||||
[type="checkbox"]:not(:checked):disabled+label:before {
|
||||
border:none;
|
||||
background-color:rgba(0,0,0,0.26)
|
||||
}
|
||||
[type="checkbox"].filled-in:not(:checked)+label:before {
|
||||
width:0;
|
||||
height:0;
|
||||
border:3px solid transparent;
|
||||
left:6px;
|
||||
top:10px;
|
||||
-webkit-transform:rotateZ(37deg);
|
||||
transform:rotateZ(37deg);
|
||||
-webkit-transform-origin:20% 40%;
|
||||
transform-origin:100% 100%
|
||||
}
|
||||
[type="checkbox"].filled-in:not(:checked)+label:after {
|
||||
height:20px;
|
||||
width:20px;
|
||||
background-color:transparent;
|
||||
border:2px solid #5a5a5a;
|
||||
top:0px;
|
||||
z-index:0
|
||||
}
|
||||
[type="checkbox"].filled-in:disabled:not(:checked)+label:before {
|
||||
background-color:transparent;
|
||||
border:2px solid transparent
|
||||
}
|
||||
[type="checkbox"].filled-in:disabled:not(:checked)+label:after {
|
||||
border-color:transparent;
|
||||
background-color:#BDBDBD
|
||||
}
|
||||
input[type=checkbox]:checked:not(:disabled) ~ .by:active::after,input[type=checkbox]:checked:not(:disabled).cu:focus ~ .by::after {
|
||||
box-shadow:0 1px 3px 1px rgba(0,0,0,0.4),0 0 0 15px rgba(38,166,154,0.1)
|
||||
}
|
||||
input[type=checkbox]:not(:disabled) ~ .by:active:after,input[type=checkbox]:not(:disabled).cu:focus ~ .by::after {
|
||||
box-shadow:0 1px 3px 1px rgba(0,0,0,0.4),0 0 0 15px rgba(0,0,0,0.08)
|
||||
}
|
||||
.side-nav {
|
||||
position:fixed;
|
||||
width:300px;
|
||||
left:0;
|
||||
top:0;
|
||||
margin:0;
|
||||
-webkit-transform:translateX(-100%);
|
||||
transform:translateX(-100%);
|
||||
height:100%;
|
||||
height:calc(100% + 60px);
|
||||
height:-moz-calc(100%);
|
||||
padding-bottom:60px;
|
||||
background-color:#fff;
|
||||
z-index:999;
|
||||
overflow-y:auto;
|
||||
will-change:transform;
|
||||
-webkit-backface-visibility:hidden;
|
||||
backface-visibility:hidden;
|
||||
-webkit-transform:translateX(-105%);
|
||||
transform:translateX(-105%)
|
||||
}
|
||||
.side-nav li {
|
||||
float:none;
|
||||
line-height:48px
|
||||
}
|
||||
.side-nav li.k {
|
||||
background-color:rgba(0,0,0,0.05)
|
||||
}
|
||||
.side-nav a {
|
||||
color:rgba(0,0,0,0.87);
|
||||
display:block;
|
||||
font-size:14px;
|
||||
font-weight:500;
|
||||
height:48px;
|
||||
line-height:48px;
|
||||
padding:0 32px
|
||||
}
|
||||
.side-nav a:hover {
|
||||
background-color:rgba(0,0,0,0.05)
|
||||
}
|
||||
.side-nav li>a>i,.side-nav li>a>i.material-icons {
|
||||
float:left;
|
||||
height:48px;
|
||||
line-height:48px;
|
||||
margin:0 32px 0 0;
|
||||
width:24px;
|
||||
color:rgba(0,0,0,0.54)
|
||||
}
|
||||
@media only screen and (max-width: 992px) {
|
||||
.side-nav a {
|
||||
padding:0 16px
|
||||
}
|
||||
}
|
||||
/*!
|
||||
* Default mobile-first, responsive styling for pickadate.js
|
||||
* Demo: http://amsul.gg.io/pickadate.js
|
||||
*/
|
||||
html,body {
|
||||
height:100%
|
||||
}
|
||||
body {
|
||||
background-color:#37474f;
|
||||
font-family:"Lato", sans-serif
|
||||
}
|
||||
ul {
|
||||
margin:0
|
||||
}
|
||||
.cx {
|
||||
padding: 0 0 1.5rem 0;
|
||||
}
|
||||
.valign-wrapper {
|
||||
height:100%;
|
||||
display:-webkit-flex !important;
|
||||
display:-ms-flexbox !important;
|
||||
display:flex !important;
|
||||
-webkit-flex-direction:column;
|
||||
-ms-flex-direction:column;
|
||||
flex-direction:column;
|
||||
-webkit-justify-content:center;
|
||||
-ms-flex-pack:center;
|
||||
justify-content:center
|
||||
}
|
||||
nav {
|
||||
position:relative;
|
||||
top:0;
|
||||
transition:background-color .3s, opacity .2s, visibility 0s;
|
||||
box-shadow:0 2px 4px 0 rgba(0,0,0,0.2);
|
||||
z-index:10;
|
||||
}
|
||||
nav.nav-full-header {
|
||||
height:100%
|
||||
}
|
||||
nav.nav-full-header .nav-header {
|
||||
height:calc(100% - 128px)
|
||||
}
|
||||
nav .nav-background {
|
||||
overflow:hidden;
|
||||
position:absolute;
|
||||
top:0;
|
||||
right:0;
|
||||
bottom:0;
|
||||
left:0;
|
||||
z-index:-1;
|
||||
opacity:.2
|
||||
}
|
||||
nav .nav-background .ea {
|
||||
opacity:0;
|
||||
position:absolute;
|
||||
top:50%;
|
||||
-webkit-transform:translateY(-50%);
|
||||
transform:translateY(-50%);
|
||||
right:0;
|
||||
left:0;
|
||||
margin:0 auto;
|
||||
max-width:100%;
|
||||
transition:opacity .7s
|
||||
}
|
||||
nav .nav-background .ea.k {
|
||||
opacity:1
|
||||
}
|
||||
nav .nav-background .ea {
|
||||
top:0;
|
||||
bottom:0;
|
||||
-webkit-transform:none;
|
||||
transform:none;
|
||||
background-repeat:repeat
|
||||
}
|
||||
nav .nav-header {
|
||||
clear:both;
|
||||
padding:40px 0
|
||||
}
|
||||
nav .nav-header h1 {
|
||||
font-size:56px;
|
||||
font-weight:300
|
||||
}
|
||||
.b {
|
||||
position:relative
|
||||
}
|
||||
.b .d {
|
||||
padding:0;
|
||||
}
|
||||
.b .gallery-expand .gallery-curve-wrapper {
|
||||
cursor:pointer;
|
||||
border-radius:4px;
|
||||
box-shadow:0 1px 4px rgba(0,0,0,0.1)
|
||||
}
|
||||
.b .gallery-cover {
|
||||
position:relative;
|
||||
overflow:hidden;
|
||||
display:block;
|
||||
width:100%;
|
||||
-webkit-transform-origin:0 0;
|
||||
transform-origin:0 0;
|
||||
transition:top .5s;
|
||||
z-index:2
|
||||
}
|
||||
.b .gallery-cover img {
|
||||
box-shadow:0 0 1px 0 rgba(0,0,0,0.1);
|
||||
min-width: 100%;
|
||||
width:auto;
|
||||
display:block;
|
||||
-webkit-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none
|
||||
}
|
||||
.db {
|
||||
max-width: none;
|
||||
}
|
||||
nav .nav-header {
|
||||
word-break: break-word
|
||||
}
|
||||
@media only screen and (max-width: 600px) {
|
||||
nav.nav-full-header .nav-header {
|
||||
height:calc(100% - 112px)
|
||||
}
|
||||
nav .nav-header h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-title {
|
||||
color: white;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: initial;
|
||||
bottom: 0px;
|
||||
text-align: center;
|
||||
z-index: 3;
|
||||
background: transparent linear-gradient(rgba(255, 255, 255, 0) 0%, transparent 1%, rgba(0, 0, 0, 0.07) 26%, rgba(0, 0, 0, 0.5) 71%, rgba(0, 0, 0, 0.7) 100%) repeat scroll 0% 0%;
|
||||
padding: 20% 0 10px 0;
|
||||
}
|
||||
|
||||
.gallery-title > h2 {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .2em;
|
||||
letter-spacing: 2px;
|
||||
font-size: 1.7vw;
|
||||
}
|
||||
|
||||
.gallery-title > h3 {
|
||||
font-style: italic;
|
||||
margin-top: 0;
|
||||
margin-bottom: .7em;
|
||||
font-weight: normal;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.gallery-datetime {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.brand-logo p {
|
||||
margin-top: 7px;
|
||||
}
|
||||
114
prosopopee/themes/material/static/img/mejs-controls.svg
Normal file
114
prosopopee/themes/material/static/img/mejs-controls.svg
Normal file
@ -0,0 +1,114 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="400px" height="120px"
|
||||
viewBox="0 0 400 120" style="enable-background:new 0 0 400 120;" xml:space="preserve">
|
||||
<g id="controls">
|
||||
<g id="play">
|
||||
<path d="M16.31,9.48a.56.56,0,0,1,0,1l-11.38,7c-.47.29-.85.07-.85-.48V3c0-.55.38-.77.85-.48Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
</g>
|
||||
<g id="pause">
|
||||
<g>
|
||||
<rect x="23" y="1.01" width="4.2" height="16" rx="1" ry="1" style="fill: #fff"/>
|
||||
<rect x="32.8" y="1.01" width="4.2" height="16" rx="1" ry="1" style="fill: #fff"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="fullscreen">
|
||||
<g id="enter">
|
||||
<path d="M80.83,2.38a1,1,0,0,1,1-1h5.41c.55,0,.68.32.29.71l-6,6c-.39.39-.71.26-.71-.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M80.83,18.17a1,1,0,0,0,1,1h5.41c.55,0,.68-.32.29-.71l-6-6c-.39-.39-.71-.26-.71.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M98.63,2.38a1,1,0,0,0-1-1H92.21c-.55,0-.68.32-.29.71l6,6c.39.39.71.26.71-.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M98.63,18.17a1,1,0,0,1-1,1H92.21c-.55,0-.68-.32-.29-.71l6-6c.39-.39.71-.26.71.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
</g>
|
||||
<g id="exit">
|
||||
<g>
|
||||
<path d="M112.53,6a1,1,0,0,0,1,1h4.1c.55,0,.68-.32.29-.71l-4.68-4.68c-.39-.39-.71-.26-.71.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M105.43,7a1,1,0,0,0,1-1V1.88c0-.55-.32-.68-.71-.29L101,6.27c-.39.39-.26.71.29.71Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M106.43,14.07a1,1,0,0,0-1-1h-4.1c-.55,0-.68.32-.29.71l4.68,4.68c.39.39.71.26.71-.29Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M113.53,13.07a1,1,0,0,0-1,1v4.1c0,.55.32.68.71.29l4.68-4.68c.39-.39.26-.71-.29-.71Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="volume">
|
||||
<g id="unmuted">
|
||||
<path d="M66.8,6.77a3.51,3.51,0,0,1-1.8.6H61.85a1,1,0,0,0-1,1V14.1a1,1,0,0,0,1,1H65a6.28,6.28,0,0,1,1,0,8.5,8.5,0,0,0,.81.63l3.54,2.6c.44.33.81.14.81-.41V4.5c0-.55-.36-.73-.8-.4Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M73.72,3.5s3.95-.81,3.87,7.73S73.72,19,73.72,19" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-linecap: round;stroke-width: 1.5px"/>
|
||||
<path d="M72.43,7.38S75.06,7,75,11.23s-2.58,3.86-2.58,3.86" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-linecap: round;stroke-width: 1.5px"/>
|
||||
</g>
|
||||
<g id="muted">
|
||||
<path d="M46.8,6.77a3.51,3.51,0,0,1-1.8.6H41.85a1,1,0,0,0-1,1V14.1a1,1,0,0,0,1,1H45a6.28,6.28,0,0,1,1,0,8.5,8.5,0,0,0,.81.63l3.54,2.6c.44.33.81.14.81-.41V4.5c0-.55-.36-.73-.8-.4Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<line x1="52.83" y1="6.98" x2="58.22" y2="12.36" style="fill: none;stroke: #fff;stroke-linecap: round;stroke-width: 2px"/>
|
||||
<line x1="52.83" y1="12.36" x2="58.22" y2="6.98" style="fill: none;stroke: #fff;stroke-linecap: round;stroke-width: 2px"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="closed_captions">
|
||||
<path d="M128.53,9.58c-6.17-4.21-6.46,7.77,0,3.92" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff"/>
|
||||
<path d="M135.06,9.58c-6.17-4.21-6.46,7.77,0,3.92" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff"/>
|
||||
<path d="M122,4.35h15.69V17.43H122ZM120.68,3V18.73H139V3Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
</g>
|
||||
<g id="jumpforward">
|
||||
<path d="M192,3.16l-4.33,2.16V1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M194.73,3.16,190.4,5.32V1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M189.83,3.16a8.15,8.15,0,0,0-8.16,8.16" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||
<path d="M181.68,10.83A8.15,8.15,0,0,0,189.83,19" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||
<path d="M189.46,19a8.15,8.15,0,0,0,8.16-8.16" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||
</g>
|
||||
<g id="skipback">
|
||||
<path d="M162.52,10.65a8.15,8.15,0,0,0,8.16,8.16" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||
<path d="M170.2,18.8a8.15,8.15,0,0,0,8.16-8.16" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||
<path d="M178.36,11a8.15,8.15,0,0,0-8.16-8.16" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 2px"/>
|
||||
<path d="M166.42,3.16l4.32,2.16V1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M163.7,3.16,168,5.32V1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="141.17" y="3.01" width="18" height="14" rx="2" ry="2" style="fill: #fff"/>
|
||||
<path d="M146.19,14.78a2.69,2.69,0,0,1-2.14-1A3.87,3.87,0,0,1,144.17,9c.51-.56,2-1.65,4.64.16l-.56.83c-1.43-1-2.62-1.09-3.34-.31a2.89,2.89,0,0,0-.08,3.47c.7.86,1.92.83,3.45-.08l.51.86A5.13,5.13,0,0,1,146.19,14.78Z" transform="translate(0.17 -0.99)" style="fill: #231f20"/>
|
||||
<path d="M153.73,14.78a2.69,2.69,0,0,1-2.14-1A3.87,3.87,0,0,1,151.71,9c.51-.56,2-1.65,4.64.16l-.56.83c-1.43-1-2.62-1.09-3.34-.31a2.89,2.89,0,0,0-.08,3.47c.7.86,1.92.83,3.45-.08l.51.86A5.13,5.13,0,0,1,153.73,14.78Z" transform="translate(0.17 -0.99)" style="fill: #231f20"/>
|
||||
</g>
|
||||
<g id="settings">
|
||||
<path d="M218.46,10.38a1.35,1.35,0,0,0-1-1.24l-1.85-.46a.7.7,0,0,1-.46-1.1l1-1.64A1.35,1.35,0,0,0,216,4.36h0a1.35,1.35,0,0,0-1.56-.19l-1.64,1a.7.7,0,0,1-1.1-.46l-.46-1.85a1.35,1.35,0,0,0-1.24-1h0a1.35,1.35,0,0,0-1.24,1l-.46,1.85a.7.7,0,0,1-1.1.46l-1.64-1a1.35,1.35,0,0,0-1.56.19h0a1.35,1.35,0,0,0-.19,1.56l1,1.64a.7.7,0,0,1-.46,1.1l-1.85.46a1.35,1.35,0,0,0-1,1.24h0a1.35,1.35,0,0,0,1,1.24l1.85.46a.7.7,0,0,1,.46,1.1l-1,1.64a1.35,1.35,0,0,0,.19,1.56h0a1.35,1.35,0,0,0,1.56.19l1.64-1a.7.7,0,0,1,1.1.46l.46,1.85a1.35,1.35,0,0,0,1.24,1h0a1.35,1.35,0,0,0,1.24-1l.46-1.85a.7.7,0,0,1,1.1-.46l1.64,1a1.35,1.35,0,0,0,1.56-.19h0a1.35,1.35,0,0,0,.19-1.56l-1-1.64a.7.7,0,0,1,.46-1.1l1.85-.46a1.35,1.35,0,0,0,1-1.24Zm-5.68,0A2.82,2.82,0,1,1,210,7.54,2.82,2.82,0,0,1,212.78,10.36Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
</g>
|
||||
<g id="stop">
|
||||
<rect x="223" y="2.84" width="14" height="14" rx="2" ry="2" style="fill: #fff"/>
|
||||
</g>
|
||||
<g id="loop">
|
||||
<g id="loop_on">
|
||||
<path d="M254.05,7.52a5.72,5.72,0,1,1-8.7-.27l-1.62-1.62a8,8,0,1,0,11.94.26Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M251.13,4.36a.72.72,0,0,1,.85-.85l5.52.77c.54.08.67.46.28.84l-5,5c-.39.39-.77.26-.84-.28Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
</g>
|
||||
<g id="loop_off" style="opacity: 0.5">
|
||||
<path d="M274.21,7.77a5.72,5.72,0,1,1-8.7-.27l-1.62-1.62a8,8,0,1,0,11.94.26Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M271.29,4.61a.72.72,0,0,1,.85-.85l5.52.77c.54.08.67.46.28.84l-5,5c-.39.39-.77.26-.84-.28Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="replay">
|
||||
<path d="M298.64,10.54a.79.79,0,0,1-1.1.64l-4.86-1.82c-.51-.19-.55-.58-.07-.85l6.18-3.57c.48-.27.79-.06.7.49Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M290,17.08a6.22,6.22,0,0,1-2.9-.71,5.94,5.94,0,0,1-3.2-5.24,6.11,6.11,0,0,1,11.87-1.89l.1-.15L298,10.15a8.1,8.1,0,0,0-16.12,1,7.93,7.93,0,0,0,4.26,7,8.22,8.22,0,0,0,3.83.95,8.13,8.13,0,0,0,6.57-3.32l-1.8-.93A6.14,6.14,0,0,1,290,17.08Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
</g>
|
||||
<g id="chapters">
|
||||
<rect x="302" y="3.01" width="3" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||
<rect x="307" y="3.01" width="15" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||
<rect x="302" y="8.01" width="3" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||
<rect x="307" y="8.01" width="15" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||
<rect x="302" y="13.01" width="3" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||
<rect x="307" y="13.01" width="15" height="3" rx="2" ry="2" style="fill: #fff"/>
|
||||
</g>
|
||||
</g>
|
||||
<g id="big_play">
|
||||
<g id="big_play_opaque">
|
||||
<path d="M60.1,78a1.06,1.06,0,0,1,0,2L29.82,97.49c-1,.55-1.73.1-1.73-1v-35c0-1.1.78-1.55,1.73-1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M2.33,80a37.5,37.5,0,1,1,37.5,37.5A37.5,37.5,0,0,1,2.33,80Z" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 5px;opacity: 0.75;isolation: isolate"/>
|
||||
</g>
|
||||
<g id="big_play_hover">
|
||||
<path d="M140.1,78a1.06,1.06,0,0,1,0,2L109.82,97.49c-1,.55-1.73.1-1.73-1v-35c0-1.1.78-1.55,1.73-1Z" transform="translate(0.17 -0.99)" style="fill: #fff"/>
|
||||
<path d="M82.33,80a37.5,37.5,0,1,1,37.5,37.5A37.5,37.5,0,0,1,82.33,80Z" transform="translate(0.17 -0.99)" style="fill: none;stroke: #fff;stroke-width: 5px"/>
|
||||
</g>
|
||||
<g id="loading">
|
||||
<circle cx="201.88" cy="47.13" r="8.13" style="fill: #fff"/>
|
||||
<circle cx="233.88" cy="79.01" r="5" style="fill: #fff;opacity: 0.4"/>
|
||||
<circle cx="201.88" cy="110.88" r="6" style="fill: #fff;opacity: 0.6000000000000001"/>
|
||||
<circle cx="170.13" cy="79.01" r="7" style="fill: #fff;opacity: 0.8"/>
|
||||
<circle cx="178.25" cy="56.34" r="7.5" style="fill: #fff;opacity: 0.9"/>
|
||||
<circle cx="226.33" cy="56.09" r="4.5" style="fill: #fff;opacity: 0.30000000000000004"/>
|
||||
<circle cx="225.75" cy="102.76" r="5.5" style="fill: #fff;opacity: 0.5"/>
|
||||
<circle cx="178.25" cy="102.76" r="6.5" style="fill: #fff;opacity: 0.7000000000000001"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.6 KiB |
36
prosopopee/themes/material/static/js/mediaelement-and-player.min.js
vendored
Normal file
36
prosopopee/themes/material/static/js/mediaelement-and-player.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -13,21 +13,38 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<nav class="blue-grey darken-1">
|
||||
<div class="nav-wrapper">
|
||||
<a href="#" class="brand-logo right">{{ settings.title }}</a>
|
||||
|
||||
<!-- Navbar and Header -->
|
||||
<nav class="nav-extended nav-full-header z-depth-0 blue-grey darken-3">
|
||||
<div class="nav-background">
|
||||
{% if settings.cover %}
|
||||
{% set image = Image(settings.cover) %}
|
||||
{{ image.copy() }}
|
||||
<div class="ea k" style="background-image: url('{{ image.generate_thumbnail("x1080") }}');"></div>
|
||||
{% else %}
|
||||
<div class="ea k"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="nav-wrapper db">
|
||||
<a href="#" class="brand-logo"><i class="fa fa-camera" aria-hidden="true"></i><p>{{ settings.title }}</p></a>
|
||||
{% if settings.menu -%}
|
||||
{% include 'menu.html' %}
|
||||
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
|
||||
{% endif -%}
|
||||
</div>
|
||||
|
||||
<div class="nav-header valign-wrapper">
|
||||
<div class="de">
|
||||
<h1>{{ settings.sub_title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
{% if settings.menu -%}
|
||||
{% include 'menu.html' %}
|
||||
{% endif -%}
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
</main>
|
||||
{% include 'footer.html' %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -4,12 +4,11 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../static/css/materialize.css"/>
|
||||
<link rel="stylesheet" href="../static/css/styles.css">
|
||||
<link rel="stylesheet" href="../static/css/style-page.css">
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/baguetteBox.min.css" media="screen,projection"/>
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/panorama_viewer.css" media="screen,projection"/>
|
||||
{% if settings.share %}
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/mediaelementplayer.css" media="screen,projection"/>
|
||||
<link rel="stylesheet" href="../static/css/font-awesome.css">
|
||||
{% endif %}
|
||||
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
@ -39,7 +38,7 @@
|
||||
{% else -%}
|
||||
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
|
||||
<a href="../" class="btn-floating btn-large red">
|
||||
<i class="mdi-action-home"></i>
|
||||
<i class="fa fa-home"></i>
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
@ -49,6 +48,7 @@
|
||||
<script type="text/javascript" src="../static/js/baguetteBox.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="../static/js/jquery.panorama_viewer.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="../static/js/jquery.lazyload.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="../static/js/mediaelement-and-player.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$(document).ready(function(){
|
||||
$('.parallax').parallax();
|
||||
@ -67,11 +67,25 @@ video.on('click', function(e){
|
||||
}
|
||||
});
|
||||
|
||||
$('audio').mediaelementplayer({
|
||||
alwaysShowControls: true,
|
||||
features: ['playpause','progress','volume'],
|
||||
audioVolume: 'horizontal',
|
||||
audioWidth: 450,
|
||||
audioHeight: 30,
|
||||
iPadUseNativeControls: true,
|
||||
iPhoneUseNativeControls: true,
|
||||
AndroidUseNativeControls: true
|
||||
});
|
||||
|
||||
|
||||
$(function() {
|
||||
$("img.lazy").lazyload({
|
||||
threshold : 400,
|
||||
effect : "fadeIn"
|
||||
});
|
||||
$("video.lazy").lazyload({
|
||||
threshold : 400,
|
||||
effect : "fadeIn"
|
||||
});
|
||||
});
|
||||
@ -117,7 +131,7 @@ var slowLoad = window.setTimeout( function() {
|
||||
div.appendChild(dismiss_container);
|
||||
|
||||
html_node.appendChild(div);
|
||||
}, 1000 );
|
||||
}, 10000 );
|
||||
|
||||
window.addEventListener( 'load', function() {
|
||||
try {
|
||||
|
||||
@ -2,18 +2,20 @@
|
||||
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="static/css/materialize.css">
|
||||
<link rel="stylesheet" href="static/css/styles.css">
|
||||
<link rel="stylesheet" href="static/css/style.css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<link rel="stylesheet" href="static/css/font-awesome.css">
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Gallery -->
|
||||
<div id="portfolio" class="cx gray">
|
||||
<div class="b e">
|
||||
{% for galleries_line in galleries|reverse|batch(1)|reverse %}
|
||||
{% for gallery in galleries_line|reverse %}
|
||||
<div class="col s12 m12 l8 push-l2">
|
||||
<a href="{{ gallery.link }}">
|
||||
<div class="card hoverable blue-grey lighten-5">
|
||||
<div class="card-image">
|
||||
<div class="d hx hf gu gallery-item gallery-expand ce polygon">
|
||||
<div class="gallery-curve-wrapper">
|
||||
<a href="{{ gallery.link }}" class="gallery-cover gray">
|
||||
{% if gallery.cover_type == "video" %}
|
||||
{% set video = Video(gallery.cover) %}
|
||||
{{ video.copy() }}
|
||||
@ -21,50 +23,24 @@
|
||||
{% set cover = Image(gallery.cover) %}
|
||||
{{ cover.copy() }}
|
||||
{% endif %}
|
||||
<div class="gallery-title">
|
||||
<h2>{{ gallery.title }}</h2>
|
||||
{% if gallery.sub_title %}<h3>{{ gallery.sub_title }}</h3>{% endif %}
|
||||
{% if settings.show_date and gallery.date %}<div class="gallery-datetime">{{ gallery.date.strftime("%d %B %Y") }}</div>{% endif %}
|
||||
{% if gallery.tags %}<div class="gallery-tag">IN {% for tag in gallery.tags -%} <span> {{ tag }}</span> {% endfor -%}</div>{% endif %}
|
||||
</div>
|
||||
{% if video %}
|
||||
<img class="responsive-img" src="{{ video.generate_thumbnail("900") }}">
|
||||
<img class="responsive-img" src="{{ video.generate_thumbnail("400") }}">
|
||||
<video autoplay loop muted class="fillWidth">
|
||||
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
|
||||
</video>
|
||||
{% set video = "" %}
|
||||
{% else %}
|
||||
<img src="{{ cover.generate_thumbnail("x900") }}">
|
||||
<img class="responsive-img" src="{{ cover.generate_thumbnail("x400") }}" alt="placeholder" crossOrigin="anonymous">
|
||||
{% endif %}
|
||||
|
||||
<span class="card-title truncate">{{ gallery.title }}
|
||||
{% if gallery.sub_title %} : {{ gallery.sub_title }}{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-action">
|
||||
<div class="left">
|
||||
<a href="{{ gallery.link }}">Read more..</a>
|
||||
</div>
|
||||
{% if gallery.tags or gallery.date %}
|
||||
<div class="right">
|
||||
{% if gallery.tags %}{% for tag in gallery.tags -%}
|
||||
<div class="chip">
|
||||
<div class="image">
|
||||
<img class="grey">
|
||||
<div class="tag white-text">
|
||||
{{ tag[0].capitalize() }}
|
||||
</div>
|
||||
</img>
|
||||
{{ tag }}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor -%}
|
||||
{% endif %}
|
||||
{% if gallery.date %}
|
||||
<div class="chip">
|
||||
{{ gallery.date.strftime("%d %B %Y") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
@ -1,20 +1,4 @@
|
||||
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-action-view-headline"></i></a>
|
||||
<ul class="left hide-on-med-and-down">
|
||||
{%- for line in settings.menu -%}
|
||||
{% set file_name, menu_name = line.items()[0] %}
|
||||
{% if file_name.startswith('http') %}
|
||||
{% set file_name = file_name %}
|
||||
{% elif gallery %}
|
||||
{% set file_name = "../"+file_name %}
|
||||
{%- endif -%}
|
||||
{%- if loop.first -%}
|
||||
<li><a href={{ file_name }} class=first-item-menu>{{ menu_name }}</a></li>
|
||||
{% else %}
|
||||
<li><a href={{ file_name }} class=item-menu>{{ menu_name }}</a></li>
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
<ul class="side-nav" id="mobile-demo">
|
||||
<ul class="side-nav" id="nav-mobile">
|
||||
{%- for line in settings.menu -%}
|
||||
{% set file_name, menu_name = line.items()[0] %}
|
||||
{% if file_name.startswith('http') %}
|
||||
|
||||
14
prosopopee/themes/material/templates/sections/audio.html
Normal file
14
prosopopee/themes/material/templates/sections/audio.html
Normal file
@ -0,0 +1,14 @@
|
||||
{% set audio = Audio(section.image) %}
|
||||
{% set extension = settings.ffmpeg_audio.extension %}
|
||||
{% if extension == "mp3" %}
|
||||
{% set format = "mpeg" %}
|
||||
{% else %}
|
||||
{% set format = extension %}
|
||||
{% endif %}
|
||||
{{ audio.copy() }}
|
||||
<div class="audio-player">
|
||||
<h2>{% if section.title %}{{ section.title }}{% else %}{{ audio }}{% endif %}</h2>
|
||||
<audio controls preload=none>
|
||||
<source src="{{ audio }}.{{ extension }}" type="audio/{{ format }}">
|
||||
</audio>
|
||||
</div>
|
||||
@ -1,5 +1,6 @@
|
||||
{% if section.image.type == "video" %}
|
||||
{% set video = Video(section.image) %}
|
||||
{% set format = settings.ffmpeg.extension %}
|
||||
{% else %}
|
||||
{% set image = Image(section.image) %}
|
||||
{% set caption = section.text %}
|
||||
@ -10,9 +11,9 @@
|
||||
{% endif %}
|
||||
<div class="bordered-picture baguette caption">
|
||||
{% if video %}
|
||||
<img class="lazy" data-original="{{ video.generate_thumbnail("2000") }}" alt="">
|
||||
<video class="lazy" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
|
||||
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
|
||||
<img class="responsive-img lazy z-depth-2" data-original="{{ video.generate_thumbnail("2000") }}" alt="">
|
||||
<video class="lazy responsive-video" poster="{{ video.generate_thumbnail("2000") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
|
||||
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
|
||||
</video>
|
||||
{% else %}
|
||||
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
|
||||
@ -21,7 +22,7 @@
|
||||
data-at-1366="{{ image.generate_thumbnail("x1366") }}"
|
||||
data-at-1920="{{ image.generate_thumbnail("x1920") }}"
|
||||
>
|
||||
<img class="responsive-img lazy" data-original="{{ image.generate_thumbnail("x2000") }}" alt="">
|
||||
<img class="responsive-img lazy z-depth-2" data-original="{{ image.generate_thumbnail("x2000") }}" alt="">
|
||||
{% if caption %}
|
||||
<div class="caption__overlay card-panel center">
|
||||
<h5 class="black-white">{{ caption }}</h5>
|
||||
@ -33,4 +34,3 @@
|
||||
{% if section.background %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<div class="parallax-container z-depth-2 valign-wrapper">
|
||||
<div class="parallax">
|
||||
{% if section.image.type == "video" %}
|
||||
{% set format = settings.ffmpeg.extension %}
|
||||
{% set video = Video(section.image) %}
|
||||
<img class="lazy" src="{{ video.generate_thumbnail("720") }}">
|
||||
<video autoplay loop muted class="fillWidth">
|
||||
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
|
||||
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
|
||||
</video>
|
||||
{% else %}
|
||||
{% set image = Image(section.image) %}
|
||||
|
||||
@ -1,52 +1,51 @@
|
||||
{% if section.background %}
|
||||
<div id="bg-section" style="background: {{ section.background }};">
|
||||
<div class="bg-section" style="background: {{ section.background }};">
|
||||
{% endif %}
|
||||
|
||||
<div class="container baguette">
|
||||
<div class="row">
|
||||
<section class="container pictures-group baguette">
|
||||
{% for line in section.images %}
|
||||
{% set number = line|length %}
|
||||
<div class="pictures-line">
|
||||
{% for image in line %}
|
||||
<div class="col s12 m{{24 // number }} l{{12 // number }}">
|
||||
<div class="card">
|
||||
<div class="picture caption">
|
||||
{% if image.type == "video" %}
|
||||
{% set caption = image.text %}
|
||||
{% set video = Video(image) %}
|
||||
{% set format = settings.ffmpeg.extension %}
|
||||
{{ video.copy() }}
|
||||
<div class="picture card-image">
|
||||
<img class="lazy" data-original="{{ video.generate_thumbnail("600") }}">
|
||||
<video class="lazy" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted="">
|
||||
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
|
||||
<img class="z-depth-2 lazy responsive-img" data-original="{{ video.generate_thumbnail("600") }}" src="" alt="">
|
||||
<video class="lazy responsive-video" id="video" poster="{{ video.generate_thumbnail("600") }}" alt="" autoplay="autoplay" loop="loop" preload="auto" muted>
|
||||
<source src="{{ video }}.{{ format }}" type="video/{{ format }}">
|
||||
</video>
|
||||
{% if caption %}
|
||||
<div class="caption__overlay">
|
||||
<h5 class="caption__overlay__title">{{ caption }}</h5>
|
||||
</div>
|
||||
{% set video = "" %}
|
||||
{% endif %}
|
||||
{% else %}
|
||||
{% set caption = image.text %}
|
||||
{% set image = Image(image) %}
|
||||
{{ image.copy() }}
|
||||
|
||||
<div class="picture card-image caption">
|
||||
<a href="{{ image }}" {% if caption %}data-caption="{{ caption }}"{% endif %}
|
||||
data-at-450="{{ image.generate_thumbnail("x450") }}"
|
||||
data-at-800="{{ image.generate_thumbnail("x800") }}"
|
||||
data-at-1366="{{ image.generate_thumbnail("x1366") }}"
|
||||
data-at-1920="{{ image.generate_thumbnail("x1920") }}"
|
||||
>
|
||||
<img class="lazy" data-original="{{ image.generate_thumbnail("x600") }}">
|
||||
<img class="lazy responsive-img z-depth-2" src="" data-original="{{ image.generate_thumbnail("x600") }}" alt="">
|
||||
{% if caption %}
|
||||
<div class="caption__overlay center">
|
||||
<div class="caption__overlay">
|
||||
<h5 class="caption__overlay__title">{{ caption }}</h5>
|
||||
</div>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if not loop.last %}
|
||||
<div class="separator"></div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% if section.background %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
{% set absolute_url = settings.url + "/" + link -%}
|
||||
<div class="fixed-action-btn horizontal click-to-toggle" style="bottom: 45px; right: 24px;">
|
||||
<a class="btn-floating btn-large red">
|
||||
<i class="mdi-content-add"></i>
|
||||
<i class="fa fa-bars"></i>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="../" class="btn-floating btn-large red"><i class="mdi-action-home"></i></a>
|
||||
<a href="../" class="btn-floating btn-large red"><i class="fa fa-home"></i></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="btn-floating grey lighten-3" href="https://twitter.com/share?text={{ gallery.name }}&url={{absolute_url}}{%if gallery.tags %}&hashtags={% for tag in gallery.tags -%}{{ tag }}{% if not loop.lirst and not loop.last %},{% endif %}{% endfor -%}{% endif -%}" target="_blank"><i class="fa fa-twitter-square grey-text"></i></a>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user