Commit 68d5ab45 authored by Eugen Rochko's avatar Eugen Rochko

Adjust features and responsive layout of them

parent 58691e0e
This diff is collapsed.
......@@ -139,7 +139,7 @@ class Wizard extends React.PureComponent {
</div>
<div className='wizard-hint__text'>
<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 the button on the right." />
<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>
......
......@@ -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 {
......@@ -416,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 {
......@@ -545,7 +512,7 @@ $phi: 1.6180339887498948482;
@media only screen and (max-width: $content-width) {
.navbar {
padding: 0 20px;
padding: 10px 20px;
}
.bottom-cta {
......@@ -628,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;
}
}
}
}
......@@ -686,6 +624,10 @@ $phi: 1.6180339887498948482;
padding-left: 7px !important;
padding-right: 7px !important;
}
ul a.brand img {
left: 0;
}
}
.link-logo.after {
......@@ -705,10 +647,6 @@ $phi: 1.6180339887498948482;
//
}
}
.feature h2 i {
margin-right: 10px;
}
}
.legal {
......
......@@ -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;
}
}
}
}
......@@ -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;
}
}
......
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