mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-28 04:42:21 +00:00
72 lines
1.1 KiB
CSS
72 lines
1.1 KiB
CSS
/* General Setting */
|
|
|
|
/* Small screens (default) */
|
|
html { font-size: 100%; }
|
|
|
|
/* Medium screens (640px) */
|
|
@media (min-width: 40rem) {
|
|
html { font-size: 112%; }
|
|
}
|
|
|
|
/* Large screens (1024px) */
|
|
@media (min-width: 64rem) {
|
|
html { font-size: 120%; }
|
|
}
|
|
|
|
/* Grid */
|
|
|
|
*, *:before, *:after {
|
|
-moz-box-sizing: border-box;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.container {
|
|
margin: 0 auto;
|
|
max-width: 48rem;
|
|
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 {
|
|
color: #333;
|
|
margin: 0;
|
|
padding: 0;
|
|
|
|
font-family: Verdana, Arial;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
|