diff --git a/docs/changelog.rst b/docs/changelog.rst index c0609ee..2a55731 100644 --- a/docs/changelog.rst +++ b/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 diff --git a/docs/configuration.rst b/docs/configuration.rst index e065152..af9f3b9 100644 --- a/docs/configuration.rst +++ b/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: 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/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css index ebc3cd5..381a606 100644 --- a/prosopopee/themes/exposure/static/css/style-page.css +++ b/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; + } +} + diff --git a/prosopopee/themes/exposure/static/css/style.css b/prosopopee/themes/exposure/static/css/style.css index 771c810..eb9f7ae 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 { @@ -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; + } +} + 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 @@ 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 %} 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 %} diff --git a/prosopopee/themes/light/templates/sections/author.html b/prosopopee/themes/light/templates/sections/author.html index 7685968..cdf20b6 100644 --- a/prosopopee/themes/light/templates/sections/author.html +++ b/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() }}
- +
Story by

{{ section.name }}

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 a4bdaf3..90e2a15 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,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; + } +} diff --git a/prosopopee/themes/material/templates/base.html b/prosopopee/themes/material/templates/base.html index a86f2ea..1f568f3 100644 --- a/prosopopee/themes/material/templates/base.html +++ b/prosopopee/themes/material/templates/base.html @@ -17,18 +17,12 @@
- {% if settings.menu -%} - {% include 'menu.html' %} - {% endif -%} {% block content %} {% endblock %} diff --git a/prosopopee/themes/material/templates/gallery-index.html b/prosopopee/themes/material/templates/gallery-index.html index 2c70e00..a255707 100644 --- a/prosopopee/themes/material/templates/gallery-index.html +++ b/prosopopee/themes/material/templates/gallery-index.html @@ -29,23 +29,13 @@ {{ gallery.title }} · {{ settings.title }} - +
- {% if settings.settings.night_mode %} -
- -
- {% endif %} - {% for section in gallery.sections %} {% include "sections/" + section.type + ".html" %} {% endfor %} - {% if settings.share %} {% include 'share.html' -%} {% endif %} @@ -66,23 +56,6 @@ {% endif %} {% endblock %} diff --git a/prosopopee/themes/material/templates/menu.html b/prosopopee/themes/material/templates/menu.html index cbbf154..e37da1a 100644 --- a/prosopopee/themes/material/templates/menu.html +++ b/prosopopee/themes/material/templates/menu.html @@ -1,15 +1,30 @@ -