update material theme

prosopopee/themes/material/static/css/style.css

@@ -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;
+}

prosopopee/themes/material/templates/base.html

@@ -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 %}
 

prosopopee/themes/material/templates/index.html

@@ -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 class="galleries-grid">
-<div id="portfolio" class="cx gray">
+  {% for galleries_line in galleries|reverse|batch(3)|reverse %}
-  <div class="b e">
+  <div class="galleries-line covers-{{ galleries_line|length }}">
-    {% for galleries_line in galleries|reverse|batch(1)|reverse %}
+    {% for gallery in galleries_line|reverse %}<!-- comment tricks against space between inline-block
-    {% for gallery in galleries_line|reverse %}
+    --><div class="gallery-square">
-    <div class="d hx hf gu gallery-item gallery-expand ce polygon">
+      <a href="{{ gallery.link }}">
-      <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="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 %}
+      </a>
-        <img class="responsive-img" src="{{ video.generate_thumbnail("400") }}">
+      {% 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><!-- comment tricks against space between inline-block
-      </div>
+    -->{% 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">

prosopopee/themes/material/templates/menu.html

@@ -1,15 +1,13 @@
-<ul class="side-nav" id="nav-mobile">   
+<ul class="bt hide-on-med-and-down" style="float: right !important;">
-  {%- for line in settings.menu -%}
+  {% for line in settings.menu %}
-  {% set file_name, menu_name = line.items()[0] %}
+  {% 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>
+  {% set file_name = "../"+file_name %}
-  {%- endif -%}
+  {% endif %}
-  {%- endfor -%}
+  <li><a href={{ file_name }}>{{ menu_name  }}</a></li>
+  {% endfor %}
+  {% endfor %}
 </ul>

prosopopee/themes/material/templates/page.html

@@ -1,33 +1,53 @@
-{% extends "base.html" %}
+<!DOCTYPE html>
-
+<html>
-{% block css %}
+  <head>
+    <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.css">
-{% endblock %}
+    <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 %}
+  <body>
-<div class="container">
+
-    <h2>{{ gallery.title }}</h2>
+    <!-- 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;">
+    {% include 'footer.html' %}
-    <a href="../" class="btn-floating btn-large red">
+  </body>
-        <i class="mdi-action-home"></i>
+</html>
-    </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 %}