spincycle
Version:
A reactive message router and object manager that lets clients subscribe to object property changes on the server
88 lines (77 loc) • 1.43 kB
CSS
body {
font: 24px Helvetica;
background: #999999;
margin:0;
padding:0;
height:100%;
}
html {
height:100%;
}
#main {
min-height: 800px;
margin: 0px;
padding: 0px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row;
flex-flow: row;
}
#main > article {
margin: 1px;
padding: 1px;
border: 1px solid #cccc33;
border-radius: 3pt;
background: #679DC3;
-webkit-flex: 3 1 60%;
flex: 3 1 60%;
-webkit-order: 2;
order: 2;
}
#main > nav {
padding: 1px;
border: 1px solid #679DC3;
border-radius: 3pt;
background: #286895;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 1;
order: 1;
}
#main > aside {
margin: 1px;
padding: 3px;
border: 1px solid #417CA6;
border-radius: 3pt;
background: #417CA6;
-webkit-flex: 1 6 20%;
flex: 1 6 20%;
-webkit-order: 3;
order: 3;
}
header, footer {
display: block;
margin: 1px;
padding: 1px;
min-height: 10%;
border: 1px solid #9CC4E0;
border-radius: 3pt;
background: #9CC4E0;
}
/* Too narrow to support three columns */
@media all and (max-width: 640px) {
#main, #page {
-webkit-flex-flow: column;
flex-flow: column;
flex-direction: column;
}
#main > article, #main > nav, #main > aside {
/* Return them to document order */
-webkit-order: 0;
order: 0;
}
#main > nav, #main > aside, header, footer {
min-height: 50px;
max-height: 50px;
}
}