ceda_ei
/
redacted.life
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

[Design] Make background and clouds static. Make index.html a template.

This commit is contained in:
Ceda EI 2020-01-25 02:42:17 +05:30
parent c84f66183f
commit cddefb1763
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Redacted Life</title> <title>{{ title }} | Redacted Life</title>
<link href="assets/css/index.css" rel="stylesheet" type="text/css"> <link href="assets/css/index.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="assets/plyr/plyr.css" /> <link rel="stylesheet" href="assets/plyr/plyr.css" />
</head> </head>
@ -12,17 +12,20 @@
<body> <body>
<img src="assets/images/cloud.svg" class="clouds" id="cloud1" /> <img src="assets/images/cloud.svg" class="clouds" id="cloud1" />
<img src="assets/images/cloud.svg" class="clouds" id="cloud2" /> <img src="assets/images/cloud.svg" class="clouds" id="cloud2" />
<div class="top_bg"></div>
<div class="bottom_bg"></div>
<div class="top"> <div class="top">
<div class="wrapper"> <div class="wrapper">
<div class="content"> <div class="content">
<h1>Redacted Life</h1> <h1>Redacted Life</h1>
<div class="player"> <div class="player">
<video id="player"> <video id="player" poster="{{ thumbnail_src }}" controls>
<source src="assets/videos/sample.mp4" type="video/mp4" /> <source src="{{ video_src }}" type="video/mp4" />
</video> </video>
</div> </div>
<details class="shownotes"> <details class="shownotes">
<summary>Show Notes</summary> <summary>Show Notes</summary>
{{ show_notes }}
</details> </details>
</div> </div>
</div> </div>

18
scss/index.scss
View File

@ -15,7 +15,8 @@ body {
@include body-font; @include body-font;
.clouds { .clouds {
position: absolute; z-index: 50;
position: fixed;
width: $cloud_width; width: $cloud_width;
animation-name: move_right; animation-name: move_right;
animation-direction: alternate; animation-direction: alternate;
@ -35,8 +36,20 @@ body {
animation-duration: 15s; animation-duration: 15s;
transform: rotateY(180deg); transform: rotateY(180deg);
} }
.top { .top_bg {
background-image: linear-gradient(#24d3ff, #aaeeff); background-image: linear-gradient(#24d3ff, #aaeeff);
height: $top-height;
width: 100vw;
position: fixed;
}
.bottom_bg {
background-image: linear-gradient(#26a4c4, #afdde9);
height: 100 - $top-height;
width: 100vw;
position: fixed;
top: $top-height;
}
.top {
min-height: $top-height; min-height: $top-height;
display: flex; display: flex;
align-items: end; align-items: end;
@ -64,7 +77,6 @@ body {
} }
.bottom { .bottom {
background-image: linear-gradient(#26a4c4, #afdde9);
min-height: 100vh - $top-height; min-height: 100vh - $top-height;
.wrapper { .wrapper {
min-height: 100vh - $top-height; min-height: 100vh - $top-height;