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" />
</video>
</div>
<details class="shownotes">
<summary>Show Notes</summary>
</details>
</div>
</div>
</div>
@ -32,7 +35,9 @@
<a class="button" href="/archives/">Archives</a>
</div>
<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>
</div>
</div>

19
scss/index.scss
View File

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