update material theme
This commit is contained in:
Adrien Beudin
parent
16536149cb
commit
3aa14884e3
@ -376,7 +376,6 @@ html,body {
|
||||
height:100%
|
||||
}
|
||||
body {
|
||||
background-color:#37474f;
|
||||
font-family:"Lato", sans-serif
|
||||
}
|
||||
ul {
|
||||
@ -440,21 +439,22 @@ nav .nav-background .ea {
|
||||
bottom:0;
|
||||
-webkit-transform:none;
|
||||
transform:none;
|
||||
background-repeat:repeat
|
||||
background-repeat:repeat;
|
||||
}
|
||||
nav .nav-header {
|
||||
clear:both;
|
||||
padding:40px 0
|
||||
padding:40px 0;
|
||||
}
|
||||
nav .nav-header h1 {
|
||||
font-size:56px;
|
||||
font-weight:300
|
||||
font-weight:300;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.b {
|
||||
position:relative
|
||||
}
|
||||
.b .d {
|
||||
padding:0;
|
||||
margin-top: 20px;
|
||||
}
|
||||
.b .gallery-expand .gallery-curve-wrapper {
|
||||
cursor:pointer;
|
||||
@ -532,3 +532,77 @@ nav .nav-header {
|
||||
.brand-logo p {
|
||||
margin-top: 7px;
|
||||
}
|
||||
|
||||
.img {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.galleries-line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin-bottom: -7px; /* YOLO */
|
||||
}
|
||||
|
||||
.covers-1 .gallery-square {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
padding-bottom: 47%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.covers-2 .gallery-square {
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
margin: 0 0 0;
|
||||
padding-bottom: 47%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.covers-3 .gallery-square {
|
||||
width: 33.333333333%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding-bottom: 30%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.gallery-square > a {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 555;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.gallery-cover {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
<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 -%}
|
||||
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
|
||||
{% include 'menu.html' %}
|
||||
{% endif -%}
|
||||
</div>
|
||||
|
||||
@ -39,9 +39,6 @@
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% if settings.menu -%}
|
||||
{% include 'menu.html' %}
|
||||
{% endif -%}
|
||||
{% block content %}
|
||||
{% endblock %}
|
||||
|
||||
|
||||
@ -5,47 +5,44 @@
|
||||
<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">
|
||||
{% if settings.custom_css %}
|
||||
<link type="text/css" rel="stylesheet" href="static/css/custom.css" media="screen,projection"/>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<!-- 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="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() }}
|
||||
{% else %}
|
||||
{% set cover = Image(gallery.cover) %}
|
||||
{{ cover.copy() }}
|
||||
{% endif %}
|
||||
<div class="galleries-grid">
|
||||
{% for galleries_line in galleries|reverse|batch(3)|reverse %}
|
||||
<div class="galleries-line covers-{{ galleries_line|length }}">
|
||||
{% for gallery in galleries_line|reverse %}<!-- comment tricks against space between inline-block
|
||||
--><div class="gallery-square">
|
||||
<a href="{{ gallery.link }}">
|
||||
<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") }}">
|
||||
</a>
|
||||
{% if gallery.cover_type == "video" %}
|
||||
{% set video = Video(gallery.cover) %}
|
||||
{{ video.copy() }}
|
||||
<div class="gallery-cover">
|
||||
<video autoplay loop muted class="fillWidth">
|
||||
<source src="{{ video }}" type="video/webm" data-source="{{ video }}" data-format="vp8" data-extension="webm">
|
||||
</video>
|
||||
{% set video = "" %}
|
||||
<img class="fillWidth" alt="" src="{{ video.generate_thumbnail("900") }}">
|
||||
</div>
|
||||
{% else %}
|
||||
<img class="responsive-img" src="{{ cover.generate_thumbnail("x400") }}" alt="placeholder" crossOrigin="anonymous">
|
||||
{% set cover = Image(gallery.cover) %}
|
||||
{{ cover.copy() }}
|
||||
<div class="gallery-cover" style="background-image: url('{{ cover.generate_thumbnail("x900") }}'), url('{{ cover.generate_thumbnail("x150") }}');"></div>
|
||||
{% endif %}
|
||||
</a>
|
||||
</div>
|
||||
</div><!-- comment tricks against space between inline-block
|
||||
-->{% endfor %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="static/js/materialize.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
|
||||
@ -1,15 +1,13 @@
|
||||
<ul class="side-nav" id="nav-mobile">
|
||||
{%- for line in settings.menu -%}
|
||||
{% set file_name, menu_name = line.items()[0] %}
|
||||
<ul class="bt hide-on-med-and-down" style="float: right !important;">
|
||||
{% for line in settings.menu %}
|
||||
{% set rowloop = loop %}
|
||||
{% for file_name, menu_name in line.items() %}
|
||||
{% 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 -%}
|
||||
{% set file_name = "../"+file_name %}
|
||||
{% endif %}
|
||||
<li><a href={{ file_name }}>{{ menu_name }}</a></li>
|
||||
{% endfor %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@ -1,33 +1,53 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block css %}
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="../static/css/materialize.css">
|
||||
<link rel="stylesheet" href="../static/css/styles.css">
|
||||
{% endblock %}
|
||||
<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">
|
||||
{% if settings.custom_css %}
|
||||
<link type="text/css" rel="stylesheet" href="static/css/custom.css" media="screen,projection"/>
|
||||
{% endif %}
|
||||
{% if settings.rss -%}
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ settings.title }}" href="{{ settings.url }}/feed.xml" />
|
||||
{% endif -%}
|
||||
<!--Let browser know website is optimized for mobile-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>{{ settings.title }} · {{ gallery.title }}</title>
|
||||
</head>
|
||||
|
||||
{% block content %}
|
||||
<div class="container">
|
||||
<h2>{{ gallery.title }}</h2>
|
||||
<body>
|
||||
|
||||
<!-- 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' %}
|
||||
{% endif -%}
|
||||
</div>
|
||||
|
||||
<div class="nav-header valign-wrapper">
|
||||
<div class="de">
|
||||
<h1>{{ gallery.title }}</h1>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{% for section in gallery.sections %}
|
||||
{% include "sections/" + section.type + ".html" %}
|
||||
{% endfor %}
|
||||
|
||||
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
|
||||
<a href="../" class="btn-floating btn-large red">
|
||||
<i class="mdi-action-home"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
<script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" src="../static/js/materialize.min.js" charset="utf-8"></script>
|
||||
<script type="text/javascript" charset="utf-8">
|
||||
$('.button-collapse').sideNav();
|
||||
|
||||
$(document).ready(function(){
|
||||
$('.scrollspy').scrollSpy();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% include 'footer.html' %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user