Skip to content

GitLab

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
Show whitespace changes
Inline Side-by-side
common/static/styles/common.css
View file @ 4829b3c2
......@@ -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;
}