Styled infographic link in the header. Styled header in mobile version. Started styli...

diff --git a/css/main.css b/css/main.css
index 063a2e1ac80a069db0dea204715b0a910330b235..5bfec69443b4c43a28d9c5eafe9a137cc5a38761 100644 (file)
--- a/css/main.css
+++ b/css/main.css
@@ -150,7 +150,8 @@ strong {
 
 .main > h3 em,
 .troubleshooting h4,
-.newsletter input[type='submit'] {
+input[type='submit'],
+input[type='reset'] {
                font-family: 'Dosis EBold';
 }
 
@@ -174,6 +175,10 @@ small {
        font-size: 1.1em;
 }
 
+#header .intro > #infographic {
+       font-size: .75em;
+}
+
 #header #fsf-intro {
        font-size: .7em;
 }
@@ -187,12 +192,15 @@ body {
                background: #f4eed7;
 }
 
-a {
+a,
+a > img + strong {
                color: #2f5faa;
                text-decoration: none;
 }
 
-a:hover, a:focus {
+a:hover, a:focus,
+a:hover > img + strong,
+a:focus > img + strong {
                color: #0e3878;
 }
 
@@ -252,6 +260,9 @@ a:hover, a:focus {
                padding: .5em;
 }
 
+/* Header
+*/
+
 #header > div {
                width: 96%;
                clear: both;
@@ -263,8 +274,28 @@ a:hover, a:focus {
                line-height: 1;
 }
 
-#header h1 a {
+#header #infographic {
+               background: #fff;
+               border-radius: 3px;
+               margin-bottom: 0;
+}
+
+#header #infographic a {
                display: block;
+               margin: .5em;
+}
+
+#header #infographic a.img-link {
+               padding-top: .5em;
+}
+
+#header #infographic img {
+               display: block;
+               width: 100%;
+}
+
+#header #infographic a.text-link {
+               padding-bottom: .5em;
 }
 
 #header > div > .intro p {
@@ -424,70 +455,129 @@ a:hover, a:focus {
                display: inline-block;
 }
 
-/* FSF Introduction, before the header +  Newsletter form
+/* Form elements: newsletter + pgp pathfinder
 */
 
-#fsf-intro h3,
-#fsf-intro p {
-               margin-bottom: 1em;
-}
-
-.newsletter input {
+input {
   -webkit-transition: all 0.1s linear;
   -moz-transition: all 0.1s linear;
   -o-transition: all 0.1s linear;
   transition: all 0.1s linear;
 }
 
-.newsletter input[type='text'],
-.newsletter input[type='submit'] {
-               font-size: .75em;
+input[type='text'],
+input[type='submit'],
+input[type='reset'] {
          line-height: 1;
                vertical-align: bottom;
 }
 
-.newsletter input[type='text'] {
+input[type='text'] {
                border: none;
-               height: 3em;
                border-radius: 3px;
                border: .1em solid #5f8dd3;
-               width: 16em;
                padding: .2em .65em;
                background: #fff;
                color: #666;
 }
 
-.newsletter input[type='text']:focus,
-.newsletter input[type='text']:hover {
+input[type='text']:focus,
+input[type='text']:hover {
                border-color: #2f5faa;
                outline: none;
                color: #333333;
 }
 
-.newsletter input[type='submit'] {
+input[type='submit'],
+input[type='reset'] {
                border: none;
                cursor: pointer;
                text-transform: uppercase;
                letter-spacing: 2px;
                color: #fff;
-               height: 3.1em;
                padding: .5em 1em;
-               margin-left: 5px;
                border-radius: 3px;
                background-color: #5f8dd3;
 }
 
-.newsletter input[type='submit']:focus,
-.newsletter input[type='submit']:hover {
+input[type='submit']:focus,
+input[type='submit']:hover,
+input[type='reset']:focus,
+input[type='reset']:hover {
                background-color: #2f5faa;
                outline: none;
 }
 
+/* FSF Introduction, before the header +  Newsletter form
+*/
+
+#fsf-intro h3,
+#fsf-intro p {
+               margin-bottom: 1em;
+}
+
+.newsletter input[type='text'],
+.newsletter input[type='submit']  {
+               font-size: .75em;
+}
+
+.newsletter input[type='text'] {
+               height: 3em;
+               width: 16em;
+               padding: .2em .65em;
+}
+
+.newsletter input[type='submit'] {
+               height: 3.1em;
+               padding: .5em 1em;
+               margin-left: 5px;
+               background-color: #5f8dd3;
+}
+
 #fsf-intro .newsletter form + p {
                margin: .25em 0 0;
                font-size: 
 }
 
+/* PGP pathfinder
+*/
+
+#pgp-pathfinder {
+               background: #fff;
+               border: 1px solid #94b3e2;
+               border-radius: 3px;
+}
+
+#pgp-pathfinder form {
+               margin: 1em;
+}
+
+#pgp-pathfinder strong {
+               display: inline-block;
+               width: 4em;
+}
+
+#pgp-pathfinder input {
+               font-size: .75em;
+}
+
+#pgp-pathfinder input[type='text'] {
+               height: 3em;
+               width: 22em;
+               padding: .2em .65em;
+}
+
+#pgp-pathfinder input[type='submit'],
+#pgp-pathfinder input[type='reset'] {
+               padding: .5em 1em;
+               margin-left: 5px;
+               background-color: #5f8dd3;
+}
+
+#pgp-pathfinder .buttons {
+               margin-left: 4em;
+}
+
 /* Footer
 */
 
