From 226cbb031d326e949e8a5a16a834e88c3ade40a3 Mon Sep 17 00:00:00 2001 From: imohkay Date: Sat, 16 Oct 2021 14:45:46 +0530 Subject: [PATCH 1/7] bad CSS demo for timeline --- app/static/css/partials/_ascroll.scss | 2 +- app/static/css/partials/_film.scss | 61 ++++++++++++++++++++++++--- app/static/css/partials/_layout.scss | 6 +-- app/templates/film.html | 50 +++++++++++++--------- 4 files changed, 88 insertions(+), 31 deletions(-) mode change 100644 => 100755 app/static/css/partials/_ascroll.scss mode change 100644 => 100755 app/templates/film.html diff --git a/app/static/css/partials/_ascroll.scss b/app/static/css/partials/_ascroll.scss old mode 100644 new mode 100755 index b68d100..49b4cb8 --- a/app/static/css/partials/_ascroll.scss +++ b/app/static/css/partials/_ascroll.scss @@ -1,5 +1,5 @@ #ascroll { - font-family: "Noton Sans"; + font-family: "noto_sans"; width: 100%; max-width: 1080px; margin: auto; diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss index e054d8a..77e40fd 100755 --- a/app/static/css/partials/_film.scss +++ b/app/static/css/partials/_film.scss @@ -35,22 +35,24 @@ 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,9 +62,9 @@ main > .film { } } } - video { - width: 100%; - } + //video { + //width: 100%; + //} .play { text-align: center; margin: var(--spacing); @@ -85,3 +87,48 @@ main > .film { } } } + +body { + background: linear-gradient(to bottom, #002bdb 0%,#8fc800 99%); +} + +.info-meta { + display: inline-block; + position: absolute; + margin: 0 auto; + max-width: 600px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.info-meta, .bio-block { + background: rgba(0, 0, 0, 0.75); + border-radius: 2px; + //margin: var(--spacing) var(--spacing-2); + max-width: 1080px; + margin: 0 auto; + padding: 20px; +} + +.bio-block { + font-size: 18px; + margin-top: 400px; +} + +.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: auto; + margin: 0 auto; + } +} \ No newline at end of file diff --git a/app/static/css/partials/_layout.scss b/app/static/css/partials/_layout.scss index 3d32061..880d87f 100755 --- a/app/static/css/partials/_layout.scss +++ b/app/static/css/partials/_layout.scss @@ -11,19 +11,19 @@ @keyframes background_animation { 0%,100% { background-position: 0 0; - color: #ddd; + //color: #ddd; } 50% { background-position: 100% 0; - color: #000; + //color: #000; } } body { 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%; - color: #ddd; + color: #eee; font-family: "noto_sans", sans-serif; font-size: 20px; overflow-x: hidden; diff --git a/app/templates/film.html b/app/templates/film.html old mode 100644 new mode 100755 index c34e7d4..3f1dfb7 --- a/app/templates/film.html +++ b/app/templates/film.html @@ -8,32 +8,42 @@ --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 %} -

-
- Year: {{ film.data.date}}, Runtime: {{ film.duration }} -
- -

{{ film.data.summary|safe }}

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

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

+

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

+
+ Year: {{ film.data.date}}, Runtime: {{ film.duration }}
+
+
+
+
+

{{ film.data.summary|safe }}

