X-Git-Url: https://nos-oignons.net/gitweb/website.git/blobdiff_plain/5b7c8c00f7d34c0760e02aa0265d4197a61cc5db..d85427f7b6087e52edbc3276c203937920c91b1b:/local.css diff --git a/local.css b/local.css index 5d9f932..c1e2a8e 100644 --- a/local.css +++ b/local.css @@ -1,320 +1,624 @@ -/* vim: set ts=4 sts=4 sw=4 isk+=- fen fcl=all fdm=marker fmr={{{,}}} fml=2 : */ +/* vim: set ts=4 sts=4 sw=4 isk+=-,. fen fcl=all fdm=marker fmr={{{,}}} fml=2 : */ + +@font-face { + 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: '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: '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: '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: 'Inconsolata'; + font-style: normal; + font-weight: 400; + src: local('Inconsolata'), local('Inconsolata-Regular'), url(assets/Inconsolata/Inconsolata.otf) format('opentype'); +} + +/* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */ +/* apply a natural box layout model to all elements, but allowing components to change */ +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} + +img, +table { + max-width: 100%; + height: auto; +} + html { - overflow-y: scroll; + /*overflow: auto;*/ } body { margin: 0; padding: 0; - font-size: 9pt; - font-family: sans-serif; - color: #012345; - background: #eeeeaa; + font-family: "Open Sans", sans-serif; + color: #111; + background: #fff url(assets/tile.png) fixed; } -a { - color: #bb2112; - text-decoration: none; +code, +pre { + font-family: "Inconsolata", monospace; + font-size-adjust: 0.535; } -a:hover { text-decoration: underline; } -.page { - overflow: hidden; - min-width: 50em; - max-width: 90em; - margin: 0 auto; - background: #f5f5f5; - -webkit-box-shadow: 0 0 0.5em 0 #888888; - -moz-box-shadow: 0 0 0.5em 0 #888888; - box-shadow: 0 0 0.5em 0 #888888; +dt { + font-weight: bold; } -/* {{{ .pageheader */ -.pageheader { - position: relative; - min-height: 95px; - padding: 0 1em; - color: #eeeeaa; - background: #012345; - -webkit-box-shadow: 0 0 0.5em 0 #888888, inset 0 0 4em 0 rgba(240, 240, 170, 0.3); - -moz-box-shadow: 0 0 0.5em 0 #888888, inset 0 0 4em 0 rgba(240, 240, 170, 0.3); - box-shadow: 0 0 0.5em 0 #888888, inset 0 0 4em 0 rgba(240, 240, 170, 0.3); +thead td { + text-decoration: underline; } -.pageheader .header { - font-size: 9pt; -} -.pageheader .header > span { - display: block; - margin: auto; - min-width: 30em; - padding: 1em 2em; +.body-wrapper { + max-width: 70em; + margin: 0 auto 0 auto; + box-shadow: 0 0 0.2em 0 #333366; + background: white; } - -.pageheader .parentlinks { - display: block; - font-size: 8pt; - min-height: 1.5em; - margin-top: 0.75em; +@media screen and (min-width: 45em) { + .menu, + .main { + display: table-cell; + vertical-align: top; + } + .menu { + width: 20%; + max-width: 15em; + min-width: 11em; + } + .main { + } } -.pageheader a, -.pageheader .parentlinks a { - color: #eeeeaa; - text-decoration: none; + +.body-wrapper > header { + padding: 1em 0; + border-bottom: solid 1px #ccc; +} +@media screen and (min-width: 390px) { + .body-wrapper > header { + background: url("assets/filet.png") no-repeat scroll 99% 105px #FFF; + } } -.pageheader a:hover { - text-decoration: underline; + +#logo { + display: block; + width: 394px; /* same as .pageheader .header:margin-left */ + height: 104px; + max-width: 100%; + background: url(assets/logo-nos-oignons-blanc.png) no-repeat top left; + background-size: 100%; +} +@media screen and (max-width: 390px) { + #logo { + background-image: url(assets/logo-nos-oignons-blanc-small.png); + background-position: left center; + height: 100px; + } } -.pageheader .title { - line-height: 1.5em; - font-size: 16pt; +#logo span { + display: none; } /* {{{ .actions */ .actions { + font-size: 0.8em; text-align: right; } - -.actions ul li { - background: #eeeeaa; - border-radius: 0.8em 0.8em 0 0; +.actions ul { + margin: 0; + padding: 0.5em; + height: auto; + list-style-type: none; } -.actions ul li a { - padding: 0 0.8em; - color: black; +.breadcrumb, +.breadcrumb a { + text-decoration: none; + color: #b3b3b3; +} +.breadcrumb a:first-child {display: none;} +.breadcrumb a:hover { + text-decoration: none; + color: #57075f; } +.breadcrumb a + a:before { + content:"▸"; + display: inline-block; + vertical-align: top; + margin: -1px 0.5em 0; + color: #b3b3b3; +} +.breadcrumb a + a:hover:before {} + /* .actions }}} */ /* {{{ #otherlanguages */ +#otherlanguages { + float: right; + font-size: 0.9em; +} +.translationstatus, +.langstatus {display: none;} +@media screen and (max-width: 400px) { +#otherlanguages {float: none;} +} #otherlanguages, -#otherlanguages ul li a { - color: #012345; - background: white; +#otherlanguages a { + color: #b3b3b3; + /*background: white;*/ +} +#otherlanguages a:hover { + color: #57075f; } +#otherlanguages ul { + padding: 0; + margin: 0; + list-style: none; +} #otherlanguages ul li { - margin-left: 1em; + /*margin-left: 1em;*/ } - -.pageheader #otherlanguages { - /*border: none;*/ - border-bottom: 1px dotted #012345; +#otherlanguages .langstatus { + /*display: none;*/ } -/* #otherlanguages }}} */ -/* .pageheader }}} */ -.feedlink { - display: none; + +main { + background: white url(assets/background.png) no-repeat bottom center; + background-size: 50%; + color: #111; } -#pagebody { - position: relative; - min-width: 30em; - min-height: 50em; - margin: 0 16em 0 0; - padding: 1em 2em; - background: white; - z-index: 110; - -webkit-box-shadow:0 0 0.5em 0 #bbbbbb, inset 0 0 10em #fafafa; - -moz-box-shadow:0 0 0.5em 0 #bbbbbb, inset 0 0 10em #fafafa; - box-shadow:0 0 0.5em 0 #bbbbbb, inset 0 0 10em #fafafa; -} - -/* {{{ .sidebar */ -.sidebar { - overflow: hidden; - width: 16em; - margin: 5em 0 0 0; - padding: 0; + +.menu { + padding: 1em 0; border: none; - z-index: 100; + background: #f5f5f5; +} +@media screen and (max-width: 45em) { + .menu { + border-bottom: solid 1px #ccc; + } } -.sidebar ul { +.menu ul { margin: 0; +} + +.menu ul { padding: 0; list-style: none; - background: #f5f5f5; + background: transparent; } -.sidebar li { +.menu li { + text-align: left; } -.sidebar ul li .selflink { - color: black; - background: white; +.menu ul li .selflink { + color: #57075f; font-weight: bold; - border: 1px dotted #012345; - border-left: none; } -.sidebar ul li > span, -.sidebar ul li > a { +.menu ul li > span, +.menu ul li > a { display: block; - padding: 0.5em; - font-size: 11pt; - font-weight: bold; + padding: 0.3em 0.5em; text-decoration: none; border: 1px solid #f5f5f5; - border-left: none; - color: #aaaaaa; - background: transparent; + color: #a756af; + background: transparent; + font-weight: normal; + font-size: 1em; +} + + +.menu a:hover { + color: #57075f; + background: #eeeeee; + text-decoration: none; } -.sidebar a:hover { - color: #ffffff; - background: #012345; - border: 1px solid #012345; - border-left: none; - -webkit-box-shadow: 0 0 0.5em 0 #888888, inset 0 0 1em 0 rgba(240, 240, 170, 0.3); - -moz-box-shadow: 0 0 0.5em 0 #888888, inset 0 0 1em 0 rgba(240, 240, 170, 0.3); - box-shadow: 0 0 0.5em 0 #888888, inset 0 0 1em 0 rgba(240, 240, 170, 0.3); +.menu select { + margin: 0.5em 2%; + width: 94%; + max-width: 94%; + background: #fff; + border: 1px solid #ccc; + color: #57075F; + font-size: 1.2em; + display: none; } -/* .sidebar }}} */ -/* {{{ #content */ -#content { - line-height: 1.5em; - overflow: auto; + +@media screen and (max-width: 45em) { + .js .menu ul {display: none;} + .js .menu select {display: block;} +} + + +main { + padding: 1em; } -#content p { - text-align: justify; +main a { + color: #57075f; + text-decoration: underline; +} + +main a:hover { + text-decoration: underline; +} + +main p { margin: 1em 0 1em 0; } -#content hr { +main hr { border: none; - border-bottom: dotted 0.4em #bbb; + border-bottom: dotted 2px #bbbbbb; + margin: 2em auto; } -#content h1 { - color:#003300; - font-size:16pt; - font-weight:normal; - line-height:1.5em; - margin-top:2em; - border-bottom:1px solid #bbb; +main h1 { + font-size: 1.8em; + font-weight: bold; + /*text-shadow: 2px 2px 1px #444;*/ + color: #57075F; } - -#content h1:first-child { - margin-top:0.5em; +main h1.title { + margin-top: 0em; + font-size: 2em; + color: #ffa430; } -#content h2 { - font-size:12pt; - color:#555; - margin-top:1.5em; - margin-bottom:0; +main h2 { + /*color: #ffa430*/ + color: #57075F; +} +main h3 { + color: #57075F; } -#content h2 + p { - margin-top:0.75em; +main h2, +main .header { + font-size: 1.4em; + font-weight: bold; } -#content h3 { - font-size:10pt; - color:#888; - margin-bottom:0; - padding-bottom:0; +main h2 + p { + margin-top: 0.75em; } -#content h3 + p { - margin-top:0.5em; +main h3 { + font-size: 1.2em; + font-weight: bold; + margin-bottom: 0; + padding-bottom: 0; } -#content table { - border-top:1px solid #aaa; - border-bottom:1px solid #aaa; - border-collapse:collapse; +main h3 + p { + margin-top: 0.5em; +} +h2 sup, +h3 sup { + font-weight: normal; } -#content table th { - background:#fafafa; - padding:.1em .5em; - border-bottom:1px solid #aaa; - color:#555; +main blockquote { + border-left: 2px solid #A756AF; + margin: 0.5em 0; + padding: 0.5em 0 0.5em 1em; } +main blockquote p {margin: 0;} +main blockquote p + p {margin-top: 1em;} -#content table td { - padding:.1em .5em; - border-top:1px solid #ccc; + +main table { + border-top: solid 1px #aaa; + border-bottom: solid 1px #aaa; + border-collapse: collapse; } -#content .img_center { - display: block; - margin-left: auto; - margin-right: auto; +main table th { + background: #fafafa; + padding: 0.1em 0.5em; + border-bottom: solid 1px #aaaaaa; + color: #555555; } -#content .img_topleft { - float:left; - margin-right:1em; - margin-bottom:1em; +main table td { + padding: 0.1em 0.5em; + border-top: solid 1px #ccc; } -#content .img_topright { - float:right; - margin-left:1em; - margin-bottom:1em; +main .header a { + text-decoration: none; } -#content #presentation { - float:left; - width:50%; +main .feedlink a { + text-decoration: none; + /*color: #ffa430;*/ } -#content #actus { - float:left; - width:50%; +main .feedlink { + float: right; + text-align: left; + margin-top: -3.5em; +} +@media screen and (max-width: 400px) { + main .feedlink { + float: none; + margin-top: -2em; + margin-bottom: 2em; + } +} +main .feedlink .feedbutton { + font-size: 0.8em; + background: transparent; + border: none; +} +main .feedlink .feedbutton:hover { + background: transparent; + text-decoration: underline; } -/* #content }}} */ -#pagebody .archivepagelist { - margin:0.1em 0; - padding:0; - text-align:left; +main .footnotes { + font-size: 0.8em; +} + +.half-section { + display: inline-block; + vertical-align: top; + width: 49.5%; +} + +/* main }}} */ + + +.graph { + display: inline-block; + vertical-align: top; + width: 45%; + margin: 1em 1%; + min-width: 20em; + text-align: center; +} + +#bandwidth {text-align: center;} +#bandwidth svg {text-align: left;} + +/* Tor nodes table */ +.tor-nodes {} +.tor-nodes th { + text-align: left; +} + + +/* Paypal donation forms */ +.paypal-donation { + display: inline-block; + vertical-align: top; + width:45%; + padding-right: 4%; + min-width: 20em; +} +.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: 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: 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-position: left bottom; + 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; } -#pagebody .archivepagelist .date { - font-size:90%; - font-family:monospace; - vertical-align:middle; +.inlinepage .header { + border-bottom: solid #ccc 1px; } -#pagebody .feedbutton { - margin-top:0; - float:right; +.inlinepage .inlineheader .pagedate { + margin-top: 0; + font-size: 0.8em; + font-style: normal; + color: #666; } +/* .inlinepage }}} */ + /* {{{ #footer */ #footer { - position: relative; - z-index: 105; - margin: 0; - padding: 0; - color: white; - background: #012345; - text-align: center; - -webkit-box-shadow: 0 0 0.5em 0 #888888, inset 0 0 4em 0 rgba(240, 240, 170, 0.3); - -moz-box-shadow: 0 0 0.5em 0 #888888, inset 0 0 4em 0 rgba(240, 240, 170, 0.3); - box-shadow: 0 0 0.5em 0 #888888, inset 0 0 4em 0 rgba(240, 240, 170, 0.3); + margin: 0; + padding: 0.5em 0; + text-align: center; + color: white; + background: #57075f; + font-size: 0.85em; +} +@media screen and (max-width: 45em) { + #footer { + text-align: left; + padding: 0.5em 1em; + font-size: 0.8em; + } +} +@media screen and (max-width: 480px) { + #footer .pagecopyright span { + display: block; + } } -#footer #pageinfo { - position: relative; - min-width: 30em; - margin: auto; - padding: 0.1em 2em; - border-top: none; +#footer > div { + margin-top: 1em; } + #footer a { color: white; + text-decoration: none; } #footer a:hover { @@ -322,140 +626,98 @@ a:hover { text-decoration: underline; } } #backlinks { - font-size:8pt; - margin-top:0; + font-size: 0.8em; + margin-top: 0; } #footer #pageinfo div { - font-size:8pt; - margin-top:0.5em; - margin-bottom:0.5em; + font-size: 0.8em; + margin-top: 0; + margin-bottom: 0; } /* #footer }}} */ -/* - * Pour l'impression - */ +/* {{{ @media print */ @media print { - #gresille_links, - .sidebar { display:none; } + .menu, + .actions, + .feedlink, + #backlinks, + #otherlanguages { + display: none; + } - #header, #footer, #footer #pageinfo, - .pageheader, - #footer .pagefooter, .page, + .pageheader, #pagebody { - margin:0; - padding:0; - border:none; - box-shadow:none; - -moz-box-shadow:none; - -webkit-box-shadow:none; + margin: 0; + padding: 0; + border: none; + box-shadow: none; } - - #footer { margin-top:2em; padding-top:0em; border-top:1px solid black; } - .pageheader { padding-left:240px; } - .pageheader { margin-bottom:4em; } - - .pageheader .title , - .pageheader .parentlinks a , - .pageheader a { - text-shadow:none; - -moz-text-shadow:none; - -webkit-text-shadow:none; + .page, + .pageheader { + border-radius: 0; } -} -#content p.news { - margin-top:0.75em; - margin-bottom:0.75em; - line-height:1.3em; - text-align:left; -} - -#content p.news a tt { - display:block; - float:left; - font-size:8pt; - color:#aaa; - margin-right:0.75em; - margin-bottom:0.75em; -} -#content p.news a { - display:block; -} - - -/* - * Index - */ - -[id="index.actus"] { - float:left; -} - -[id="index.evts"] { - float:right; -} -[id="index.evts"], -[id="index.actus"] { - width:49%; -} - -[id="publications.pratiques"] { - float:left; -} - -[id="publications.reflexions"] { - float:right; -} -[id="publications.reflexions"], -[id="publications.pratiques"] { - width:49%; -} + .pageheader { + position: static; + height: auto; + } -/* - * Plugin calendar - */ + .pageheader .header { + margin-left: 0; + padding-top: 2em; + padding-bottom: 1em; + } -.calendar { - color:#aaa; - font-size:8pt; - margin-top:1em; - margin-bottom:1em; -} + .pageheader .header > span, + .parentlinks .parentlinksep { + display: inline; + height: auto; + } -.calendar table td { -} + .pageheader a, + .pageheader .parentlinks a { + color: #111; + } -.calendar .selflink { - color:#444444; -} + .pageheader, + .parentlinks a, + .parentlinks .parentlinksep + a + .parentlinksep + a { + background: none; + } -.year-calendar-subhead { - visibility: hidden; -} + .pageheader .parentlinks { + display: inline; + } + .pageheader .title, + .parentlinks > a { + position: static; + } -.pageheader form { - position:absolute; - right:2em; - bottom:2em; -} + .parentlinks > a span { + display: inline; + } + main h1 { + color: #111; + text-shadow: none; + border-bottom: solid #ccc 1px; + } -input#searchbox { - border:1px solid #465; - border-radius:0.25em; - -moz-border-radius:0.25em; - -webkit-border-radius:0.25em; - background:url("images/search-bg.png") no-repeat 100% 50% #8A9; - padding-left:0.4em; -} + main a:link:after, + main a:visited:after { + content:" [" attr(href) "] "; + } -.footnotes { - font-size: smaller; + #footer { + margin-top: 2em; + text-align: left; + } } +/* @media print }}} */