mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 18:32:22 +00:00
edit css
This commit is contained in:
parent
616e7a3c0f
commit
3585cd1e08
54
css/app.css
54
css/app.css
@ -15,48 +15,6 @@ html { font-size: 100%; }
|
||||
|
||||
/* 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 */
|
||||
|
||||
body {
|
||||
@ -68,13 +26,18 @@ body {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
#sidebar {
|
||||
width: 300px;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
|
||||
overflow-y: scroll;
|
||||
overflow: -moz-scrollbars-vertical;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
margin-right: 20px;
|
||||
margin-top: 0;
|
||||
padding-left: 25px;
|
||||
@ -133,6 +96,13 @@ body {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@media (min-width: 40rem) {
|
||||
#content {
|
||||
width: 580px;
|
||||
padding-left:350px;
|
||||
}
|
||||
}
|
||||
|
||||
#content {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 150px;
|
||||
|
@ -16,12 +16,8 @@
|
||||
</head>
|
||||
<body>
|
||||
<!-- essential -->
|
||||
<div class="container">
|
||||
<div class="row clearfix">
|
||||
<div id="sidebar column fourth"></div>
|
||||
<div id="content column three-fourths"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebar"></div>
|
||||
<div id="content"></div>
|
||||
<!-- optional -->
|
||||
<div id="back_to_top">back to top</div>
|
||||
<div id="edit">edit</div>
|
||||
|
Loading…
x
Reference in New Issue
Block a user