night mode for exposure

docs/changelog.rst

@@ -1,6 +1,11 @@
 Changelog
 =========
 
+0.8 (unreleased)
+
+ * Add night mode https://prosopopee.readthedocs.io/en/latest/configuration.html#night_mode
+ * fix some bugs
+
 0.7 (2017-10-04)
 
  * Add password access (based on https://robinmoisson.github.io/staticrypt/)

prosopopee/themes/exposure/static/css/encrypt.css

@@ -90,4 +90,121 @@ footer a {
   font-family: 'montserrat', sans-serif;
   color: #111;
 }
+body.night {
+    background-color: #061F2F;
+    color: #d3d4d4;
+}
 
+body.night footer {
+  background-color: #0f1b29;
+  color: #fff;
+}
+
+body.night footer a {
+  color: #fff;
+}
+
+body.night ul.icon a {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night .back-to-home #logo {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night a {
+  color: #9CD7F7;
+}
+
+body.night .audio-player {
+  background: #1f3341
+}
+
+body.night #logo {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night .gallery-header h4 {
+  color: #c1f1f0;
+}
+
+body.night .staticrypt-form {
+  background-color: #061F2F;
+  box-shadow: 0 0 20px 0 rgba(255, 255, 255, 0.2), 0 5px 5px 0 rgba(255, 255, 255, 0.2);
+}
+
+body.night .staticrypt-form input {
+  background: #FFF;
+  color: #9CD7F7;
+}
+
+body.night .staticrypt-decrypt-button {
+  background: #1f3341 !important;
+}
+
+.floating-menu {
+  font-family: sans-serif;
+  padding: 5px;;
+  width: 45px;
+  z-index: 556;
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 15px;
+  width: 15px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

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

@@ -325,7 +325,6 @@ a.google {
 */
 
 .author-info {
-    color: #ccc;
     font-style: italic;
     font-size: 19px;
 }
@@ -334,7 +333,6 @@ a.google {
     text-transform: uppercase;
     text-align: center;
     font-family: 'crimson', serif;
-    color: black;
     font-style: normal;
     font-weight: bold;
 }
@@ -520,3 +518,99 @@ span.left img, span.right img {
 .clear {
   clear: both;
 }
+
+body.night {
+  background-color: #061F2F;
+  color: #d3d4d4;
+}
+
+body.night footer {
+  background-color: #0f1b29;
+  color: #fff;
+}
+
+body.night footer a {
+  color: #fff;
+}
+
+body.night ul.icon a {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night .back-to-home #logo {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night a {
+  color: #9CD7F7;
+}
+
+body.night .audio-player {
+  background: #1f3341
+}
+
+.floating-menu {
+  font-family: sans-serif;
+  padding: 5px;;
+  width: 45px;
+  z-index: 556;
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 15px;
+  width: 15px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

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

@@ -21,7 +21,7 @@ a {
 .galleries-line {
     width: 100%;
     height: 100%;
-    margin-bottom: -4px; /* YOLO */
+    margin-bottom: -5px; /* YOLO */
 }
 
 .covers-1 .gallery-square {
@@ -309,3 +309,108 @@ nav ul li > a.item-menu::before {
     font-family: 'montserrat', sans-serif;
     font-weight: bold;
 }
+
+body.night {
+    background-color: #061F2F;
+    color: #d3d4d4;
+}
+
+body.night footer {
+  background-color: #0f1b29;
+  color: #fff;
+}
+
+body.night footer a {
+  color: #fff;
+}
+
+body.night ul.icon a {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night .back-to-home #logo {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night a {
+  color: #9CD7F7;
+}
+
+body.night .audio-player {
+  background: #1f3341
+}
+
+body.night #logo {
+  -webkit-filter: invert(1);
+  filter: invert(1);
+}
+
+body.night .gallery-header h4 {
+  color: #c1f1f0;
+}
+
+.floating-menu {
+  font-family: sans-serif;
+  padding: 5px;;
+  width: 45px;
+  z-index: 556;
+  position: fixed;
+  bottom: 0px;
+  right: 0px;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 22px;
+}
+
+.switch input {display:none;}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 15px;
+  width: 15px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(18px);
+  -ms-transform: translateX(18px);
+  transform: translateX(18px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

prosopopee/themes/exposure/templates/base.html

@@ -12,6 +12,14 @@
     <title>{{ settings.title }}</title>
   </head>
   <body>
+    {% if settings.settings.night_mode %}
+    <div class="floating-menu">
+      <label class="switch">
+        <input type="checkbox" id="toggle-box-checkbox">
+        <span class="slider round"></span>
+      </label>
+    </div>
+    {% endif %}
     <div class="gallery-header">
       {% block logo %}
       {% endblock %}

prosopopee/themes/exposure/templates/encrypted.html

@@ -20,7 +20,16 @@
 
   </head>
   <body id="encrypt-body" class="staticrypt-body">
-    <script type="text/javascript" src="{{ pathstatic }}/static/js/crypto-js.min.js" charset="utf-8"></script>
+    {% if settings.settings.night_mode %}
+    <div class="floating-menu">
+      <label class="switch">
+        <input type="checkbox" id="toggle-box-checkbox">
+        <span class="slider round"></span>
+      </label>
+    </div>
+    {% endif %}
+    <script type="text/javascript" src="{{ pathstatic }}/static/js/jquery-2.1.4.min.js" charset="utf-8"></script>
+    <script type="text/javascript" src="{{ pathstatic }}/static/js/password.min.js" charset="utf-8"></script>
     <script>
 var form = '{{ form }}';
 var encryptedMsg = '{{ ciphertext }}';
@@ -56,6 +65,24 @@ if (sessionStorage.getItem("password")) {
     document.close();
   });
 }
+
+{% 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 %}
+
     </script>
   </body>
 </html>

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

@@ -29,6 +29,14 @@
     <title>{{ gallery.title }} · {{ settings.title }}</title>
   </head>
   <body>
+    {% if settings.settings.night_mode %}
+    <div class="floating-menu">
+      <label class="switch">
+        <input type="checkbox" id="toggle-box-checkbox">
+        <span class="slider round"></span>
+      </label>
+    </div>
+    {% endif %}
     {% for section in gallery.sections %}
     {% include "sections/" + section.type + ".html" %}
     {% endfor %}
@@ -54,8 +62,23 @@
     <script type="text/javascript" src="../static/js/mediaelement-and-player.min.js" charset="utf-8"></script>
     {% endif %}
     <script type="text/javascript">
-$(function() {
+{% 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 %}
+$(function() {
   baguetteBox.run(".baguette", {});
 
   {% if gallery.panorama_enabled %}

prosopopee/themes/exposure/templates/index.html

@@ -57,4 +57,23 @@
   {% endfor %}
 </div>
 <p style="visibility: hidden">.</p>
+{% 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/light/templates/encrypted.html

@@ -19,7 +19,7 @@
     <link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/style-page.css"  media="screen,projection"/>
   </head>
   <body class="staticrypt-body">
-  <script type="text/javascript" src="{{ pathstatic }}/static/js/crypto-js.min.js" charset="utf-8"></script>
+  <script type="text/javascript" src="{{ pathstatic }}/static/js/password.min.js" charset="utf-8"></script>
   <script>
 var form = '{{ form }}';
 var encryptedMsg = '{{ ciphertext }}';

prosopopee/themes/material/templates/encrypted.html

@@ -20,7 +20,7 @@
     <link type="text/css" rel="stylesheet" href="{{ pathstatic }}/static/css/materialize.css"  media="screen,projection"/>
   </head>
   <body class="staticrypt-body">
-  <script type="text/javascript" src="{{ pathstatic }}/static/js/crypto-js.min.js" charset="utf-8"></script>
+  <script type="text/javascript" src="{{ pathstatic }}/static/js/password.min.js" charset="utf-8"></script>
   <script>
 var form = '{{ form }}';
 var encryptedMsg = '{{ ciphertext }}';

setup.py

@@ -12,7 +12,7 @@ except ImportError:
 
 
 setup(name='prosopopee',
-      version='0.7',
+      version='0.8',
       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(),