book/es6tutorial
1
0
Fork 0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00
Code Issues Releases Wiki Activity

edit css

Browse Source
This commit is contained in:
ruanyf 2014-04-20 21:56:18 +08:00
parent 616e7a3c0f
commit 3585cd1e08
2 changed files with 15 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
css/app.css
View File

@ -15,48 +15,6 @@ html { font-size: 100%; }
/* Grid */ /* Grid */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.container {
margin: 0 auto;
max-width: 60rem;
width: 90%;
}
@media (min-width: 40rem) {
.column {
float: left;
padding-left: 1rem;
padding-right: 1rem;
}
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%; }
.column.third { width: 33.3%; }
.column.fourth { width: 25%; }
.column.three-fourths { width: 75%; }
.column.flow-opposite { float: right; }
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Ditto */ /* Ditto */
body { body {
@ -68,13 +26,18 @@ body {
font-size: 0.8em; font-size: 0.8em;
} }
@media (min-width: 40rem) {
#sidebar { #sidebar {
width: 300px;
position: fixed; position: fixed;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
overflow: -moz-scrollbars-vertical; overflow: -moz-scrollbars-vertical;
}
}
#sidebar {
margin-right: 20px; margin-right: 20px;
margin-top: 0; margin-top: 0;
padding-left: 25px; padding-left: 25px;
@ -133,6 +96,13 @@ body {
font-size: 12px; font-size: 12px;
} }
@media (min-width: 40rem) {
#content {
width: 580px;
padding-left:350px;
}
}
#content { #content {
padding-top: 10px; padding-top: 10px;
padding-bottom: 150px; padding-bottom: 150px;

8
index.html
View File

@ -16,12 +16,8 @@
</head> </head>
<body> <body>
<!-- essential --> <!-- essential -->
<div class="container"> <div id="sidebar"></div>
<div class="row clearfix"> <div id="content"></div>
<div id="sidebar column fourth"></div>
<div id="content column three-fourths"></div>
</div>
</div>
<!-- optional --> <!-- optional -->
<div id="back_to_top">back to top</div> <div id="back_to_top">back to top</div>
<div id="edit">edit</div> <div id="edit">edit</div>