From 933316ee862de340d7c9920d6734fc718b628e56 Mon Sep 17 00:00:00 2001 From: Adrien Beudin Date: Fri, 9 Mar 2018 10:41:06 +0100 Subject: [PATCH 1/8] add css effect --- .../themes/exposure/static/css/style-page.css | 41 +++++++++++++++++++ .../templates/sections/full-picture.html | 4 +- 2 files changed, 43 insertions(+), 2 deletions(-) diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css index ebc3cd5..90cf474 100644 --- a/prosopopee/themes/exposure/static/css/style-page.css +++ b/prosopopee/themes/exposure/static/css/style-page.css @@ -614,3 +614,44 @@ 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; +} + diff --git a/prosopopee/themes/exposure/templates/sections/full-picture.html b/prosopopee/themes/exposure/templates/sections/full-picture.html index 0e3b8ef..29be913 100644 --- a/prosopopee/themes/exposure/templates/sections/full-picture.html +++ b/prosopopee/themes/exposure/templates/sections/full-picture.html @@ -6,7 +6,7 @@
{% if section.text %}
-
+

{{ section.text.title }}

{{ section.text.sub_title }}

{% if section.text.date_end %} @@ -30,7 +30,7 @@
{% if section.text %}
-
+

{{ section.text.title }}

{{ section.text.sub_title }}

{% if section.text.date_end %} From 16536149cbee706b3a30ec5fdbb31970a47b174c Mon Sep 17 00:00:00 2001 From: Adrien Beudin Date: Thu, 22 Mar 2018 10:47:14 +0100 Subject: [PATCH 2/8] fix menu --- .../themes/exposure/static/css/style.css | 6 +++++- prosopopee/themes/exposure/templates/menu.html | 8 +++++--- prosopopee/themes/exposure/templates/page.html | 18 ++++++++++++++++++ 3 files changed, 28 insertions(+), 4 deletions(-) diff --git a/prosopopee/themes/exposure/static/css/style.css b/prosopopee/themes/exposure/static/css/style.css index 771c810..336bfc1 100644 --- a/prosopopee/themes/exposure/static/css/style.css +++ b/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 { diff --git a/prosopopee/themes/exposure/templates/menu.html b/prosopopee/themes/exposure/templates/menu.html index 25f1362..4e35dad 100644 --- a/prosopopee/themes/exposure/templates/menu.html +++ b/prosopopee/themes/exposure/templates/menu.html @@ -2,18 +2,20 @@
    {% 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 %}
  • {{ menu_name }}
    • {% else %}
  • {{ menu_name }}
    • {% endif %} {% endfor %} + {% endfor %}
diff --git a/prosopopee/themes/exposure/templates/page.html b/prosopopee/themes/exposure/templates/page.html index cf5ffc9..7289994 100644 --- a/prosopopee/themes/exposure/templates/page.html +++ b/prosopopee/themes/exposure/templates/page.html @@ -22,5 +22,23 @@
+{% if settings.settings.night_mode %} + +{% endif %} {% endblock %} From 3aa14884e3ccecaac6250f0d08125bbae6004531 Mon Sep 17 00:00:00 2001 From: Adrien Beudin Date: Tue, 27 Mar 2018 10:52:52 +0200 Subject: [PATCH 3/8] update material theme --- .../themes/material/static/css/style.css | 84 +++++++++++++++++-- .../themes/material/templates/base.html | 5 +- .../themes/material/templates/index.html | 61 +++++++------- .../themes/material/templates/menu.html | 20 ++--- .../themes/material/templates/page.html | 76 ++++++++++------- 5 files changed, 166 insertions(+), 80 deletions(-) diff --git a/prosopopee/themes/material/static/css/style.css b/prosopopee/themes/material/static/css/style.css index a4bdaf3..d1245f2 100644 --- a/prosopopee/themes/material/static/css/style.css +++ b/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; +} diff --git a/prosopopee/themes/material/templates/base.html b/prosopopee/themes/material/templates/base.html index a86f2ea..e8d7494 100644 --- a/prosopopee/themes/material/templates/base.html +++ b/prosopopee/themes/material/templates/base.html @@ -28,7 +28,7 @@
{% if settings.menu -%} - menu + {% include 'menu.html' %} {% endif -%}
@@ -39,9 +39,6 @@
- {% if settings.menu -%} - {% include 'menu.html' %} - {% endif -%} {% block content %} {% endblock %} diff --git a/prosopopee/themes/material/templates/index.html b/prosopopee/themes/material/templates/index.html index 8abed90..537e1f5 100644 --- a/prosopopee/themes/material/templates/index.html +++ b/prosopopee/themes/material/templates/index.html @@ -5,47 +5,44 @@ +{% if settings.custom_css %} + +{% endif %} {% endblock %} {% block content %} - -
-
- {% for galleries_line in galleries|reverse|batch(1)|reverse %} - {% for gallery in galleries_line|reverse %} -
-
- - {% if gallery.cover_type == "video" %} - {% set video = Video(gallery.cover) %} - {{ video.copy() }} - {% else %} - {% set cover = Image(gallery.cover) %} - {{ cover.copy() }} - {% endif %} -
-

