mirror of
https://github.com/codeguy/php-the-right-way.git
synced 2025-08-06 14:06:34 +02:00
Add responsive CSS
This commit is contained in:
@@ -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;}}
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
@@ -21,7 +21,7 @@
|
||||
font-size: 16px;
|
||||
}
|
||||
.site-navigation > ul > li{
|
||||
.mbs;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.site-navigation a{
|
||||
text-decoration: underline;
|
||||
|
Reference in New Issue
Block a user