From 18b4b14737b6d0148bd3e23d1b8cd5aa444fa7e9 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Th=C3=A9r=C3=A8se=20Godefroy?= Date: Mon, 21 Jul 2014 15:42:57 +0200 Subject: [PATCH] fr: restore main.fr.css. It is still in use!!! --- css/main.fr.css | 827 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 827 insertions(+) create mode 100644 css/main.fr.css diff --git a/css/main.fr.css b/css/main.fr.css new file mode 100644 index 0000000..8c894c1 --- /dev/null +++ b/css/main.fr.css @@ -0,0 +1,827 @@ +/* Eric Meyer's Reset CSS */ +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, main, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */ + +html, +button, +input, +select, +textarea { + color: #222; +} + +html { + font-size: 1em; + line-height: 1.4; +} + +::-moz-selection { + background: #b3d4fc; + text-shadow: none; +} + +hr { + display: block; + height: 1px; + border: 0; + border-top: 1px solid #ccc; + margin: 1em 0; + padding: 0; +} + +audio, +canvas, +img, +video { + vertical-align: middle; +} + +fieldset { + border: 0; + margin: 0; + padding: 0; +} + +textarea { + resize: vertical; +} + + +/* ========================================================================== + Author's custom styles + ========================================================================== */ + +/* Typography +*/ + + +@font-face { + font-family: 'Dosis'; + 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'); +} + +@font-face { + font-family: 'Signika Semmibold'; + src: local('Signika Semmibold'), url('../fonts/Signika/Signika-Semibold.ttf') format('truetype'); +} + + +body { + font-family: 'Signika Light', 'DejaVu Sans', Arial, sans-serif; + font-size: 1.25em; + line-height: 1.4; +} + +h1 { font-size: 2.75em; font-family: 'Dosis'; } +h2 { font-size: 2.75em; font-family: 'Dosis'; } +h3 { font-size: 1.625em; font-family: 'Dosis'; } +h4 { font-size: 1.375em; font-family: 'Dosis EBold'; color: #4d4d4d; } +h5 { font-size: 1.25em; font-family: 'Dosis EBold'; color: #4d4d4d; } +h6 { font-size: 1.125em; font-family: 'Dosis EBold'; color: #4d4d4d; } + +h1, h2, h3, h4, h5, h6 { + line-height: 1.2; + text-transform: uppercase; + letter-spacing: 1px; +} + +ul.os a.current, +.main dt, +.troubleshooting dt, +strong { + font-family: 'Signika Semmibold'; + color: #4d4d4d; +} + +.main > h3 em, +.troubleshooting h4, +input[type='submit'], +input[type='reset'] { + font-family: 'Dosis EBold'; +} + +.step .main p, +.step .main ul { + font-size: .85em; +} + +.nav, +#footer, +.troubleshooting h4, +small { + font-size: 0.75em; +} + +.troubleshooting dl { + font-size: 0.85em; +} + +#header #fsf-intro { + font-size: .7em; +} + +.fsf-emphasis { + font-size: 125%; +} + +/* Colours +*/ + +body { + background: #f4eed7; +} + +a, +a > img + strong { + color: #2f5faa; + text-decoration: none; +} + +a:hover, a:focus, +a:hover > img + strong, +a:focus > img + strong { + color: #0e3878; +} + +/* Guide Sections Background */ +/* Blue*/ +#section1, +#section3, +#section5, +#footer { background: #dcdfe5; } + + +/* Yellow */ +#section2, +#section4, +#section6 { background: #f4eed7; } + + +/* Layout +*/ + +.row:before, .row:after { + content: " "; + display: table; +} + +*, *:before, *:after { + -moz-box-sizing: border-box; +} + +.row:after { + clear: both; +} + +.row { + margin: 0; + padding: 2em 0; +} + +.row > div { + width: 96%; + margin: 0 auto; + padding: .5em 0; +} + +.nav > div { + width: 96%; + margin: 0 auto; +} + +.nav li { + text-transform: uppercase; + display: inline-block; +} + +.nav li a { + display: block; + padding: .5em; +} + +/* Header +*/ + +#header > div { + width: 96%; + clear: both; + margin: 0 auto; + padding: 0 0 1em; +} + +#header h1 { + line-height: 1; +} + +#header ul.os { + line-height: 1; + margin: .5em 0 2em; + padding: 0 0 .25em; + border-bottom: 1px solid #94b3e2; + font-size: 1.25em; +} + +#header ul.os li { + text-transform: uppercase; + display: inline-block; +} + +#header ul.os li a { + display: block; + padding: .25em; +} + +#header ul.os .spacer { + padding: .25em 0 .25em 2em; +} + +#header #infographic { + float: left; + display: block; + background: #fff; + border-radius: 3px; + margin: 0 1em .5em 0; + padding: .5em; + width: 250px; +} + + +#header #infographic img { + display: inline-block; + width: 100%; +} + +#header > div > .intro p { + margin: 0 0 0.75em; +} + +.section-intro { + padding-bottom: 1.5em; + border-bottom: 1px solid #5f8dd3; + margin-bottom: 2em; +} + +.section-intro p { + margin: 0.5em 3.5em; +} + +.section-intro h2, +.sidebar h2 { + margin: 0 0 .5em; +} + +.section-intro h2 { + text-align: center; +} + +.section-intro h2 em, +.sidebar h2 em { + color: #94b3e2; +} + +.step { + padding: .5em 0; +} + +.intro p, +.main p { + margin: 0.5em 0; +} + + .main p:first-child { margin: 0 0 0.5em ; } + +.main p.notes { + color: #707070; +} + +.main h3 { + margin: 1em 0 0.5em; + padding-left:.5em; + border-left: 8px solid #ff9b12; +} + +.main h3:first-child { margin: 0 0 0.5em; } + +.main > h3 em { + color: #94b3e2; + display: block; +} + +.main, +.sidebar { + margin: 1em 0 0.5em; +} + +.main ul li { + margin: .5em 0; +} + +/* Images +*/ + +ul.images:before, ul.images:after { + content: " "; + display: table; +} + +ul.images:after { + clear: both; +} + +ul.images { + padding: 0.5em 0; +} + +ul.images li { + margin-bottom: 1em; +} + +ul.images li > img { + width: 100%; + max-width: 600px; + height: auto; +} + +.sidebar > p > img { + width: 100%; + max-width: 600px; + height: auto; +} + +.share-logo { + margin-bottom: 6px; +} + +/* Troubleshooting panel and dropdown */ + +.troubleshooting { + margin-top: .8em; +} + +.dropdown > h4 { + font-size: .85em; + width: 180px; + text-align: center; + display: inline-block; + cursor: pointer; + letter-spacing: 2px; + padding: .25em .5em; + color: #2f5faa; + border: 1px solid #5f8dd3; + border-radius: 3px; +} + +.dropdown ul { + position: absolute; + width: 180px; + text-align: center; + background: #f4eed7; + font-size: .85em; +} + +#menu .dropdown ul li { + display: block; +} + +.troubleshooting > h4 { + display: inline-block; + cursor: pointer; + letter-spacing: 2px; + padding: .25em .5em; + color: #2f5faa; + opacity: .5; + border: 1px solid #5f8dd3; + border-radius: 3px; +} + +.troubleshooting > h4:hover, +.troubleshooting > h4.expanded { + opacity: 1; +} + +.troubleshooting > h4.expanded, +.dropdown > h4.expanded { + border-bottom: 0; + border-radius: 3px 3px 0 0; +} + +.troubleshooting > h4:after, +.dropdown > h4:after { + content:' ▾'; + display: inline-block; + line-height: 1; + padding: 0 0.2em; + vertical-align: top; +} + +.troubleshooting > h4.expanded:after, +.dropdown > h4.expanded:after { + content:' ▴'; + display: inline-block; + line-height: 1; + padding: 0 0.2em; + vertical-align: top; +} + +.troubleshooting dl, +.dropdown ul { + padding: .5em; + border: 1px solid #5f8dd3; + border-radius: 0 3px 3px; +} + +.main dt, +.troubleshooting dt { + margin-top: 1em; +} + +.main dt:first-child, +.troubleshooting dt:first-child { + margin-top: 0; +} + +.troubleshooting dt.feedback, +.troubleshooting dd.feedback { + display: inline-block; +} + +/* Form elements: newsletter + pgp pathfinder +*/ + +input { + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + -o-transition: all 0.1s linear; + transition: all 0.1s linear; +} + +input[type='text'], +input[type='submit'], +input[type='reset'] { + line-height: 1; + vertical-align: bottom; +} + +input[type='text'] { + border: none; + border-radius: 3px; + border: .1em solid #5f8dd3; + padding: .2em .65em; + background: #fff; + color: #666; +} + +input[type='text']:focus, +input[type='text']:hover { + border-color: #2f5faa; + outline: none; + color: #333333; +} + +input[type='submit'], +input[type='reset'] { + border: none; + cursor: pointer; + text-transform: uppercase; + letter-spacing: 2px; + color: #fff; + padding: .5em 1em; + border-radius: 3px; + background-color: #5f8dd3; +} + +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; +} + +#fsf-intro h3 a { + display: block; + max-width: 283px; +} + +#fsf-intro h3 img { + width: 100%; +} + +.newsletter input[type='text'], +.newsletter input[type='submit'] { + font-size: .75em; +} + +.newsletter input[type='text'] { + height: 3em; + width: 16em; + padding: .2em .65em; + margin-bottom: .5em; +} + +.newsletter input[type='submit'] { + height: 3.1em; + padding: .5em 1em; + margin-left: 5px; + background-color: #5f8dd3; + margin-bottom: .5em; +} + +#fsf-intro .newsletter form + p { + margin: .25em 0 0; +} + +/* Work in Progress Banner */ + +.wip { + width: 96%; + margin: 0 auto; + padding: .5em 0; + background: red; + text-align: center; + color: white; + font-weight: bold; +} + +/* 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 +*/ + +#footer h4 { + margin-bottom: .75em; +} + +#footer .credits { + border-top: 1px solid #94b3e2; + margin-top: 1em; + padding-top: .5em; +} + +#footer #copyright p { + margin-bottom: .5em; +} + +/* Infographics page +*/ + +.centered > * { + text-align: center; +} + +.centered h3 { + border-bottom: 1px solid #94b3e2; + margin: .65em 0; + padding: 0 0 .65em; +} + +.centered p { + margin: .65em 0; +} + + + +/* ========================================================================== + Media Queries + ========================================================================== */ + +@media only screen and (min-width: 400px) { + +} + +@media only screen and (min-width: 400px) and (max-width: 599px) { + + .row > div, + .nav > div, + #header > div { + width: 92%; + margin: 0 auto; + } + + #header ul.os .share { + display: block; + padding: .25em 0; + } + + #header #fsf-intro { + margin-bottom: 1em; + padding-bottom: 1em; + border-bottom: 1px solid #ff9b12; + } + + .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%; + } + + #header #fsf-intro { + float: left; + width: 100%; + padding-left: 0; + border-left: 0; + margin-bottom: 1em; + padding-bottom: 1em; + border-bottom: 1px solid #ff9b12; + } + +} + +@media only screen and (min-width: 900px) { + + .row > div, + .nav > div, + #header > div { + width: 86%; + } + + .nav > div { + overflow: hidden; + position: relative; + padding: 0.35em 0 0; + } + + .nav ul.lang { + margin: 0 0 0 0.5em; + } + + #header h1 { + font-size: 6em; + text-align: center; + } + + #header ul.os { + text-align: center; + } + + #header .intro { + float: left; + width: 66%; + margin-right: 1.72%; + } + + #header #fsf-intro { + float: right; + width: 29.52%; + padding-left: 1.72%; + border-left: 8px solid #ff9b12; + } + + .row > div, + #header > div, + .row > div .section-intro, + .row > div .step, + #footer > div { + overflow: hidden; + } + + .row .sidebar { /* 3 columns 125px + 20px margins*/ + float: left; + clear: left; + width: 34.05%; + } + + .row .main { /* 5 columns 125px + 100px margins*/ + float: right; + width: 62.5%; + margin-left: 1.72%; + } + + .sidebar ul.images li { + display: inline-block; + float: left; + width: 47%; + margin: 0 3% 1em 0; + } + + .sidebar ul.images li:nth-child(n) { + margin: 0 0 0 3%; + } + + .sidebar ul.images li:nth-child(2n+1) { + clear: left; + margin: 0 3% 1em 0; + } + + .sidebar ul.images li > img { + width: 100%; + height: auto; + } + + .row .sidebar > p > img { + width: 80%; + height: auto; + } + + + +} -- 2.25.1