diff --git a/app/static/css/partials/_ascroll.scss b/app/static/css/partials/_ascroll.scss old mode 100644 new mode 100755 diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss index e054d8a..72fe517 100755 --- a/app/static/css/partials/_film.scss +++ b/app/static/css/partials/_film.scss @@ -1,5 +1,3 @@ - - .films { margin: var(--spacing-2); box-sizing: border-box; @@ -33,24 +31,25 @@ } } - main > .film { - max-width: 1080px; + margin: auto; .info { - margin: var(--spacing) var(--spacing-2); margin-bottom: 32px; text-overflow: ellipsis; overflow: hidden; + text-align: center; h1 { - font-size: 24px; - margin: 24px 0; + font-size: 20px; + margin: 0 0 24px 0; } h2 { + font-size: 18px; margin: 24px 0; } .details { + font-size: 18px; margin-top: var(--spacing-2); } .bio { @@ -60,14 +59,12 @@ main > .film { } } } - video { - width: 100%; - } + .play { text-align: center; - margin: var(--spacing); margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); + max-width: 250px; .texts { padding-top: var(--spacing-2); @@ -85,3 +82,88 @@ main > .film { } } } + +.info-meta { + display: inline-block; + margin: 0 auto; + position: absolute; + max-width: 600px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + animation: fade_in 1s linear 0.4s forwards; + opacity: 0; +} + +.info-meta, .bio-block, .play, .summary-block { + background: rgba(0, 0, 0, 0.55); + border-radius: 2px; + box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6); + margin-left: auto; + margin-right: auto; + padding: 20px; + font-size: 18px; + + a { + color: var(--color-link); + text-decoration: none; + font-weight: 700; + } +} + +.summary-block { + max-width: 1080px; + margin-top: 350px; +} + +.bio-block { + max-width: 1080px; + margin-top: 30px; + margin-bottom: 30px; +} + +.video-block { + height: 100vh; + padding-bottom: 50px; + padding-top: 50px; + + video { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: -9999; + height: 100vh; + width: 100vw; + object-fit: fill; + //height: 100vh; + //width: auto; + margin: 0 auto; + } +} + +.icon-play { + color: #fff; + border: 3px solid var(--color-link); + border-radius: 50%; + font-size: 32px; + text-decoration: none; + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + margin: auto; +} + +.film-play-block { + text-align: center; + font-size: 18px; +} + +.film-play-spacer { + padding: var(--spacing); + margin-top: 4px; + font-size: 12px; + font-weight: 700; +} \ No newline at end of file diff --git a/app/static/css/partials/_layout.scss b/app/static/css/partials/_layout.scss index 2c3e56e..6c5cd9b 100755 --- a/app/static/css/partials/_layout.scss +++ b/app/static/css/partials/_layout.scss @@ -4,6 +4,8 @@ --bg-color-3: #ffff00; --bg-color-4: #ff3399; + --color-link: #ee0; + --spacing: 8px; --spacing-2: calc(var(--spacing) * 2); } @@ -11,20 +13,33 @@ @keyframes background_animation { 0%,100% { background-position: 0 0; - color: #ddd; } 50% { background-position: 100% 0; + } +} + +@keyframes text_animation { + 0%,100% { + color: #ddd; + } + + 50% { color: #000; } } + body.animated { background: linear-gradient(to right, var(--bg-color-1), var(--bg-color-2) , var(--bg-color-3), var(--bg-color-4)); animation: background_animation 60s ease-in-out infinite; background-size: 400% 100%; } +body.animated-text { + animation: text_animation 60s ease-in-out infinite; +} + body { color: #ddd; font-family: "noto_sans", sans-serif; @@ -48,3 +63,14 @@ nav { display: none; } } + +// Animations: Fade In +@keyframes fade_in { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/app/templates/film.html b/app/templates/film.html old mode 100644 new mode 100755 index 6bcf7b5..e83955d --- a/app/templates/film.html +++ b/app/templates/film.html @@ -9,51 +9,63 @@ --bg-color-4: {{ film.color_4 }}; } +body { + background-attachment: fixed; +} +
-

- {{ film.data.title | safe }} - {{ film.data.title_zh | safe }} -

-

- {% for director in film.data.director %} - {{ director|safe }}
- {% endfor %} -

-
- {{ film.data.date }}, {{ film.duration }} +
+

+ {{ film.data.title | safe }} + {{ film.data.title_zh | safe }} +

+

+ {% for director in film.data.director %} + {{ director|safe }}
+ {% endfor %} +

+
+ {{ film.data.date}}, {{ film.duration }} +
+ +
+
+
- -

{{ film.data.summary|safe }}

-
-

{{ film.data.summary_zh|safe }}

-
-
- {{film.data.director.0}}: {{ film.data.bio|safe }} -
-
- {{film.data.director.1}}: {{ film.data.bio_zh|safe }} +
+

{{ film.data.summary|safe }}

+
+

{{ film.data.summary_zh|safe }}

+
+
+
+
+ {{film.data.director.0}}: {{ film.data.bio|safe }} +
+
+ {{film.data.director.1}}: {{ film.data.bio_zh|safe }} +
-
-
-
- Play -
-
- {% for text in film.related_texts %} -
- - {{ text.title }}
- {{ text.byline }} - +
+
+ {% for text in film.related_texts %} +
+ + {{ text.title }}
+ {{ text.byline }} + +
+ {% endfor %} +
+
+ +
OR
+
- {% endfor %} -
-
diff --git a/app/templates/films.html b/app/templates/films.html old mode 100644 new mode 100755 index 1f6d085..3b1b15a --- a/app/templates/films.html +++ b/app/templates/films.html @@ -1,5 +1,5 @@ {% extends "base.html" %} -{% block body_class%}animated{% endblock %} +{% block body_class%}animated animated-text{% endblock %} {% block main %}
{% for film in films %} diff --git a/app/templates/index.html b/app/templates/index.html old mode 100644 new mode 100755 index 38006e0..221ea9d --- a/app/templates/index.html +++ b/app/templates/index.html @@ -1,5 +1,5 @@ {% extends "base.html" %} -{% block body_class%}animated{% endblock %} +{% block body_class%}animated animated-text{% endblock %} {% block main %}
Phantasmapolis
diff --git a/app/templates/page.html b/app/templates/page.html old mode 100644 new mode 100755 index 456f2ad..699ae28 --- a/app/templates/page.html +++ b/app/templates/page.html @@ -1,6 +1,6 @@ {% extends "base.html" %} {% block title %}{{ page.title }}– Phantas.ma/polis{% endblock title %} -{% block body_class%}animated{% endblock %} +{% block body_class%}animated animated-text{% endblock %} {% block main %}
{{ page.body | safe }} diff --git a/app/templates/texts.html b/app/templates/texts.html old mode 100644 new mode 100755 index 1737e6f..ffb60c9 --- a/app/templates/texts.html +++ b/app/templates/texts.html @@ -1,5 +1,5 @@ {% extends "base.html" %} -{% block body_class%}animated{% endblock %} +{% block body_class%}animated animated-text{% endblock %} {% block main %}