slitaz-forge diff arm/style-tiny.css @ rev 592

arm/rpi: add Raspbian dual boot
author Pascal Bellard <pascal.bellard@slitaz.org>
date Thu Feb 19 16:13:06 2015 +0100 (2015-02-19)
parents
children
line diff
     1.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     1.2 +++ b/arm/style-tiny.css	Thu Feb 19 16:13:06 2015 +0100
     1.3 @@ -0,0 +1,103 @@
     1.4 +/* Tiny/Mobile screens CSS style for SliTaz */
     1.5 +
     1.6 +@media (max-width: 620px) {
     1.7 +
     1.8 +	body { font: 100% sans-serif, vernada, arial; }
     1.9 +	#header, #logo { display: none !important; }
    1.10 +	.mobile { display: block !important; }
    1.11 +	.mobile span { display: inline !important; }
    1.12 +	
    1.13 +	body {
    1.14 +		width: auto;
    1.15 +		margin: 0;
    1.16 +		padding: 0;
    1.17 +	}
    1.18 +	img, table, td, blockquote, code, pre, textarea, input, iframe, 
    1.19 +	object, embed, video {
    1.20 +		max-width: 100%;
    1.21 +	}
    1.22 +	
    1.23 +	/* Keep images ratio */
    1.24 +	img {
    1.25 +		height: auto;
    1.26 +		-webkit-box-sizing: border-box;
    1.27 +		-moz-box-sizing: border-box;
    1.28 +		box-sizing: border-box;
    1.29 +	}
    1.30 +	textarea, table, td, th, code, pre, samp {
    1.31 +		word-wrap: break-word;
    1.32 +		-webkit-hyphens: auto;
    1.33 +		-moz-hyphens: auto;
    1.34 +		hyphens: auto;
    1.35 +	}
    1.36 +	code, pre, samp { white-space: pre-wrap; }
    1.37 +
    1.38 +	/* Navigation */
    1.39 +	
    1.40 +	nav {
    1.41 +		min-height: 0;
    1.42 +		max-height: 0;
    1.43 +		font-size: 116%;
    1.44 +		padding: 0;
    1.45 +		text-align: left;
    1.46 +		color: #222;
    1.47 +		border-bottom: 1px solid #afafaf;
    1.48 +		margin-bottom: 20px;
    1.49 +		top: 0;
    1.50 +		display: block;
    1.51 +	}
    1.52 +
    1.53 +	nav:before {
    1.54 +		content: "Menu \25BC"; 
    1.55 +		display: block;
    1.56 +		padding: .8em;
    1.57 +		background: #333;
    1.58 +		color: #fff;
    1.59 +		border-bottom: 4px solid #afafaf;
    1.60 +		background: #222 url(images/logo.png) no-repeat right;
    1.61 +	}
    1.62 +	nav ul {
    1.63 +	    max-height: 0;
    1.64 +	    overflow: hidden;
    1.65 +	    margin: 0; padding: 0;
    1.66 +	    list-style: none;
    1.67 +	}
    1.68 +	nav a {
    1.69 +		display: block;
    1.70 +		padding: 0.8em;
    1.71 +		background: #4A7377;
    1.72 +		color: #fff;
    1.73 +		text-decoration: none;
    1.74 +		background-color: #000;
    1.75 +		opacity: 0.95;
    1.76 +		border-radius: 0px;
    1.77 +	}
    1.78 +	nav:not(:focus) ul {
    1.79 +		max-height: 0;
    1.80 +	}
    1.81 +	nav:focus ul {
    1.82 +		margin-bottom: 25em;
    1.83 +	}
    1.84 +	nav ul {
    1.85 +		/* number of <li> x5 */
    1.86 +		max-height: 25em;
    1.87 +		-webkit-transition: max-height .4s;
    1.88 +		transition: max-height .4s;
    1.89 +	}
    1.90 +	
    1.91 +	/* Content */
    1.92 +	
    1.93 +	#content {
    1.94 +		margin: 50px 0 0 0;
    1.95 +		padding: 2%;
    1.96 +		text-align: justify;
    1.97 +		max-width: auto;
    1.98 +	}
    1.99 +	pre, .box-dl, .box-rpi { overflow: hidden; }
   1.100 +}
   1.101 +
   1.102 +@media (max-device-width:768px) and (orientation: landscape) {
   1.103 +	html {
   1.104 +		-webkit-text-size-adjust: 100%;
   1.105 +	}
   1.106 +}