{{ gallery.title }}

- {% if gallery.sub_title %}

{{ gallery.sub_title }}

{% endif %} - {% if settings.show_date and gallery.date %}
{{ gallery.date.strftime("%d %B %Y") }}
{% endif %} - {% if gallery.tags %}
IN {% for tag in gallery.tags -%} {{ tag }} {% endfor -%}
{% endif %} -
- {% if video %} - +
+ {% for galleries_line in galleries|reverse|batch(3)|reverse %} +
+ {% for gallery in galleries_line|reverse %}
+ +
+

{{ gallery.title }}

+ {% if gallery.sub_title %}

{{ gallery.sub_title }}

{% endif %} + {% if settings.show_date and gallery.date %}
{{ gallery.date.strftime("%d %B %Y") }}
{% endif %} + {% if gallery.tags %}
IN {% for tag in gallery.tags -%} {{ tag }} {% endfor -%}
{% endif %} +
+ + {% if gallery.cover_type == "video" %} + {% set video = Video(gallery.cover) %} + {{ video.copy() }} +
- {% set video = "" %} - {% else %} - placeholder - {% endif %} - +
-
- {% endfor %} - {% endfor %} + {% else %} + {% set cover = Image(gallery.cover) %} + {{ cover.copy() }} +
+ {% endif %} +
{% endfor %}
+ {% endfor %}
- - - -{% endblock %} + {% include 'footer.html' %} + + From 6edca437749cb45830d6d4b9645eb7bb20ca0bc9 Mon Sep 17 00:00:00 2001 From: Adrien Beudin Date: Tue, 27 Mar 2018 10:58:33 +0200 Subject: [PATCH 4/8] update version --- prosopopee/prosopopee.py | 2 +- setup.py | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/prosopopee/prosopopee.py b/prosopopee/prosopopee.py index bbda7ac..6499e61 100644 --- a/prosopopee/prosopopee.py +++ b/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 = [] diff --git a/setup.py b/setup.py index 07db29b..cad81fc 100644 --- a/setup.py +++ b/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(), From 017af6efbb5402e179965fc1a40f3ef1c411df76 Mon Sep 17 00:00:00 2001 From: Adrien Beudin Date: Tue, 27 Mar 2018 13:43:34 +0200 Subject: [PATCH 5/8] update theme and fix --- prosopopee/themes/exposure/static/css/style.css | 9 +++++++++ prosopopee/themes/material/static/css/style.css | 8 ++++++++ prosopopee/themes/material/templates/index.html | 3 +-- prosopopee/themes/material/templates/menu.html | 17 +++++++++++++++++ 4 files changed, 35 insertions(+), 2 deletions(-) diff --git a/prosopopee/themes/exposure/static/css/style.css b/prosopopee/themes/exposure/static/css/style.css index 336bfc1..cd9d1c3 100644 --- a/prosopopee/themes/exposure/static/css/style.css +++ b/prosopopee/themes/exposure/static/css/style.css @@ -418,3 +418,12 @@ 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; + } +} + diff --git a/prosopopee/themes/material/static/css/style.css b/prosopopee/themes/material/static/css/style.css index d1245f2..9a60caf 100644 --- a/prosopopee/themes/material/static/css/style.css +++ b/prosopopee/themes/material/static/css/style.css @@ -606,3 +606,11 @@ nav .nav-header { 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; + } +} diff --git a/prosopopee/themes/material/templates/index.html b/prosopopee/themes/material/templates/index.html index 537e1f5..768d969 100644 --- a/prosopopee/themes/material/templates/index.html +++ b/prosopopee/themes/material/templates/index.html @@ -46,10 +46,9 @@ {% endblock %} diff --git a/prosopopee/themes/material/templates/menu.html b/prosopopee/themes/material/templates/menu.html index 7a1ac52..e37da1a 100644 --- a/prosopopee/themes/material/templates/menu.html +++ b/prosopopee/themes/material/templates/menu.html @@ -1,3 +1,17 @@ +
    + {% 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 %} +
  • {{ menu_name }}
    • + {% endfor %} + {% endfor %} +
