Commit 989ece26 authored by Eugen Rochko's avatar Eugen Rochko

Add clouds, add proper favicon

parent 9419138e
public/favicon.ico

24.3 KB | W: | H:

public/favicon.ico

927 Bytes | W: | H:

public/favicon.ico
public/favicon.ico
public/favicon.ico
public/favicon.ico
  • 2-up
  • Swipe
  • Onion skin
......@@ -8,9 +8,13 @@ import mastodonLogo from './assets/mastodon-logo.svg';
import screenshotFull from './assets/screenshot_full.png';
import screenshotMobile from './assets/screenshot_mobile.png';
import elefriend from './assets/fluffy-elephant-friend.png';
import elefriend from './assets/elephant-friend.png';
import tootScreenshot from './assets/toot-screenshot.png';
import cloud2 from './assets/cloud2.png';
import cloud3 from './assets/cloud3.png';
import cloud4 from './assets/cloud4.png';
const App = () => (
<Router>
<div className='app'>
......@@ -44,6 +48,12 @@ const App = () => (
</div>
<div className='hero'>
<div className='hero__floats'>
<img src={cloud2} draggable={false} className='float-1' alt='Cloud' />
<img src={cloud4} draggable={false} className='float-2' alt='Cloud' />
<img src={cloud3} draggable={false} className='float-3' alt='Cloud' />
</div>
<img className='desktop' src={screenshotFull} draggable={false} alt='Screenshot of Mastodon on desktop'/>
<img className='mobile' src={screenshotMobile} draggable={false} alt='Screenshot of Mastodon on desktop'/>
<img className='logo' src={mastodonLogo} draggable={false} alt='Mastodon logo' />
......@@ -59,7 +69,7 @@ const App = () => (
</div>
<div className='feature container'>
<img className='left visual' src={tootScreenshot} alt='Screenshot of toot interface'/>
<div className='left visual'/>
<div className='right text'>
<h2>Built for real conversation</h2>
<p>With 500 characters per post, you get plenty of space to go deep into topics, instead of just making surface-level quips. Built-in support for content warnings lets you share sensitive discussions and media with only those who want to see them.</p>
......
src/assets/cloud1.png

274 KB | W: | H:

src/assets/cloud1.png

9.56 KB | W: | H:

src/assets/cloud1.png
src/assets/cloud1.png
src/assets/cloud1.png
src/assets/cloud1.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/cloud2.png

178 KB | W: | H:

src/assets/cloud2.png

5.24 KB | W: | H:

src/assets/cloud2.png
src/assets/cloud2.png
src/assets/cloud2.png
src/assets/cloud2.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -212,8 +212,7 @@ $phi: 1.6180339887498948482;
}
.visual {
width: 20%;
visibility: hidden;
max-width: 20%;
}
h2 {
......@@ -223,6 +222,46 @@ $phi: 1.6180339887498948482;
}
}
.hero__floats {
position: absolute;
width: 100%;
height: 100%;
img {
position: absolute;
transition: all 0.1s linear;
animation-name: floating;
animation-duration: 1.7s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-timing-function: linear;
box-shadow: none;
opacity: 0.2;
}
.float-1 {
left: -200px;
top: 100px;
height: 170px;
}
.float-2 {
right: -30px;
left: auto;
top: -90px;
height: 100px;
animation-delay: 0.2s;
}
.float-3 {
left: auto;
right: -240px;
top: 200px;
height: 140px;
animation-delay: 0.1s;
}
}
.bottom-cta {
text-align: center;
margin-bottom: 50px;
......@@ -231,6 +270,7 @@ $phi: 1.6180339887498948482;
@media only screen and (max-width: $content-width) {
.intro {
margin-bottom: 150px;
.text {
width: 90%;
}
......@@ -241,6 +281,10 @@ $phi: 1.6180339887498948482;
padding-bottom: 100px;
}
.hero__floats {
display: none;
}
.desktop {
position: relative;
width: percentage($screenshotScale);
......@@ -272,3 +316,17 @@ $phi: 1.6180339887498948482;
}
}
}
@keyframes floating {
from {
transform: translate(0, 0px);
}
65% {
transform: translate(0, 4px);
}
to {
transform: translate(0, -0px);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment