beep
/
website
3
0
Fork 0
Code Issues Releases Activity

Add features

master
Ambrose Chua 2018-07-01 18:33:45 +08:00
parent b8dcce9136
commit c18048f303
4 changed files with 64 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
content/_index.html
View File

@ -19,15 +19,41 @@ date: 2018-06-30T17:53:55+08:00
</div>
<div class="picture">
<img class="screenshot" src="screenshot.svg" />
<img class="screenshot" src="screenshot.jpg" />
</div>
</section>
</div>
<section class="features" id="features">
<section class="features feature-conv" id="features">
<div class="grow">
<h1>Conversations, like in real life</h1>
<p>
Have real conversations with friends without ever making a call.
</p>
</div>
<i class="material-icons">forum</i>
</section>
<section class="features feature-notif">
<div class="grow">
<h1>Always works, even if you are offline</h1>
<p>
You'll get notifications when someone contacts you. Like your familiar chat apps.
</p>
</div>
<i class="material-icons">notifications</i>
</section>
<section class="features feature-hist">
<div class="grow">
<h1>Go back in time if you've missed something</h1>
<p>
Want to listen to that bad joke your friend made again and again? No problem
</p>
</div>
<i class="material-icons">history</i>
</section>
<div class="getnotified-wrapper">

BIN
content/screenshot.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 347 KiB

6
content/screenshot.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 118 KiB

After

Width:  |  Height:  |  Size: 118 KiB

38
src/_home.scss
View File

@ -53,16 +53,17 @@
-webkit-background-clip: text;
color: transparent;
font-size: 3rem;
@media screen and (max-width: 50rem) {
font-size: 2rem;
@media screen and (min-width: 50rem) {
font-size: 3rem;
}
}
.picture {
flex: 1;
padding-left: 1rem;
padding-right: 6rem;
@media screen and (max-width: 50rem) {
@media screen and (max-width: 60rem) {
flex: 0;
padding-right: 2rem;
}
@media screen and (max-width: 40rem) {
@ -81,6 +82,33 @@
}
.features {
@extend .frame;
display: flex;
@media screen and (max-width: 40rem) {
flex-direction: column-reverse;
}
.grow {
flex: 1;
}
.material-icons {
font-size: 10rem;
@media screen and (max-width: 40rem) {
font-size: 6rem;
}
background: var(--gradient-radial-text);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
}
.getnotified-wrapper {
background: var(--gradient-linear-background);