+
    {% for line in settings.menu %} {% set rowloop = loop %} @@ -11,3 +25,6 @@ {% endfor %} {% endfor %}
+ From e184f90433b476391b8f591f97218531b95fdf07 Mon Sep 17 00:00:00 2001 From: Adrien Beudin Date: Wed, 28 Mar 2018 10:28:46 +0200 Subject: [PATCH 6/8] update material theme and fix responsible --- .../themes/exposure/static/css/style-page.css | 11 +++++++ .../themes/exposure/static/css/style.css | 4 +++ .../themes/material/static/css/style-page.css | 19 ++++++++++++ .../themes/material/static/css/style.css | 19 +++++++++--- .../themes/material/templates/base.html | 6 ---- .../material/templates/gallery-index.html | 29 +------------------ .../themes/material/templates/page.html | 8 +---- 7 files changed, 51 insertions(+), 45 deletions(-) diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css index 90cf474..381a606 100644 --- a/prosopopee/themes/exposure/static/css/style-page.css +++ b/prosopopee/themes/exposure/static/css/style-page.css @@ -655,3 +655,14 @@ input:checked + .slider:before { -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; + } +} + diff --git a/prosopopee/themes/exposure/static/css/style.css b/prosopopee/themes/exposure/static/css/style.css index cd9d1c3..eb9f7ae 100644 --- a/prosopopee/themes/exposure/static/css/style.css +++ b/prosopopee/themes/exposure/static/css/style.css @@ -425,5 +425,9 @@ input:checked + .slider:before { margin-bottom: -7px !important; padding-bottom: 70% !important; } + + .gallery-title > h2 { + font-size: 3.7vw; + } } diff --git a/prosopopee/themes/material/static/css/style-page.css b/prosopopee/themes/material/static/css/style-page.css index 98b7bf1..a523a3b 100644 --- a/prosopopee/themes/material/static/css/style-page.css +++ b/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; + } +} + diff --git a/prosopopee/themes/material/static/css/style.css b/prosopopee/themes/material/static/css/style.css index 9a60caf..90e2a15 100644 --- a/prosopopee/themes/material/static/css/style.css +++ b/prosopopee/themes/material/static/css/style.css @@ -608,9 +608,20 @@ nav .nav-header { } @media only screen and (max-device-width: 700px) { -.gallery-square { - width: 100% !important; - margin-bottom: -7px !important; - padding-bottom: 70% !important; + .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; } } diff --git a/prosopopee/themes/material/templates/base.html b/prosopopee/themes/material/templates/base.html index e8d7494..1f568f3 100644 --- a/prosopopee/themes/material/templates/base.html +++ b/prosopopee/themes/material/templates/base.html @@ -17,13 +17,7 @@