diff --git a/index.html b/index.html
index 0ab7958..c6983f0 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,9 @@
+
+ Show Notes
+
@@ -32,7 +35,9 @@
Archives
diff --git a/scss/index.scss b/scss/index.scss
index c2e51cc..dbba5b5 100644
--- a/scss/index.scss
+++ b/scss/index.scss
@@ -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;