@@ -502,14 +592,15 @@ a:hover, a:focus {
 
 @media only screen and (min-width: 400px) {
 
-}
-
-@media only screen and (min-width: 400px) and (max-width: 599px) {
+               #header #fsf-intro {
+                               margin-bottom: 1em;
+                               padding-bottom: 1em;
+                               border-bottom: 1px solid #ff9b12;
+               }
 
 }
 
-
-@media only screen and (min-width: 600px) {
+@media only screen and (min-width: 400px) and (max-width: 599px) {
 
                .row > div,
                .nav > div,
@@ -518,10 +609,43 @@ a:hover, a:focus {
                                margin: 0 auto;
                }
 
+               #header .intro {
+                               font-size: 1em;
+               }
+
+               #header #infographic {
+                               margin-bottom: 1.5em;
+               }
+
+               #header #infographic a.img-link {
+                               height: 200px;
+                               overflow: hidden;
+               }
+
+               .section-intro p {
+                               margin: 0.5em 0;
+               }
+
 }
 
+
+@media only screen and (min-width: 600px) {}
+
 @media only screen and (min-width: 600px) and (max-width: 899px) {
 
+               #header .intro {
+                               float: right;
+                               width: 100%;
+                               margin-right: 02.22%;
+               }
+
+               #header #fsf-intro {
+                               float: left;
+                               width: 100%;
+                               padding-left: 02.22%;
+                               border-left: 8px solid #ff9b12;
+               }
+
 }
 
 @media only screen and (min-width: 900px) {
@@ -555,12 +679,19 @@ a:hover, a:focus {
 
                #header .intro {
                                float: left;
-                               width: 62.5%;
+                               width: 68.75%;
+                               margin-right: 1.72%;
+               }
+
+               #header #infographic {
+                               float: left;
+                               width: 30.58%;
+                               margin-right: 1.72%;
                }
 
                #header #fsf-intro {
                                float: right;
-                               width: 34.05%;
+                               width: 29.52%;
                                padding-left: 1.72%;
                                border-left: 8px solid #ff9b12;
                }

diff --git a/img/infographic-button.png b/img/infographic-button.png
new file mode 100644 (file)
index 0000000..664c35f
Binary files /dev/null and b/img/infographic-button.png differ

diff --git a/img/placeholders/infographics-placeholder.png b/img/placeholders/infographics-placeholder.png
new file mode 100644 (file)
index 0000000..5fe9e71
Binary files /dev/null and b/img/placeholders/infographics-placeholder.png differ