X-Git-Url: https://nos-oignons.net/gitweb/website.git/blobdiff_plain/1c17be10ae9f8d7e23cfe9ae4ac2b40c585a1272..ff327c2929ded03426ee7e593db147c578e25c06:/local.css diff --git a/local.css b/local.css index c3c3c90..ba0db98 100644 --- a/local.css +++ b/local.css @@ -77,13 +77,14 @@ thead td { .body-wrapper { max-width: 70em; margin: 0 auto 0 auto; - box-shadow: 0 0 0.6em 0 #333366; - background: white; + box-shadow: 0 0 0.2em 0 #333366; + background: white; } @media screen and (min-width: 45em) { .menu, .main { display: table-cell; + vertical-align: top; } .menu { width: 20%; @@ -95,19 +96,32 @@ thead td { } -header { +.body-wrapper > header { padding: 1em 0; - border-bottom: solid 1px #ccc; + 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; + } } + #logo { display: block; width: 394px; /* same as .pageheader .header:margin-left */ - height: 100px; + 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; + } +} #logo span { display: none; @@ -115,11 +129,14 @@ header { /* {{{ .actions */ .actions { - font-size: 80%; + font-size: 0.8em; text-align: right; } .actions ul { + margin: 0; + padding: 0.5em; height: auto; + list-style-type: none; } .breadcrumb, @@ -127,6 +144,7 @@ header { text-decoration: none; color: #b3b3b3; } +.breadcrumb a:first-child {display: none;} .breadcrumb a:hover { text-decoration: none; color: #57075f; @@ -146,6 +164,11 @@ header { float: right; font-size: 0.9em; } +.translationstatus, +.langstatus {display: none;} +@media screen and (max-width: 400px) { +#otherlanguages {float: none;} +} #otherlanguages, #otherlanguages a { color: #b3b3b3; @@ -157,6 +180,8 @@ header { #otherlanguages ul { padding: 0; + margin: 0; + list-style: none; } #otherlanguages ul li { /*margin-left: 1em;*/ @@ -209,17 +234,33 @@ main { padding: 0.3em 0.5em; text-decoration: none; border: 1px solid #f5f5f5; - color: #a756af; - background: transparent; - font-weight: normal; - font-size: 100%; + color: #a756af; + background: transparent; + font-weight: normal; + font-size: 1em; } .menu a:hover { - color: #57075f; - background: #eeeeee; - text-decoration: none; + color: #57075f; + background: #eeeeee; + text-decoration: none; +} + +.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; +} + +@media screen and (max-width: 45em) { + .js .menu ul {display: none;} + .js .menu select {display: block;} } @@ -239,6 +280,9 @@ main a:hover { main p { margin: 1em 0 1em 0; } +main li p { + margin-top: 0; +} main hr { border: none; @@ -247,15 +291,28 @@ main hr { } main h1 { - font-size: 180%; + font-size: 1.8em; font-weight: bold; + /*text-shadow: 2px 2px 1px #444;*/ + color: #57075F; +} +main h1.title { + margin-top: 0em; + font-size: 2em; color: #ffa430; - text-shadow: 2px 2px 1px #444; +} + +main h2 { + /*color: #ffa430*/ + color: #57075F; +} +main h3 { + color: #57075F; } main h2, main .header { - font-size: 140%; + font-size: 1.4em; font-weight: bold; } @@ -264,7 +321,7 @@ main h2 + p { } main h3 { - font-size: 120%; + font-size: 1.2em; font-weight: bold; margin-bottom: 0; padding-bottom: 0; @@ -310,28 +367,34 @@ main .header a { } main .feedlink a { - text-decoration: none; + text-decoration: none; + /*color: #ffa430;*/ } main .feedlink { - text-align: right; - margin-top: -2.8em; - min-height: 2.8em; + 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: 80%; - color: #57075f !important; + font-size: 0.8em; background: transparent; border: none; } main .feedlink .feedbutton:hover { - color: #57075f !important; background: transparent; text-decoration: underline; } main .footnotes { - font-size: 80%; + font-size: 0.8em; } .half-section { @@ -352,6 +415,16 @@ main .footnotes { text-align: center; } +#bandwidth, #weights {text-align: center;} +#bandwidth svg, #weights svg {text-align: left;} + +/* Tor nodes table */ +.tor-nodes {} +.tor-nodes th { + text-align: left; +} + + /* Paypal donation forms */ .paypal-donation { display: inline-block; @@ -379,7 +452,7 @@ main .footnotes { margin: 2em auto; height: 85px; width: 600px; - background: lightGrey url(assets/progress_bar.png) top left repeat-x; + background: url(assets/progress_bar.png) top left repeat-x; border: 1px solid #ccc; border-bottom: 0; position: relative; @@ -387,7 +460,7 @@ main .footnotes { .progress-bar-wrapper .progress-bar { position: absolute; height: 85px; - background: grey url(assets/progress_bar.png) left -85px repeat-x; + background: url(assets/progress_bar.png) left -85px repeat-x; z-index: 2; /* animate progress bar */ -webkit-animation: progress-bar 1.5s; @@ -395,7 +468,7 @@ main .footnotes { animation: progress-bar 1.5s; } .progress-bar-wrapper .progress-bar-promises { - background: grey url(assets/progress_bar.png) left bottom repeat-x; + background-position: left bottom; z-index: 1; } @@ -512,7 +585,7 @@ main .footnotes { .inlinepage .inlineheader .pagedate { margin-top: 0; - font-size: 80%; + font-size: 0.8em; font-style: normal; color: #666; } @@ -521,12 +594,26 @@ main .footnotes { /* {{{ #footer */ #footer { - margin: 0; - padding: 0.5em 0; - text-align: center; - color: white; - background: #57075f; + 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 > div { margin-top: 1em; } @@ -542,12 +629,12 @@ main .footnotes { } #backlinks { - font-size: 80%; + font-size: 0.8em; margin-top: 0; } #footer #pageinfo div { - font-size: 80%; + font-size: 0.8em; margin-top: 0; margin-bottom: 0; } @@ -620,11 +707,11 @@ main .footnotes { display: inline; } - main h1 { - color: #111; - text-shadow: none; - border-bottom: solid #ccc 1px; - } + main h1 { + color: #111; + text-shadow: none; + border-bottom: solid #ccc 1px; + } main a:link:after, main a:visited:after {