0x2620/phantasma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

bad CSS demo for timeline

Browse source
This commit is contained in:
imohkay 2021-10-16 14:45:46 +05:30
parent d314ceb7ae
commit 226cbb031d
4 changed files with 88 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/static/css/partials/_ascroll.scss Normal file → Executable file
View file

@ -1,5 +1,5 @@
#ascroll {
font-family: "Noton Sans";
font-family: "noto_sans";
width: 100%;
max-width: 1080px;
margin: auto;

61
app/static/css/partials/_film.scss
View file

@ -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;
}
}

6
app/static/css/partials/_layout.scss
View file

@ -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;

48
app/templates/film.html Normal file → Executable file
View file

@ -8,30 +8,40 @@
--bg-color-4: {{ film.color_4 }};
}
body {
background-attachment: fixed;
}
</style>
<div class="film">
<div class="info">
<h1>
<span>{{ film.data.title | safe }}</span>
<span>{{ film.data.title_zh | safe }}</span>
</h1>
<h2>
{% for director in film.data.director %}
{{ director|safe }}<br>
{% endfor %}
</h2>
<div class="details">
Year: {{ film.data.date}}, Runtime: {{ film.duration }}
</div>
<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
<p>{{ film.data.summary|safe }}</p>
<div class="bio">
<div class="en">
{{film.data.director.0}}: {{ film.data.bio|safe }}
<div class="info-meta">
<h1>
<span class="font-bold">{{ film.data.title | safe }}</span>
<span>{{ film.data.title_zh | safe }}</span>
</h1>
<h2>
{% for director in film.data.director %}
{{ director|safe }}<br>
{% endfor %}
</h2>
<div class="details">
Year: {{ film.data.date}}, Runtime: {{ film.duration }}
</div>
<div class="zh">
{{film.data.director.1}}: {{ film.data.bio_zh|safe }}
</div>
<div class="video-block">
<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
</div>
<div class="bio-block">
<p>{{ film.data.summary|safe }}</p>
<div class="bio">
<div class="en">
{{film.data.director.0}}: {{ film.data.bio|safe }}
</div>
<div class="zh">
{{film.data.director.1}}: {{ film.data.bio_zh|safe }}
</div>
</div>
</div>
</div>