...
 
Commits (21)
image: node:8.11.3-alpine
pages:
cache:
paths:
- node_modules
script:
- apk -U upgrade && apk add -t build-dependencies build-base python
- yarn install --pure-lockfile
- yarn build
- rm -rf public && mv build public
......
......@@ -7,6 +7,7 @@ import classNames from 'classnames';
import Home from './Home';
import Sponsorship from './Sponsorship';
import Imprint from './Imprint';
import ScrollToTop from './ScrollToTop';
import Title from './Title';
......@@ -37,6 +38,7 @@ const App = ({ usersLocale }) => (
<div className={classNames('app', `lang-${usersLocale}`)}>
<Route exact path='/' component={Home} />
<Route path='/sponsors' component={Sponsorship} />
<Route path='/imprint' component={Imprint} />
<Title />
</div>
</ScrollToTop>
......
......@@ -2,6 +2,8 @@ import React from 'react';
import { Link } from 'react-router-dom';
import { FormattedMessage } from 'react-intl';
import Legal from './Legal';
const Credits = () => (
<div className='credits' id='credits'>
<div className='container row optional-row'>
......@@ -27,6 +29,8 @@ const Credits = () => (
<div><div className='color-swatch color-4'>#2b90d9</div></div>
</div>
</div>
<Legal />
</div>
);
......
This diff is collapsed.
......@@ -95,7 +95,7 @@ export default class Home extends PureComponent {
<div className='text'>
<h1><FormattedMessage id='home.headline' defaultMessage='Social networking, <strong>back in your hands</strong>' /></h1>
<p><FormattedMessage id='home.tagline' defaultMessage='Your self-hosted, globally interconnected microblogging community' /></p>
<p><FormattedMessage id='home.tagline2' defaultMessage='Follow friends and discover new ones. Publish anything you want: links, pictures, text, video. All on a platform that is community-owned and ad-free.' /></p>
<AnchorLink href='#getting-started' className='cta button'><FormattedMessage id='home.get_started' defaultMessage='Get started' /></AnchorLink>
<button className='cta button alt' onClick={this.handleHowItWorksClick}><span className='icon-circled'><span className='ion-md-play' /></span><FormattedMessage id='home.how_it_works' defaultMessage='How it works' /></button>
......
import React from 'react';
import Navigation from './Navigation';
// This page does not require translations
const Imprint = () => (
<div className='sponsorship imprint' id='imprint'>
<div className='intro'>
<Navigation />
<div className='text'>
<h2>Imprint</h2>
<p className='lead'>For the pages under joinmastodon.org and its subdomains:</p>
</div>
</div>
<div className='container' style={{ marginTop: 40, display: 'flex', justifyContent: 'center' }}>
<p style={{ flex: '0 0 auto' }}>
Eugen Rochko
<br />
c/o Postflex #92
<br />
Helmers Kamp 74
<br />
48249 Dülmen
<br />
Germany
<br />
E-mail: hello@joinmastodon.org
<br />
VAT ID: DE316095554
</p>
</div>
</div>
);
export default Imprint;
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
const Legal = () => (
<div className='container legal'>
<p>Mastodon · <Link to='/imprint'><FormattedMessage id='imprint' defaultMessage='Imprint' /></Link></p>
</div>
);
export default Legal;
......@@ -3,6 +3,7 @@ import { Scrollbars } from 'react-custom-scrollbars';
import { FormattedHTMLMessage as FormattedMessage } from 'react-intl';
import Navigation from './Navigation';
import Legal from './Legal';
import sponsorTootdon from './assets/sponsors/tootdon.png';
import sponsorKibousoft from './assets/sponsors/kibousoft.png';
......@@ -698,6 +699,8 @@ const Sponsorship = () => (
<p><FormattedMessage id='sponsorship.every_bit_helps' defaultMessage='Every little bit helps, and we appreciate all contributions.' /></p>
<a href='https://patreon.com/mastodon' className='cta button alt'><FormattedMessage id='sponsorship.become_a_sponsor' defaultMessage='Become a sponsor' /></a>
</div>
<Legal />
</div>
</div>
);
......
......@@ -7,8 +7,6 @@ import ReactResponsiveSelect from 'react-responsive-select';
const messages = defineMessages({
i_am: { id: 'wizard.filters.i_am', defaultMessage: 'I am ' },
i_speak: { id: 'wizard.filters.i_speak', defaultMessage: 'I speak ' },
all_languages: { id: 'wizard.filters.all_languages', defaultMessage: 'all languages' },
everything: { id: 'wizard.filters.everything', defaultMessage: 'everything' },
artist: { id: 'wizard.filters.artist', defaultMessage: 'an artist' },
musician: { id: 'wizard.filters.musician', defaultMessage: 'a musician' },
writer: { id: 'wizard.filters.writer', defaultMessage: 'a writer' },
......@@ -72,12 +70,14 @@ class Wizard extends React.PureComponent {
<div className='wizard-page' id='getting-started'>
<h1><i className='ion-md-person-add' /> <FormattedMessage id='wizard.sign_up' defaultMessage='Sign up' /></h1>
<p className='lead'><FormattedMessage id='wizard.hint2' defaultMessage='All you need to do to sign up is choose a server. Just like when signing up for an e-mail address, one server is going to be hosting your account and be part of your identity.' /></p>
<form className='wizard-controls'>
<div className='row'>
<ReactResponsiveSelect
name="category"
options={[
{ value: '', text: intl.formatMessage(messages.everything) },
{ value: '', text: '…' },
{ value: 'art', text: intl.formatMessage(messages.artist) },
{ value: 'music', text: intl.formatMessage(messages.musician) },
{ value: 'books-0', text: intl.formatMessage(messages.writer) },
......@@ -99,12 +99,12 @@ class Wizard extends React.PureComponent {
onChange={this.handleCategoryChange}
/>
<span className='wizard-controls__label'>,</span>
<span className='wizard-controls__label'></span>
<ReactResponsiveSelect
name="language"
options={[
{ value: '', text: intl.formatMessage(messages.all_languages) },
{ value: '', text: '…' },
{ value: 'ar', text: 'العربية' },
{ value: 'de', text: 'Deutsch' },
{ value: 'en', text: 'English' },
......@@ -124,8 +124,6 @@ class Wizard extends React.PureComponent {
onChange={this.handleLanguageChange}
/>
</div>
<span className='wizard-controls__label'><FormattedMessage id='wizard.filters.results' defaultMessage='and here is where I can sign up:' /></span>
</form>
<div className='wizard'>
......@@ -141,7 +139,7 @@ class Wizard extends React.PureComponent {
</div>
<div className='wizard-hint__text'>
<FormattedMessage id='wizard.hint' defaultMessage="This is like picking an e-mail hosting provider, but more social since you'll see your neighbours. The domain will also be part of your username!" />
<FormattedMessage id='wizard.hint3' defaultMessage="These servers are operated by independent organizations and may have different moderation policies. If you are unsure what to pick, you can try this button." />
</div>
</div>
......
This diff is collapsed.
......@@ -180,6 +180,7 @@ $phi: 1.6180339887498948482;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 26px;
line-height: 1.5;
margin-bottom: 20px;
strong {
......@@ -192,6 +193,29 @@ $phi: 1.6180339887498948482;
font-size: 18px;
margin-bottom: 26px;
}
.cta.button:not(.alt) {
background: lighten($vibrant, 4%);
color: #fff;
&:hover,
&:focus,
&:active {
background: lighten($vibrant, 8%);
}
}
.cta.button.alt {
border-color: lighten($vibrant, 4%);
color: lighten($vibrant, 4%);
&:hover,
&:focus,
&:active {
border-color: lighten($vibrant, 8%);
color: lighten($vibrant, 8%);
}
}
}
.hero {
......@@ -393,40 +417,6 @@ $phi: 1.6180339887498948482;
font-size: 18px;
line-height: 24px;
}
.additional-features {
width: 100%;
.lang-ar & {
direction: rtl;
li i {
margin-right: 0;
margin-left: 10px;
}
}
ul {
columns: 3;
column-gap: 15px;
}
li {
display: flex;
line-height: 1.5em;
padding-bottom: .5em;
-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
page-break-inside: avoid; /* Firefox */
break-inside: avoid; /* IE 10+ */
i {
display: block;
flex: 0 0 auto;
margin-right: 10px;
color: lighten($darkest, 30%);
}
}
}
}
.lang-ja {
......@@ -522,7 +512,7 @@ $phi: 1.6180339887498948482;
@media only screen and (max-width: $content-width) {
.navbar {
padding: 0 20px;
padding: 10px 20px;
}
.bottom-cta {
......@@ -605,35 +595,6 @@ $phi: 1.6180339887498948482;
.visual {
display: none;
}
.additional-features {
box-sizing: border-box;
padding: 0 20px;
ul {
columns: 3;
}
}
}
}
@media only screen and (max-width: 740px) {
.feature {
.additional-features {
ul {
columns: 2;
}
}
}
}
@media only screen and (max-width: 510px) {
.feature {
.additional-features {
ul {
columns: 1;
}
}
}
}
......@@ -663,6 +624,10 @@ $phi: 1.6180339887498948482;
padding-left: 7px !important;
padding-right: 7px !important;
}
ul a.brand img {
left: 0;
}
}
.link-logo.after {
......@@ -682,9 +647,14 @@ $phi: 1.6180339887498948482;
//
}
}
}
.legal {
padding-top: 100px;
.feature h2 i {
margin-right: 10px;
&,
a {
color: lighten($darkest, 30%);
}
}
......
......@@ -21,6 +21,7 @@
.branding {
width: 30%;
min-width: 165px;
.lang-ar & {
text-align: right;
......
......@@ -44,7 +44,10 @@
line-height: 1.38105;
letter-spacing: .011em;
}
}
.feature,
.feature-angle {
a.link-button {
display: inline-block;
margin-top: 20px;
......@@ -63,3 +66,21 @@
}
}
}
@media only screen and (max-width: 640px) {
.feature {
.text {
text-align: center;
h2 {
margin-bottom: 20px;
margin-top: 20px;
}
& > i {
display: block;
font-size: 44px;
}
}
}
}
......@@ -15,7 +15,7 @@
width: 393px;
height: 176px;
z-index: -1;
top: 0;
top: -32px;
right: -50px;
}
......@@ -25,25 +25,13 @@
font-size: 26px;
margin-bottom: 30px - 8px;
background: $darkest;
color: $vibrant;
color: lighten($vibrant, 8%);
display: inline-block;
padding: 8px 0;
.lang-ar & {
text-align: right;
}
&::before {
content: "";
display: block;
position: absolute;
height: 60px;
width: 0;
top: 0;
left: 50px;
border-left: 2px solid $vibrant;
z-index: -1;
}
}
p {
......@@ -403,7 +391,13 @@
}
h1 {
margin-bottom: 0;
display: block;
text-align: center;
margin-bottom: 10px;
}
p.lead {
text-align: center;
}
}
......@@ -418,7 +412,7 @@
}
.wizard {
max-height: 40vh;
max-height: 50vh;
}
}
......