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>
<meta charset="UTF-8">
<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 rel="stylesheet" href="assets/plyr/plyr.css" />
</head>
@ -12,17 +12,20 @@
<body>
<img src="assets/images/cloud.svg" class="clouds" id="cloud1" />
<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="wrapper">
<div class="content">
<h1>Redacted Life</h1>
<div class="player">
<video id="player">
<source src="assets/videos/sample.mp4" type="video/mp4" />
<video id="player" poster="{{ thumbnail_src }}" controls>
<source src="{{ video_src }}" type="video/mp4" />
</video>
</div>
<details class="shownotes">
<summary>Show Notes</summary>
{{ show_notes }}
</details>
</div>
</div>

18
scss/index.scss
View File

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