slitaz-forge annotate play.slitaz.me/style-tiny.css @ rev 687
Add mobile style for play.slitaz.org (testing)
author | Christophe Lincoln <pankso@slitaz.org> |
---|---|
date | Wed Mar 22 18:50:18 2017 +0100 (2017-03-22) |
parents | |
children |
rev | line source |
---|---|
pankso@687 | 1 @media (max-width: 620px) { |
pankso@687 | 2 |
pankso@687 | 3 body { font: 100% sans-serif, vernada, arial; } |
pankso@687 | 4 #network { display: none !important; } /* Under header ??? */ |
pankso@687 | 5 .mobile { display: block !important; } |
pankso@687 | 6 |
pankso@687 | 7 body { |
pankso@687 | 8 width: auto; |
pankso@687 | 9 margin: 0; |
pankso@687 | 10 padding: 0; |
pankso@687 | 11 } |
pankso@687 | 12 img, table, td, blockquote, code, pre, textarea, input, iframe, |
pankso@687 | 13 object, embed, video { |
pankso@687 | 14 max-width: 100%; |
pankso@687 | 15 } |
pankso@687 | 16 |
pankso@687 | 17 header { |
pankso@687 | 18 height: 90px; |
pankso@687 | 19 text-align: center; |
pankso@687 | 20 } |
pankso@687 | 21 |
pankso@687 | 22 header h1 { font-size: 24px; padding: 5px 0; width: auto; margin: 0; } |
pankso@687 | 23 |
pankso@687 | 24 #logo { |
pankso@687 | 25 display: block; |
pankso@687 | 26 position: relative; |
pankso@687 | 27 float: none; |
pankso@687 | 28 left: 0; |
pankso@687 | 29 top: 10px; |
pankso@687 | 30 height: 40px; |
pankso@687 | 31 margin-left: auto; |
pankso@687 | 32 margin-right: auto; |
pankso@687 | 33 } |
pankso@687 | 34 |
pankso@687 | 35 /* Keep images ratio */ |
pankso@687 | 36 img { |
pankso@687 | 37 height: auto; |
pankso@687 | 38 -webkit-box-sizing: border-box; |
pankso@687 | 39 -moz-box-sizing: border-box; |
pankso@687 | 40 box-sizing: border-box; |
pankso@687 | 41 } |
pankso@687 | 42 textarea, table, td, th, code, pre, samp { |
pankso@687 | 43 word-wrap: break-word; |
pankso@687 | 44 -webkit-hyphens: auto; |
pankso@687 | 45 -moz-hyphens: auto; |
pankso@687 | 46 hyphens: auto; |
pankso@687 | 47 } |
pankso@687 | 48 code, pre, samp { white-space: pre-wrap; } |
pankso@687 | 49 |
pankso@687 | 50 /* Navigation */ |
pankso@687 | 51 |
pankso@687 | 52 nav { |
pankso@687 | 53 min-height: 0; |
pankso@687 | 54 max-height: 0; |
pankso@687 | 55 padding: 0; |
pankso@687 | 56 text-align: left; |
pankso@687 | 57 color: #222; |
pankso@687 | 58 border-bottom: 1px solid #afafaf; |
pankso@687 | 59 margin-bottom: 20px; |
pankso@687 | 60 top: 0; |
pankso@687 | 61 display: block; |
pankso@687 | 62 } |
pankso@687 | 63 |
pankso@687 | 64 nav:before { |
pankso@687 | 65 content: "Menu \25BC"; |
pankso@687 | 66 display: block; |
pankso@687 | 67 padding: .8em; |
pankso@687 | 68 background: #333; |
pankso@687 | 69 color: #fff; |
pankso@687 | 70 border-bottom: 4px solid #afafaf; |
pankso@687 | 71 background: #222 url(images/logo.png) no-repeat right; |
pankso@687 | 72 } |
pankso@687 | 73 nav ul { |
pankso@687 | 74 max-height: 0; |
pankso@687 | 75 overflow: hidden; |
pankso@687 | 76 margin: 0; padding: 0; |
pankso@687 | 77 list-style: none; |
pankso@687 | 78 } |
pankso@687 | 79 nav a { |
pankso@687 | 80 display: block; |
pankso@687 | 81 padding: 0.8em; |
pankso@687 | 82 background: #4A7377; |
pankso@687 | 83 color: #fff; |
pankso@687 | 84 text-decoration: none; |
pankso@687 | 85 background-color: #000; |
pankso@687 | 86 opacity: 0.95; |
pankso@687 | 87 border-radius: 0px; |
pankso@687 | 88 } |
pankso@687 | 89 nav:not(:focus) ul { |
pankso@687 | 90 max-height: 0; |
pankso@687 | 91 } |
pankso@687 | 92 nav:focus ul { |
pankso@687 | 93 margin-bottom: 25em; |
pankso@687 | 94 } |
pankso@687 | 95 nav ul { |
pankso@687 | 96 /* number of <li> x5 */ |
pankso@687 | 97 max-height: 25em; |
pankso@687 | 98 -webkit-transition: max-height .4s; |
pankso@687 | 99 transition: max-height .4s; |
pankso@687 | 100 } |
pankso@687 | 101 |
pankso@687 | 102 /* Content */ |
pankso@687 | 103 |
pankso@687 | 104 #content { |
pankso@687 | 105 margin: 20px 0 0 0; |
pankso@687 | 106 padding: 2%; |
pankso@687 | 107 text-align: justify; |
pankso@687 | 108 max-width: auto; |
pankso@687 | 109 } |
pankso@687 | 110 } |
pankso@687 | 111 |
pankso@687 | 112 @media (max-device-width:768px) and (orientation: landscape) { |
pankso@687 | 113 html { |
pankso@687 | 114 -webkit-text-size-adjust: 100%; |
pankso@687 | 115 } |
pankso@687 | 116 } |