alex
/
mastodon
forked from treehouse/mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Improve landing page CSS and text contrast

signup-info-prompt
Ondřej Hruška 2017-07-25 23:30:31 +02:00
parent 4c233b4f3a
commit 8925731c98
1 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
app/javascript/styles/about.scss
View File

@ -272,6 +272,8 @@
} }
.landing-page { .landing-page {
$lp-par-color: lighten($ui-base-color, 36%);
.header-wrapper { .header-wrapper {
padding-top: 15px; padding-top: 15px;
background: $ui-base-color; background: $ui-base-color;
@ -284,6 +286,14 @@
.hero .heading { .hero .heading {
padding-bottom: 30px; padding-bottom: 30px;
p, li {
color: lighten($ui-base-color, 50%);
}
li {
margin: 2px 0;
}
} }
} }
@ -307,13 +317,6 @@
} }
} }
p,
li {
font: inherit;
font-weight: inherit;
margin-bottom: 0;
}
.header { .header {
line-height: 30px; line-height: 30px;
overflow: hidden; overflow: hidden;
@ -410,29 +413,25 @@
} }
} }
ul {
list-style: none;
margin: 0;
li {
display: inline-block;
vertical-align: bottom;
margin: 0;
&:first-child a {
padding-left: 0;
}
&:last-child a {
padding-right: 0;
}
}
}
.links { .links {
position: relative; position: relative;
z-index: 4; z-index: 4;
ul {
list-style: none;
margin: 0;
li {
display: inline-block;
vertical-align: bottom;
margin: 0;
&:last-child a {
padding-right: 0;
}
}
}
a { a {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -480,13 +479,11 @@
padding: 0; padding: 0;
} }
.learn-more-cta { .learn-more-cta, .extended-description {
background: darken($ui-base-color, 4%);
padding: 50px 0;
}
.extended-description {
padding: 50px 0; padding: 50px 0;
font-weight: 400;
color: $lp-par-color;
font: 16px/1.6 'mastodon-font-sans-serif', sans-serif;
ul, ul,
ol { ol {
@ -509,16 +506,27 @@
p, p,
li { li {
font: 16px/28px 'mastodon-font-sans-serif', sans-serif; color: $lp-par-color;
font-weight: 400; margin-bottom: 6px;
margin-bottom: 12px;
color: $ui-base-lighter-color;
a { a {
color: $ui-highlight-color; color: $ui-highlight-color;
text-decoration: underline; text-decoration: underline;
} }
} }
li {
margin: 2px 0;
}
}
.learn-more-cta {
background: darken($ui-base-color, 4%);
padding: 50px 0;
p {
font-size: 16px;
line-height: 28px;
}
} }
h3 { h3 {
@ -532,8 +540,8 @@
p { p {
font-size: 16px; font-size: 16px;
line-height: 30px; line-height: 28px;
color: $ui-base-lighter-color; color: $lp-par-color;
} }
.features { .features {