Add responsive CSS

This commit is contained in:
=
2012-07-10 20:07:50 -04:00
parent d0b9038d1f
commit d911031ec5
3 changed files with 55 additions and 2 deletions

View File

@@ -263,7 +263,7 @@ select{min-width:30%;}
.site-navigation{background:#EEE;-webkit-box-shadow:inset rgba(0, 0, 0, 0.07) 0 0 40px;-moz-box-shadow:inset rgba(0, 0, 0, 0.07) 0 0 40px;box-shadow:inset rgba(0, 0, 0, 0.07) 0 0 40px;padding-top:20px !important;padding-right:20px !important;padding-bottom:20px !important;padding-left:20px !important;position:fixed;top:0;bottom:0;overflow:auto;width:240px;}
.build-date{margin-bottom:20px !important;color:#AAA;font-family:Helvetica,Arial,sans-serif;font-size:11px;}
.site-navigation ul{margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;margin-left:0px !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important;list-style:none;margin:0;padding:0;font-size:16px;}
.site-navigation>ul>li{margin-bottom:20px !important;}
.site-navigation>ul>li{margin-bottom:10px;}
.site-navigation a{text-decoration:underline;}.site-navigation a:hover{text-decoration:none;}
.site-navigation ul ul{margin-left:20px !important;padding-top:10px !important;font-size:12px;}.site-navigation ul ul a{text-decoration:none;}
.site-content{padding:20px 40px 40px 320px;}.site-content h1{clear:both;}
@@ -271,3 +271,4 @@ select{min-width:30%;}
.site-footer{clear:both;padding-top:40px !important;font-size:13px;text-align:center;}
.site-footer img{margin-left:2px;position:relative;top:-2px;vertical-align:middle;}
.site-footer ul{list-style:none;margin-right:0px !important;margin-left:0px !important;padding-right:0px !important;padding-left:0px !important;}
@media only screen and (max-width:1024px){.build-date{text-align:center;} .site-header{height:220px;position:absolute;top:20px;left:0;width:100%;} .site-navigation{margin-top:240px;padding:20px;position:relative;width:auto;}.site-navigation ul{border:1px solid #999;border-bottom:none;} .site-navigation li{margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;margin-left:0px !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important;} .site-navigation a{background:#CCC;display:block;border-bottom:1px solid #999;padding:10px;text-decoration:none;} .site-navigation ul ul{border:none;margin-top:0px !important;margin-right:0px !important;margin-bottom:0px !important;margin-left:0px !important;padding-top:0px !important;padding-right:0px !important;padding-bottom:0px !important;padding-left:0px !important;} .site-navigation ul ul a{background:transparent;} .site-content{padding:20px;} .top{display:inline-block;float:none;}}

View File

@@ -15,3 +15,55 @@
@import "site/site-navigation.less";
@import "site/site-content.less";
@import "site/site-footer.less";
/* Tablets and Smartphones */
@media only screen and (max-width : 1024px) {
.build-date{
text-align: center;
}
.site-header{
height: 220px;
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
.site-navigation{
margin-top: 240px;
padding: 20px;
position: relative;
width: auto;
ul{
border: 1px solid #999;
border-bottom: none;
}
li{
.man;
.pan;
}
a{
background: #CCC;
display: block;
border-bottom: 1px solid #999;
padding: 10px;
text-decoration: none;
}
ul ul{
border: none;
.man;
.pan;
}
ul ul a{
background: transparent;
}
}
.site-content{
padding: 20px;
}
.top{
display: inline-block;
float: none;
}
}

View File

@@ -21,7 +21,7 @@
font-size: 16px;
}
.site-navigation > ul > li{
.mbs;
margin-bottom: 10px;
}
.site-navigation a{
text-decoration: underline;