Commit bcf776b7 authored by Eugen Rochko's avatar Eugen Rochko

Improve design

parent 537dee81
......@@ -5,6 +5,12 @@ import {
import githubLogo from './assets/github-logo.svg';
import mastodonLogo from './assets/mastodon-logo.svg';
import wiredLogo from './assets/wired-logo.svg';
import productHuntLogo from './assets/product-hunt-logo-horizontal-black.png';
import theVergeLogo from './assets/the-verge-logo.svg';
import motherboardLogo from './assets/motherboard-logo.svg';
import screenshotFull from './assets/screenshot_full.png';
import screenshotMobile from './assets/screenshot_mobile.png';
......@@ -18,53 +24,66 @@ import cloud4 from './assets/cloud4.png';
const App = () => (
<Router>
<div className='app'>
<div className='navbar'>
<ul className='left'>
<li>
<a className='active' href='https://github.com/tootsuite/mastodon'>
<img className='link-logo before' src={mastodonLogo} alt='Mastodon Logo'/> Mastodon
</a>
</li>
</ul>
<ul className='right'>
<li><a href='https://discourse.joinmastodon.org'>Community support</a></li>
<li><a href='https://instances.mastodon.xyz'>Find an instance</a></li>
<li><a href='https://github.com/tootsuite/documentation'>Documentation</a></li>
<li><a href='https://www.stickermule.com/marketplace/18010-mastodon-fluffy-elephant-friend'>Merch</a></li>
<li>
<a href='https://github.com/tootsuite/mastodon'>
Fork on Github <img className='link-logo after' src={githubLogo} alt='Github Logo'/>
</a>
</li>
</ul>
</div>
<div className='intro'>
<div className='navbar container'>
<ul className='left'>
<li>
<a className='brand' href='https://github.com/tootsuite/mastodon'>
<img className='link-logo before' src={mastodonLogo} alt='Mastodon Logo'/> Mastodon
</a>
</li>
</ul>
<ul className='right'>
<li><a href='https://discourse.joinmastodon.org'>Support</a></li>
<li><a href='https://github.com/tootsuite/documentation'>Documentation</a></li>
<li><a href='https://www.stickermule.com/marketplace/18010-mastodon-fluffy-elephant-friend'>Merch</a></li>
<li>
<a href='https://github.com/tootsuite/mastodon'>
Source code <img className='link-logo after' src={githubLogo} alt='Github Logo'/>
</a>
</li>
</ul>
</div>
<div className='text'>
<h1>Giving social networking back to <strong>you</strong></h1>
<p>With thousands of interconnected communities to choose from, and the tools to make your own, Mastodon is the world&rsquo;s largest free, open-source, decentralized micro-blogging network.</p>
<a href='https://instances.mastodon.xyz' className='cta button'>Get started</a>
<a href='#' className='cta button alt'>How it works</a>
</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' />
<img src={cloud2} className='float-1' alt='Cloud' />
<img src={cloud4} className='float-2' alt='Cloud' />
<img src={cloud3} 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' />
<img className='desktop' src={screenshotFull} alt='Screenshot of Mastodon on desktop'/>
<img className='mobile' src={screenshotMobile} alt='Screenshot of Mastodon on desktop'/>
</div>
</div>
<div className='as-seen-on'>
<div className='container'>
<h3>As seen on</h3>
<div className='logo-grid'>
<a href='https://motherboard.vice.com/en_us/article/mastodon-is-like-twitter-without-nazis-so-why-are-we-not-using-it' className='logo-motherboard'><img src={motherboardLogo} alt='Motherboard' /></a>
<a href='https://www.producthunt.com/posts/mastodon' className='logo-product-hunt'><img src={productHuntLogo} alt='Product Hunt' /></a>
<a href='http://www.theverge.com/2017/4/4/15177856/mastodon-social-network-twitter-clone' className='logo-the-verge'><img src={theVergeLogo} alt='The Verge' /></a>
<a href='https://www.wired.com/2017/04/like-twitter-hate-trolls-try-mastodon/' className='logo-wired'><img src={wiredLogo} alt='Wired' /></a>
</div>
</div>
</div>
<div className='feature container'>
<img className='right visual' src={elefriend} alt='Mastodon mascot'/>
<div className='right visual'/>
<div className='left text'>
<h2>You&rsquo;re a person, not a product</h2>
<p>Mastodon communities, or instances, are independently owned, hosted, and moderated. Instances can seamlessly connect to each other, but nobody can own or control them all. That means no big corporation owns your data, and you aren&rsquo;t being spied on or sold to advertisers.</p>
<h2>Find your perfect place</h2>
<p>Mastodon is a federated network. Pick an instance that suits you, out of a diverse pool for all sorts of interests, needs, and languages, run by independent people and organizations. Regardless of which one you choose, you can always interact with everyone else.</p>
</div>
</div>
......@@ -72,15 +91,15 @@ const App = () => (
<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>
<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 and spoiler warnings lets you share sensitive discussions and media with only those who want to see them.</p>
</div>
</div>
<div className='feature container'>
<div className='right visual'/>
<div className='left text'>
<h2>Find your perfect place</h2>
<p>Pick an instance that suits you, out of diverse options for all sorts of interests, needs, and languages. If you don&rsquo;t like how yours is being run, you can quickly and easily find another without losing any of the friends you&rsquo;ve made. You can even make a new instance for the public, your organisation, your friends, or even just yourself.</p>
<h2>You&rsquo;re a person, not a product</h2>
<p>Mastodon is free, open source software. The development is crowdfunded. All instances are independently owned, hosted, and moderated. There is no monopoly by a single commercial company, no ads, no tracking.</p>
</div>
</div>
......@@ -88,7 +107,7 @@ const App = () => (
<div className='left visual'/>
<div className='right text'>
<h2>Always within reach</h2>
<p>With multiple apps available for iOS, Android, and every platform you can think of, Mastodon is easy to use everywhere you go, and just like with instances, anyone can develop an app.</p>
<p>With multiple apps available for iOS, Android, and every platform you can think of, Mastodon is easy to use everywhere you go. An easy to use and open API ensures a rich ecosystem of 3rd party apps.</p>
</div>
</div>
......
src/assets/cloud2.png

5.24 KB | W: | H:

src/assets/cloud2.png

4.86 KB | W: | H:

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

6.2 KB | W: | H:

src/assets/cloud3.png

5.72 KB | W: | H:

src/assets/cloud3.png
src/assets/cloud3.png
src/assets/cloud3.png
src/assets/cloud3.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/cloud4.png

5.56 KB | W: | H:

src/assets/cloud4.png

5.15 KB | W: | H:

src/assets/cloud4.png
src/assets/cloud4.png
src/assets/cloud4.png
src/assets/cloud4.png
  • 2-up
  • Swipe
  • Onion skin
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="404px" height="40px" viewBox="0 0 404 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: sketchtool 41 (35326) - http://www.bohemiancoding.com/sketch -->
<title>2B1A9C85-4E6F-49E8-9628-EE2F88631BFE</title>
<desc>Created with sketchtool.</desc>
<defs/>
<g id="main" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Motherboard" transform="translate(-78.000000, -210.000000)" fill="#fff">
<g id="motherboard_logo_black" transform="translate(78.000000, 210.000000)">
<path d="M70.0463492,27.928254 C65.8368254,27.928254 62.8946032,24.935873 62.8946032,20.5739683 C62.8946032,16.5155556 65.6336508,13.1174603 70.0463492,13.1174603 C74.4590476,13.1174603 77.1980952,16.5155556 77.1980952,20.5739683 C77.1980952,24.935873 74.255873,27.928254 70.0463492,27.928254 L70.0463492,27.928254 Z M140.951746,14.0298413 L132.429841,14.0298413 L132.429841,1.14666667 L89.7244444,1.14666667 L89.7244444,12.6806349 C86.6203175,5.12825397 78.9466667,0.538412698 70.0463492,0.538412698 C58.4311111,0.538412698 48.8952381,8.34984127 48.8952381,20.3707937 C48.8952381,20.8520635 48.9142857,21.3225397 48.9434921,21.7885714 L45.5485714,1.14666667 L31.3974603,1.14666667 L27.0857143,16.1606349 C26.6292063,17.784127 26.375873,19.5587302 26.1219048,21.232381 L25.7669841,21.232381 L20.4914286,1.14666667 L6.18857143,1.14666667 L0,39.391746 L13.4412698,39.391746 L15.064127,23.0590476 C15.2165079,21.5371429 15.3180952,19.9650794 15.4196825,18.4431746 L15.8761905,18.4431746 C15.9777778,20.0666667 16.3326984,21.5885714 16.7384127,23.2120635 L21.7092063,39.391746 L29.8247619,39.391746 L35.3536508,22.2469841 C35.7593651,21.0304762 36.0126984,19.7111111 36.2666667,18.4431746 L36.52,18.4431746 L38.3968254,39.391746 L51.8380952,39.391746 L49.64,26.0247619 C52.0857143,34.8666667 60.3028571,40 70.0463492,40 C81.712381,40 91.1980952,32.6450794 91.1980952,20.3707937 C91.1980952,17.912381 90.7936508,15.6342857 90.0596825,13.5587302 L97.3828571,13.2190476 L97.3828571,39.391746 L111.28127,39.391746 L111.28127,13.2190476 L119.039365,13.5568254 L119.039365,39.391746 L132.429841,39.391746 L132.429841,26.1022222 L140.951746,26.1022222 L140.951746,39.391746 L154.342222,39.391746 L154.342222,1.14666667 L140.951746,1.14666667 L140.951746,14.0298413 L140.951746,14.0298413 Z" id="Fill-1"/>
<polyline id="Fill-2" points="171.83873 25.1892063 182.539683 25.1892063 182.539683 15.247619 171.83873 15.247619 171.83873 11.5955556 183.55619 11.5955556 183.55619 1.14666667 157.839365 1.14666667 157.839365 39.391746 183.96127 39.391746 183.96127 28.9434921 171.83873 28.9434921 171.83873 25.1892063"/>
<path d="M381.629841,27.928254 L380.766984,27.928254 L380.766984,13.1174603 L381.629841,13.1174603 C386.702222,13.1174603 389.795556,15.4 389.795556,20.7765079 C389.795556,25.7980952 386.245714,27.928254 381.629841,27.928254 L381.629841,27.928254 Z M345.974603,18.088254 L345.011429,18.088254 L345.011429,11.5955556 L346.07619,11.5955556 C348.460952,11.5955556 350.539683,11.9511111 350.539683,14.8926984 C350.539683,17.7333333 348.257143,18.088254 345.974603,18.088254 L345.974603,18.088254 Z M309.100952,25.544127 L311.63746,13.8780952 L312.144127,13.8780952 C312.39873,15.5015873 312.652063,17.1746032 313.058413,18.7980952 L314.680635,25.544127 L309.100952,25.544127 L309.100952,25.544127 Z M275.272381,27.928254 C271.063492,27.928254 268.12127,24.935873 268.12127,20.5739683 C268.12127,16.5155556 270.860952,13.1174603 275.272381,13.1174603 C279.686349,13.1174603 282.424762,16.5155556 282.424762,20.5739683 C282.424762,24.935873 279.483175,27.928254 275.272381,27.928254 L275.272381,27.928254 Z M236.860952,30.2615873 L235.287619,30.2615873 L235.287619,23.9212698 L236.657778,23.9212698 C238.888889,23.9212698 242.44,23.8704762 242.44,27.0660317 C242.44,30.2107937 239.142857,30.2615873 236.860952,30.2615873 L236.860952,30.2615873 Z M235.287619,10.3784127 L236.252063,10.3784127 C238.280635,10.3784127 240.867302,10.1752381 240.867302,13.015873 C240.867302,15.6533333 238.584762,15.8565079 236.555556,15.8565079 L235.287619,15.8565079 L235.287619,10.3784127 L235.287619,10.3784127 Z M201.711746,18.088254 L200.748571,18.088254 L200.748571,11.5955556 L201.813968,11.5955556 C204.198095,11.5955556 206.276825,11.9511111 206.276825,14.8926984 C206.276825,17.7333333 203.994921,18.088254 201.711746,18.088254 L201.711746,18.088254 Z M381.021587,1.14666667 L366.869206,1.14666667 L366.869206,38.6304762 L359.061587,26.9644444 C358.299683,25.8488889 357.43746,25.24 356.726984,24.6825397 L356.726984,24.3784127 C361.900952,22.6533333 364.132698,20.2184127 364.132698,14.4361905 C364.132698,4.79936508 356.829206,1.14666667 348.206349,1.14666667 L331.416508,1.14666667 L331.416508,34.6926984 L319.448254,1.14666667 L304.079365,1.14666667 L296.112381,24.0749206 C296.314286,22.895873 296.425397,21.6622222 296.425397,20.3707937 C296.425397,8.34984127 286.888889,0.538412698 275.272381,0.538412698 C263.657778,0.538412698 254.121905,8.34984127 254.121905,20.3707937 C254.121905,22.087619 254.313016,23.7047619 254.664762,25.2222222 C253.639365,22.6304762 251.466032,20.8012698 248.526349,19.7619048 L248.526349,19.4577778 C251.873651,18.392381 253.547937,15.095873 253.547937,11.7473016 C253.547937,2.92253968 245.990476,1.14666667 238.584762,1.14666667 L222.405714,1.14666667 L222.405714,38.3301587 L214.79873,26.9644444 C214.03746,25.8488889 213.174603,25.24 212.466032,24.6825397 L212.466032,24.3784127 C217.639365,22.6533333 219.870476,20.2184127 219.870476,14.4361905 C219.870476,4.79936508 212.566349,1.14666667 203.943492,1.14666667 L187.155556,1.14666667 L187.155556,39.391746 L200.748571,39.391746 L200.748571,27.1161905 L201.003175,27.1161905 L207.088254,39.391746 L241.323175,39.391746 C248.019048,39.391746 255.32254,36.7034921 255.32254,28.8412698 C255.32254,28.1898413 255.263492,27.5733333 255.15873,26.9847619 C257.918095,35.2368254 265.886984,40 275.272381,40 C283.420952,40 290.499683,36.4095238 294.031746,30.0653968 L290.791111,39.391746 L305.500952,39.391746 L306.616508,34.6234921 L317.115556,34.6234921 L318.383492,39.391746 L345.011429,39.391746 L345.011429,27.1161905 L345.264127,27.1161905 L351.350476,39.391746 L384.470476,39.391746 C395.68,39.391746 403.693968,32.1892063 403.693968,20.8273016 C403.693968,6.77650794 393.854603,1.14666667 381.021587,1.14666667 L381.021587,1.14666667 Z" id="Fill-3"/>
</g>
</g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="168px" height="28.4667px" fill="#fff" xmlns="http://www.w3.org/2000/svg" viewBox="0 291.4 1280 217.2"><path d="M0 292.1v58.1h39.7v153.2h67.1V292.1M220.1 372.4h-31.4v-22.3h15.8v-58h-82.8v211.3h67v-79.9h31.4v79.9h67.2V292.1h-67.2M302 503.4h124.3v-58.2h-60.2v-24.6h38.3v-48.2h-38.3v-22.2h60.2v-58.1H302M954.8 363.6c0-45.6-33.7-71.5-81.5-71.5h-74.7v211.2h67.1v-54.1l38.4 54.1h75.7l-54.4-81c19.6-10.7 29.4-30.2 29.4-58.7M865.5 387v-39.3c9.3 0 20.7 2.8 24.1 13 .3.9.5 1.9.8 2.9 0 .1 0 .3.1.4.1 1 .3 2.2.3 3.4 0 15.7-14.3 19.6-25.3 19.6M559.2 420.8h-.6l-4.8-17.4-15-53.1h26.4l17.4-58.2h-134l76.8 211.2h68.8l8.3-22.6s36.8-99.8 56.9-154.2v176.8h124.3v-58.2h-60.2v-24.6h38.2v-48.1h-38.2v-22.2h60.2V292H598l-38.8 128.8zM1280 350.3v-58.1h-124.3v211.2H1280v-58.2h-60.3v-24.6h38.3v-48h-38.3v-22.3"></path><path d="M1142.8 459.1V373H1048v48h35.3v17.1c-2.7 2.4-8.5 3.7-14.5 3.7-24.6 0-42.8-19.4-42.8-43.1s17.7-44.7 42.3-44.7c14.9 0 50.2.1 50.2.1v-62.6h-16.1c-30 0-59.9-2.4-87.4 11.8-21.7 11.2-38.9 30.2-48 52.8-5.3 13.3-8 27.7-8 42 0 59.9 47 110.4 107.9 110.4 30.2 0 59.7-11.3 75.8-25.4.1-14.6.1-16.8.1-24"></path></svg>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="401pt" height="82pt" viewBox="0 0 401 82" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#231f20" opacity="1.00" d=" M 0.00 0.00 L 80.25 0.00 C 80.25 27.33 80.25 54.67 80.25 82.00 L 0.00 82.00 L 0.00 0.00 M 5.91 12.87 C 9.49 29.54 12.70 46.30 16.15 63.00 C 16.78 65.00 16.39 67.64 18.33 68.98 C 21.83 69.54 25.42 69.40 28.95 69.16 C 30.87 69.22 31.33 66.96 31.68 65.51 C 34.09 53.62 36.71 41.77 39.11 29.88 C 39.30 28.78 39.64 27.71 40.16 26.72 C 43.15 39.48 45.62 52.35 48.40 65.15 C 48.78 66.51 48.86 68.19 50.20 69.02 C 54.02 69.48 57.94 69.52 61.75 68.99 C 63.12 68.18 63.19 66.51 63.54 65.13 C 67.07 47.72 70.36 30.24 74.09 12.87 C 70.72 12.89 67.36 12.88 64.00 12.88 C 61.32 28.03 59.17 43.28 56.21 58.38 C 52.88 45.57 50.65 32.45 47.75 19.52 C 47.09 17.31 47.39 14.09 44.97 12.97 C 42.01 12.79 39.03 12.78 36.07 12.97 C 34.39 13.11 34.01 15.10 33.68 16.42 C 31.00 29.24 28.19 42.03 25.57 54.85 C 25.30 56.04 24.90 57.18 24.45 58.31 C 21.76 43.20 19.21 28.05 16.89 12.88 C 13.23 12.87 9.57 12.89 5.91 12.87 Z"/>
<path fill="#ffffff" opacity="1.00" d=" M 80.25 0.00 L 159.75 0.00 C 159.75 27.33 159.75 54.67 159.75 82.00 L 80.25 82.00 C 80.25 54.67 80.25 27.33 80.25 0.00 M 100.61 12.33 C 100.57 15.69 100.57 19.04 100.61 22.40 C 105.18 22.43 109.75 22.41 114.32 22.41 C 114.30 34.80 114.30 47.20 114.32 59.59 C 109.75 59.59 105.18 59.57 100.61 59.60 C 100.57 62.96 100.57 66.31 100.62 69.67 C 113.54 69.70 126.46 69.70 139.38 69.67 C 139.43 66.32 139.42 62.96 139.40 59.61 C 134.82 59.57 130.25 59.59 125.68 59.59 C 125.70 47.20 125.70 34.80 125.68 22.41 C 130.25 22.41 134.82 22.43 139.39 22.40 C 139.43 19.04 139.43 15.68 139.38 12.33 C 126.46 12.30 113.54 12.30 100.61 12.33 Z"/>
<path fill="#231f20" opacity="1.00" d=" M 159.75 0.00 L 240.00 0.00 C 240.00 27.33 240.00 54.67 240.00 82.00 L 159.75 82.00 C 159.75 54.67 159.75 27.33 159.75 0.00 M 177.88 12.88 C 177.88 31.63 177.88 50.37 177.88 69.12 C 181.58 69.12 185.29 69.12 189.00 69.12 C 189.00 61.79 189.00 54.45 189.00 47.12 C 195.03 47.14 201.06 47.09 207.09 47.13 C 209.29 46.92 211.91 48.49 211.86 50.91 C 212.14 56.99 212.66 63.05 213.04 69.12 C 216.57 69.12 220.09 69.12 223.62 69.13 C 222.62 62.25 223.85 55.14 221.91 48.40 C 220.91 44.87 217.01 44.08 213.97 43.20 C 216.23 42.00 219.13 41.89 220.77 39.69 C 223.15 36.67 223.32 32.64 223.33 28.96 C 223.29 24.66 223.39 19.93 220.66 16.32 C 218.48 13.32 214.40 12.88 210.98 12.88 C 199.95 12.87 188.91 12.88 177.88 12.88 Z"/>
<path fill="#ffffff" opacity="1.00" d=" M 240.00 0.00 L 319.75 0.00 C 319.75 27.33 319.75 54.67 319.75 82.00 L 240.00 82.00 C 240.00 54.67 240.00 27.33 240.00 0.00 M 254.34 12.34 C 254.30 15.68 254.30 19.03 254.32 22.37 C 256.87 22.42 259.42 22.42 261.97 22.40 C 262.02 34.80 262.02 47.20 261.97 59.60 C 259.42 59.58 256.88 59.58 254.33 59.61 C 254.30 62.96 254.29 66.31 254.34 69.66 C 270.42 69.71 286.49 69.71 302.57 69.66 C 302.65 63.03 302.60 56.40 302.60 49.77 C 299.11 49.74 295.62 49.74 292.13 49.78 C 292.12 53.05 292.12 56.32 292.13 59.59 C 285.77 59.60 279.41 59.55 273.05 59.62 C 272.95 54.71 273.02 49.79 273.00 44.88 C 278.00 44.88 283.00 44.88 288.00 44.88 C 288.00 41.69 288.00 38.50 288.00 35.31 C 283.00 35.31 278.00 35.31 273.00 35.31 C 273.00 31.01 272.99 26.71 273.01 22.41 C 279.21 22.42 285.40 22.42 291.60 22.41 C 291.58 25.27 291.58 28.13 291.59 31.00 C 295.02 31.00 298.45 31.00 301.88 31.00 C 301.87 24.78 301.89 18.56 301.87 12.34 C 286.02 12.29 270.18 12.29 254.34 12.34 Z"/>
<path fill="#231f20" opacity="1.00" d=" M 319.75 0.00 L 401.00 0.00 L 401.00 82.00 L 319.75 82.00 C 319.75 54.67 319.75 27.33 319.75 0.00 M 337.88 12.88 C 337.88 31.63 337.88 50.37 337.88 69.12 C 347.23 69.10 356.57 69.16 365.92 69.09 C 371.68 68.98 378.39 67.91 381.86 62.75 C 385.91 56.27 385.30 48.34 386.01 41.03 C 385.29 33.71 385.93 25.75 381.86 19.25 C 378.63 14.42 372.45 13.15 367.02 12.95 C 357.31 12.79 347.59 12.92 337.88 12.88 Z"/>
<path fill="#231f20" opacity="1.00" d=" M 100.61 12.33 C 113.54 12.30 126.46 12.30 139.38 12.33 C 139.43 15.68 139.43 19.04 139.39 22.40 C 134.82 22.43 130.25 22.41 125.68 22.41 C 125.70 34.80 125.70 47.20 125.68 59.59 C 130.25 59.59 134.82 59.57 139.40 59.61 C 139.42 62.96 139.43 66.32 139.38 69.67 C 126.46 69.70 113.54 69.70 100.62 69.67 C 100.57 66.31 100.57 62.96 100.61 59.60 C 105.18 59.57 109.75 59.59 114.32 59.59 C 114.30 47.20 114.30 34.80 114.32 22.41 C 109.75 22.41 105.18 22.43 100.61 22.40 C 100.57 19.04 100.57 15.69 100.61 12.33 Z"/>
<path fill="#231f20" opacity="1.00" d=" M 254.34 12.34 C 270.18 12.29 286.02 12.29 301.87 12.34 C 301.89 18.56 301.87 24.78 301.88 31.00 C 298.45 31.00 295.02 31.00 291.59 31.00 C 291.58 28.13 291.58 25.27 291.60 22.41 C 285.40 22.42 279.21 22.42 273.01 22.41 C 272.99 26.71 273.00 31.01 273.00 35.31 C 278.00 35.31 283.00 35.31 288.00 35.31 C 288.00 38.50 288.00 41.69 288.00 44.88 C 283.00 44.88 278.00 44.88 273.00 44.88 C 273.02 49.79 272.95 54.71 273.05 59.62 C 279.41 59.55 285.77 59.60 292.13 59.59 C 292.12 56.32 292.12 53.05 292.13 49.78 C 295.62 49.74 299.11 49.74 302.60 49.77 C 302.60 56.40 302.65 63.03 302.57 69.66 C 286.49 69.71 270.42 69.71 254.34 69.66 C 254.29 66.31 254.30 62.96 254.33 59.61 C 256.88 59.58 259.42 59.58 261.97 59.60 C 262.02 47.20 262.02 34.80 261.97 22.40 C 259.42 22.42 256.87 22.42 254.32 22.37 C 254.30 19.03 254.30 15.68 254.34 12.34 Z"/>
<path fill="#ffffff" opacity="1.00" d=" M 5.91 12.87 C 9.57 12.89 13.23 12.87 16.89 12.88 C 19.21 28.05 21.76 43.20 24.45 58.31 C 24.90 57.18 25.30 56.04 25.57 54.85 C 28.19 42.03 31.00 29.24 33.68 16.42 C 34.01 15.10 34.39 13.11 36.07 12.97 C 39.03 12.78 42.01 12.79 44.97 12.97 C 47.39 14.09 47.09 17.31 47.75 19.52 C 50.65 32.45 52.88 45.57 56.21 58.38 C 59.17 43.28 61.32 28.03 64.00 12.88 C 67.36 12.88 70.72 12.89 74.09 12.87 C 70.36 30.24 67.07 47.72 63.54 65.13 C 63.19 66.51 63.12 68.18 61.75 68.99 C 57.94 69.52 54.02 69.48 50.20 69.02 C 48.86 68.19 48.78 66.51 48.40 65.15 C 45.62 52.35 43.15 39.48 40.16 26.72 C 39.64 27.71 39.30 28.78 39.11 29.88 C 36.71 41.77 34.09 53.62 31.68 65.51 C 31.33 66.96 30.87 69.22 28.95 69.16 C 25.42 69.40 21.83 69.54 18.33 68.98 C 16.39 67.64 16.78 65.00 16.15 63.00 C 12.70 46.30 9.49 29.54 5.91 12.87 Z"/>
<path fill="#ffffff" opacity="1.00" d=" M 177.88 12.88 C 188.91 12.88 199.95 12.87 210.98 12.88 C 214.40 12.88 218.48 13.32 220.66 16.32 C 223.39 19.93 223.29 24.66 223.33 28.96 C 223.32 32.64 223.15 36.67 220.77 39.69 C 219.13 41.89 216.23 42.00 213.97 43.20 C 217.01 44.08 220.91 44.87 221.91 48.40 C 223.85 55.14 222.62 62.25 223.62 69.13 C 220.09 69.12 216.57 69.12 213.04 69.12 C 212.66 63.05 212.14 56.99 211.86 50.91 C 211.91 48.49 209.29 46.92 207.09 47.13 C 201.06 47.09 195.03 47.14 189.00 47.12 C 189.00 54.45 189.00 61.79 189.00 69.12 C 185.29 69.12 181.58 69.12 177.88 69.12 C 177.88 50.37 177.88 31.63 177.88 12.88 M 189.00 22.12 C 189.00 27.55 189.00 32.98 189.00 38.41 C 195.65 38.32 202.32 38.61 208.96 38.27 C 212.53 38.06 212.58 33.77 212.72 31.09 C 212.61 28.14 213.16 24.22 210.41 22.27 C 203.29 21.90 196.14 22.23 189.00 22.12 Z"/>
<path fill="#ffffff" opacity="1.00" d=" M 337.88 12.88 C 347.59 12.92 357.31 12.79 367.02 12.95 C 372.45 13.15 378.63 14.42 381.86 19.25 C 385.93 25.75 385.29 33.71 386.01 41.03 C 385.30 48.34 385.91 56.27 381.86 62.75 C 378.39 67.91 371.68 68.98 365.92 69.09 C 356.57 69.16 347.23 69.10 337.88 69.12 C 337.88 50.37 337.88 31.63 337.88 12.88 M 349.00 22.12 C 349.00 34.71 349.00 47.29 349.00 59.88 C 354.69 59.87 360.38 59.89 366.08 59.89 C 368.81 59.94 372.12 59.22 373.40 56.50 C 375.31 52.29 374.84 47.55 375.00 43.06 C 374.79 37.44 375.59 31.58 373.70 26.18 C 372.85 23.42 369.78 22.11 367.09 22.14 C 361.06 22.08 355.03 22.15 349.00 22.12 Z"/>
<path fill="#231f20" opacity="1.00" d=" M 189.00 22.12 C 196.14 22.23 203.29 21.90 210.41 22.27 C 213.16 24.22 212.61 28.14 212.72 31.09 C 212.58 33.77 212.53 38.06 208.96 38.27 C 202.32 38.61 195.65 38.32 189.00 38.41 C 189.00 32.98 189.00 27.55 189.00 22.12 Z"/>
<path fill="#231f20" opacity="1.00" d=" M 349.00 22.12 C 355.03 22.15 361.06 22.08 367.09 22.14 C 369.78 22.11 372.85 23.42 373.70 26.18 C 375.59 31.58 374.79 37.44 375.00 43.06 C 374.84 47.55 375.31 52.29 373.40 56.50 C 372.12 59.22 368.81 59.94 366.08 59.89 C 360.38 59.89 354.69 59.87 349.00 59.88 C 349.00 47.29 349.00 34.71 349.00 22.12 Z"/>
</svg>
\ No newline at end of file
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500');
@import url('https://fonts.googleapis.com/css?family=Quando|Judson|Montserrat:500|Roboto:400,500');
@import 'scss/variables.scss';
@import 'scss/reset.scss';
......
......@@ -20,8 +20,7 @@ $phi: 1.6180339887498948482;
.navbar {
overflow: hidden;
background-color: $black;
padding: 0 30px;
margin-bottom: 90px;
ul {
list-style: none;
......@@ -39,12 +38,11 @@ $phi: 1.6180339887498948482;
color: $lighter;
text-decoration: none;
padding: 12px 16px;
padding-bottom: 10px;
line-height: 32px;
transition: color $transition-out;
font-family: 'Montserrat', sans-serif;
font-weight: 500;
font-size: 14px;
border-bottom: 2px solid transparent;
transition: color $transition-out, border-bottom-color $transition-out;
img.link-logo {
width: 32px;
......@@ -63,14 +61,37 @@ $phi: 1.6180339887498948482;
&.active, &:hover {
color: $lightest;
border-bottom-color: $vibrant;
transition: color $transition-in, border-bottom-color $transition-in;
transition: color $transition-in;
img.link-logo {
opacity: 0.8;
transition: opacity $transition-in;
}
}
&.brand {
color: $vibrant;
img {
opacity: 1;
}
&:hover {
border-bottom-color: transparent;
img {
opacity: 1;
}
}
}
}
li:first-child a {
padding-left: 0;
}
li:last-child a {
padding-right: 0;
}
}
......@@ -86,10 +107,10 @@ $phi: 1.6180339887498948482;
.cta {
display: inline-block;
text-align: center;
font-size: 18px;
font-size: 16px;
text-decoration: none;
line-height: 36px;
padding: 6px 16px;
padding: 4px 16px;
margin-bottom: 10px;
&.button {
......@@ -97,9 +118,23 @@ $phi: 1.6180339887498948482;
color: $darkest;
background: $lighter;
border-radius: 4px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
&:hover {
background-color: $lightest;
background-color: lighten($lighter, 8%);
}
&.alt {
background: transparent;
border: 1px solid $lighter;
padding: 3px 15px;
color: $lighter;
margin-left: 4px;
&:hover {
color: lighten($lighter, 8%);
border-color: lighten($lighter, 8%);
}
}
}
......@@ -122,10 +157,10 @@ $phi: 1.6180339887498948482;
.intro {
text-align: center;
padding-top: 30px;
margin-bottom: 120px;
background: $darkest;
padding-top: 15px;
overflow: hidden;
background: lighten($darkest, 4%);
background: linear-gradient(150deg, lighten($darkest, 10%), lighten($darkest, 4%));
color: $lighter;
.text {
......@@ -134,19 +169,19 @@ $phi: 1.6180339887498948482;
}
h1 {
font-size: 36px;
font-weight: 400;
margin: 30px 0;
line-height: 1.2em;
}
font-family: 'Montserrat', sans-serif;
font-size: 26px;
margin-bottom: 20px;
p {
margin-bottom: 30px;
strong {
color: $vibrant;
}
}
strong {
font-weight: 500;
color: $lightest;
p {
color: darken($lighter, 18%);
font-size: 18px;
margin-bottom: 26px;
}
}
......@@ -155,7 +190,7 @@ $phi: 1.6180339887498948482;
margin: 30px auto;
padding-bottom: 15px;
width: $content-width;
height: 450px;
height: 330px;
img {
position: absolute;
......@@ -189,6 +224,64 @@ $phi: 1.6180339887498948482;
}
}
.as-seen-on {
background: darken($darkest, 4%);
padding: 30px 0;
padding-bottom: 50px;
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 16px;
color: lighten($darkest, 30%);
text-align: center;
margin-bottom: 20px;
}
.logo-grid {
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
a {
display: inline-block;
text-decoration: none;
padding: 0 10px;
img {
display: block;
margin: 0;
max-width: 200px;
opacity: 0.5;
transition: opacity $transition-in;
}
&:hover {
img {
opacity: 0.8;
transition: opacity $transition-out;
}
}
}
}
.logo-product-hunt {
padding: 0;
}
.logo-the-verge {
}
.logo-wired {
}
.logo-motherboard {
}
}
.feature {
display: flex;
margin: 100px auto;
......@@ -209,6 +302,8 @@ $phi: 1.6180339887498948482;
.text {
width: 80%;
font-size: 16px;
line-height: 24px;
}
.visual {
......@@ -216,9 +311,10 @@ $phi: 1.6180339887498948482;
}
h2 {
color: $vibrant;
font-size: 26px;
margin-bottom: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 21px;
margin-bottom: 20px;
color: $lighter;
}
}
......@@ -236,7 +332,6 @@ $phi: 1.6180339887498948482;
animation-direction: alternate;
animation-timing-function: linear;
box-shadow: none;
opacity: 0.2;
}
.float-1 {
......
......@@ -3,7 +3,7 @@
body {
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
background-color: mix($darkest, $black, 75%);
background-color: $darkest;
color: $darker;
font-size: 13px;
line-height: 18px;
......
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