From be2f695daf55cbb13ef8e7293c671016b6fa062f Mon Sep 17 00:00:00 2001 From: Ana Isabel Carvalho Date: Tue, 3 Jun 2014 13:22:02 +0100 Subject: [PATCH] Styled the newsletter subscription form. Changed font used in thr Troublehsooting to be the same as the one used in buttons. Moved placeholder images to a folder that can later be deleted. --- css/main.css | 141 +++++++++++++++++------ img/{ => placeholders}/email-intro01.png | Bin img/{ => placeholders}/email-intro02.png | Bin img/{ => placeholders}/email-intro03.png | Bin img/{ => placeholders}/placeholder.png | Bin 5 files changed, 107 insertions(+), 34 deletions(-) rename img/{ => placeholders}/email-intro01.png (100%) rename img/{ => placeholders}/email-intro02.png (100%) rename img/{ => placeholders}/email-intro03.png (100%) rename img/{ => placeholders}/placeholder.png (100%) diff --git a/css/main.css b/css/main.css index 48ba2ba..77c2493 100644 --- a/css/main.css +++ b/css/main.css @@ -108,6 +108,12 @@ textarea { src: local('Dosis'), url('../fonts/Dosis/Dosis-ExtraLight.ttf') format('truetype'); } +@font-face { + font-family: 'Dosis EBold'; + src: local('Dosis EBold'), url('../fonts/Dosis/Dosis-ExtraBold.ttf') format('truetype'); +} + + @font-face { font-family: 'Signika Light'; src: local('Signika Light'), url('../fonts/Signika/Signika-Light.ttf') format('truetype'); @@ -132,14 +138,19 @@ h4 { font-size: 1.375em; line-height: 1.2; font-family: 'Dosis'; text-transform h5 { font-size: 1.25em; line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px; } h6 { font-size: 1.125em; line-height: 1.2; font-family: 'Dosis'; text-transform: uppercase; letter-spacing: 1px; } -.troubleshooting h4, .troubleshooting dt, strong { font-family: 'Signika Bold'; } +.troubleshooting h4, +.newsletter input[type='submit'] { + font-family: 'Dosis EBold'; +} + .nav, #footer, +.troubleshooting h4, small { font-size: 0.75em; } @@ -148,11 +159,16 @@ small { font-size: 0.85em; } -.troubleshooting h4 { - font-size: .75em; +#header .intro { + font-size: 1.1em; +} + +#header #fsf-intro { + font-size: .7em; } + /* Colours */ @@ -225,13 +241,16 @@ a { padding: 1em 0; } -#header a { +#header h1 { + line-height: 1; +} + +#header h1 a { display: block; } -#header h1 { - line-height: 1; - padding: .5em 0 0; +#header > div > .intro p { + margin: 0 0 0.75em; } .intro p, @@ -291,6 +310,65 @@ a { margin-bottom: 1em; } +/* FSF Introduction, before the header + Newsletter form +*/ + +#fsf-intro h3, +#fsf-intro p { + margin-bottom: 1em; +} + +.newsletter 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; + line-height: 1; + vertical-align: bottom; +} + +.newsletter 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 { + border-color: #2f5faa; + outline: none; + color: #333333; +} + +.newsletter input[type='submit'] { + 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 { + background-color: #2f5faa; + outline: none; +} + /* ========================================================================== Media Queries @@ -329,8 +407,9 @@ a { } .nav > div { + overflow: auto; position: relative; - padding: 0.5em 0 0; + padding: 0.35em 0 0; } .nav ul.os { @@ -341,57 +420,51 @@ a { .nav ul.lang { display: inline-block; margin: 0 0 0 0.5em; + float: right; } #header h1 { - font-size: 5em; - text-align: center; + font-size: 6em; } - .row > div, - .intro > div { - overflow: hidden; + #header .intro { + float: left; + width: 62.5%; } - .row .sidebar, - .intro .sidebar { /* 3 columns 125px + 20px margins*/ - float: left; - clear: left; + #header #fsf-intro { + float: right; width: 34.05%; - margin-right: 1.72%; + padding-left: 1.72%; + border-left: 8px solid #ff9b12; } - .row .main, - .intro .main { /* 5 columns 125px + 100px margins*/ - float: right; - width: 62.5%; + #fsf-intro .newsletter { } - .intro > div { - padding: .5em 0; + .row > div, + #header > div, + .row > div .section-intro, + .row > div .step { + overflow: hidden; } - .intro .sidebar { /* 2 columns 125px + 20px margins*/ + .row .sidebar { /* 3 columns 125px + 20px margins*/ float: left; clear: left; - width: 23.27%; - margin-right: 1.72%; + width: 34.05%; } - .intro .main { /* 6 columns 125px + 100px margins*/ + .row .main { /* 5 columns 125px + 100px margins*/ float: right; - width: 75%; - } - - .intro .sidebar img { - width: 70%; + width: 62.5%; + margin-left: 1.72%; } .row .sidebar img { width: 100%; } - } diff --git a/img/email-intro01.png b/img/placeholders/email-intro01.png similarity index 100% rename from img/email-intro01.png rename to img/placeholders/email-intro01.png diff --git a/img/email-intro02.png b/img/placeholders/email-intro02.png similarity index 100% rename from img/email-intro02.png rename to img/placeholders/email-intro02.png diff --git a/img/email-intro03.png b/img/placeholders/email-intro03.png similarity index 100% rename from img/email-intro03.png rename to img/placeholders/email-intro03.png diff --git a/img/placeholder.png b/img/placeholders/placeholder.png similarity index 100% rename from img/placeholder.png rename to img/placeholders/placeholder.png -- 2.25.1