You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
1007 B
85 lines
1007 B
/* |
|
Keyword colors can be found at http://colours.neilorangepeel.com/ |
|
*/ |
|
|
|
/* border-box fix */ |
|
html { |
|
box-sizing: border-box; |
|
} |
|
*, *:before, *:after { |
|
box-sizing: inherit; |
|
} |
|
|
|
body { |
|
padding: 0; |
|
margin: 0; |
|
} |
|
h1, h2 { |
|
text-transform: uppercase; |
|
} |
|
|
|
/* Add padding to all of the .container child elements */ |
|
.container > * { |
|
padding: 20px; |
|
} |
|
.container { |
|
color: white; |
|
font-family: helvetica, arial, sans-serif; |
|
} |
|
|
|
header { |
|
background: skyblue; |
|
} |
|
main { |
|
background: slategray; |
|
/* FLOAT: LEFT; */ |
|
} |
|
nav { |
|
background: cadetblue; |
|
/* float: left; */ |
|
} |
|
aside { |
|
background: seagreen; |
|
} |
|
footer { |
|
background: darkslateblue; |
|
float: clear; |
|
} |
|
|
|
@media (min-width: 600px) { |
|
nav { |
|
width: 25%; |
|
float: left; |
|
} |
|
|
|
main { |
|
width: 75%; |
|
float: left; |
|
} |
|
|
|
aside { |
|
clear: both; |
|
} |
|
} |
|
|
|
@media (min-width: 850px) { |
|
main { |
|
width: 50%; |
|
} |
|
|
|
aside { |
|
width: 25%; |
|
clear: none; |
|
float: right; |
|
} |
|
|
|
footer { |
|
clear: both; |
|
} |
|
|
|
.container { |
|
max-width: 1000px; |
|
margin: 0 auto; |
|
} |
|
|
|
} |