slitaz-forge annotate arm/style-tiny.css @ rev 718

pangolin/web/index.php: add games.slitaz.org
author Pascal Bellard <pascal.bellard@slitaz.org>
date Mon Oct 25 17:27:46 2021 +0000 (2021-10-25)
parents
children
rev   line source
pankso@519 1 /* Tiny/Mobile screens CSS style for SliTaz */
pankso@519 2
pankso@519 3 @media (max-width: 620px) {
pankso@519 4
pankso@519 5 body { font: 100% sans-serif, vernada, arial; }
pankso@519 6 #header, #logo { display: none !important; }
pankso@519 7 .mobile { display: block !important; }
pankso@519 8 .mobile span { display: inline !important; }
pankso@519 9
pankso@519 10 body {
pankso@519 11 width: auto;
pankso@519 12 margin: 0;
pankso@519 13 padding: 0;
pankso@519 14 }
pankso@519 15 img, table, td, blockquote, code, pre, textarea, input, iframe,
pankso@519 16 object, embed, video {
pankso@519 17 max-width: 100%;
pankso@519 18 }
pankso@519 19
pankso@519 20 /* Keep images ratio */
pankso@519 21 img {
pankso@519 22 height: auto;
pankso@519 23 -webkit-box-sizing: border-box;
pankso@519 24 -moz-box-sizing: border-box;
pankso@519 25 box-sizing: border-box;
pankso@519 26 }
pankso@519 27 textarea, table, td, th, code, pre, samp {
pankso@519 28 word-wrap: break-word;
pankso@519 29 -webkit-hyphens: auto;
pankso@519 30 -moz-hyphens: auto;
pankso@519 31 hyphens: auto;
pankso@519 32 }
pankso@519 33 code, pre, samp { white-space: pre-wrap; }
pankso@519 34
pankso@519 35 /* Navigation */
pankso@519 36
pankso@519 37 nav {
pankso@519 38 min-height: 0;
pankso@519 39 max-height: 0;
pankso@519 40 font-size: 116%;
pankso@519 41 padding: 0;
pankso@519 42 text-align: left;
pankso@519 43 color: #222;
pankso@519 44 border-bottom: 1px solid #afafaf;
pankso@519 45 margin-bottom: 20px;
pankso@519 46 top: 0;
pankso@519 47 display: block;
pankso@519 48 }
pankso@519 49
pankso@519 50 nav:before {
pankso@519 51 content: "Menu \25BC";
pankso@519 52 display: block;
pankso@519 53 padding: .8em;
pankso@519 54 background: #333;
pankso@519 55 color: #fff;
pankso@519 56 border-bottom: 4px solid #afafaf;
pankso@519 57 background: #222 url(images/logo.png) no-repeat right;
pankso@519 58 }
pankso@519 59 nav ul {
pankso@519 60 max-height: 0;
pankso@519 61 overflow: hidden;
pankso@519 62 margin: 0; padding: 0;
pankso@519 63 list-style: none;
pankso@519 64 }
pankso@519 65 nav a {
pankso@519 66 display: block;
pankso@519 67 padding: 0.8em;
pankso@519 68 background: #4A7377;
pankso@519 69 color: #fff;
pankso@519 70 text-decoration: none;
pankso@519 71 background-color: #000;
pankso@519 72 opacity: 0.95;
pankso@519 73 border-radius: 0px;
pankso@519 74 }
pankso@519 75 nav:not(:focus) ul {
pankso@519 76 max-height: 0;
pankso@519 77 }
pankso@519 78 nav:focus ul {
pankso@519 79 margin-bottom: 25em;
pankso@519 80 }
pankso@519 81 nav ul {
pankso@519 82 /* number of <li> x5 */
pankso@519 83 max-height: 25em;
pankso@519 84 -webkit-transition: max-height .4s;
pankso@519 85 transition: max-height .4s;
pankso@519 86 }
pankso@519 87
pankso@519 88 /* Content */
pankso@519 89
pankso@519 90 #content {
pankso@519 91 margin: 50px 0 0 0;
pankso@519 92 padding: 2%;
pankso@519 93 text-align: justify;
pankso@519 94 max-width: auto;
pankso@519 95 }
pankso@519 96 pre, .box-dl, .box-rpi { overflow: hidden; }
pankso@519 97 }
pankso@519 98
pankso@519 99 @media (max-device-width:768px) and (orientation: landscape) {
pankso@519 100 html {
pankso@519 101 -webkit-text-size-adjust: 100%;
pankso@519 102 }
pankso@519 103 }