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

[Design] Add Title, Buttons.

This commit is contained in:
Ceda EI 2020-01-21 01:36:39 +05:30
parent d5005fee24
commit a721c40bf8
2 changed files with 72 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.html
View File

@ -10,8 +10,20 @@
<img src="assets/images/cloud.svg" class="clouds" id="cloud1" />
<img src="assets/images/cloud.svg" class="clouds" id="cloud2" />
<div class="top">
<div class="wrapper">
<div class="content">
<h1>Redacted Life</h1>
</div>
</div>
</div>
<div class="bottom">
<div class="wrapper">
<div class="content">
<a class="button" href="/feed.xml">Subscribe</a>
<a class="button" href="mailto:hello@redacted.life">Contact</a>
<a class="button" href="/archives/">Archives</a>
</div>
</div>
</div>
</body>
</html>

68
scss/index.scss
View File

@ -1,17 +1,12 @@
$cloud_width: 200px;
@import 'fonts';
body {
margin: 0;
padding: 0;
.top {
background-image: linear-gradient(#24d3ff, #aaeeff);
height: 70vh;
}
.bottom {
background-image: linear-gradient(#26a4c4, #afdde9);
height: 30vh;
}
@include body-font;
.clouds {
position: absolute;
width: $cloud_width;
@ -33,8 +28,65 @@ body {
animation-duration: 15s;
transform: rotateY(180deg);
}
.top {
background-image: linear-gradient(#24d3ff, #aaeeff);
min-height: 70vh;
display: flex;
align-items: end;
.wrapper {
height: 100%;
align-items: flex-end;
padding-bottom: 3em;
}
}
.bottom {
background-image: linear-gradient(#26a4c4, #afdde9);
min-height: 30vh;
.wrapper {
align-items: flex-start;
padding-top: 3em;
.content {
display: flex;
width: 100%;
justify-content: space-evenly;
.button {
font-size: 1.5em;
color: #000;
padding: 1em;
border-color: #000;
border-width: 3px;
border-style: solid;
border-radius: 1.5em;
text-decoration: none;
}
.button:hover, .button:active {
background-color: #000;
color: #FFF;
}
}
}
}
.wrapper {
position: relative;
width: 100vw;
box-sizing: border-box;
z-index: 100;
display: flex;
justify-content: center;
.content {
box-sizing: border-box;
max-width: 800px;
width: 80%;
}
}
}
h1 {
@include title-font;
font-size: 4em;
text-align: center;
}
@keyframes move_right {