# HG changeset patch # User Christophe Lincoln # Date 1490205018 -3600 # Node ID c586893082d2c1e1180725299dd66fc41e345b84 # Parent beb06938249264126115b529ae04dddb79a3b4a5 Add mobile style for play.slitaz.org (testing) diff -r beb069382492 -r c586893082d2 play.slitaz.me/index.html --- a/play.slitaz.me/index.html Sun Mar 19 23:43:06 2017 +0100 +++ b/play.slitaz.me/index.html Wed Mar 22 18:50:18 2017 +0100 @@ -5,6 +5,7 @@ + diff -r beb069382492 -r c586893082d2 play.slitaz.me/style-tiny.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/play.slitaz.me/style-tiny.css Wed Mar 22 18:50:18 2017 +0100 @@ -0,0 +1,116 @@ +@media (max-width: 620px) { + + body { font: 100% sans-serif, vernada, arial; } + #network { display: none !important; } /* Under header ??? */ + .mobile { display: block !important; } + + body { + width: auto; + margin: 0; + padding: 0; + } + img, table, td, blockquote, code, pre, textarea, input, iframe, + object, embed, video { + max-width: 100%; + } + + header { + height: 90px; + text-align: center; + } + + header h1 { font-size: 24px; padding: 5px 0; width: auto; margin: 0; } + + #logo { + display: block; + position: relative; + float: none; + left: 0; + top: 10px; + height: 40px; + margin-left: auto; + margin-right: auto; + } + + /* Keep images ratio */ + img { + height: auto; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + textarea, table, td, th, code, pre, samp { + word-wrap: break-word; + -webkit-hyphens: auto; + -moz-hyphens: auto; + hyphens: auto; + } + code, pre, samp { white-space: pre-wrap; } + + /* Navigation */ + + nav { + min-height: 0; + max-height: 0; + padding: 0; + text-align: left; + color: #222; + border-bottom: 1px solid #afafaf; + margin-bottom: 20px; + top: 0; + display: block; + } + + nav:before { + content: "Menu \25BC"; + display: block; + padding: .8em; + background: #333; + color: #fff; + border-bottom: 4px solid #afafaf; + background: #222 url(images/logo.png) no-repeat right; + } + nav ul { + max-height: 0; + overflow: hidden; + margin: 0; padding: 0; + list-style: none; + } + nav a { + display: block; + padding: 0.8em; + background: #4A7377; + color: #fff; + text-decoration: none; + background-color: #000; + opacity: 0.95; + border-radius: 0px; + } + nav:not(:focus) ul { + max-height: 0; + } + nav:focus ul { + margin-bottom: 25em; + } + nav ul { + /* number of

x5 */ + max-height: 25em; + -webkit-transition: max-height .4s; + transition: max-height .4s; + } + + /* Content */ + + #content { + margin: 20px 0 0 0; + padding: 2%; + text-align: justify; + max-width: auto; + } +} + +@media (max-device-width:768px) and (orientation: landscape) { + html { + -webkit-text-size-adjust: 100%; + } +} diff -r beb069382492 -r c586893082d2 play.slitaz.me/style.css --- a/play.slitaz.me/style.css Sun Mar 19 23:43:06 2017 +0100 +++ b/play.slitaz.me/style.css Wed Mar 22 18:50:18 2017 +0100 @@ -1,7 +1,7 @@ /* CSS style for play.SliTaz.me */ html { min-height: 102%; } -body { font-size: 90%; margin: 0; } +body { font-size: 100%; margin: 0; } h1 { margin: 0; padding: 8px; color: #fff; font-size: 20px; } h1 a { color: #fff; text-decoration: none; } h2 { color: #444; } h3 { color: #666; font-size: 140%; }