slitaz-forge rev 528
scm: enable new CSS with mobile support (sorry Paul for overwritting)
| author | Christophe Lincoln <pankso@slitaz.org> |
|---|---|
| date | Fri Apr 25 00:11:39 2014 +0200 (2014-04-25) |
| parents | 680898a6c0d7 |
| children | e7a1a76c2092 |
| files | scn/header.html scn/style-tiny.css scn/style.css |
line diff
1.1 --- a/scn/header.html Fri Apr 25 00:09:53 2014 +0200 1.2 +++ b/scn/header.html Fri Apr 25 00:11:39 2014 +0200 1.3 @@ -3,9 +3,11 @@ 1.4 <head> 1.5 <title>SCN %TITLE%</title> 1.6 <meta charset="utf-8" /> 1.7 + <meta name="viewport" content="width=device-width, initial-scale=1.0"> 1.8 + <link rel="stylesheet" type="text/css" href="style.css" /> 1.9 + <link rel="stylesheet" type="text/css" href="style-tiny.css" /> 1.10 + <script type="text/javascript" src="lib/functions.js"></script> 1.11 <link rel="shortcut icon" href="favicon.ico" /> 1.12 - <link rel="stylesheet" type="text/css" href="style.css" /> 1.13 - <script type="text/javascript" src="lib/functions.js"></script> 1.14 </head> 1.15 <body> 1.16 1.17 @@ -13,58 +15,31 @@ 1.18 <div id="logo"></div> 1.19 <div id="network"> 1.20 <a href="http://www.slitaz.org/">Home</a> 1.21 - <span>Community</span> 1.22 + <span>SCN</span> 1.23 <a href="http://doc.slitaz.org/">Doc</a> 1.24 <a href="http://forum.slitaz.org/">Forum</a> 1.25 <a href="http://irc.slitaz.org/">IRC</a> 1.26 - <a href="http://shop.slitaz.org/">Shop</a> 1.27 <a href="http://bugs.slitaz.org/">Bugs</a> 1.28 <a href="http://hg.slitaz.org/">Hg</a> 1.29 </div> 1.30 - <h1><a href="index.cgi">SliTaz Community</a></h1> 1.31 + <h1><a href="./">SliTaz Community</a></h1> 1.32 </div> 1.33 1.34 -<!-- Block --> 1.35 -<div id="block"> 1.36 - <!-- Navigation --> 1.37 - <div id="block_nav"> 1.38 - 1.39 - <!-- Twitter button 1.40 - <a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-hashtags="SliTaz">Tweet</a> 1.41 - <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> 1.42 - --> 1.43 - 1.44 - <a href="http://twitter.com/slitaz" title="Follow us on Twitter"> 1.45 - <img src="images/twitter.png" alt="Twitter" /></a> 1.46 - <a href="http://www.facebook.com/slitaz" title="Follow us on Facebook"> 1.47 - <img src="images/fb.png" alt="Facebook" /></a> 1.48 - 1.49 - <!-- PayPal button --> 1.50 - <form action="https://www.paypal.com/cgi-bin/webscr" method="post" 1.51 - style="display: inline;"> 1.52 - <input type="hidden" name="cmd" value="_s-xclick" /> 1.53 - <input type="hidden" name="hosted_button_id" value="4885025" /> 1.54 - <input type="image" src="images/paypal.png" name="submit" title="Donate" 1.55 - alt="PayPal - The safer, easier way to pay online!" /> 1.56 - </form> 1.57 - 1.58 - <!-- Hardcoded SCN links --> 1.59 - <nav id="nav"> 1.60 - <a href="?blog">Blog</a> 1.61 - <a href="?log">Activity</a> 1.62 - <a href="?d=en/about">About</a> 1.63 - </nav> 1.64 - 1.65 - </div> 1.66 - <!-- Information/image --> 1.67 - <div id="block_info"> 1.68 - <p> 1.69 - The SliTaz Community Network provides latest news, lets you 1.70 - connect with SliTaz users and developers, share ideas about 1.71 - SliTaz, help others and get involved in the project. 1.72 - </p> 1.73 - </div> 1.74 -</div> 1.75 - 1.76 +<nav id="nav" role="navigation" tabindex="0"> 1.77 + <ul> 1.78 + <li><a class="nav1" href="?blog">Blog</a></li> 1.79 + <li><a class="nav2" href="?log">Activity</a></li> 1.80 + <li><a class="nav1" href="?d=en/about">About</a></li> 1.81 + <li><a class="nav2" href="http://twitter.com/slitaz" 1.82 + title="Follow us on Twitter"><img src="images/twitter.png" 1.83 + alt="Twitter" /><span class="mobile"> @slitaz</span></a></li> 1.84 + <li><a class="nav1" href="http://www.facebook.com/slitaz" 1.85 + title="Follow us on Facebook"><img src="images/fb.png" 1.86 + alt="Facebook" /><span class="mobile"> Fan page</span></a></li> 1.87 + </ul> 1.88 + <p> 1.89 + Latest news, connect with the community, share or get involved in the project. 1.90 + </p> 1.91 +</nav> 1.92 <!-- Content --> 1.93 <div id="content">
2.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 2.2 +++ b/scn/style-tiny.css Fri Apr 25 00:11:39 2014 +0200 2.3 @@ -0,0 +1,107 @@ 2.4 +/* Tiny/Mobile screens CSS style for SliTaz */ 2.5 + 2.6 +@media (max-width: 680px) { 2.7 + 2.8 + body { font: 100% sans-serif, vernada, arial; } 2.9 + #header, #logo, nav p { display: none !important; } 2.10 + #user { top: 65px; background-color: #ddd; } 2.11 + #user a { color: #444; } #user a:hover { color: #000; } 2.12 + #account-info { width: auto; height: 120px; float: none; } 2.13 + #login { width: auto; float: none; height: 120px; margin-top: 20px; } 2.14 + .mobile { display: block !important; } 2.15 + .mobile span { display: inline !important; } 2.16 + 2.17 + body { 2.18 + width: auto; 2.19 + margin: 0; 2.20 + padding: 0; 2.21 + } 2.22 + img, table, td, blockquote, code, pre, textarea, input, iframe, 2.23 + object, embed, video { 2.24 + max-width: 100%; 2.25 + } 2.26 + 2.27 + /* Keep images ratio */ 2.28 + img { 2.29 + height: auto; 2.30 + -webkit-box-sizing: border-box; 2.31 + -moz-box-sizing: border-box; 2.32 + box-sizing: border-box; 2.33 + } 2.34 + textarea, table, td, th, code, pre, samp { 2.35 + word-wrap: break-word; 2.36 + -webkit-hyphens: auto; 2.37 + -moz-hyphens: auto; 2.38 + hyphens: auto; 2.39 + } 2.40 + code, pre, samp { white-space: pre-wrap; } 2.41 + 2.42 + /* Navigation */ 2.43 + 2.44 + nav { 2.45 + min-height: 0; 2.46 + max-height: 0; 2.47 + font-size: 116%; 2.48 + padding: 0; 2.49 + text-align: left; 2.50 + color: #222; 2.51 + border-bottom: 1px solid #afafaf; 2.52 + margin-bottom: 20px; 2.53 + top: 0; 2.54 + display: block; 2.55 + } 2.56 + 2.57 + nav:before { 2.58 + content: "Menu \25BC"; 2.59 + display: block; 2.60 + padding: .8em; 2.61 + background: #333; 2.62 + color: #fff; 2.63 + border-bottom: 4px solid #afafaf; 2.64 + background: #222 url(images/logo.png) no-repeat right; 2.65 + } 2.66 + nav ul { 2.67 + max-height: 0; 2.68 + overflow: hidden; 2.69 + margin: 0; padding: 0; 2.70 + list-style: none; 2.71 + } 2.72 + nav a { 2.73 + display: block; 2.74 + padding: 0.8em; 2.75 + background: #4A7377; 2.76 + color: #fff; 2.77 + text-decoration: none; 2.78 + background-color: #000; 2.79 + opacity: 0.95; 2.80 + border-radius: 0px; 2.81 + } 2.82 + nav:not(:focus) ul { 2.83 + max-height: 0; 2.84 + } 2.85 + nav:focus ul { 2.86 + margin-bottom: 25em; 2.87 + } 2.88 + nav ul { 2.89 + /* number of <li> x5 */ 2.90 + max-height: 25em; 2.91 + -webkit-transition: max-height .4s; 2.92 + transition: max-height .4s; 2.93 + } 2.94 + 2.95 + /* Content */ 2.96 + 2.97 + #content { 2.98 + margin: 65px 0 0 0; 2.99 + padding: 2%; 2.100 + text-align: justify; 2.101 + max-width: auto; 2.102 + } 2.103 + pre, .box-dl, .box-rpi { overflow: hidden; } 2.104 +} 2.105 + 2.106 +@media (max-device-width:768px) and (orientation: landscape) { 2.107 + html { 2.108 + -webkit-text-size-adjust: 100%; 2.109 + } 2.110 +}
3.1 --- a/scn/style.css Fri Apr 25 00:09:53 2014 +0200 3.2 +++ b/scn/style.css Fri Apr 25 00:11:39 2014 +0200 3.3 @@ -18,7 +18,7 @@ 3.4 /* Header */ 3.5 3.6 #header { 3.7 - background: #111 ; 3.8 + background: #111 url(images/logo.png) no-repeat left; 3.9 height: 40px; 3.10 } 3.11 3.12 @@ -71,11 +71,7 @@ 3.13 3.14 /* Login and user box */ 3.15 3.16 -#login { 3.17 - width: 240px; 3.18 - float: left; 3.19 - height: 120px; 3.20 -} 3.21 +#login { width: 240px; float: left; height: 120px; } 3.22 3.23 #login input[type="text"], #login input[type="password"] { 3.24 width: 200px; } 3.25 @@ -101,49 +97,45 @@ 3.26 3.27 #account-info { width: 380px; height: 120px; float: right; } 3.28 3.29 -/* Block */ 3.30 +/* Navigation */ 3.31 3.32 -#block { 3.33 - min-height: 92px; 3.34 - background: #ccc; 3.35 - padding: 20px 10% 0px; 3.36 +nav { 3.37 + font-size: 120%; 3.38 + min-height: 54px; 3.39 + background: #ddd; 3.40 + padding: 30px 6% 0; 3.41 text-align: center; 3.42 color: #222; 3.43 border-bottom: 1px solid #afafaf; 3.44 + margin-bottom: 20px; 3.45 + top: 40px; 3.46 } 3.47 3.48 -#block_info { 3.49 - text-align: justify; 3.50 - width: 48%; 3.51 - padding: 0px 10px 0 0; 3.52 +nav ul { 3.53 + margin: 0; padding: 0; 3.54 + list-style: none; 3.55 } 3.56 +nav li { display: inline; } 3.57 3.58 -#block_info p { margin: 10px 0; padding: 0 12px 0 0; } 3.59 -#block_info a { font-weight: normal; } 3.60 -#block ul { list-style-type: square; } 3.61 -#block a:hover { color: #351a0a; } 3.62 - 3.63 -/* Navigation */ 3.64 - 3.65 -#block_nav { 3.66 - background: #666; 3.67 - padding: 10px; 3.68 - text-align: justify; 3.69 - width: 48%; 3.70 - float: right; 3.71 -} 3.72 - 3.73 -nav { margin: 12px 0 0 0; } 3.74 - 3.75 -nav a { 3.76 +nav a, nav form { 3.77 text-decoration: none; 3.78 - padding: 0px 4px; 3.79 + padding: 12px; 3.80 color: #fff; 3.81 font-weight: bold; 3.82 + vertical-align: middle; 3.83 + -webkit-transition: background-color 0.6s; 3.84 + transition: background-color 0.6s; 3.85 } 3.86 +nav p { padding: 8px; color: #333; font-size: 92%; } 3.87 3.88 -#block_nav a:hover, nav a:hover { color: #afafaf; } 3.89 -#block_nav img { vertical-align: top; } 3.90 +nav input { padding: 0px;} 3.91 +.nav1 { background-color: #333; } 3.92 +.nav1:hover { background-color: #128da9; } 3.93 +.nav2 { background-color: #ab3c00; } 3.94 +.nav2:hover { background-color: #ff9b00; } 3.95 +.navpi { background-color: #444; } 3.96 +.navpi:hover { background-color: #bc1142; } 3.97 + 3.98 3.99 /* Languages */ 3.100 3.101 @@ -197,6 +189,7 @@ 3.102 #content p img { display: block; 3.103 margin: 0 auto; } 3.104 3.105 +.mobile { display: none !important; } 3.106 .error { color: red; } 3.107 .ok { color: green; } 3.108 .date { color: #666; font-size: 96%; } 3.109 @@ -260,18 +253,18 @@ 3.110 } 3.111 3.112 #tools { 3.113 - padding-top: 10px; 3.114 + padding-top: 10px; 3.115 margin: 20px 0px; 3.116 /*border-top: 1px dotted #ccc; 3.117 position: fixed; 3.118 bottom: 10px;*/ 3.119 } 3.120 -#tools a { text-decoration: none; margin: 4px 6px 4px 0px; } 3.121 +#tools a { text-decoration: none; } 3.122 3.123 /* Round corner */ 3.124 3.125 pre, .button, .pctbar, .box, #login, #account-info, #user, img, 3.126 -input, textarea, select, #tools a, #block_nav { 3.127 +input, textarea, select, #tools a, nav a { 3.128 -moz-border-radius: 4px; 3.129 -webkit-border-radius: 4px; 3.130 border-radius: 4px;