Merge pull request #85 from Psycojoker/0.8.1

0.8.1

docs/changelog.rst

@@ -1,6 +1,11 @@
 Changelog
 =========
 
+0.8.1 (2018-03-28)
+ * Fix some css error
+ * Update Material theme
+ * Add fadeInUp effect in exposure theme
+
 0.8 (2018-02-28)
 
  * Add night mode https://prosopopee.readthedocs.io/en/latest/configuration.html#night_mode

docs/configuration.rst

@@ -142,7 +142,7 @@ If you want only light theme you can see below.
 Night Mode
 ~~~~~~~~~~
 
-For enabled the night mode::
+For enabled the night mode only available for exposure theme (default theme)::
 
   title: Gallery
   settings:

prosopopee/prosopopee.py

@@ -559,7 +559,7 @@ def build_index(settings, galleries_cover, templates, gallery_path='', sub_index
 
 
 def main():
-    arguments = docopt(__doc__, version='0.6')
+    arguments = docopt(__doc__, version='0.8.1')
     settings = get_settings()
 
     front_page_galleries_cover = []

prosopopee/themes/exposure/static/css/style-page.css

@@ -614,3 +614,55 @@ input:checked + .slider:before {
 .slider.round:before {
   border-radius: 50%;
 }
+
+@keyframes fadeInUp {
+	from {
+		transform: translate3d(0,80px,0)
+	}
+
+	to {
+		transform: translate3d(0,0,0);
+		opacity: 1
+	}
+}
+
+@-webkit-keyframes fadeInUp {
+	from {
+		transform: translate3d(0,80px,0)
+	}
+
+	to {
+		transform: translate3d(0,0,0);
+		opacity: 1
+	}
+}
+
+.animated {
+	animation-delay: 0.5s;
+	animation-duration: 1s;
+	animation-fill-mode: both;
+	-webkit-animation-duration: 1s;
+	-webkit-animation-fill-mode: both
+}
+
+.animatedFadeInUp {
+	opacity: 0
+}
+
+.fadeInUp {
+	opacity: 0;
+	animation-name: fadeInUp;
+	-webkit-animation-name: fadeInUp;
+}
+
+@media only screen and (max-device-width: 700px) {
+  .paragraph {
+    font-size: 3.7vmin !important;
+    margin-left: 10% !important;
+    margin-right: 10% !important;
+  }
+  .full-picture h2 {
+    font-size: 3.2vw !important;
+  }
+}
+

prosopopee/themes/exposure/static/css/style.css

@@ -183,6 +183,10 @@ nav {
   line-height: 56px;
 }
 
+body.night nav {
+  background-color: #061F2F;;
+}
+
 nav .nav-wrapper {
   position: relative;
   height: 100%;
@@ -231,7 +235,7 @@ nav ul li > a.item-menu::before {
     margin-right: 22px;
     font-size: 18px;
     line-height: 1;
-    color: #ebebeb;
+    color: #cfcfcf;
 }
 
 .gallery-tag {
@@ -414,3 +418,16 @@ input:checked + .slider:before {
 .slider.round:before {
   border-radius: 50%;
 }
+
+@media only screen and (max-device-width: 700px) {
+  .gallery-square {
+    width: 100% !important;
+    margin-bottom: -7px !important;
+    padding-bottom: 70% !important;
+  }
+
+  .gallery-title > h2 {
+    font-size: 3.7vw;
+  }
+}
+

prosopopee/themes/exposure/templates/menu.html

@@ -2,18 +2,20 @@
   <div class="nav-wrapper">
     <ul>
       {% 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 %}
+      {% else %}
       {% set file_name = "../"+file_name %}
       {% endif %}
-      {% if loop.first %}
+      {% if rowloop.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 %}
+      {% endfor %}
     </ul>
   </div>
 </nav>

prosopopee/themes/exposure/templates/page.html

@@ -22,5 +22,23 @@
     </div>
   </a>
 </div>
+{% if settings.settings.night_mode %}
 <script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
+<script type="text/javascript">
+if (localStorage.getItem("mode_night") == "true") {
+  $('body').addClass('night');
+  document.getElementById("toggle-box-checkbox").checked = true;
+}
+
+$('#toggle-box-checkbox').on('change', function(){
+  if(this.checked){
+      $('body').addClass('night');
+      localStorage.setItem("mode_night", true);
+    }else{
+        $('body').removeClass('night');
+        localStorage.setItem("mode_night", false);
+      }
+});
+</script>
+{% endif %}
 {% endblock %}

prosopopee/themes/exposure/templates/sections/full-picture.html

@@ -6,7 +6,7 @@
   <div class="video-container">
     {% if section.text %}
     <div class="title-container">
-      <div class="headline">
+      <div class="headline animated animatedFadeInUp fadeInUp">
         <h1>{{ section.text.title }}</h1>
         <h2>{{ section.text.sub_title }}</h2>
         {% if section.text.date_end %}
@@ -30,7 +30,7 @@
 <section class="full-picture" style="background: url('{{ image.generate_thumbnail("x2000") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover, url('{{ image.generate_thumbnail("x450") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover transparent;">
   {% if section.text %}
   <div class="picture-text">
-    <div class="picture-text-column">
+    <div class="picture-text-column animated animatedFadeInUp fadeInUp">
       <h1>{{ section.text.title }}</h1>
       <h2>{{ section.text.sub_title }}</h2>
       {% if section.text.date_end %}

prosopopee/themes/light/templates/sections/author.html

@@ -1,7 +1,12 @@
+{% if settings.settings.light_mode %}
+{% set pathstatic = ".." %}
+{% else %}
+{% set pathstatic = "." %}
+{% endif %}
 {% set image = Image(section.image) %}
 {{ image.copy() }}
 <div class="author-meta">
-    <img src=../{{ image.generate_thumbnail("200x200") }} alt="" class="circle">
+  <img src="{{ pathstatic }}/{{ image.generate_thumbnail("200x200") }}" alt="" class="circle">
     <div>
         <span class=author-info>Story by
         <h4>{{ section.name }}</h4>

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

@@ -312,3 +312,22 @@ input:checked + .slider-btn:before {
 .slider-btn.round:before {
   border-radius: 50%;
 }
+
+@media only screen and (max-device-width: 700px) {
+  h2 {
+    font-size: 2.56rem !important;
+  }
+  .parallax img {
+    min-width: 200% !important;
+  }
+  .gallery-title > h2 {
+    font-size: 3.7vw !important;
+  }
+  .parallax-container h2 {
+    font-size: 4.2vw !important;
+  }
+  .audio-player h2 {
+    font-size: 14px !important;
+  }
+}
+

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,96 @@ 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;
+}
+
+@media only screen and (max-device-width: 700px) {
+  .gallery-square {
+    width: 100% !important;
+    margin-bottom: -7px !important;
+    padding-bottom: 70% !important; 
+  }
+
+  h2 {
+    font-size: 2.56rem !important;
+  }
+
+  .gallery-title > h2 {
+    font-size: 3.7vw !important;
+  }
+  .parallax-container h2 {
+    font-size: 4.2vw !important;
+  }
+}

prosopopee/themes/material/templates/base.html

@@ -17,18 +17,12 @@
     <!-- 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 -%}
-        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
+        {% include 'menu.html' %}
         {% endif -%}
       </div>
 
@@ -39,9 +33,6 @@
       </div>
     </nav>
 
-    {% if settings.menu -%}
-    {% include 'menu.html' %}
-    {% endif -%}
     {% block content %}
     {% endblock %}
 

prosopopee/themes/material/templates/gallery-index.html

@@ -29,23 +29,13 @@
     <title>{{ gallery.title }} · {{ settings.title }}</title>
   </head>
 
-  <body>
+  <body class="night">
     <main>
 
-    {% if settings.settings.night_mode %}
-    <div class="floating-menu">
-      <label class="switch-btn">
-        <input type="checkbox" id="toggle-box-checkbox">
-        <span class="slider-btn round"></span>
-      </label>
-    </div>
-    {% endif %}
-
     {% for section in gallery.sections %}
     {% include "sections/" + section.type + ".html" %}
     {% endfor %}
 
-
     {% if settings.share %}
     {% include 'share.html' -%}
     {% endif %}
@@ -66,23 +56,6 @@
     <script type="text/javascript" src="../static/js/mediaelement-and-player.min.js" charset="utf-8"></script>
     {% endif %}
     <script type="text/javascript" charset="utf-8">
-{% if settings.settings.night_mode %}
-if (localStorage.getItem("mode_night") == "true") {
-  $('body').addClass('night');
-  document.getElementById("toggle-box-checkbox").checked = true;
-}
-
-$('#toggle-box-checkbox').on('change', function(){
-  if(this.checked){
-    $('body').addClass('night');
-    localStorage.setItem("mode_night", true);
-  }else{
-    $('body').removeClass('night');
-    localStorage.setItem("mode_night", false);
-  }
-});
-{% endif %}
-
 $(document).ready(function(){
   $('.parallax').parallax();
 });    

prosopopee/themes/material/templates/index.html

@@ -5,54 +5,50 @@
 <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">
-$('.button-collapse').sideNav();
 
 $(document).ready(function(){
-  $('.scrollspy').scrollSpy();
+  $(".dropdown-trigger").dropdown();
 });
 </script>
 {% endblock %}

prosopopee/themes/material/templates/menu.html

@@ -1,15 +1,30 @@
-<ul class="side-nav" id="nav-mobile">   
+<ul id="dropdown1" class="dropdown-content">
-  {%- 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>
+
+<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 %}
+  {% else %}
+  {% set file_name = "../"+file_name %}
+  {% endif %}
+  <li><a href={{ file_name }}>{{ menu_name  }}</a></li>
+  {% endfor %}
+  {% endfor %}
+</ul>
+<ul class="bt show-on-med-and-down" style="float: right !important;">
+  <li><a class="dropdown-trigger" href="#!" data-target="dropdown1"><i class="material-icons right">arrow_drop_down</i></a></li>
 </ul>

prosopopee/themes/material/templates/page.html

@@ -1,33 +1,47 @@
-{% extends "base.html" %}
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="../static/css/materialize.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">
+    {% 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 css %}
+  <body class="night">
-<link rel="stylesheet" href="../static/css/materialize.css">
-<link rel="stylesheet" href="../static/css/styles.css">
-{% endblock %}
 
-{% block content %}
+    <!-- Navbar and Header -->
-<div class="container">
+    <nav class="nav-extended nav-full-header z-depth-0 blue-grey darken-3">
-    <h2>{{ gallery.title }}</h2>
+      <div class="nav-background">
-</div>
+        <div class="ea k"></div>
+      </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>
 
-{% for section in gallery.sections %}
+      <div class="nav-header valign-wrapper">
-{% include "sections/" + section.type + ".html" %}
+        <div class="de">
-{% endfor %}
+          <h1>{{ gallery.title }}</h1>
+        </div>
+      </div>
+    </nav>
 
-<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
+    {% for section in gallery.sections %}
-    <a href="../" class="btn-floating btn-large red">
+    {% include "sections/" + section.type + ".html" %}
-        <i class="mdi-action-home"></i>
+    {% endfor %}
-    </a>
-</div>
 
-
+    {% include 'footer.html' %}
-<script type="text/javascript" src="../static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
+  </body>
-<script type="text/javascript" src="../static/js/materialize.min.js" charset="utf-8"></script>
+</html>
-<script type="text/javascript" charset="utf-8">
-$('.button-collapse').sideNav();
-
-$(document).ready(function(){
-    $('.scrollspy').scrollSpy();
-});
-</script>
-{% endblock %}

setup.py

@@ -12,7 +12,7 @@ except ImportError:
 
 
 setup(name='prosopopee',
-      version='0.8',
+      version='0.8.1',
       description='A static website generator that allows you to tell a story with your pictures',
       author='Laurent Peuch',
       long_description=read_md('README.md') + "\n\n\n" + open('docs/changelog.rst').read(),