slitaz-forge diff pkgs/style/slitaz.css @ rev 709
boot: add mypizza.slitaz.org link
author | Pascal Bellard <pascal.bellard@slitaz.org> |
---|---|
date | Sun Dec 15 17:55:16 2019 +0100 (2019-12-15) |
parents | c890b7f0723e |
children |
line diff
1.1 --- a/pkgs/style/slitaz.css Sun Feb 16 16:23:27 2014 +0100 1.2 +++ b/pkgs/style/slitaz.css Sun Dec 15 17:55:16 2019 +0100 1.3 @@ -1,374 +1,488 @@ 1.4 /* 1.5 - CSS style for SliTaz Network - (C) 2014 SliTaz GNU/Linux 1.6 + CSS style for SliTaz Network - (C) 2015 SliTaz GNU/Linux 1.7 */ 1.8 1.9 html { 1.10 - min-height: 102%; 1.11 + min-height: 102%; 1.12 +} 1.13 +body { 1.14 + height: 100%; 1.15 + margin: 0; 1.16 + box-sizing: border-box; 1.17 + color: #222; 1.18 + background: #FFF; 1.19 + font-size: 90%; 1.20 + font-family: Arimo, Ubuntu, "Droid Sans", "DejaVu Sans", FreeSans, "Liberation Sans", sans-serif; 1.21 + -moz-hyphens: auto; -epub-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; 1.22 +} 1.23 +code, pre, samp, kbd { 1.24 + color: #000; 1.25 + background-color: rgba(0, 0, 0, .05); 1.26 + font-size: 0.9rem; 1.27 +} 1.28 +a { 1.29 + text-decoration: none; 1.30 + color: #215090; 1.31 +} 1.32 +a:hover { 1.33 + text-decoration: underline; 1.34 +} 1.35 +img { 1.36 + border: 0 none; 1.37 + vertical-align: middle; 1.38 +} 1.39 +.large { 1.40 + overflow-x: auto; 1.41 +} 1.42 +h2 { 1.43 + color: #444; 1.44 + font-size: 22px; 1.45 + font-weight: 300; 1.46 + margin: 18px auto 6px; 1.47 + border-bottom: 1px solid #CCC; 1.48 +} 1.49 +h3 { 1.50 + color: #193; 1.51 + font-size: 19px; 1.52 + font-weight: 300; 1.53 + margin: 12px auto 0; 1.54 + line-height: 1; 1.55 +} 1.56 +pre { 1.57 + background-color: #F8F8F8; 1.58 + border: 1px solid #DDD; 1.59 + padding: 10px; 1.60 + white-space: pre-wrap; 1.61 + overflow-x: auto; 1.62 + line-height: 1; 1.63 +} 1.64 +.hard { 1.65 + white-space: pre; 1.66 + resize: both; 1.67 +} 1.68 +.scroll { 1.69 + max-height: 40ex; 1.70 } 1.71 1.72 -body { 1.73 - background: #ffffff; 1.74 - color: black; 1.75 - font: 13px sans-serif, vernada, arial; 1.76 - margin: 0; 1.77 - min-width: 780px; 1.78 - height: 100%; 1.79 + 1.80 + 1.81 + 1.82 +/* Page header */ 1.83 + 1.84 +body > header { 1.85 + display: block; 1.86 + background: #444; 1.87 + text-align: justify; 1.88 + line-height: 0; 1.89 + box-shadow: 0 -8px 8px #333 inset; 1.90 } 1.91 - 1.92 -a { text-decoration: underline; color: #215090; } 1.93 -a:hover { text-decoration: none; color: blue; } 1.94 -img { border: 0pt none; vertical-align: middle; } 1.95 -h2 { color: #444; } 1.96 -h3 { color: #666; font-size: 140%; } 1.97 -h4 { color: #888; font-size: 120%; } 1.98 -pre { 1.99 - background-color: #f8f8f8; 1.100 - border: 1px solid #ddd; 1.101 - padding: 10px; 1.102 +h1 { 1.103 + display: inline-block; 1.104 + margin: auto 0; 1.105 + height: 40px; 1.106 + white-space: nowrap; 1.107 + vertical-align: middle; 1.108 } 1.109 - 1.110 -/* Header */ 1.111 - 1.112 -#header { 1.113 - height: 40px; 1.114 - background: #222; 1.115 +h1::before { 1.116 + display: inline-block; 1.117 + content: url(logo.png); 1.118 + vertical-align: middle; 1.119 } 1.120 - 1.121 -#header h1 { 1.122 - margin: 0; 1.123 - padding: 8px 0 0 42px; 1.124 - width: 250px; 1.125 -} 1.126 - 1.127 -#header h1 a { 1.128 - color: white; 1.129 - text-decoration: none; 1.130 +h1 a { 1.131 + color: #FFF; 1.132 font-size: 20px; 1.133 font-style: italic; 1.134 } 1.135 - 1.136 -#header h1 a:hover, #network a:hover, #network span { 1.137 - color: #afafaf; 1.138 +body > header::before, body > header::after, .block > div::before, .block > div::after { 1.139 + display: inline-block; 1.140 + width: 100%; 1.141 + height: 0; 1.142 + visibility: hidden; 1.143 + overflow: hidden; 1.144 + content: ''; 1.145 +} 1.146 +.network { 1.147 + display: inline-block; 1.148 + text-align: left; 1.149 + vertical-align: middle; 1.150 + font-size: 12px; 1.151 + line-height: normal; 1.152 + color: #999; 1.153 +} 1.154 +.network a { 1.155 + display: inline-block; 1.156 + padding: 0 6px; 1.157 + vertical-align: middle; 1.158 + color: #FFF; 1.159 +} 1.160 +.home::before { 1.161 + content: url(home.png); 1.162 } 1.163 1.164 -/* Logo */ 1.165 1.166 -#logo { 1.167 - background: url(images/logo.png) no-repeat left; 1.168 - position: absolute; 1.169 - float: left; 1.170 - left: 0px; 1.171 - top: 0px; 1.172 - width: 40px; 1.173 - height: 40px; 1.174 + 1.175 + 1.176 +/* Info block and navigation */ 1.177 + 1.178 +.block { 1.179 + padding: 6px; 1.180 + background: #CCC; 1.181 + border-bottom: 1px solid #AAA; 1.182 +} 1.183 +.block > div { 1.184 + max-width: 700px; 1.185 + margin: 0 auto; 1.186 + text-align: justify; 1.187 + line-height: 0; 1.188 +} 1.189 +.block_info { 1.190 + padding: 6px 12px 0 0; 1.191 + line-height: normal; 1.192 + width: 60%; 1.193 +} 1.194 +.block_info input { 1.195 + width: 100%; 1.196 +} 1.197 +.block header { 1.198 + font-weight: 400; 1.199 + font-size: 18px; 1.200 + line-height: 18px; 1.201 +} 1.202 +.block_info p { 1.203 + margin: 7px 0; 1.204 + padding: 0; 1.205 + text-align: justify; 1.206 +} 1.207 +nav { 1.208 + background: #666; 1.209 + color: #FFF; 1.210 + padding: 6px; 1.211 + line-height: normal; 1.212 +} 1.213 +nav a { 1.214 + white-space: nowrap; 1.215 + color: #FFF; 1.216 +} 1.217 +nav header img { 1.218 + margin: 0 4px 0 0; 1.219 + padding: 0; 1.220 +} 1.221 +nav, .block_info { 1.222 + display: inline-block; 1.223 + vertical-align: top; 1.224 } 1.225 1.226 -/* SliTaz Network */ 1.227 1.228 -#network { 1.229 - float: right; 1.230 - padding: 14px 5px 0; 1.231 - font-size: 12px; 1.232 + 1.233 + 1.234 +/* Languages selector */ 1.235 + 1.236 +.lang { 1.237 + margin: 0; 1.238 + text-align: right; 1.239 + padding: 6px; 1.240 + font-size: 0.9rem; 1.241 +} 1.242 +.lang a { 1.243 + padding: 0 2px; 1.244 +} 1.245 +[dir="rtl"] .lang { 1.246 + text-align: left; 1.247 } 1.248 1.249 -#network a, #network span { padding: 0 4px; } 1.250 -#network span { font-weight: bold; } 1.251 1.252 -/* Block */ 1.253 1.254 -#block { 1.255 - min-height: 180px; 1.256 - background: #ccc; 1.257 - padding: 20px 10% 0px; 1.258 - text-align: center; 1.259 - color: #222; 1.260 - border-bottom: 1px solid #afafaf; 1.261 +/* Main content block */ 1.262 + 1.263 +main { 1.264 + display: block; 1.265 + max-width: 700px; 1.266 + margin: 6px auto; 1.267 + padding: 0 6px; 1.268 + text-align: justify; 1.269 + line-height: 1.5rem; 1.270 +} 1.271 +p, ul, ol, h2, h3, pre, table { 1.272 + max-width: 700px; 1.273 +} 1.274 +p, ul, ol, pre, table { 1.275 + margin: 6px auto; 1.276 +} 1.277 +p, ul, ol { 1.278 + display: block; 1.279 +} 1.280 +ul, ol, dd { 1.281 + padding: 0 2ex 0 4ex; 1.282 +} 1.283 +ul ul, ol ol, ul ol, ol ul { 1.284 + margin: 0; 1.285 } 1.286 1.287 -#block_info { 1.288 - text-align: justify; 1.289 - width: 48%; 1.290 - padding: 10px 10px 0 0; 1.291 + 1.292 + 1.293 + 1.294 +/* Countries flags */ 1.295 + 1.296 +.br::before { content: url(BR.png); } 1.297 +.ch::before { content: url(CH.png); } 1.298 +.cn::before { content: url(CN.png); } 1.299 +.de::before { content: url(DE.png); } 1.300 +.es::before { content: url(ES.png); } 1.301 +.fr::before { content: url(FR.png); } 1.302 +.ir::before { content: url(IR.png); } 1.303 +.it::before { content: url(IT.png); } 1.304 +.pl::before { content: url(PL.png); } 1.305 +.ru::before { content: url(RU.png); } 1.306 +.se::before { content: url(SE.png); } 1.307 +.tw::before { content: url(TW.png); } 1.308 +.ua::before { content: url(UA.png); } 1.309 +.us::before { content: url(US.png); } 1.310 + 1.311 + 1.312 + 1.313 + 1.314 +/* SliTaz mirrors list */ 1.315 + 1.316 +.mirrors { 1.317 + padding: 6px; 1.318 + text-align: center; 1.319 + background: #F1F1F1; 1.320 + border-bottom: 1px solid #DDD; 1.321 +} 1.322 +.mirrors a, .mirrors a::before { 1.323 + display: inline-block; 1.324 + padding: 0 3px; 1.325 +} 1.326 +.mirrors a::before { 1.327 + vertical-align: -4px; 1.328 } 1.329 1.330 -#block a, #network a { 1.331 - color: #fff; 1.332 - font-weight: bold; 1.333 - text-decoration: none; 1.334 + 1.335 + 1.336 + 1.337 +/* Table */ 1.338 + 1.339 +table { 1.340 + background-color: #F8F8F8; 1.341 + border: 1px solid #BBB; 1.342 + width: 100%; 1.343 + margin-bottom: 20px; 1.344 + padding: 0; 1.345 + border-spacing: 0; 1.346 + line-height: 1; 1.347 +} 1.348 +caption { 1.349 + caption-side: bottom; 1.350 + text-align: left; 1.351 + padding: 6px 0; 1.352 +} 1.353 +thead tr{ 1.354 + background-color: #DDD; 1.355 +} 1.356 +thead th { 1.357 + border-bottom: 1px solid #BBB; 1.358 +} 1.359 +td { 1.360 + text-align: left; 1.361 +} 1.362 +td, th { 1.363 + padding: 4px; 1.364 +} 1.365 +/* Zebra stripes */ 1.366 +tbody tr:nth-child(odd) { 1.367 + background-color: #FFF; 1.368 +} 1.369 +tbody tr:nth-child(even) { 1.370 + background-color: #EEE; 1.371 +} 1.372 +/* Mirror file list table */ 1.373 +.list td:nth-child(1) { 1.374 + vertical-align: middle; 1.375 +} 1.376 +.list td:nth-child(1)::before { 1.377 + display: inline-block; 1.378 + vertical-align: middle; 1.379 + padding-right: 3px; 1.380 +} 1.381 +.list th:nth-child(3), .list td:nth-child(3) { 1.382 + text-align: right; 1.383 +} 1.384 +.first { 1.385 + width: 1%; 1.386 + white-space: nowrap; 1.387 } 1.388 1.389 -#block h4 { 1.390 - color: #222; 1.391 - margin: 0px; 1.392 - font-weight: bold; 1.393 - font-size: 110%; 1.394 -} 1.395 1.396 -#block_info p { margin: 6px 0; padding: 0 12px 0 0; } 1.397 -#block_info a { font-weight: normal; color: #215090; } 1.398 -#block_info a:hover { text-decoration: underline; } 1.399 -#block ul { list-style-type: square; } 1.400 -#block_nav a:hover { color: #afafaf; } 1.401 1.402 -/* Navigation */ 1.403 - 1.404 -#block_nav { 1.405 - background: #666; 1.406 - padding: 10px 10px 20px; 1.407 - text-align: justify; 1.408 - width: 48%; 1.409 - float: right; 1.410 -} 1.411 - 1.412 -#block_nav ul { 1.413 - list-style-type: none; 1.414 - margin: 6px 0; 1.415 - padding: 0; 1.416 -} 1.417 - 1.418 -#block_nav h4 img { 1.419 - margin: 0 4px 0 0; 1.420 - padding: 0; 1.421 -} 1.422 - 1.423 -/* Languages */ 1.424 - 1.425 -#lang { 1.426 - padding: 6px; 1.427 - font-size: 11px; 1.428 - position: absolute; 1.429 - right: 0px; 1.430 -} 1.431 - 1.432 -#lang a { 1.433 - text-decoration: none; 1.434 - padding: 0 2px; 1.435 -} 1.436 - 1.437 -#lang a:hover { 1.438 - text-decoration: underline; 1.439 -} 1.440 - 1.441 -.box #lang { text-align: center; position: relative; 1.442 - font-size: 13px; } /* for /i18n page */ 1.443 - 1.444 -/* Content */ 1.445 - 1.446 -#content { 1.447 - padding: 30px 80px; 1.448 - text-align: justify; 1.449 -} 1.450 +/* Misc blocks */ 1.451 1.452 .news li { 1.453 list-style-type: square; 1.454 border-bottom: 1px dotted #BEBEBE; 1.455 margin-left: -25px; 1.456 - padding: 4px 0px 4px 0px; 1.457 + padding: 4px 0; 1.458 } 1.459 - 1.460 -.news a, .feed-grid a { text-decoration: none; } 1.461 -.news p a { text-decoration: underline; } 1.462 -.news p a:hover { text-decoration: none; } 1.463 -#twitter { margin: 20px 0; text-align: center; } 1.464 -#gallery { text-align: center; } 1.465 - 1.466 -#sponsor { 1.467 +.twitter { 1.468 + margin: 20px 0; 1.469 +} 1.470 +.gallery { 1.471 + text-align: center; 1.472 +} 1.473 +.sponsor { 1.474 font-size: 90%; 1.475 - background-color: #fbfbfb; 1.476 - border: 2px solid #ddd; 1.477 + background-color: #FBFBFB; 1.478 + border: 2px solid #DDD; 1.479 width: 200px; 1.480 height: 160px; 1.481 float: right; 1.482 text-align: center; 1.483 - margin: 10px 0px 20px 20px; 1.484 + margin: 10px 0 20px 20px; 1.485 +} 1.486 +.right_box { 1.487 + width: 48%; 1.488 + float: right; 1.489 +} 1.490 +.left_box { 1.491 + width: 48%; 1.492 + float: left; 1.493 +} 1.494 +.box { 1.495 + margin: 6px 0; 1.496 + padding: 6px; 1.497 + background: #F4F4F4; 1.498 + border: 1px solid #DDD; 1.499 +} 1.500 +.searchbox { 1.501 + margin: 20px 80px; 1.502 + padding: 12px; 1.503 + background: #F8F8F8; 1.504 + text-align: center; 1.505 + border: 1px solid #DDD; 1.506 +} 1.507 +.activity { 1.508 + margin: 0 0 20px; 1.509 + background: #EFEFEF; 1.510 + padding: 5px 2px 0; 1.511 + border: 1px solid #DDD; 1.512 +} 1.513 +.activity div { 1.514 + padding: 5px 10px; 1.515 + background: #FFF; 1.516 + margin-top: 5px; 1.517 +} 1.518 +.activity p { 1.519 + margin: 0; 1.520 + padding: 5px 10px; 1.521 + font-weight: 700; 1.522 +} 1.523 +.activity ul { 1.524 + list-style-type: none; 1.525 + margin: 4px 0; 1.526 + padding: 0 4px; 1.527 + line-height: 150%; 1.528 +} 1.529 +.activity_more { 1.530 + text-align: right; 1.531 +} 1.532 +.activity_more a { 1.533 + font-weight: 400; 1.534 + color: #000; 1.535 + padding: 0 4px; 1.536 +} 1.537 +.activity span, .news span { 1.538 + color: #666; 1.539 + font-size: 11px; 1.540 + font-weight: 400; 1.541 } 1.542 1.543 -/* Classes */ 1.544 1.545 -.right_box { width: 48%; float: right; } 1.546 -.left_box { width: 48%; float: left; } 1.547 - 1.548 -.box { 1.549 - margin: 20px 60px; 1.550 - padding: 12px; 1.551 - background: #efefef; 1.552 - border: 1px solid #ddd; 1.553 -} 1.554 - 1.555 -.box-dl, .box-up { 1.556 - margin: 20px 60px; 1.557 - padding: 12px 12px 12px 66px; 1.558 - min-height: 48px; 1.559 - border: 1px solid #ddd; 1.560 - vertical-align: middle; 1.561 -} 1.562 -.box-dl { 1.563 - background: url("/images/download.png") no-repeat 12px 12px #efefef; 1.564 -} 1.565 -.box-up { 1.566 - background: url("/images/update.png") no-repeat center left #efefef; 1.567 -} 1.568 -.box-dl p { color: #456; } 1.569 - 1.570 -.searchbox { 1.571 - margin: 20px 80px; 1.572 - padding: 12px; 1.573 - background: #f8f8f8; 1.574 - text-align: center; 1.575 - border: 1px solid #ddd; 1.576 -} 1.577 - 1.578 -/* Activity Box */ 1.579 - 1.580 -.activity { 1.581 - margin: 0 0 20px; 1.582 - background: #efefef; 1.583 - padding: 5px 2px 0; 1.584 - border: 1px solid #ddd; 1.585 -} 1.586 -.activity div { padding: 5px 10px; background: #fff; margin-top: 5px; } 1.587 -.activity p { margin: 0; padding: 5px 10px; font-weight: bold; } 1.588 -.activity a { text-decoration: none; } 1.589 -.activity ul { list-style-type: none; 1.590 - margin: 4px 0; padding: 0 4px; line-height: 150%; } 1.591 -.activity_more { text-align: right; } 1.592 -.activity_more a { font-weight: normal; color: #000; padding: 0 4px; } 1.593 -.activity_more a:hover { text-decoration: underline; } 1.594 - 1.595 -.activity span, .news span { 1.596 - color: #666; 1.597 - font-size: 11px; 1.598 - font-weight: normal; 1.599 -} 1.600 - 1.601 -/* Button */ 1.602 - 1.603 -#block_info .button a { 1.604 - background-color: #666; 1.605 - color: #ffffff; 1.606 - margin: 0px 4px; 1.607 - padding: 6px 10px; 1.608 - font-size: 12px; 1.609 - text-decoration: none; 1.610 - font-weight: bold; 1.611 -} 1.612 -#block_info .button a:hover, input[type=submit]:hover { 1.613 - background-color: #444; 1.614 - color: #ffffff; 1.615 -} 1.616 1.617 /* Round corner */ 1.618 1.619 -#block_nav, pre, .box, .box-dl, .box-up, .searchbox, .button a, #twitter, .activity, 1.620 -.activity div, #sponsor { 1.621 +nav, pre, textarea, fieldset, .box, .searchbox, .activity, .activity div, .twitter, .sponsor { 1.622 -moz-border-radius: 4px; 1.623 -webkit-border-radius: 4px; 1.624 border-radius: 4px; 1.625 } 1.626 - 1.627 -/* Form */ 1.628 - 1.629 -input[type=submit] { 1.630 - border: 1px solid #666; 1.631 - background-color: #666; 1.632 - color: white; 1.633 - font-weight: bold; 1.634 - cursor: pointer; 1.635 - padding: 4px 10px; 1.636 - font-size: 14px; 1.637 - margin-left: -5px; 1.638 - -webkit-border-top-right-radius: 4px; 1.639 - -webkit-border-bottom-right-radius: 4px; 1.640 - -moz-border-radius-topright: 4px; 1.641 - -moz-border-radius-bottomright: 4px; 1.642 - border-top-right-radius: 4px; 1.643 - border-bottom-right-radius: 4px; 1.644 +fieldset { 1.645 + border: 1px solid #999; 1.646 + max-width: 100%; 1.647 } 1.648 1.649 -input[type=submit]:hover { background-color: #444; } 1.650 1.651 -input[type=text] { 1.652 - border: 1px solid #333333; 1.653 - padding: 4px; 1.654 - height: 17px; 1.655 - width: 100%; 1.656 - -webkit-border-top-left-radius: 4px; 1.657 - -webkit-border-bottom-left-radius: 4px; 1.658 - -moz-border-radius-topleft: 4px; 1.659 - -moz-border-radius-bottomleft: 4px; 1.660 - border-top-left-radius: 4px; 1.661 - border-bottom-left-radius: 4px; 1.662 + 1.663 + 1.664 +/* Page footer */ 1.665 + 1.666 +body > footer { 1.667 + background: #F1F1F1; 1.668 + text-align: center; 1.669 + border-top: 1px solid #CCC; 1.670 + padding: 6px; 1.671 + color: #666; 1.672 + clear: both; 1.673 + box-shadow: 0 4px 8px #CCC inset; 1.674 +} 1.675 +body > footer div { 1.676 + margin: 12px; 1.677 +} 1.678 +.year:after { 1.679 + content: "2015"; 1.680 } 1.681 1.682 -/* Footer */ 1.683 1.684 -#footer { 1.685 - background: #f1f1f1; 1.686 - text-align: center; 1.687 - border-top: 1px solid #ddd; 1.688 - padding: 40px; 1.689 - color: #666; 1.690 - clear: both; 1.691 - margin-bottom: -2%; 1.692 + 1.693 + 1.694 +/* Mimetype icons */ 1.695 + 1.696 +.x-bzip::before { content: url(application-x-bzip.png); } 1.697 +.x-gzip::before { content: url(application-x-gzip.png); } 1.698 +.plain::before { content: url(text-plain.png); } 1.699 +.x-bittorrent::before { content: url(application-x-bittorrent.png); } 1.700 +.octet-stream::before { content: url(application-octet-stream.png); } 1.701 +.jpeg::before { content: url(image-jpeg.png); } 1.702 +.png::before { content: url(image-png.png); } 1.703 +.javascript::before { content: url(text-x-javascript.png); } 1.704 +.css::before { content: url(text-css.png); } 1.705 +.dir::before { content: url(folder.png); } 1.706 +.up::before { content: url(go-up.png); } 1.707 +.zip::before { content: url(application-zip.png); } 1.708 +.iso::before { content: url(application-x-cd-image.png); } 1.709 +.krn::before { content: url(application-x-executable.png); } 1.710 +.exe::before { content: url(application-x-ms-dos-executable.png); } 1.711 +.rme::before { content: url(text-x-readme.png); } 1.712 +.log::before { content: url(text-x-changelog.png); } 1.713 +.x-flavor::before { content: url(slitaz-icon.png); } 1.714 +.pkg::before { content: url(package-x-generic.png); } 1.715 +.server::before { content: url(network-server.png); } 1.716 +.locale::before { content: url(preferences-desktop-locale.png); display: inline-block; vertical-align: middle; } 1.717 +.locale2::before { content: url(preferences-desktop-locale2.png); display: inline-block; vertical-align: middle; } 1.718 + 1.719 + 1.720 + 1.721 + 1.722 +/* Responsive rules */ 1.723 + 1.724 +/* More space for touchscreen links */ 1.725 + 1.726 +.touch td, .touch th { 1.727 + padding: 6px; 1.728 +} 1.729 +.touch .network a, .touch nav a, .touch .mirrors a, .touch footer a, 1.730 +.touch .info a { 1.731 + display: inline-block; 1.732 + padding: 6px; 1.733 } 1.734 1.735 -#footer a { color: #666; padding: 0 2px; } 1.736 +/* Full width for block_info and navigation */ 1.737 1.738 -.year:after { 1.739 - /* content: "2007-2014"; */ 1.740 - content: "2014"; 1.741 +@media (max-width: 510px) { 1.742 + .block_info, nav { 1.743 + display: block; 1.744 + width: inherit; 1.745 + max-width: 100%; 1.746 + } 1.747 + .block_info { 1.748 + padding: 6px; 1.749 + } 1.750 } 1.751 - 1.752 -p, li { 1.753 - -moz-hyphens: auto; 1.754 - -webkit-hyphens: auto; 1.755 - hyphens: auto; 1.756 -} 1.757 - 1.758 - 1.759 -/* --- SEARCH --- */ 1.760 - 1.761 -input.gsc-search-button { 1.762 - border: 1px solid #b64b22; 1.763 - background-color: #b64b22; 1.764 - color: white; 1.765 - font-weight: bold; 1.766 - cursor: pointer; 1.767 - padding: 2px 10px; 1.768 - font-size: 14px; 1.769 - margin-left: -4px; 1.770 - -webkit-border-top-right-radius: 4px; 1.771 - -webkit-border-bottom-right-radius: 4px; 1.772 - -moz-border-radius-topright: 4px; 1.773 - -moz-border-radius-bottomright: 4px; 1.774 - border-top-right-radius: 4px; 1.775 - border-bottom-right-radius: 4px; 1.776 -} 1.777 - 1.778 -.gs-webResult.gs-result a.gs-title:link, 1.779 -.gs-webResult.gs-result a.gs-title:link b { 1.780 - color: #103a5e; 1.781 -} 1.782 - 1.783 -#cse { 1.784 - margin-bottom: 120px; 1.785 - width:100%; 1.786 -} 1.787 - 1.788 - 1.789 -/* --- GALLERY --- */ 1.790 - 1.791 -#gallery div { 1.792 - width: 496px; 1.793 - border: none; 1.794 - border-radius: 12px; 1.795 - padding-bottom: 8px; 1.796 - margin: 12px auto; 1.797 - webkit-box-shadow: 0 0 6px rgba(0,0,0,0.5); 1.798 - -moz-box-shadow: 0 0 6px rgba(0,0,0,0.5); 1.799 - box-shadow: 0 0 6px rgba(0,0,0,0.5); 1.800 -} 1.801 -#gallery img { 1.802 - width: 480px; 1.803 - margin: 8px; 1.804 -}