X-Git-Url: https://nos-oignons.net/gitweb/website.git/blobdiff_plain/fe291785069344ee14fb92c8df0725c45b732f8e..ef2cdb954594f2ace870a8ef4b3117f809778396:/local.css diff --git a/local.css b/local.css index 0a625c1..e36a4d9 100644 --- a/local.css +++ b/local.css @@ -1,56 +1,34 @@ /* vim: set ts=4 sts=4 sw=4 isk+=-,. fen fcl=all fdm=marker fmr={{{,}}} fml=2 : */ @font-face { - font-family: "Gentium Basic"; - src: url("assets/Gentium_Basic/GenBasR-webfont.eot"); - src: url("assets/Gentium_Basic/GenBasR-webfont.eot?#iefix") format("embedded-opentype"), - url("assets/Gentium_Basic/GenBasR-webfont.ttf") format("truetype"), - url("assets/Gentium_Basic/GenBasR-webfont.svg#GentiumBasicRegular") format("svg"); - font-weight: normal; - font-style: normal; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + src: local('Open Sans'), local('OpenSans'), url(assets/OpenSans/OpenSans.ttf) format('truetype'); } @font-face { - font-family: "Gentium Basic"; - src: url("assets/Gentium_Basic/GenBasI-webfont.eot"); - src: url("assets/Gentium_Basic/GenBasI-webfont.eot?#iefix") format("embedded-opentype"), - url("assets/Gentium_Basic/GenBasI-webfont.ttf") format("truetype"), - url("assets/Gentium_Basic/GenBasI-webfont.svg#GentiumBasicItalic") format("svg"); - font-weight: normal; - font-style: italic; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + src: local('Open Sans Bold'), local('OpenSans-Bold'), url(assets/OpenSans/OpenSans-Bold.ttf) format('truetype'); } @font-face { - font-family: "Gentium Basic"; - src: url("assets/Gentium_Basic/GenBasB-webfont.eot"); - src: url("assets/Gentium_Basic/GenBasB-webfont.eot?#iefix") format("embedded-opentype"), - url("assets/Gentium_Basic/GenBasB-webfont.ttf") format("truetype"), - url("assets/Gentium_Basic/GenBasB-webfont.svg#GentiumBasicBold") format("svg"); - font-weight: bold; - font-style: normal; + font-family: 'Open Sans'; + font-style: italic; + font-weight: 400; + src: local('Open Sans Italic'), local('OpenSans-Italic'), url(assets/OpenSans/OpenSans-Italic.ttf) format('truetype'); } @font-face { - font-family: "Gentium Basic"; - src: url("assets/Gentium_Basic/GenBasBI-webfont.eot"); - src: url("assets/Gentium_Basic/GenBasBI-webfont.eot?#iefix") format("embedded-opentype"), - url("assets/Gentium_Basic/GenBasBI-webfont.ttf") format("truetype"), - url("assets/Gentium_Basic/GenBasBI-webfont.svg#GentiumBasicBoldItalic") format("svg"); - font-weight: bold; - font-style: italic; -} - -@font-face { - font-family: "Linux Biolinum O"; - src: url(assets/LinBiolinum_R.otf); - font-style: normal; -} -@font-face { - font-family: "Linux Biolinum O"; - src: url(assets/LinBiolinum_RB.otf); - font-weight: bold; + font-family: 'Open Sans'; + font-style: italic; + font-weight: 700; + src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(assets/OpenSans/OpenSans-BoldItalic.ttf) format('truetype'); } @font-face { - font-family: "Linux Biolinum O"; - src: url(assets/LinBiolinum_RI.otf); - font-style: italic; + font-family: 'Inconsolata'; + font-style: normal; + font-weight: 400; + src: local('Inconsolata'), local('Inconsolata-Regular'), url(assets/Inconsolata/Inconsolata.otf) format('opentype'); } html { @@ -60,17 +38,28 @@ html { body { margin: 0; padding: 0; - font-size: 9pt; - font-family: "Gentium Basic", serif; - font-size-adjust: 0.4; + font-family: "Open Sans", sans-serif; color: #b3b3b3; - background: url(assets/tile.png); + background: url(assets/tile.png) fixed; +} + +code, +pre { + font-family: "Inconsolata", monospace; + font-size-adjust: 0.535; +} + +dt { + font-weight: bold; +} + +thead td { + text-decoration: underline; } .page { overflow: hidden; - min-width: 50em; - max-width: 80em; + max-width: 54em; margin: 0 auto 0 auto; box-shadow: 0 0 0.6em 0 #333366; background: #f5f5f5; @@ -78,29 +67,28 @@ body { /* {{{ .pageheader */ .pageheader { - position: relative; + position: fixed; + width: 54em; /* same as .page:max-width */ height: 100px; - padding: 0 1em; - /*box-shadow: 0 0 0.6em 0 #333366;*/ + padding: 0; background: white url(assets/filet.png) no-repeat 99% 90px; + box-shadow: 0 10px 15px 0px white; + z-index: 120; } .pageheader .header { - font-size: 14pt; - margin-left: 400px; + font-size: 120%; + margin-left: 394px; } .pageheader .header > span { display: block; height: 100px; - min-width: 30em; padding-top: 22px; } .pageheader .parentlinks { display: block; - padding-top: 3 - font-size: 12pt; } .pageheader a, @@ -115,28 +103,18 @@ body { .pageheader .title { position: absolute; - bottom: 16px; - left: 398px; - line-height: 1.5em; - font-size: 26pt; + bottom: 27px; + left: 392px; + font-size: 160%; color: black; - font-family: "Linux Biolinum O", sans-serif; - font-size-adjust: 0.39; } .pageheader .title .translationstatus { display: none; - display: none; - display: none; - display: none; -} - -.pageheader .actions ul { - border-bottom: none; } .parentlinks > a { - width: 400px; + width: 394px; /* same as .pageheader .header:margin-left */ height: 100px; background: url(assets/logo-nos-oignons-blanc.png) no-repeat top left; position: absolute; @@ -171,22 +149,10 @@ body { /* {{{ .actions */ .actions { - display: block; - position: absolute; - z-index: 300; - top: 50em; - left: 0; - width: 12em; -} - -.actions ul li { - background: transparent; + font-size: 80%; + text-align: right; } -.actions ul li > a { - font-size: 12pt; - padding: 0.2; -} /* .actions }}} */ /* {{{ #otherlanguages */ #otherlanguages, @@ -205,22 +171,20 @@ body { .pageheader #otherlanguages { border: none; position: absolute; - top: 100px; + bottom: 1.2em; right: 0; z-index: 300; - font-size: 12pt; + font-size: 80%; } /* #otherlanguages }}} */ /* .pageheader }}} */ #pagebody { position: relative; - min-width: 32em; - min-height: 48em; - margin: 0 0 0 12em; - padding: 1em 2em; + min-height: 756px; + margin: 0 0 0 11.44em; /* same as .sidebar:width */ + padding: 100px 2em 1em 2em; z-index: 110; - /*box-shadow: 0 3px 0.4em 0 #333366;*/ background: white url(assets/background.png) no-repeat bottom center; color: black; border-left: solid 1px #ccc; @@ -228,27 +192,30 @@ body { /* {{{ .sidebar */ .sidebar { - position: absolute; - top: 100px; + position: fixed; overflow: hidden; - width: 12em; + top: 100px; /* same as .header:height */ + width: 11.44em; margin: 0; padding: 0; border: none; - z-index: 100; + z-index: 200; background: #f5f5f5; border-top: solid 1px #ccc; - padding-top: 3em; + padding-top: 30px; } -.sidebar ul, .actions ul { +.sidebar ul { margin: 0; +} + +.sidebar ul { padding: 0; list-style: none; background: transparent; } -.sidebar li, .actions li { +.sidebar li { text-align: left; } @@ -258,22 +225,15 @@ body { } .sidebar ul li > span, -.sidebar ul li > a, -.actions ul li > a { +.sidebar ul li > a { display: block; - padding: 0.5em; - font-weight: bold; + padding: 0.3em 0.5em; text-decoration: none; border: 1px solid #f5f5f5; color: #a756af; background: transparent; - font-family: "Linux Biolinum O", sans-serif; - font-size-adjust: 0.39; -} - -.sidebar ul li > span, -.sidebar ul li > a { - font-size: 14pt; + font-weight: normal; + font-size: 100%; } .sidebar ul li .selflink:hover { @@ -282,7 +242,7 @@ body { background: #eeeeee; } -.sidebar a:hover, .actions a:hover { +.sidebar a:hover { border-top: 1px dotted #57075f; border-bottom: 1px dotted #57075f; color: #57075f; @@ -293,8 +253,6 @@ body { /* {{{ #content */ #content { padding-top: 1em; - font-size: 14pt; - /*line-height: 1.4em;*/ overflow: auto; } @@ -319,19 +277,16 @@ body { } #content h1 { - font-size: 26pt; + font-size: 180%; font-weight: bold; color: #ffa430; text-shadow: 2px 2px 1px #444; - font-family: "Linux Biolinum O", sans-serif; - font-size-adjust: 0.39; } -#content h2 { - font-size: 20pt; - font-weight: normal; - font-family: "Linux Biolinum O", sans-serif; - font-size-adjust: 0.39; +#content h2, +#content .header { + font-size: 140%; + font-weight: bold; } #content h2 + p { @@ -339,16 +294,27 @@ body { } #content h3 { - font-size: 16pt; + font-size: 120%; + font-weight: bold; margin-bottom: 0; padding-bottom: 0; - font-family: "Linux Biolinum O", sans-serif; - font-size-adjust: 0.39; } #content h3 + p { margin-top: 0.5em; } +h2 sup, +h3 sup { + font-weight: normal; +} + +#content blockquote { + border-left: 2px solid #A756AF; + margin: 0.5em 0; + padding: 0.5em 0 0.5em 1em; +} +#content blockquote p {margin: 0;} +#content blockquote p + p {margin-top: 1em;} #content table { border-top: solid 1px #aaa; @@ -368,35 +334,222 @@ body { border-top: solid 1px #ccc; } +#content .header a { + text-decoration: none; +} + #content .feedlink a { text-decoration: none; } #content .feedlink { text-align: right; - margin-top: -3em; - min-height: 3em; + margin-top: -2.8em; + min-height: 2.8em; +} +#content .feedlink .feedbutton { + font-size: 80%; + color: #57075f !important; + background: transparent; + border: none; +} +#content .feedlink .feedbutton:hover { + color: #57075f !important; + background: transparent; + text-decoration: underline; +} + +#content .footnotes { + font-size: 80%; +} + +.half-section { + display: inline-block; + vertical-align: top; + width: 49.5%; } + /* #content }}} */ +/* Paypal donation forms */ +.paypal-donation { + display: inline-block; + vertical-align: top; + width:45%; + padding-right: 4%; +} +.paypal-donation h4 { + margin: 0 0 0.5em 0; +} +.paypal-donation select { + display: inline-block; + vertical-align: top; + margin-right: 1em; + min-height:26px; +} +.paypal-donation .cancel { + font-size: small; +} + + +/* Progress bar */ +.progress-bar-wrapper { + margin: 2em auto; + height: 85px; + width: 600px; + background: lightGrey url(assets/progress_bar.png) top left repeat-x; + border: 1px solid #ccc; + border-bottom: 0; + position: relative; +} + .progress-bar-wrapper .progress-bar { + position: absolute; + height: 85px; + background: grey url(assets/progress_bar.png) left -85px repeat-x; + z-index: 2; + /* animate progress bar */ + -webkit-animation: progress-bar 1.5s; + -moz-animation: progress-bar 1.5s; + animation: progress-bar 1.5s; + } + .progress-bar-wrapper .progress-bar-promises { + background: grey url(assets/progress_bar.png) left bottom repeat-x; + z-index: 1; + } + + /* progress bar animation*/ + @-webkit-keyframes progress-bar { 0% { width: 0; } } + @-moz-keyframes progress-bar { 0% { width: 0; } } + keyframes progress-bar { 0% { width: 0; } } + + /* Current amount */ + .progress-bar-wrapper .progress-bar:after { + content: attr(data-current); + display: block; + position: absolute; + top: -22px; + right: 0; + background: #fff; + color: #ccc; + font-size: 0.9em; + } + /* Promises amount */ + .progress-bar-wrapper .progress-bar-promises:after { + } + + /* Temperature bar */ + .progress-bar-wrapper:before { + content: " "; + display: block; + position: absolute; + z-index: 3; + bottom: -5px; + left: -1px; + height: 5px; + width: 100%; + border: 1px solid #ccc; + border-top: 0; + background: -moz-linear-gradient(left, #ff0000 0%, #66ff00 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(100%,#66ff00)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* IE10+ */ + background: linear-gradient(to right, #ff0000 0%,#66ff00 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#66ff00',GradientType=1 ); /* IE6-9 */ + } + + /* Annual budget */ + .progress-bar-wrapper:after { + content: attr(data-total); + display: block; + position: absolute; + top: -22px; + right: 0; + background: #fff; + color: #ccc; + font-size: 0.9em; + } + + + +/* FDN Form */ +.fdn-form {} + .fdn-form select, + .fdn-form input { + display: inline-block; + vertical-align: top; + margin-right: 1em; + height: 26px; + } + .fdn-form #custom-amount { + display:none; + height: 22px; + } + + +/* Paymium Bitcoin */ +.paymium-btns {padding-left: 0;} +.paymium-btns li { + list-style: none; + display: inline-block; + margin: 0 0.5em 0.5em 0; +} + +.paymium-btn { + display: inline-block; + min-width: 10em; + padding: 4px 44px 4px 10px; + padding-right: 44px; + background: #4d7b99 url(assets/paymium_btc.png) right center no-repeat; + border-radius: 4px; + text-align: center; + color: #fff; + text-decoration: none; + font-weight: bold; +} +.paymium-btn:hover{ + background-color:#5081a0; + text-decoration: none; +} +/* override over weighted selector*/ +#content .paymium-btn {color: #fff;text-decoration: none;} +#content .paymium-btn:hover {color: #fff;text-decoration: none;} + + +/* {{{ .inlinepage */ + +.inlinepage { + padding: 0; + border: none; + margin-bottom: 1em; +} + +.inlinepage .header { + border-bottom: solid #ccc 1px; +} + +.inlinepage .inlineheader .pagedate { + margin-top: 0; + font-size: 80%; + font-style: normal; + color: #666; +} + +/* .inlinepage }}} */ + /* {{{ #footer */ #footer { position: relative; margin: 0; - padding: 1em 0; + padding: 0.5em 0; text-align: center; color: white; background: #57075f; - background: -webkit-linear-gradient(#001030, #57075f); - background: -moz-linear-gradient(#001030, #57075f); - background: linear-gradient(#001030, #57075f); - font-family: "Linux Biolinum O", sans-serif; - font-size-adjust: 0.39; + z-index: 400; } #footer #pageinfo { position: relative; - min-width: 30em; margin: auto; padding: 0.1em 2em; border-top: none; @@ -411,13 +564,13 @@ body { } #backlinks { - font-size: 10pt; + font-size: 80%; margin-top: 0; } #footer #pageinfo div { - font-size: 10pt; - margin-top: 0.5em; + font-size: 80%; + margin-top: 0; margin-bottom: 0; } /* #footer }}} */ @@ -448,9 +601,61 @@ body { border-radius: 0; } + .pageheader { + position: static; + height: auto; + } + + .pageheader .header { + margin-left: 0; + padding-top: 2em; + padding-bottom: 1em; + } + + .pageheader .header > span, + .parentlinks .parentlinksep { + display: inline; + height: auto; + } + + .pageheader a, + .pageheader .parentlinks a { + color: black; + } + + .pageheader, + .parentlinks a, + .parentlinks .parentlinksep + a + .parentlinksep + a { + background: none; + } + + .pageheader .parentlinks { + display: inline; + } + + .pageheader .title, + .parentlinks > a { + position: static; + } + + .parentlinks > a span { + display: inline; + } + + #content h1 { + color: black; + text-shadow: none; + border-bottom: solid #ccc 1px; + } + + #content a:link:after, + #content a:visited:after { + content:" [" attr(href) "] "; + } + #footer { - padding: 0.5em; + margin-top: 2em; + text-align: left; } } /* @media print }}} */ -