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 @@
* Basic styles *
****************************************************************************/
body
{
body {
background-color: #fff; /* ↓ white */
}
......@@ -47,8 +46,7 @@ body
* Get Involved Section *
****************************************************************************/
#get-involved > p
{
#get-involved > p {
text-align: center;
}
......@@ -59,8 +57,7 @@ body
/*
hide navigation title from view (but show it in outline)
*/
.hide
{
.hide {
display: none;
}
......@@ -69,8 +66,7 @@ body
* based on the Ind.ie styles, using the CSS from the forum *
****************************************************************************/
.site-navigation
{
.site-navigation {
/* ↓ cloud dark */
background: #005c99;
/* ↓ cloud */
......@@ -79,8 +75,7 @@ body
z-index: 4;
}
.site-navigation ul
{
.site-navigation ul {
margin: 0 auto;
/* ↓ same max-width as main container */
max-width: 34em;
......@@ -91,14 +86,12 @@ body
justify-content: center;
}
.site-navigation li
{
.site-navigation li {
list-style-type: none;
margin: 0;
}
.site-navigation li a
{
.site-navigation li a {
color: #fff;
display: block;
float: left;
......@@ -119,17 +112,14 @@ body
word-break: normal;
}
@media only screen and (min-width: 24em)
{
.site-navigation li a
{
@media only screen and (min-width: 24em) {
.site-navigation li a {
padding: 0.5em 1em;
}
}
.site-navigation li a:hover,
.site-navigation li a:active
{
.site-navigation li a:active {
/* ↓ cloud dark 25% */
background: #0064A6;
border-bottom: none;
......@@ -137,8 +127,7 @@ body
.site-navigation a[aria-selected=true],
.reviews .site-navigation li.home a,
.support .site-navigation li.support a
{
.support .site-navigation li.support a {
/* ↓ cloud */
background-color: #007acc;
color: #fff;
......@@ -148,8 +137,7 @@ body
* Footer styles *
****************************************************************************/
.site-footer
{
.site-footer {
/* ↓ cloud */
background-color: #007ACC;
/* ↓ white */
......@@ -163,16 +151,14 @@ body
text-align: center;
}
.footer-wrap
{
.footer-wrap {
margin: 0 auto;
/* ↓ Padding at bottom is offset by paragraph margin */
padding: 1.75em 1.75em 1.25em 1.75em;
max-width: 34em;
}
.site-footer:before
{
.site-footer:before {
background: url('/images/clouds.svg') top center repeat-x;
/* ↓ doesn’t work on webkit SVGs with repeat-x, so use media queries below */
background-size: 120em 7em;
......@@ -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
*/
/* ↓ ~width of background-size */
@media only screen and (min-width: 50em)
{
.site-footer:before
{
@media only screen and (min-width: 50em) {
.site-footer:before {
background: url('/images/clouds.svg') top center repeat-x;
/* ↓ fill whole width of browser */
background-size: 100%, cover;
......@@ -208,16 +192,13 @@ body
}
/* ↓ adjust for new height of cloud image */
.site-footer
{
.site-footer {
margin-top: 6.5em;
}
}
@media only screen and (min-width: 60em)
{
.site-footer:before
{
@media only screen and (min-width: 60em) {
.site-footer:before {
/* ↓ ~height of image, extra height so top edge of footer doesn’t show through */
height: 7em;
/* ↓ bring to top of footer (-height of image) */
......@@ -225,82 +206,68 @@ body
}
/* ↓ adjust for new height of cloud image */
.site-footer
{
.site-footer {
margin-top: 7em;
}
}
@media only screen and (min-width: 90em)
{
.site-footer:before
{
@media only screen and (min-width: 90em) {
.site-footer:before {
/* ↓ ~height of image, extra height so top edge of footer doesn’t show through */
height: 8em;
/* ↓ bring to top of footer (-height of image) */
top: -7.9em;
}
.site-footer
{
.site-footer {
margin-top: 8em;
}
}
small
{
small {
font-size: 0.85em;
}
#privacy small
{
#privacy small {
font-size: 1em;
}
.site-footer h2
{
.site-footer h2 {
font-weight: normal;
margin-top: 0;
}
.site-footer h2 a
{
.site-footer h2 a {
border-bottom: 1px solid #fff;
display: inline-block;
text-decoration: none;
}
.site-footer p
{
.site-footer p {
margin: 0 0 0.5em 0;
}
.site-footer a
{
.site-footer a {
/* ↓ white */
color: #fff;
/* ↓ to make balloon logo appear in block */
display: block;
}
.site-footer small a
{
.site-footer small a {
/* ↓ override block rule above for links inside the paragraph text */
display: inline;
}
.indie-logo
{
.indie-logo {
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;
}
.site-footer .view-source
{
.site-footer .view-source {
display: block;
font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
font-weight: 500;
......@@ -312,8 +279,7 @@ small
* Trackers pop-up *
****************************************************************************/
#trackers-list
{
#trackers-list {
position: relative;
background: #fff;
border-radius: 1.4em;
......@@ -331,34 +297,28 @@ small
/*
on home, pass the main styles to the inner .home-wrap
*/
body.home main
{
body.home main {
margin: 0;
padding: 0;
}
@media only screen and (min-width: 33.4em)
{
body.home main
{
@media only screen and (min-width: 33.4em) {
body.home main {
padding: 0;
background-size: 1237px 121px;
max-width: 100%;
}
}
.home-wrap
{
.home-wrap {
background: #fff;
margin: 0.75em 0.5em;
max-width: 34em;
padding: 0 0.7em 0.75em 0.7em;
}
@media only screen and (min-width: 33.4em)
{
.home-wrap
{
@media only screen and (min-width: 33.4em) {
.home-wrap {
margin: 0.75em auto;
padding: 0 2.5em 2.1em 2.5em;
}
......@@ -367,8 +327,7 @@ body.home main
/*
Clouds and sunburst background
*/
.home .logo-wrap
{
.home .logo-wrap {
/* ↓ intro background colour */
background-color: #1a9bfc;
background-image: url('/images/clouds-white.svg'), url('/images/starburst.svg');
......@@ -378,19 +337,15 @@ body.home main
padding: 1.5em 0.5em 0 0.5em;
}
@media only screen and (min-width: 33.4em)
{
.home .logo-wrap
{
@media only screen and (min-width: 33.4em) {
.home .logo-wrap {
background-size: 1237px 120px, auto 1000%;
padding: 2em 0.75em 0 0.75em;
}
}
@media only screen and (min-width: 36.18em)
{
.home .logo-wrap
{
@media only screen and (min-width: 36.18em) {
.home .logo-wrap {
padding: 2.6em 0 0 0;
}
}
......@@ -398,23 +353,19 @@ body.home main
/*
Better icon on homepage
*/
.home .logo
{
.home .logo {
margin: 0 auto;
max-width: 13em;
width: 50%;
}
@media only screen and (min-width: 36.18em)
{
.home .logo
{
@media only screen and (min-width: 36.18em) {
.home .logo {
width: 100%;
}
}
.home-wrap h1
{
.home-wrap h1 {
font-family: "Avenir Next", Avenir, Helvetica, sans-serif;
font-size: 5em;
font-weight: normal;
......@@ -422,14 +373,12 @@ body.home main
margin-bottom: 0;
}
.downloads
{
.downloads {
margin-top: 1.75em;
}
/* ↓ clearfix alternative to overflow: hidden; */
.downloads:after
{
.downloads:after {
clear: both;
content: '.';
display: block;
......@@ -437,10 +386,8 @@ body.home main
visibility: hidden;
}
@media only screen and (min-width: 28.78em)
{
.downloads
{
@media only screen and (min-width: 28.78em) {
.downloads {
margin-top: 1.25em;
margin-left: auto;
margin-right: auto;
......@@ -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;
/* ↓ space between button and title */
margin-top: 0.75em;
......@@ -461,16 +407,14 @@ body.home main
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 */
height: 2.85em;
/* ↓ actual button size */
width: 9.5em;
}
.download-on-the-app-store img
{
.download-on-the-app-store img {
/* ↓ actual button size */
height: 2.85em;
/* ↓ actual button size */
......@@ -479,16 +423,14 @@ body.home main
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 */
height: 2.85em;
/* ↓ actual button size */
width: 11.78em;
}
.download-on-mac-app-store img
{
.download-on-mac-app-store img {
/* ↓ actual button size */
height: 2.85em;
/* ↓ actual button size */
......@@ -497,23 +439,18 @@ body.home main
max-width: 100%;
}
@media only screen and (min-width: 25.71em)
{
.download-on-the-app-store, .download-on-mac-app-store
{
@media only screen and (min-width: 25.71em) {
.download-on-the-app-store, .download-on-mac-app-store {
float: left;
}
.download-on-the-app-store
{
.download-on-the-app-store {
margin-right: 0.75em;
}
}
@media only screen and (max-width: 30em)
{
.downloads .download-on-mac-app-store
{
@media only screen and (max-width: 30em) {
.downloads .download-on-mac-app-store {
/*
only using max-rule because I don’t want to override this specificity with every other margin rule
*/
......@@ -521,33 +458,28 @@ body.home main
}
}
@media only screen and (min-width: 32.5em)
{
.download-on-the-app-store, .download-on-mac-app-store
{
@media only screen and (min-width: 32.5em) {
.download-on-the-app-store, .download-on-mac-app-store {
/* ↓ space between button and title */
margin-top: 1.2em;
margin-bottom: 1.2em;
}
}
.download-on-the-app-store img, .download-on-mac-app-store img
{
.download-on-the-app-store img, .download-on-mac-app-store img {
margin-top: 0;
}
/*
undo screenshot styles
*/
main .download-on-the-app-store img, .team-photo
{
main .download-on-the-app-store img, .team-photo {
border: none;
border-radius: 0;
box-shadow: none;
}
.thankyou
{
.thankyou {
font-family: "Avenir Next Medium", "Avenir Next", Avenir, Helvetica, sans-serif;
font-weight: 500;
margin-top: 1.75em;
......@@ -559,13 +491,11 @@ main .download-on-the-app-store img, .team-photo
Photo frame.
Technique courtesy of http://zurb.com/playground/css3-polaroids
*/
.photo-frame:after
{
.photo-frame:after {
content: attr(title);
}
.photo-frame
{
.photo-frame {
background-color: #fff;
box-shadow: 0 3px 6px rgba(0,0,0,.25);
/* ↓ dark grey – crest blue in greyscale */
......@@ -585,21 +515,17 @@ main .download-on-the-app-store img, .team-photo
width: 80%;
}
.team-photo
{
.team-photo {
margin-top: 0;
margin-bottom: 0.75em;
}
@media only screen and (min-width: 33.75em)
{
.photo-frame
{
@media only screen and (min-width: 33.75em) {
.photo-frame {
width: 50%;
}
.team-photo
{
.team-photo {
margin-bottom: 0.75em;
}
}
......@@ -611,8 +537,7 @@ main .download-on-the-app-store img, .team-photo
/*
Heading image
*/
h1.trackers, h1.clouds, h1.spotlight, h1.sites, h1.news, h1.support, #trackers-list h4
{
h1.trackers, h1.clouds, h1.spotlight, h1.sites, h1.news, h1.support, #trackers-list h4 {
background-size: 2.5em;
background-position: top center;
background-repeat: no-repeat;
......@@ -627,13 +552,11 @@ h1.trackers, h1.clouds, h1.spotlight, h1.sites, h1.news, h1.support, #trackers-l
/*
Heading image
*/
h1.trackers, #trackers-list h4
{
h1.trackers, #trackers-list h4 {
background-image: url('../images/tracker.svg');
}
#trackers-list h4
{
#trackers-list h4 {
/* ↓ so icon size and spacing matches that of h1s */
font-size: 2em;
text-align: center;
......@@ -643,8 +566,7 @@ h1.trackers, #trackers-list h4
* Sites index *
****************************************************************************/
h1.sites
{
h1.sites {
background-image: url('../images/sites.svg');
}
......@@ -653,8 +575,7 @@ h1.sites
* Spotlight index *
****************************************************************************/
h1.spotlight
{
h1.spotlight {
background-image: url('../images/spotlight.svg');
}
......@@ -662,8 +583,7 @@ h1.spotlight
* News index *
****************************************************************************/
h1.news
{
h1.news {
background-image: url('../images/news.svg');
}
......@@ -671,31 +591,26 @@ h1.news
* Support index *
****************************************************************************/
h1.support
{
h1.support {
background-image: url('../images/support-circle.svg');
}
body.support main h2, body.support main h3
{
body.support main h2, body.support main h3 {
/* ↓ don’t centre-align titles on Support */
text-align: left;
}
body.support main ul
{
body.support main ul {
/* ↓ prevent excess left margins on lists */
margin-left: 0;
}
body.support main ul li
{
body.support main ul li {
/* ↓ perfectly align bullets to left edge of text above */
margin-left: 1.15em;
}
body.support main a
{
body.support main a {
/* ↓ break long URLs on to multiple lines, especially for narrow viewports */
word-wrap: break-word;
}
......@@ -704,8 +619,7 @@ body.support main a
Icons to aid understanding of instructions in Support
*/
.inline-icon
{
.inline-icon {
display: inline-block;
height: 1em;
/* ↓ vertically-centre the icon */
......@@ -721,23 +635,19 @@ body.support main a
* Reviews *
****************************************************************************/