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 }