# HG changeset patch # User Christophe Lincoln # Date 1398377499 -7200 # Node ID 11e118c11384a58155242b973f31e7336d83dbf7 # Parent 680898a6c0d79ffeeb1c2c53c68a43a4b304c04d scm: enable new CSS with mobile support (sorry Paul for overwritting) diff -r 680898a6c0d7 -r 11e118c11384 scn/header.html --- a/scn/header.html Fri Apr 25 00:09:53 2014 +0200 +++ b/scn/header.html Fri Apr 25 00:11:39 2014 +0200 @@ -3,9 +3,11 @@ SCN %TITLE% + + + + - - @@ -13,58 +15,31 @@
Home - Community + SCN Doc Forum IRC - Shop Bugs Hg
-

SliTaz Community

+

SliTaz Community

- -
- -
- - - - - Twitter - - Facebook - - -
- - - -
- - - - -
- -
-

- The SliTaz Community Network provides latest news, lets you - connect with SliTaz users and developers, share ideas about - SliTaz, help others and get involved in the project. -

-
-
- +
diff -r 680898a6c0d7 -r 11e118c11384 scn/style-tiny.css --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/scn/style-tiny.css Fri Apr 25 00:11:39 2014 +0200 @@ -0,0 +1,107 @@ +/* Tiny/Mobile screens CSS style for SliTaz */ + +@media (max-width: 680px) { + + body { font: 100% sans-serif, vernada, arial; } + #header, #logo, nav p { display: none !important; } + #user { top: 65px; background-color: #ddd; } + #user a { color: #444; } #user a:hover { color: #000; } + #account-info { width: auto; height: 120px; float: none; } + #login { width: auto; float: none; height: 120px; margin-top: 20px; } + .mobile { display: block !important; } + .mobile span { display: inline !important; } + + body { + width: auto; + margin: 0; + padding: 0; + } + img, table, td, blockquote, code, pre, textarea, input, iframe, + object, embed, video { + max-width: 100%; + } + + /* 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; + font-size: 116%; + 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: 65px 0 0 0; + padding: 2%; + text-align: justify; + max-width: auto; + } + pre, .box-dl, .box-rpi { overflow: hidden; } +} + +@media (max-device-width:768px) and (orientation: landscape) { + html { + -webkit-text-size-adjust: 100%; + } +} diff -r 680898a6c0d7 -r 11e118c11384 scn/style.css --- a/scn/style.css Fri Apr 25 00:09:53 2014 +0200 +++ b/scn/style.css Fri Apr 25 00:11:39 2014 +0200 @@ -18,7 +18,7 @@ /* Header */ #header { - background: #111 ; + background: #111 url(images/logo.png) no-repeat left; height: 40px; } @@ -71,11 +71,7 @@ /* Login and user box */ -#login { - width: 240px; - float: left; - height: 120px; -} +#login { width: 240px; float: left; height: 120px; } #login input[type="text"], #login input[type="password"] { width: 200px; } @@ -101,49 +97,45 @@ #account-info { width: 380px; height: 120px; float: right; } -/* Block */ +/* Navigation */ -#block { - min-height: 92px; - background: #ccc; - padding: 20px 10% 0px; +nav { + font-size: 120%; + min-height: 54px; + background: #ddd; + padding: 30px 6% 0; text-align: center; color: #222; border-bottom: 1px solid #afafaf; + margin-bottom: 20px; + top: 40px; } -#block_info { - text-align: justify; - width: 48%; - padding: 0px 10px 0 0; +nav ul { + margin: 0; padding: 0; + list-style: none; } +nav li { display: inline; } -#block_info p { margin: 10px 0; padding: 0 12px 0 0; } -#block_info a { font-weight: normal; } -#block ul { list-style-type: square; } -#block a:hover { color: #351a0a; } - -/* Navigation */ - -#block_nav { - background: #666; - padding: 10px; - text-align: justify; - width: 48%; - float: right; -} - -nav { margin: 12px 0 0 0; } - -nav a { +nav a, nav form { text-decoration: none; - padding: 0px 4px; + padding: 12px; color: #fff; font-weight: bold; + vertical-align: middle; + -webkit-transition: background-color 0.6s; + transition: background-color 0.6s; } +nav p { padding: 8px; color: #333; font-size: 92%; } -#block_nav a:hover, nav a:hover { color: #afafaf; } -#block_nav img { vertical-align: top; } +nav input { padding: 0px;} +.nav1 { background-color: #333; } +.nav1:hover { background-color: #128da9; } +.nav2 { background-color: #ab3c00; } +.nav2:hover { background-color: #ff9b00; } +.navpi { background-color: #444; } +.navpi:hover { background-color: #bc1142; } + /* Languages */ @@ -197,6 +189,7 @@ #content p img { display: block; margin: 0 auto; } +.mobile { display: none !important; } .error { color: red; } .ok { color: green; } .date { color: #666; font-size: 96%; } @@ -260,18 +253,18 @@ } #tools { - padding-top: 10px; + padding-top: 10px; margin: 20px 0px; /*border-top: 1px dotted #ccc; position: fixed; bottom: 10px;*/ } -#tools a { text-decoration: none; margin: 4px 6px 4px 0px; } +#tools a { text-decoration: none; } /* Round corner */ pre, .button, .pctbar, .box, #login, #account-info, #user, img, -input, textarea, select, #tools a, #block_nav { +input, textarea, select, #tools a, nav a { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;