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
This diff is collapsed.
...@@ -34,8 +34,7 @@ ...@@ -34,8 +34,7 @@
* Basic styles * * Basic styles *
****************************************************************************/ ****************************************************************************/
body body {
{
background-color: #fff; /* ↓ white */ background-color: #fff; /* ↓ white */
} }
...@@ -47,8 +46,7 @@ body ...@@ -47,8 +46,7 @@ body
* Get Involved Section * * Get Involved Section *
****************************************************************************/ ****************************************************************************/
#get-involved > p #get-involved > p {
{
text-align: center; text-align: center;
} }
...@@ -59,8 +57,7 @@ body ...@@ -59,8 +57,7 @@ body
/* /*
hide navigation title from view (but show it in outline) hide navigation title from view (but show it in outline)
*/ */
.hide .hide {
{
display: none; display: none;
} }
...@@ -69,8 +66,7 @@ body ...@@ -69,8 +66,7 @@ body
* based on the Ind.ie styles, using the CSS from the forum * * based on the Ind.ie styles, using the CSS from the forum *
****************************************************************************/ ****************************************************************************/
.site-navigation .site-navigation {
{
/* ↓ cloud dark */ /* ↓ cloud dark */
background: #005c99; background: #005c99;
/* ↓ cloud */ /* ↓ cloud */
...@@ -79,8 +75,7 @@ body ...@@ -79,8 +75,7 @@ body
z-index: 4; z-index: 4;
} }
.site-navigation ul .site-navigation ul {
{
margin: 0 auto; margin: 0 auto;
/* ↓ same max-width as main container */ /* ↓ same max-width as main container */
max-width: 34em; max-width: 34em;
...@@ -91,14 +86,12 @@ body ...@@ -91,14 +86,12 @@ body
justify-content: center; justify-content: center;
} }
.site-navigation li .site-navigation li {
{
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
} }
.site-navigation li a .site-navigation li a {
{
color: #fff; color: #fff;
display: block; display: block;
float: left; float: left;
...@@ -119,17 +112,14 @@ body ...@@ -119,17 +112,14 @@ body
word-break: normal; word-break: normal;
} }
@media only screen and (min-width: 24em) @media only screen and (min-width: 24em) {
{ .site-navigation li a {
.site-navigation li a
{
padding: 0.5em 1em; padding: 0.5em 1em;
} }
} }
.site-navigation li a:hover, .site-navigation li a:hover,
.site-navigation li a:active .site-navigation li a:active {
{
/* ↓ cloud dark 25% */ /* ↓ cloud dark 25% */
background: #0064A6; background: #0064A6;
border-bottom: none; border-bottom: none;
...@@ -137,8 +127,7 @@ body ...@@ -137,8 +127,7 @@ body
.site-navigation a[aria-selected=true], .site-navigation a[aria-selected=true],
.reviews .site-navigation li.home a, .reviews .site-navigation li.home a,
.support .site-navigation li.support a .support .site-navigation li.support a {
{
/* ↓ cloud */ /* ↓ cloud */
background-color: #007acc; background-color: #007acc;
color: #fff; color: #fff;
...@@ -148,8 +137,7 @@ body ...@@ -148,8 +137,7 @@ body
* Footer styles * * Footer styles *
****************************************************************************/ ****************************************************************************/
.site-footer .site-footer {
{
/* ↓ cloud */ /* ↓ cloud */
background-color: #007ACC; background-color: #007ACC;
/* ↓ white */ /* ↓ white */
...@@ -163,16 +151,14 @@ body ...@@ -163,16 +151,14 @@ body
text-align: center; text-align: center;
} }
.footer-wrap .footer-wrap {
{
margin: 0 auto; margin: 0 auto;
/* ↓ Padding at bottom is offset by paragraph margin */ /* ↓ Padding at bottom is offset by paragraph margin */
padding: 1.75em 1.75em 1.25em 1.75em; padding: 1.75em 1.75em 1.25em 1.75em;
max-width: 34em; max-width: 34em;
} }
.site-footer:before .site-footer:before {
{
background: url('/images/clouds.svg') top center repeat-x; background: url('/images/clouds.svg') top center repeat-x;
/* ↓ doesn’t work on webkit SVGs with repeat-x, so use media queries below */ /* ↓ doesn’t work on webkit SVGs with repeat-x, so use media queries below */
background-size: 120em 7em; background-size: 120em 7em;
...@@ -194,10 +180,8 @@ body ...@@ -194,10 +180,8 @@ body
Because Safari won’t repeat-x on a background SVG with a background-size in ems, we need to switch the CSS when the viewport width exceeds the background width Because Safari won’t repeat-x on a background SVG with a background-size in ems, we need to switch the CSS when the viewport width exceeds the background width
*/ */
/* ↓ ~width of background-size */ /* ↓ ~width of background-size */
@media only screen and (min-width: 50em) @media only screen and (min-width: 50em) {
{ .site-footer:before {
.site-footer:before
{
background: url('/images/clouds.svg') top center repeat-x; background: url('/images/clouds.svg') top center repeat-x;
/* ↓ fill whole width of browser */ /* ↓ fill whole width of browser */
background-size: 100%, cover; background-size: 100%, cover;
...@@ -208,16 +192,13 @@ body ...@@ -208,16 +192,13 @@ body
} }
/* ↓ adjust for new height of cloud image */ /* ↓ adjust for new height of cloud image */
.site-footer .site-footer {
{
margin-top: 6.5em; margin-top: 6.5em;
} }
} }
@media only screen and (min-width: 60em) @media only screen and (min-width: 60em) {
{ .site-footer:before {
.site-footer:before
{
/* ↓ ~height of image, extra height so top edge of footer doesn’t show through */ /* ↓ ~height of image, extra height so top edge of footer doesn’t show through */
height: 7em; height: 7em;
/* ↓ bring to top of footer (-height of image) */ /* ↓ bring to top of footer (-height of image) */
...@@ -225,82 +206,68 @@ body ...@@ -225,82 +206,68 @@ body
} }
/* ↓ adjust for new height of cloud image */ /* ↓ adjust for new height of cloud image */
.site-footer .site-footer {
{
margin-top: 7em; margin-top: 7em;
} }
} }
@media only screen and (min-width: 90em) @media only screen and (min-width: 90em) {
{ .site-footer:before {
.site-footer:before
{
/* ↓ ~height of image, extra height so top edge of footer doesn’t show through */ /* ↓ ~height of image, extra height so top edge of footer doesn’t show through */
height: 8em; height: 8em;
/* ↓ bring to top of footer (-height of image) */ /* ↓ bring to top of footer (-height of image) */
top: -7.9em; top: -7.9em;
} }
.site-footer .site-footer {
{
margin-top: 8em; margin-top: 8em;
} }
} }
small small {
{
font-size: 0.85em; font-size: 0.85em;
} }
#privacy small #privacy small {
{
font-size: 1em; font-size: 1em;
} }
.site-footer h2 .site-footer h2 {
{
font-weight: normal; font-weight: normal;
margin-top: 0; margin-top: 0;
} }
.site-footer h2 a .site-footer h2 a {
{
border-bottom: 1px solid #fff; border-bottom: 1px solid #fff;
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
} }
.site-footer p .site-footer p {
{
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
} }
.site-footer a .site-footer a {
{
/* ↓ white */ /* ↓ white */
color: #fff; color: #fff;
/* ↓ to make balloon logo appear in block */ /* ↓ to make balloon logo appear in block */
display: block; display: block;
} }
.site-footer small a .site-footer small a {
{
/* ↓ override block rule above for links inside the paragraph text */ /* ↓ override block rule above for links inside the paragraph text */
display: inline; display: inline;
} }
.indie-logo .indie-logo {
{
margin-bottom: 1.5em; margin-bottom: 1.5em;
} }
.site-footer .download-on-the-app-store, .site-footer .download-on-mac-app-store .site-footer .download-on-the-app-store, .site-footer .download-on-mac-app-store {
{
margin-bottom: 0.75em; margin-bottom: 0.75em;
} }
.site-footer .view-source .site-footer .view-source {
{
display: block; display: block;
font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif; font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
font-weight: 500; font-weight: 500;
...@@ -312,8 +279,7 @@ small ...@@ -312,8 +279,7 @@ small
* Trackers pop-up * * Trackers pop-up *
****************************************************************************/ ****************************************************************************/
#trackers-list #trackers-list {
{
position: relative; position: relative;
background: #fff; background: #fff;
border-radius: 1.4em; border-radius: 1.4em;
...@@ -331,34 +297,28 @@ small ...@@ -331,34 +297,28 @@ small
/* /*
on home, pass the main styles to the inner .home-wrap on home, pass the main styles to the inner .home-wrap
*/ */
body.home main body.home main {
{
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@media only screen and (min-width: 33.4em) @media only screen and (min-width: 33.4em) {
{ body.home main {
body.home main
{
padding: 0; padding: 0;
background-size: 1237px 121px; background-size: 1237px 121px;
max-width: 100%; max-width: 100%;
} }
} }
.home-wrap .home-wrap {
{
background: #fff; background: #fff;
margin: 0.75em 0.5em; margin: 0.75em 0.5em;
max-width: 34em; max-width: 34em;
padding: 0 0.7em 0.75em 0.7em; padding: 0 0.7em 0.75em 0.7em;
} }
@media only screen and (min-width: 33.4em) @media only screen and (min-width: 33.4em) {
{ .home-wrap {
.home-wrap
{
margin: 0.75em auto; margin: 0.75em auto;
padding: 0 2.5em 2.1em 2.5em; padding: 0 2.5em 2.1em 2.5em;
} }
...@@ -367,8 +327,7 @@ body.home main ...@@ -367,8 +327,7 @@ body.home main
/* /*
Clouds and sunburst background Clouds and sunburst background
*/ */
.home .logo-wrap .home .logo-wrap {
{
/* ↓ intro background colour */ /* ↓ intro background colour */
background-color: #1a9bfc; background-color: #1a9bfc;
background-image: url('/images/clouds-white.svg'), url('/images/starburst.svg'); background-image: url('/images/clouds-white.svg'), url('/images/starburst.svg');
...@@ -378,19 +337,15 @@ body.home main ...@@ -378,19 +337,15 @@ body.home main
padding: 1.5em 0.5em 0 0.5em; padding: 1.5em 0.5em 0 0.5em;
} }
@media only screen and (min-width: 33.4em) @media only screen and (min-width: 33.4em) {
{ .home .logo-wrap {
.home .logo-wrap
{
background-size: 1237px 120px, auto 1000%; background-size: 1237px 120px, auto 1000%;
padding: 2em 0.75em 0 0.75em; padding: 2em 0.75em 0 0.75em;
} }
} }
@media only screen and (min-width: 36.18em) @media only screen and (min-width: 36.18em) {
{ .home .logo-wrap {
.home .logo-wrap
{
padding: 2.6em 0 0 0; padding: 2.6em 0 0 0;
} }
} }
...@@ -398,23 +353,19 @@ body.home main ...@@ -398,23 +353,19 @@ body.home main
/* /*
Better icon on homepage Better icon on homepage
*/ */
.home .logo .home .logo {
{
margin: 0 auto; margin: 0 auto;
max-width: 13em; max-width: 13em;
width: 50%; width: 50%;
} }
@media only screen and (min-width: 36.18em) @media only screen and (min-width: 36.18em) {
{ .home .logo {
.home .logo
{
width: 100%; width: 100%;
} }
} }
.home-wrap h1 .home-wrap h1 {
{
font-family: "Avenir Next", Avenir, Helvetica, sans-serif; font-family: "Avenir Next", Avenir, Helvetica, sans-serif;
font-size: 5em; font-size: 5em;
font-weight: normal; font-weight: normal;
...@@ -422,14 +373,12 @@ body.home main ...@@ -422,14 +373,12 @@ body.home main
margin-bottom: 0; margin-bottom: 0;
} }
.downloads .downloads {
{
margin-top: 1.75em; margin-top: 1.75em;
} }
/* ↓ clearfix alternative to overflow: hidden; */ /* ↓ clearfix alternative to overflow: hidden; */
.downloads:after .downloads:after {
{
clear: both; clear: both;
content: '.'; content: '.';
display: block; display: block;
...@@ -437,10 +386,8 @@ body.home main ...@@ -437,10 +386,8 @@ body.home main
visibility: hidden; visibility: hidden;
} }
@media only screen and (min-width: 28.78em) @media only screen and (min-width: 28.78em) {
{ .downloads {
.downloads
{
margin-top: 1.25em; margin-top: 1.25em;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
...@@ -449,8 +396,7 @@ body.home main ...@@ -449,8 +396,7 @@ body.home main
} }
} }
.download-on-the-app-store, .download-on-mac-app-store .download-on-the-app-store, .download-on-mac-app-store {
{
display: block; display: block;
/* ↓ space between button and title */ /* ↓ space between button and title */
margin-top: 0.75em; margin-top: 0.75em;
...@@ -461,16 +407,14 @@ body.home main ...@@ -461,16 +407,14 @@ body.home main
max-width: 100%; max-width: 100%;
} }
.download-on-the-app-store, .download-on-the-app-store img .download-on-the-app-store, .download-on-the-app-store img {
{
/* ↓ actual button size */ /* ↓ actual button size */
height: 2.85em; height: 2.85em;
/* ↓ actual button size */ /* ↓ actual button size */
width: 9.5em; width: 9.5em;
} }
.download-on-the-app-store img .download-on-the-app-store img {
{
/* ↓ actual button size */ /* ↓ actual button size */
height: 2.85em; height: 2.85em;
/* ↓ actual button size */ /* ↓ actual button size */
...@@ -479,16 +423,14 @@ body.home main ...@@ -479,16 +423,14 @@ body.home main
max-width: 100%; max-width: 100%;
} }
.download-on-mac-app-store, .download-on-mac-app-store img .download-on-mac-app-store, .download-on-mac-app-store img {
{
/* ↓ actual button size */ /* ↓ actual button size */
height: 2.85em; height: 2.85em;
/* ↓ actual button size */ /* ↓ actual button size */
width: 11.78em; width: 11.78em;
} }
.download-on-mac-app-store img .download-on-mac-app-store img {
{
/* ↓ actual button size */ /* ↓ actual button size */
height: 2.85em; height: 2.85em;
/* ↓ actual button size */ /* ↓ actual button size */
...@@ -497,23 +439,18 @@ body.home main ...@@ -497,23 +439,18 @@ body.home main
max-width: 100%; max-width: 100%;
} }
@media only screen and (min-width: 25.71em) @media only screen and (min-width: 25.71em) {
{ .download-on-the-app-store, .download-on-mac-app-store {
.download-on-the-app-store, .download-on-mac-app-store
{