Commit ddccb208 authored by Eugen Rochko's avatar Eugen Rochko

Fix responsive design

parent e3222700
......@@ -21,10 +21,10 @@ const Credits = () => (
<div className='container color-scheme'>
<h3><FormattedMessage id='credits.color_scheme' defaultMessage='Mastodon color scheme' /></h3>
<div className='row'>
<div className='color-swatch color-1'>#282c37</div>
<div className='color-swatch color-2'>#9baec8</div>
<div className='color-swatch color-3'>#d9e1e8</div>
<div className='color-swatch color-4'>#2b90d9</div>
<div><div className='color-swatch color-1'>#282c37</div></div>
<div><div className='color-swatch color-2'>#9baec8</div></div>
<div><div className='color-swatch color-3'>#d9e1e8</div></div>
<div><div className='color-swatch color-4'>#2b90d9</div></div>
</div>
</div>
</div>
......
......@@ -27,7 +27,7 @@ const Features = () => (
<div className='feature container'>
<div className='right visual'><i className='ion-md-globe' /></div>
<div className='left text'>
<h2><FormattedMessage id='features.find_your_community' defaultMessage='Find your perfect community' /></h2>
<h2><i className='xs-show ion-md-globe' /><FormattedMessage id='features.find_your_community' defaultMessage='Find your perfect community' /></h2>
<p><FormattedMessage id='features.find_your_community_text' defaultMessage='Mastodon isn’t one place and one set of rules: it’s <strong>thousands of unique, interconnected communities</strong> to choose from, filled with different people, interests, languages, and needs. Don’t like the rules? You’re free to join any community you like, or better yet: you can host your own, on your own terms!' /></p>
</div>
</div>
......@@ -35,7 +35,7 @@ const Features = () => (
<div className='feature container'>
<div className='left visual'><i className='ion-md-chatboxes' /></div>
<div className='right text'>
<h2><FormattedMessage id='features.take_control' defaultMessage='Take control of your content' /></h2>
<h2><i className='xs-show ion-md-chatboxes' /><FormattedMessage id='features.take_control' defaultMessage='Take control of your content' /></h2>
<p><FormattedMessage id='features.take_control_text' defaultMessage='With powerful tools to <strong>control who sees your posts</strong> and a <strong>500-character limit</strong>, Mastodon empowers you to share your ideas, unabridged. The best part? <strong>All posts are in chronological order</strong>, not “optimized” to push ads into your timeline. With apps for iOS, Android, and every other platform imaginable, <strong>Mastodon is always at your fingertips</strong>.' /></p>
</div>
</div>
......@@ -43,7 +43,7 @@ const Features = () => (
<div className='feature container'>
<div className='right visual'><i className='ion-ios-people' /></div>
<div className='left text'>
<h2><FormattedMessage id='features.user_first' defaultMessage='Putting people first' /></h2>
<h2><i className='xs-show ion-ios-people' /><FormattedMessage id='features.user_first' defaultMessage='Putting people first' /></h2>
<p><FormattedMessage id='features.user_first_text' defaultMessage='You’re a person, not a product. Mastodon is a free, open-source development that has been crowdfunded, not financed. All instances are <strong>independently owned, operated, and moderated</strong>. There is no monopoly by a single commercial company, no ads, and no tracking. <strong>Mastodon works for you</strong>, and not the other way around.' /></p>
</div>
</div>
......@@ -51,7 +51,7 @@ const Features = () => (
<div className='feature container'>
<div className='left visual'><i className='ion-ios-bonfire' /></div>
<div className='right text'>
<h2><FormattedMessage id='features.safety' defaultMessage='Feel safe in your community' /></h2>
<h2><i className='xs-show ion-ios-bonfire' /><FormattedMessage id='features.safety' defaultMessage='Feel safe in your community' /></h2>
<p><FormattedMessage id='features.safety_text' defaultMessage='Mastodon comes with <strong>effective anti-abuse tools</strong> to help protect yourself from online abuse. With small, interconnected communities, it means that there are <strong>more moderators</strong> you can approach to help with a situation. This also means you can choose who sees your posts: friends, your community, or the entire fediverse.' /></p>
</div>
</div>
......
......@@ -134,7 +134,7 @@ class Wizard extends React.PureComponent {
</Scrollbars>
</div>
<div style={{ display: 'flex' }}>
<div className='wizard-hint-container'>
<div className='wizard-hint'>
<div className='wizard-hint__icon'>
<i className='ion-md-information-circle' />
......@@ -145,7 +145,7 @@ class Wizard extends React.PureComponent {
</div>
</div>
<div style={{ flex: '0 0 auto', marginLeft: 15, marginTop: 30 }}>
<div>
<a target='_blank' href='https://bridge.joinmastodon.org' className='cta button' style={{ marginBottom: 0 }}>Find Twitter friends</a>
</div>
</div>
......
......@@ -35,6 +35,8 @@ const WizardRow = ({ instance, intl }) => {
populationColor = 'green';
}
const populationSpan = <FormattedMessage id='wizard_row.user_count' defaultMessage='{population} {count, plural, one {person} other {people}}' values={{ population, count: instance.users }} />;
return (
<a href={`https://${instance.name}/about`} target='_blank' rel='noopener' className={classNames('wizard-row', { offline: !instance.up })}>
<div className='wizard-row__thumbnail'>
......@@ -44,13 +46,13 @@ const WizardRow = ({ instance, intl }) => {
</div>
<div className='wizard-row__details'>
<div className='wizard-row__name'>{instance.name}</div>
<div className='wizard-row__name'>{instance.name}<span className={`xs-show indicator-text ${populationColor}`}>{populationSpan}</span></div>
<div className='wizard-row__description'>{description}</div>
</div>
<div className='wizard-row__meta'>
<div className='wizard-row__stability'><span className={`indicator-text ${stabilityColor}`}><i className={`indicator ${stabilityColor}`} /> {stabilityLabel}</span></div>
<div className='wizard-row__population'><span className={`indicator-text ${populationColor}`}><i className={`indicator ${populationColor}`} /> <FormattedMessage id='wizard_row.user_count' defaultMessage='{population} {count, plural, one {person} other {people}}' values={{ population, count: instance.users }} /></span></div>
<div className='wizard-row__population'><span className={`indicator-text ${populationColor}`}><i className={`indicator ${populationColor}`} /> {populationSpan}</span></div>
</div>
</a>
);
......
......@@ -364,7 +364,7 @@ $phi: 1.6180339887498948482;
.text {
width: 80%;
font-size: 16px;
line-height: 24px;
//line-height: 24px;
strong {
font-weight: 500;
......@@ -509,6 +509,15 @@ $phi: 1.6180339887498948482;
p {
margin-bottom: 30px;
}
@media only screen and (max-width: 640px) {
.button {
box-sizing: border-box;
margin-right: 0;
width: 100%;
}
}
}
@media only screen and (max-width: $content-width) {
......@@ -523,10 +532,16 @@ $phi: 1.6180339887498948482;
.frontpage-sponsorship,
.as-seen-on {
& > .container {
overflow: hidden;
}
.logo-grid {
& > div {
flex-direction: column;
overflow-x: auto;
padding-bottom: 30px;
margin-bottom: -30px;
& > div {
a {
padding: 10px;
}
......@@ -628,12 +643,26 @@ $phi: 1.6180339887498948482;
}
}
.xs-show {
display: none;
}
@media only screen and (max-width: 640px) {
.xs-show {
display: initial;
}
.navbar {
display: block;
background: $darkest;
margin-top: -15px;
margin-bottom: 50px;
ul a,
ul .dropdown__control {
color: lighten($darkest, 30%) !important;
padding-left: 7px !important;
padding-right: 7px !important;
}
}
.link-logo.after {
......@@ -642,16 +671,21 @@ $phi: 1.6180339887498948482;
.intro {
.hero {
height: 120px;
margin-top: 60px;
height: 45px;
}
}
.frontpage-sponsorship,
.as-seen-on {
.logo-grid {
flex-wrap: wrap;
//
}
}
.feature h2 i {
margin-right: 10px;
}
}
@media only screen and (max-width: 460px) {
......
......@@ -41,21 +41,29 @@
.lang-ar & h3 {
text-align: right;
}
.row {
margin: 0 -5px;
& > div {
flex: 1 1 auto;
padding: 0 5px;
}
}
}
.color-swatch {
box-sizing: border-box;
padding: 10px;
padding-top: 36px;
border-radius: 4px;
color: $white;
flex: 1 1 auto;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
line-height: 24px;
margin-right: 15px;
&:last-child {
margin-right: 0;
@media only screen and (max-width: 640px) {
font-size: 14px;
}
}
......
......@@ -3,6 +3,11 @@
.feature-angle-container {
display: flex;
margin: 0 -15px;
@media only screen and (max-width: 640px) {
flex-wrap: wrap;
margin: 0;
}
}
#features hr {
......@@ -16,6 +21,15 @@
text-align: center;
padding: 0 15px;
@media only screen and (max-width: 640px) {
padding: 0 20px;
margin-bottom: 60px;
&:last-child {
margin-bottom: 0;
}
}
& > i {
display: block;
font-size: 44px;
......
......@@ -180,6 +180,12 @@
margin-bottom: 10px;
}
@media only screen and (max-width: 640px) {
li {
width: 100%;
}
}
li > a {
display: flex;
background: lighten($darkest, 4%);
......
......@@ -80,6 +80,41 @@
}
}
.wizard-hint-container {
display: flex;
& > div:last-child {
flex: 0 0 auto;
margin-left: 15px;
margin-top: 30px;
}
}
@media only screen and (max-width: 640px) {
.wizard-hint-container {
flex-wrap: wrap;
& > div {
width: 100%;
&:last-child {
margin-top: 10px;
margin-left: 0;
}
&:first-child {
order: 1;
margin-top: 20px;
}
}
.button {
box-sizing: border-box;
width: 100%;
}
}
}
.wizard-hint {
//background: lighten($darkest, 14%);
//box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
......@@ -325,6 +360,39 @@
}
}
@media only screen and (max-width: 640px) {
.wizard-controls .row {
display: block;
}
.wizard-controls .rrs {
width: 100%;
}
.wizard-controls__label {
display: none;
}
.wizard {
.wizard-row__thumbnail,
.wizard-row__meta {
display: none;
}
.wizard-row__details {
width: 100%;
}
.indicator-text {
margin-left: 4px;
.indicator {
display: none;
}
}
}
}
@media only screen and (max-width: 800px) {
.wizard-page {
margin: 0;
......@@ -354,29 +422,6 @@
}
}
@media only screen and (max-width: 400px) {
.wizard {
.wizard-row__thumbnail,
.wizard-row__meta {
display: none;
}
.wizard-row__details {
width: 100%;
}
}
}
@media only screen and (max-width: 380px) {
.optional-column {
display: none;
}
.wizard-column {
width: 50% !important;
}
}
/*
React Responsive Select - Default styles
*/
......
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