Add better support to small screen to duepuntozero theme.

This close #823. It also add some styles for screens less than 960px.
It's not a mobile theme, but should be better to see in case.
This commit is contained in:
Fabrixxm 2013-12-11 05:25:41 -05:00
parent b5785c3f16
commit 9474a0deed

View file

@ -91,6 +91,7 @@ nav {
display: block; display: block;
margin: 0px 10%; margin: 0px 10%;
border-bottom: 1px solid #babdb6; border-bottom: 1px solid #babdb6;
position: relative;
} }
nav #site-location { nav #site-location {
color: #888a85; color: #888a85;
@ -2905,6 +2906,8 @@ aside input[type='text'] {
.field.radio .field_help { margin-left: 0px; } .field.radio .field_help { margin-left: 0px; }
/** /**
* ADMIN * ADMIN
*/ */
@ -3252,7 +3255,7 @@ ul.menu-popup {
list-style: none; list-style: none;
z-index: 100000; z-index: 100000;
top: 90px; top: 90px;
left: 400px; left: 200px;
} }
#nav-notifications-menu { #nav-notifications-menu {
width: 320px; width: 320px;
@ -3328,3 +3331,63 @@ ul.menu-popup {
.shared_header span { .shared_header span {
margin-left: 10px; margin-left: 10px;
} }
/* small screens */
@media all and (max-width: 1089px) {
.field label { width: 90%; }
.field input, .field textarea, .field select { width: 90%; }
.field input[type="checkbox"],.field input[type="radio"] {
width: 2em;
}
#id_openid_url { width: 85%; }
.field_help { margin-left: 0px; }
textarea { width: 100%; }
}
@media all and (max-width: 760px) {
body { background-image: none; }
nav, aside, section, footer {
margin: 0px;
float: none;
position: relative;
width: 100%;
padding: 0.5em;
height: auto;
}
aside:before {
content: ">>";
display: block;
background-color: #eee;
}
aside { overflow: hidden; min-height: 0; height: 1em;}
aside:hover, aside:focus { height: auto; }
nav .nav-link {
float: left;
width: 23%;
min-width: 100px;
height: 15px;
display: block;
margin: 0.4em 2px 0 0;
padding: 6px 3px;
border-width: 1px 1px 0px;
border-style: solid solid none;
border-color: rgb(186, 189, 182);
background-color: rgb(174, 192,211)!important;
}
.nav-commlink.selected,
.nav-commlink {
border-bottom: 0px;
padding: 6px 3px;
min-width: 100px;
float: left;
margin-top: 0.4em;
width: 23%;
bottom: auto;
}
.nav-ajax-left {margin-left: -1em; margin-top: 0px; }
nav #site-location,
nav #banner { position: relative; clear:both; }
ul.menu-popup { left: 0px; top 20px; }
}