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

[Design] Update footer. Refactor SCSS. More responsive on mobile.

This commit is contained in:
Ceda EI 2020-01-22 02:24:07 +05:30
parent fd3726f5a4
commit 99ba2c3b34
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -21,6 +21,9 @@
<source src="assets/videos/sample.mp4" type="video/mp4" /> <source src="assets/videos/sample.mp4" type="video/mp4" />
</video> </video>
</div> </div>
<details class="shownotes">
<summary>Show Notes</summary>
</details>
</div> </div>
</div> </div>
</div> </div>
@ -32,7 +35,9 @@
<a class="button" href="/archives/">Archives</a> <a class="button" href="/archives/">Archives</a>
</div> </div>
<footer> <footer>
<a href="https://git.webionite.com/ceda_ei/redacted.life">This website</a>, designed by <a href="https://webionite.com">Ceda EI</a>, is licensed under <a href="https://git.webionite.com/ceda_ei/redacted.life/src/branch/master/LICENSE">MIT License</a>. Content licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC-BY-4.0</a> Designed by <a href="https://webionite.com">Ceda EI</a><br />
Source available on <a href="https://git.webionite.com/ceda_ei/redacted.life">Webionite</a><br />
Licensed under <a href="https://git.webionite.com/ceda_ei/redacted.life/src/branch/master/LICENSE">MIT</a>
</footer> </footer>
</div> </div>
</div> </div>

19
scss/index.scss
View File

@ -1,4 +1,6 @@
$cloud_width: 200px; $cloud_width: 200px;
$top-height: 70vh;
$top-height-phone: 64vh;
@import 'fonts'; @import 'fonts';
@ -35,11 +37,11 @@ body {
} }
.top { .top {
background-image: linear-gradient(#24d3ff, #aaeeff); background-image: linear-gradient(#24d3ff, #aaeeff);
min-height: 70vh; min-height: $top-height;
display: flex; display: flex;
align-items: end; align-items: end;
.wrapper { .wrapper {
min-height: 70vh; min-height: $top-height;
align-items: flex-end; align-items: flex-end;
padding-bottom: 2em; padding-bottom: 2em;
.player { .player {
@ -53,14 +55,19 @@ body {
border-radius: 2em; border-radius: 2em;
} }
} }
.shownotes {
padding: 1em;
margin: auto;
width: 80%;
}
} }
} }
.bottom { .bottom {
background-image: linear-gradient(#26a4c4, #afdde9); background-image: linear-gradient(#26a4c4, #afdde9);
min-height: 30vh; min-height: 100vh - $top-height;
.wrapper { .wrapper {
min-height: 30vh; min-height: 100vh - $top-height;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
flex-direction: column; flex-direction: column;
@ -127,14 +134,18 @@ h1 {
@media (max-width: 600px) { @media (max-width: 600px) {
body { body {
.top { .top {
min-height: $top-height-phone;
.wrapper { .wrapper {
min-height: $top-height-phone;
.player { .player {
width: 100%; width: 100%;
} }
} }
} }
.bottom { .bottom {
min-height: 100vh - $top-height-phone;
.wrapper { .wrapper {
min-height: 100vh - $top-height-phone;
.content { .content {
.button { .button {
font-size: 1em; font-size: 1em;