Commit 4829b3c2 authored by Laura Kalbag's avatar Laura Kalbag
Browse files

Reformat so opening tags are on same line as selector

Reduces excess space to improve readability on shorter viewports
parent 7d36b462
......@@ -61,24 +61,21 @@
* Fonts *
****************************************************************************/
@font-face
{
@font-face {
font-family:"Avenir Next";
src:url("../fonts/avenir-next-regular/2cd55546-ec00-4af9-aeca-4a3cd186da53.woff2") format("woff2"),url("../fonts/avenir-next-regular/1e9892c0-6927-4412-9874-1b82801ba47a.woff") format("woff");
font-style: normal;
font-weight: normal;
}
@font-face
{
@font-face {
font-family:"Avenir Next";
src:url("../fonts/avenir-next-regular-italic/7377dbe6-f11a-4a05-b33c-bc8ce1f60f84.woff2") format("woff2"),url("../fonts/avenir-next-regular-italic/92b66dbd-4201-4ac2-a605-4d4ffc8705cc.woff") format("woff");
font-style: italic;
font-weight: normal;
}
@font-face
{
@font-face {
font-family:"Avenir Next";
src:url("../fonts/avenir-next-demi-bold/aad99a1f-7917-4dd6-bbb5-b07cedbff64f.woff2") format("woff2"),url("../fonts/avenir-next-demi-bold/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff") format("woff");
font-style: normal;
......@@ -86,16 +83,14 @@
}
/* Fallback because Mac app doesn’t style font-weight: bold; correctly as per above */
@font-face
{
@font-face {
font-family:"Avenir Next Demi Bold";
src:url("../fonts/avenir-next-demi-bold/aad99a1f-7917-4dd6-bbb5-b07cedbff64f.woff2") format("woff2"),url("../fonts/avenir-next-demi-bold/91b50bbb-9aa1-4d54-9159-ec6f19d14a7c.woff") format("woff");
font-style: normal;
font-weight: bold;
}
@font-face
{
@font-face {
font-family:"Avenir Next Medium";
src:url("../fonts/avenir-next-medium/627fbb5a-3bae-4cd9-b617-2f923e29d55e.woff2") format("woff2"),url("../fonts/avenir-next-medium/f26faddb-86cc-4477-a253-1e1287684336.woff") format("woff");
font-style: normal;
......@@ -103,16 +98,14 @@
}
/* Avenir Next Ultra Light */
@font-face
{
@font-face {
font-family:"Avenir Next Ultra Light";
src:url("../fonts/avenir-next-ultra-light/2e3f5cb9-101f-46cf-a7b3-dfaa58261e03.woff2") format("woff2"),url("../fonts/avenir-next-ultra-light/fa19948e-5e38-4909-b31e-41acd170d6f2.woff") format("woff");
font-style: normal;
font-weight: normal;
}
@font-face
{
@font-face {
font-family: 'Cavorting';
src: url('../fonts/cavorting/cavorting-webfont.woff2') format('woff2'),
url('../fonts/cavorting/cavorting-webfont.woff') format('woff');
......@@ -124,8 +117,7 @@
* Basic styles *
****************************************************************************/
html
{
html {
/* ↓ root size */
font-size: 16px;
line-height: 1.5;
......@@ -169,8 +161,7 @@ html
and https://webkit.org/blog/3709/using-the-system-font-in-web-content/
*/
@supports (font: -apple-system-body)
{
@supports (font: -apple-system-body) {
html
{
font: -apple-system-body;
......@@ -227,8 +218,7 @@ html
}
body
{
body {
/* ↓ white */
background-color: #fff;
/* ↓ dark grey – crest blue in greyscale */
......@@ -243,22 +233,19 @@ body
-webkit-text-size-adjust: 100%;
}
.wrap
{
.wrap {
/* ↓ cloud */
background-color: #007ACC;
}
main
{
main {
/* ↓ white */
background-color: #fff;
/* ↓ (in case the browser is unfamiliar with <main>) */
display: block;
}
h1, h2, h3, h4
{
h1, h2, h3, h4 {
font-weight: bold;
line-height: 1.25;
margin: 1.75em 0 0.75em;
......@@ -272,8 +259,7 @@ h1, h2, h3, h4
}
}
h1
{
h1 {
font-size: 2em;
font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
font-weight: 500;
......@@ -282,8 +268,7 @@ h1
text-align: center;
}
h2
{
h2 {
font-size: 1.75em;
font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
font-weight: 500;
......@@ -293,13 +278,11 @@ h2
/*
when an h2 is directly after an h1
*/
h1 + h2
{
h1 + h2 {
margin-top: 0.75em;
}
h3
{
h3 {
font-size: 1.5em;
font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
font-weight: 500;
......@@ -309,31 +292,26 @@ h3
/*
when an h3 is directly after an h2
*/
h2 + h3
{
h2 + h3 {
margin-top: 0.75em;
}
h4
{
h4 {
font-size: 1.25em;
font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
font-weight: 500;
}
ul, ol
{
ul, ol {
margin: 0.75em 0 1.75em 1em;
padding-left: 0;
}
ul li, ol li
{
ul li, ol li {
margin: 0 0 0.5em 1.5em;
}
a
{
a {
/* ↓ cloud dark */
color: #005C99;
/* ↓ Wrap links so they don’t break the layout */
......@@ -343,20 +321,17 @@ a
word-break: break-word;
}
p
{
p {
margin: 0 0 0.75em 0;
/* ↓ Apple Dynamic Type */
}
strong
{
strong {
font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
font-weight: 500;
}
table
{
table {
border-collapse: collapse;
display: block;
margin: 0 auto 1.75em;
......@@ -366,26 +341,22 @@ table
/*
hide
*/
table caption
{
table caption {
height: 0;
overflow: hidden;
width: 0;
}
table thead
{
table thead {
/* ↓ black */
border-bottom: 2px solid #000;
}
table th, table td
{
table th, table td {
padding: 0.25em 0.5em;
}
table th
{
table th {
font-size: 1em;
font-family: "Avenir Next Demi Bold", Avenir, Helvetica, sans-serif;
font-weight: bold;
......@@ -403,8 +374,7 @@ table th
}
}
table td
{
table td {
font-size: 0.9em;
text-align: left;
}
......@@ -418,13 +388,11 @@ table td
}
}
blockquote
{
blockquote {
margin: 0 0 1.75em 0;
}
pre
{
pre {
/* ↓ dark grey */
color: #303030;
border-radius: 4px;
......@@ -437,8 +405,7 @@ pre
padding: 0.75em;
}
code
{
code {
/* ↓ Wrap code segments so they don’t break the layout */
word-wrap: break-word;
word-break: break-all;
......@@ -447,8 +414,7 @@ code
/*
this is just to solve the way we have a widow on the Forbes site
*/
@media only screen and (min-width: 37.2em)
{
@media only screen and (min-width: 37.2em) {
pre.single-string
{
margin-right: -0.5em;
......@@ -461,8 +427,7 @@ code
* Main *
****************************************************************************/
main
{
main {
margin: 0.75em 0.5em;
max-width: 34em;
padding: 0.5em 0.7em 2em 0.7em;
......@@ -487,14 +452,12 @@ main
}
}
body.tracker h1, body.site h1
{
body.tracker h1, body.site h1 {
/* ↓ make the non-strong part of the heading smaller */
font-size: 1.2em;
}
body.tracker h1 strong, body.site h1 strong
{
body.tracker h1 strong, body.site h1 strong {
display: block;
font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
font-weight: 500;
......@@ -506,15 +469,13 @@ body.tracker h1 strong, body.site h1 strong
/*
On Collections, the titles are longer, so there needs to be more space between the title and () section
*/
body.trackers h1 strong, body.sites h1 strong
{
body.trackers h1 strong, body.sites h1 strong {
margin-bottom: 0.25em;
}
/*
Blockquotes after the first heading (or first thing after the .main section for the app) are the summary of the site/tracker and should be displayed centered and in a slightly larger font size. */
main blockquote
{
main blockquote {
/* ↓ don't round */
font-size: 1.1em;
margin-top: 1.75em;
......@@ -522,8 +483,7 @@ main blockquote
text-align: center;
}
main blockquote.standout
{
main blockquote.standout {
/* ↓ black */
color: #000;
font-size: 1.25em;
......@@ -531,27 +491,23 @@ main blockquote.standout
margin-bottom: 1.25em;
}
figure
{
figure {
margin: 0;
}
figure figcaption
{
figure figcaption {
color: #7d7d7d;
text-align: center;
}
figure figcaption p
{
figure figcaption p {
margin-bottom: 0;
}
/*
Style screenshots (all images inside main) with rounded corners and drop shadows
*/
main img
{
main img {
border: 1px solid rgba(0,0,0,0.1);
border-radius: 0.25em;
/* ↓ 10px shadow adjusted for 2px vertical border on image */
......@@ -562,18 +518,15 @@ main img
max-width: 100%;
}
main figure
{
main figure {
margin: 1.75em 0 1.75em 0;
}
main figure img
{
main figure img {
margin: 0 0 0.5em 0;
}
main img.no-frame
{
main img.no-frame {
border: 0;
border-radius: 0;
box-shadow: none;
......@@ -583,13 +536,11 @@ main img.no-frame
* Module-specific styles *
****************************************************************************/
#ethical-design-violations h2
{
#ethical-design-violations h2 {
margin-bottom: 0.5em;
}
#ethical-design-violations > p
{
#ethical-design-violations > p {
text-align: center;
}
......@@ -597,8 +548,7 @@ main img.no-frame
* Units *
****************************************************************************/
table td .units
{
table td .units {
font-variant: small-caps;
}
......@@ -607,14 +557,12 @@ table td .units
* Trackers *
****************************************************************************/
#ethical-design-violations p
{
#ethical-design-violations p {
/* ↓ as the trackers have margins on top */
margin-bottom: 0;
}
#ethical-design-violations ul
{
#ethical-design-violations ul {
/* ↓ as the trackers have margins on top */
margin-top: 0;
margin-right: 0;
......@@ -628,8 +576,7 @@ table td .units
align-items: flex-start;
}
.static-badge, .trackers-badge
{
.static-badge, .trackers-badge {
/* ↓ icon styles */
background: top center no-repeat;
/* ↓ shrink icons for narrower viewports */
......@@ -646,8 +593,7 @@ table td .units
width: 7.7em;
}
.badge-title
{
.badge-title {
font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
font-size: 1.2em;
margin-top: 0;
......@@ -655,49 +601,40 @@ table td .units
text-transform: uppercase;
}
#aggressive
{
#aggressive {
background-image: url('../images/aggressive.svg');
}
#doorslam
{
#doorslam {
background-image: url('../images/doorslam.svg');
}
#clickbait
{
#clickbait {
background-image: url('../images/clickbait.svg');
}
#fingerprint
{
#fingerprint {
background-image: url('../images/fingerprint.svg');
}
#web-bug
{
#web-bug {
background-image: url('../images/web-bug.svg');
}
#tracker
{
#tracker {
background-image: url('../images/trackers.svg');
}
.static-badge p, .trackers-badge p
{
.static-badge p, .trackers-badge p {
margin-bottom: 0.5em;
}
.trackers-badge
{
.trackers-badge {
/* ↓ there's no icon for the trackers badge so we don't need the padding */
padding-top: 0;
}
.trackers-badge .badge-title
{
.trackers-badge .badge-title {
/* ↓ use flexbox to ensure number inside is centered */
display: -ms-flexbox;
display: -webkit-flex;
......@@ -719,8 +656,7 @@ table td .units
align-items: center;
}
.trackers-badge .number
{
.trackers-badge .number {
/* ↓ mid grey */
color: #6d6d6d;
/* ↓ force number on to its own line */
......@@ -743,26 +679,22 @@ table td .units
width: 1.4em;
}
#open-trackers-popup
{
#open-trackers-popup {
/* ↓ dark grey */
color: #333;
text-decoration: none;
}
.badge-explanation
{
.badge-explanation {
margin-top: 0;
}
.trackers-badge ul
{
.trackers-badge ul {
/* ↓ TODO: make these display in some way */
display: none;
}
#no-trackers p
{
#no-trackers p {
text-align: center;
}
......@@ -770,13 +702,11 @@ table td .units
* Block rule *
****************************************************************************/
#block-rule h2
{
#block-rule h2 {
margin-bottom: 0.5em;
}
#block-rule p
{
#block-rule p {
text-align: center;
}
......@@ -784,8 +714,7 @@ table td .units
* Popularity *
****************************************************************************/
#popularity p
{
#popularity p {
text-align: center;
}
......@@ -794,21 +723,18 @@ table td .units
* Statistics table *
****************************************************************************/
#after-better table
{
#after-better table {
margin-bottom: 1.75em;
}
@media only screen and (min-width: 24.3em)
{
@media only screen and (min-width: 24.3em) {
table th:nth-of-type(1)
{
width: 0.75em;
}
}
table tbody th
{
table tbody th {
background: center left no-repeat;
background-size: 1.5em 1.5em;
/* ↓ hide text */
......@@ -827,18 +753,15 @@ table tbody th
}
}
table th.weight
{
table th.weight {
background-image: url("../images/weight-small.svg");
}
table th.speed
{
table th.speed {
background-image: url("../images/speed-small.svg");
}
table th.requests
{
table th.requests {
background-image: url("../images/resources-small.svg");
}
......@@ -853,8 +776,7 @@ table th.requests
/*
select empty column heading
*/
table thead tr th:nth-of-type(1)
{
table thead tr th:nth-of-type(1) {
max-width: 0.85em;
}
......@@ -862,8 +784,7 @@ table thead tr th:nth-of-type(1)
select improvements column heading,
wrap the heading text and hide overflow
*/
table thead tr th:nth-of-type(4)
{
table thead tr th:nth-of-type(4) {
max-width: 2em;
word-wrap: normal;
overflow: hidden;
......@@ -879,22 +800,19 @@ table thead tr th:nth-of-type(4)
}
}
table tbody tr
{
table tbody tr {
/* ↓ make rows appear more even height */
height: 3em;
}