app/public/stylesheets/main.css
@media screen {
/* --- Reset Styles --- */
* {
list-style: none;
margin: 0;
padding: 0;
}
html, body {
height: 100%;
width: 100%;
}
/* --- Welcome Page Styles --- */
body {
background: #eee;
color: #333;
font-family: Sans-Serif;
line-height: 18px;
}
.wrapper {
background: #fff;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.3);
box-shadow: 0 0 10px rgba(0,0,0,.3);
margin: 16px auto;
max-width: 960px;
padding: 2.25%; /* 18px / 800px */
width: 85%;
}
h1 {
font-size: 36px;
line-height: 54px;
}
h2 {
border-bottom: 2px solid #ccc;
font-size: 24px;
line-height: 36px;
margin-bottom: 16px;
}
h3 {
font-size: 18px;
line-height: 36px;
}
p {
margin-bottom: 18px;
}
.main {
overflow: hidden;
}
.content {
float: left;
width: 60%; /* 480px / 800px */
}
.sidebar {
background: #eee;
border: 1px solid #ccc;
float: right;
padding: 2.08333333333%; /* 5px / 240px */
width: 30%; /* 240px / 800px */
}
.sidebar ul {
font-size: 14px;
}
.branding {
clear: both;
}
footer.branding {
border-top: 2px solid #ccc;
margin-top: 20px;
padding-top: 20px;
}
}
@media screen and (max-width: 600px) {
.wrapper {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
width: auto;
}
.content, .sidebar {
float: none;
width: 100%;
}
.sidebar {
background: transparent;
border: none;
border-top: 2px solid #ccc;
padding: 0;
}
h1 {
font-size: 24px;
line-height: 36px;
}
h2 {
font-size: 18px;
line-height: 24px;
}
}