+
+
+ {{film.data.director.0}}: {{ film.data.bio|safe }} +
+
+ {{film.data.director.1}}: {{ film.data.bio_zh|safe }} +
+
+
From af3df6d5a046f3953764ce0251a3317a2fa8f2bc Mon Sep 17 00:00:00 2001 From: imohkay Date: Thu, 21 Oct 2021 18:27:34 +0530 Subject: [PATCH 2/7] update film icon color --- app/static/css/partials/_film.scss | 8 ++++++- app/templates/film.html | 34 ++++++++++++++---------------- 2 files changed, 23 insertions(+), 19 deletions(-) diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss index 77e40fd..671eb10 100755 --- a/app/static/css/partials/_film.scss +++ b/app/static/css/partials/_film.scss @@ -113,7 +113,7 @@ body { .bio-block { font-size: 18px; - margin-top: 400px; + margin-top: 350px; } .video-block { @@ -131,4 +131,10 @@ body { width: auto; margin: 0 auto; } +} + +.icon-play { + color: #fff; + font-size: 40px; + text-decoration: none; } \ No newline at end of file diff --git a/app/templates/film.html b/app/templates/film.html index 3f1dfb7..02ae9b3 100755 --- a/app/templates/film.html +++ b/app/templates/film.html @@ -43,25 +43,23 @@ body { {{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 %} +
+
- {% endfor %} -
-
- Open on pad.ma -
+
{% endblock %} From a4f9296b28b5e5ca9b9aafa8182e0666e8180e79 Mon Sep 17 00:00:00 2001 From: imohkay Date: Thu, 21 Oct 2021 19:09:25 +0530 Subject: [PATCH 3/7] remove static gradient from film page --- app/static/css/partials/_film.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss index 671eb10..f5da2f0 100755 --- a/app/static/css/partials/_film.scss +++ b/app/static/css/partials/_film.scss @@ -89,7 +89,7 @@ main > .film { } body { - background: linear-gradient(to bottom, #002bdb 0%,#8fc800 99%); + /*background: linear-gradient(to bottom, #002bdb 0%,#8fc800 99%);*/ } .info-meta { From 25314e853c7bec67cf4395f9cd68dda6a339c56c Mon Sep 17 00:00:00 2001 From: imohkay Date: Fri, 22 Oct 2021 10:41:04 +0530 Subject: [PATCH 4/7] apologies, forgot to fix merge conflict in film.html --- app/templates/film.html | 32 +++++--------------------------- 1 file changed, 5 insertions(+), 27 deletions(-) diff --git a/app/templates/film.html b/app/templates/film.html index 6bbff24..dcf99a5 100755 --- a/app/templates/film.html +++ b/app/templates/film.html @@ -17,7 +17,6 @@ body {
-<<<<<<< HEAD

{{ film.data.title | safe }} @@ -29,38 +28,17 @@ body { {% endfor %}

- Year: {{ film.data.date}}, Runtime: {{ 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 }} ->>>>>>> main -
+ {{ film.data.date}}, {{ film.duration }} +
+

{{ film.data.summary|safe }}

+
+

{{ film.data.summary_zh|safe }}

{{film.data.director.0}}: {{ film.data.bio|safe }} From 698f118b253c8894b0d040ba5f0606f2d9fab043 Mon Sep 17 00:00:00 2001 From: imohkay Date: Fri, 22 Oct 2021 15:57:30 +0530 Subject: [PATCH 5/7] add object-fit to make video full bleed --- app/static/css/partials/_film.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss index f5da2f0..128abb9 100755 --- a/app/static/css/partials/_film.scss +++ b/app/static/css/partials/_film.scss @@ -128,7 +128,10 @@ body { right: 0; z-index: -9999; height: 100vh; - width: auto; + width: 100vw; // just added + object-fit: fill; // just added + //height: 100vh; + //width: auto; margin: 0 auto; } } From b6819c2d303ecffe16866c83654fbf558cd38cd5 Mon Sep 17 00:00:00 2001 From: imohkay Date: Fri, 22 Oct 2021 17:16:00 +0530 Subject: [PATCH 6/7] update timeline page --- app/static/css/partials/_film.scss | 70 +++++++++++++++++++--------- app/static/css/partials/_layout.scss | 13 ++++++ app/templates/film.html | 37 ++++++++------- 3 files changed, 81 insertions(+), 39 deletions(-) diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss index 128abb9..5c6b1c2 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,7 +31,6 @@ } } - main > .film { margin: auto; @@ -62,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); @@ -88,32 +83,43 @@ main > .film { } } -body { - /*background: linear-gradient(to bottom, #002bdb 0%,#8fc800 99%);*/ -} - .info-meta { display: inline-block; - position: absolute; margin: 0 auto; + position: absolute; max-width: 600px; top: 50%; left: 50%; transform: translate(-50%, -50%); + animation: fadeIn 1s linear 0.4s forwards; + opacity: 0; } -.info-meta, .bio-block { - background: rgba(0, 0, 0, 0.75); +.info-meta, .bio-block, .play, .summary-block { + background: rgba(0, 0, 0, 0.55); border-radius: 2px; - //margin: var(--spacing) var(--spacing-2); - max-width: 1080px; - margin: 0 auto; + 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 { - font-size: 18px; - margin-top: 350px; + max-width: 1080px; + margin-top: 30px; + margin-bottom: 30px; } .video-block { @@ -128,8 +134,8 @@ body { right: 0; z-index: -9999; height: 100vh; - width: 100vw; // just added - object-fit: fill; // just added + width: 100vw; + object-fit: fill; //height: 100vh; //width: auto; margin: 0 auto; @@ -138,6 +144,26 @@ body { .icon-play { color: #fff; - font-size: 40px; + 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 78801e2..e673b28 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); } @@ -48,3 +50,14 @@ nav { display: none; } } + +// Animations: Fade In +@keyframes fadeIn { + 0% { + opacity: 0; + } + + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/app/templates/film.html b/app/templates/film.html index dcf99a5..41f3f85 100755 --- a/app/templates/film.html +++ b/app/templates/film.html @@ -35,10 +35,12 @@ body {
-
+

{{ film.data.summary|safe }}


{{ film.data.summary_zh|safe }}

+
+
{{film.data.director.0}}: {{ film.data.bio|safe }} @@ -47,23 +49,24 @@ body { {{film.data.director.1}}: {{ film.data.bio_zh|safe }}
-
-
- {% for text in film.related_texts %} -
- - {{ text.title }}
- {{ text.byline }} - -
- {% endfor %} -
- -
+
+
+ {% for text in film.related_texts %} +
+ + {{ text.title }}
+ {{ text.byline }} + +
+ {% endfor %} +
+
+ +
OR
+ +
+
{% endblock %} From 4f625793d01936182e74a39bf45405492559c5a0 Mon Sep 17 00:00:00 2001 From: imohkay Date: Fri, 22 Oct 2021 17:31:38 +0530 Subject: [PATCH 7/7] split animations for text and background into 2 separate keyframe animations --- app/static/css/partials/_film.scss | 2 +- app/static/css/partials/_layout.scss | 19 ++++++++++++++++--- app/templates/films.html | 2 +- app/templates/index.html | 2 +- app/templates/page.html | 2 +- app/templates/texts.html | 2 +- 6 files changed, 21 insertions(+), 8 deletions(-) mode change 100644 => 100755 app/templates/films.html mode change 100644 => 100755 app/templates/index.html mode change 100644 => 100755 app/templates/page.html mode change 100644 => 100755 app/templates/texts.html diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss index 5c6b1c2..72fe517 100755 --- a/app/static/css/partials/_film.scss +++ b/app/static/css/partials/_film.scss @@ -91,7 +91,7 @@ main > .film { top: 50%; left: 50%; transform: translate(-50%, -50%); - animation: fadeIn 1s linear 0.4s forwards; + animation: fade_in 1s linear 0.4s forwards; opacity: 0; } diff --git a/app/static/css/partials/_layout.scss b/app/static/css/partials/_layout.scss index e673b28..6c5cd9b 100755 --- a/app/static/css/partials/_layout.scss +++ b/app/static/css/partials/_layout.scss @@ -13,20 +13,33 @@ @keyframes background_animation { 0%,100% { background-position: 0 0; - //color: #ddd; } 50% { background-position: 100% 0; - //color: #000; } } + +@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; @@ -52,7 +65,7 @@ nav { } // Animations: Fade In -@keyframes fadeIn { +@keyframes fade_in { 0% { opacity: 0; } 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 %}