Commit 8e900b89 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Reformat homepage review as it's now a single review.

Remove fancy quote marks to redo differently later.
parent 3465e689
......@@ -712,51 +712,6 @@ body.support main a
* Reviews *
****************************************************************************/
.home .reviews
{
list-style-type: none;
margin: 0;
}
/* ↓ clearfix alternative to overflow: hidden; */
.home .reviews:after
{
clear: both;
content: '.';
display: block;
height: 0;
visibility: hidden;
}
@media only screen and (min-width: 46.875em)
{
.home .reviews
{
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
/* ↓ make reviews extra wide so 3 fit on the top row */
margin-left: -1em;
/* ↓ make reviews extra wide so 3 fit on the top row */
margin-right: -1em;
}
}
.reviews h2
{
margin-bottom: 1em;
......@@ -777,10 +732,10 @@ body.support main a
*/
.home .review
{
font-size: 1.4em;
font-size: 1.6em;
font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
font-weight: 500;
margin-top: 1.25em;
margin-top: 0.25em;
margin-left: auto;
margin-bottom: 1.75em;
margin-right: auto;
......@@ -789,6 +744,20 @@ body.support main a
text-align: center;
}
@media only screen and (min-width: 46.875em)
{
.home .review
{
margin-bottom: 0;
width: 7em;
}
}
.home .review blockquote {
margin-top: 0;
}
.review .rating
{
background: url('../images/stars.svg') center center no-repeat;
......@@ -800,7 +769,7 @@ body.support main a
margin-right: auto;
margin-left: auto;
/* ↓ hide text */
text-indent: -3000px;
text-indent: -6000px;
/* ↓ centre inside review */
width: 100%;
}
......@@ -817,34 +786,8 @@ body.support main a
margin-top: 1.5em;
}
/*
spans two lines
*/
.home .last-review
{
margin-bottom: 0;
max-width: 15em;
}
@media only screen and (min-width: 46.875em)
{
.home .review
{
margin-top: 1em;
margin-bottom: 0;
width: 7em;
}
.home .last-review
{
font-size: 1em;
-webkit-flex: 0 1 100%;
-ms-flex: 0 1 100%;
flex: 0 1 100%;
margin-top: 2em;
}
.home .reviews-link
{
margin-top: 18px;
......@@ -852,66 +795,6 @@ body.support main a
margin-left: -60px;
margin-right: -60px;
}
.home .last-review .rating
{
background-size: 100px;
/* ↓ match last review line height */
height: 1em;
margin-top: 3px;
}
}
/*
Add nicer quotes
*/
.quote, .quote-mark
{
/* ↓ make :before and :after work */
position: relative;
}
.home .quote::before, .home .quote::after, .quote-mark-left, .quote-mark-right
{
font-family: Arial, Helvetica, sans-serif;
font-size: 1.1em;
color: #333;
position: relative;
}
/*
on the reviews page, don’t oversize the quote marks
*/
.review .quote-mark-left
{
font-size: 1em;
width: .3em;
margin-left: -.3em;
margin-right: .1em;
}
.review .quote-mark-right
{
font-size: 1em;
width: .3em;
margin-right: -.3em;
margin-left: .1em;
}
.home .quote::before
{
content: "“";
position: absolute;
top: -0.25em;
left: -0.35em;
}
.home .quote::after
{
content: "”";
position: absolute;
bottom: -0.25em;
right: -0.35em;
}
/****************************************************************************
......
......@@ -5,10 +5,13 @@
<div class='home-wrap'>
<h1 class='home'>Better</h1>
<ul class='reviews'>
<li class='review'><span class='quote'>It just works!</span> <span class='rating rating-5'>5 stars</span></li>
<p class='reviews-link'>Read more <a href='/reviews'>App Store reviews of Better</a></p>
</ul>
<div class='review'>
<blockquote>
<p>
<span class='quote'>It just works!</span> <span class='rating rating-5'>5 stars</span></p>
<p class='reviews-link'>Read more <a href='/reviews'>App Store reviews of Better</a></p>
</blockquote>
</div>
<p><strong>Better is a privacy tool for Safari on iPhone, iPad, and Mac</strong>. We protect you from behavioural ads and companies that track and profile you on the web.</p>
......
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