slitaz-forge 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 | beb069382492 |
| children | dc908cc5749e |
| files | play.slitaz.me/index.html play.slitaz.me/style-tiny.css play.slitaz.me/style.css |
line diff
1.1 --- a/play.slitaz.me/index.html Sun Mar 19 23:43:06 2017 +0100 1.2 +++ b/play.slitaz.me/index.html Wed Mar 22 18:50:18 2017 +0100 1.3 @@ -5,6 +5,7 @@ 1.4 <meta charset="utf-8" /> 1.5 <link rel="shortcut icon" href="favicon.ico" /> 1.6 <link rel="stylesheet" type="text/css" href="style.css" /> 1.7 + <link rel="stylesheet" type="text/css" href="style-tiny.css" /> 1.8 </head> 1.9 <body> 1.10
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 2.2 +++ b/play.slitaz.me/style-tiny.css Wed Mar 22 18:50:18 2017 +0100 2.3 @@ -0,0 +1,116 @@ 2.4 +@media (max-width: 620px) { 2.5 + 2.6 + body { font: 100% sans-serif, vernada, arial; } 2.7 + #network { display: none !important; } /* Under header ??? */ 2.8 + .mobile { display: block !important; } 2.9 + 2.10 + body { 2.11 + width: auto; 2.12 + margin: 0; 2.13 + padding: 0; 2.14 + } 2.15 + img, table, td, blockquote, code, pre, textarea, input, iframe, 2.16 + object, embed, video { 2.17 + max-width: 100%; 2.18 + } 2.19 + 2.20 + header { 2.21 + height: 90px; 2.22 + text-align: center; 2.23 + } 2.24 + 2.25 + header h1 { font-size: 24px; padding: 5px 0; width: auto; margin: 0; } 2.26 + 2.27 + #logo { 2.28 + display: block; 2.29 + position: relative; 2.30 + float: none; 2.31 + left: 0; 2.32 + top: 10px; 2.33 + height: 40px; 2.34 + margin-left: auto; 2.35 + margin-right: auto; 2.36 + } 2.37 + 2.38 + /* Keep images ratio */ 2.39 + img { 2.40 + height: auto; 2.41 + -webkit-box-sizing: border-box; 2.42 + -moz-box-sizing: border-box; 2.43 + box-sizing: border-box; 2.44 + } 2.45 + textarea, table, td, th, code, pre, samp { 2.46 + word-wrap: break-word; 2.47 + -webkit-hyphens: auto; 2.48 + -moz-hyphens: auto; 2.49 + hyphens: auto; 2.50 + } 2.51 + code, pre, samp { white-space: pre-wrap; } 2.52 + 2.53 + /* Navigation */ 2.54 + 2.55 + nav { 2.56 + min-height: 0; 2.57 + max-height: 0; 2.58 + padding: 0; 2.59 + text-align: left; 2.60 + color: #222; 2.61 + border-bottom: 1px solid #afafaf; 2.62 + margin-bottom: 20px; 2.63 + top: 0; 2.64 + display: block; 2.65 + } 2.66 + 2.67 + nav:before { 2.68 + content: "Menu \25BC"; 2.69 + display: block; 2.70 + padding: .8em; 2.71 + background: #333; 2.72 + color: #fff; 2.73 + border-bottom: 4px solid #afafaf; 2.74 + background: #222 url(images/logo.png) no-repeat right; 2.75 + } 2.76 + nav ul { 2.77 + max-height: 0; 2.78 + overflow: hidden; 2.79 + margin: 0; padding: 0; 2.80 + list-style: none; 2.81 + } 2.82 + nav a { 2.83 + display: block; 2.84 + padding: 0.8em; 2.85 + background: #4A7377; 2.86 + color: #fff; 2.87 + text-decoration: none; 2.88 + background-color: #000; 2.89 + opacity: 0.95; 2.90 + border-radius: 0px; 2.91 + } 2.92 + nav:not(:focus) ul { 2.93 + max-height: 0; 2.94 + } 2.95 + nav:focus ul { 2.96 + margin-bottom: 25em; 2.97 + } 2.98 + nav ul { 2.99 + /* number of <li> x5 */ 2.100 + max-height: 25em; 2.101 + -webkit-transition: max-height .4s; 2.102 + transition: max-height .4s; 2.103 + } 2.104 + 2.105 + /* Content */ 2.106 + 2.107 + #content { 2.108 + margin: 20px 0 0 0; 2.109 + padding: 2%; 2.110 + text-align: justify; 2.111 + max-width: auto; 2.112 + } 2.113 +} 2.114 + 2.115 +@media (max-device-width:768px) and (orientation: landscape) { 2.116 + html { 2.117 + -webkit-text-size-adjust: 100%; 2.118 + } 2.119 +}
3.1 --- a/play.slitaz.me/style.css Sun Mar 19 23:43:06 2017 +0100 3.2 +++ b/play.slitaz.me/style.css Wed Mar 22 18:50:18 2017 +0100 3.3 @@ -1,7 +1,7 @@ 3.4 /* CSS style for play.SliTaz.me */ 3.5 3.6 html { min-height: 102%; } 3.7 -body { font-size: 90%; margin: 0; } 3.8 +body { font-size: 100%; margin: 0; } 3.9 h1 { margin: 0; padding: 8px; color: #fff; font-size: 20px; } 3.10 h1 a { color: #fff; text-decoration: none; } 3.11 h2 { color: #444; } h3 { color: #666; font-size: 140%; }