update material phase 2
This commit is contained in:
parent
7d06ed2792
commit
7f8942f638
@ -472,3 +472,8 @@ blockquote:after {
|
||||
blockquote p {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
video.responsive-video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
@ -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 %}
|
||||
|
@ -4311,20 +4311,10 @@ 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-Thin.eot");
|
||||
|
@ -61,6 +61,9 @@ main {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.caption__overlay h5 {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.caption .card-panel {
|
||||
margin: 0;
|
@ -117,7 +117,8 @@ nav .nav-wrapper {
|
||||
}
|
||||
@media only screen and (min-width: 993px) {
|
||||
nav a.button-collapse {
|
||||
display:none
|
||||
display: unset !important;
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
nav .button-collapse {
|
||||
@ -150,15 +151,6 @@ nav .brand-logo i,nav .brand-logo i.material-icons {
|
||||
float:left;
|
||||
margin-right:15px
|
||||
}
|
||||
@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
|
||||
}
|
||||
}
|
||||
@font-face {
|
||||
font-family:"Roboto";
|
||||
src:local(Roboto Thin),url("../fonts/Roboto-Thin.eot");
|
||||
@ -504,3 +496,39 @@ nav .nav-header {
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
@ -26,17 +26,9 @@
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="nav-wrapper db">
|
||||
<a href="/pages/demo" class="brand-logo"><i class="material-icons">camera</i>{{ settings.title }}</a>
|
||||
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
|
||||
<a href="#" class="brand-logo"><i class="fa fa-camera" aria-hidden="true"></i><p>{{ settings.title }}</p></a>
|
||||
{% if settings.menu -%}
|
||||
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
|
||||
<ul class="bt hide-on-med-and-down">
|
||||
<li><a href="/pages/demo">Gallery</a></li>
|
||||
<li class="k"><a href="/pages/dark-theme">Dark Theme</a></li>
|
||||
<li><a href="/pages/blog">Blog</a></li>
|
||||
<li><a href="/pages/docs">Docs</a></li>
|
||||
<li><a class='dropdown-button' href='#' data-activates='feature-dropdown' data-belowOrigin="true" data-constrainWidth="false">Features<i class="material-icons bt">arrow_drop_down</i></a></li>
|
||||
</ul>
|
||||
{% endif -%}
|
||||
</div>
|
||||
|
||||
@ -46,16 +38,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<ul class="side-nav" id="nav-mobile">
|
||||
<li><a href="/pages/demo"><i class="material-icons">camera</i>Gallery</a></li>
|
||||
<li class="k"><a href="/pages/dark-theme"><i class="material-icons">brightness_3</i>Dark Theme</a></li>
|
||||
<li><a href="/pages/blog"><i class="material-icons">edit</i>Blog</a></li>
|
||||
<li><a href="/pages/docs"><i class="material-icons">school</i>Docs</a></li>
|
||||
<li><a href="/pages/full-header"><i class="material-icons">fullscreen</i>Fullscreen Header</a></li>
|
||||
<li><a href="/pages/horizontal"><i class="material-icons">swap_horiz</i>Horizontal Style</a></li>
|
||||
<li><a href="/pages/no-image"><i class="material-icons">texture</i>No Image Expand</a></li>
|
||||
</ul>
|
||||
|
||||
{% if settings.menu -%}
|
||||
{% include 'menu.html' %}
|
||||
{% endif -%}
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
|
@ -4,7 +4,7 @@
|
||||
<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"/>
|
||||
<link type="text/css" rel="stylesheet" href="../static/css/mediaelementplayer.css" media="screen,projection"/>
|
||||
|
@ -2,8 +2,9 @@
|
||||
|
||||
{% block css %}
|
||||
<link rel="stylesheet" href="static/css/materialize.css">
|
||||
<link rel="stylesheet" href="static/css/gallery-dark-materialize.min.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 %}
|
||||
@ -22,6 +23,12 @@
|
||||
{% 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("400") }}">
|
||||
<video autoplay loop muted class="fillWidth">
|
||||
|
@ -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') %}
|
||||
|
Loading…
x
Reference in New Issue
Block a user