Created
March 19, 2012 17:56
-
-
Save rupl/2121547 to your computer and use it in GitHub Desktop.
RWD Denver Training mobile-first rough example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body { | |
padding: 0; | |
} | |
html { | |
-webkit-box-shadow: inset 0px 0px 55px 0px rgba(0, 0, 0, 0.2); | |
-moz-box-shadow: inset 0px 0px 55px 0px rgba(0, 0, 0, 0.2); | |
box-shadow: inset 0px 0px 55px 0px rgba(0, 0, 0, 0.2); | |
} | |
header { | |
border-bottom: 2px solid #333; | |
color: #ccc; | |
position: relative; | |
} | |
header h1 { | |
padding: 1em 0 0.25em 0; | |
font-family: "Times New Roman", "Times", serif; | |
text-align: left; | |
color: #666; | |
font-weight: normal; | |
} | |
h2 { | |
font-size: 2em; | |
border-bottom: 1px solid #ccc; | |
padding-bottom: 0.5em; | |
} | |
nav { | |
margin: 0; | |
border-top: 1px solid #ccc; | |
} | |
nav ul { | |
margin: 0; | |
padding: 0; | |
} | |
nav ul li { | |
list-style: none; | |
} | |
nav a, | |
nav a:visited { | |
display: block; | |
float: left; | |
width: 33.335%; /* round up to simulate infinite decimal repeater */ | |
font-weight: bold; | |
color: #6C8C6E; | |
text-align: center; | |
padding: .75em 0; | |
text-decoration: none; | |
} | |
nav ul li a:hover { | |
background: #6c8c6e; | |
} | |
nav ul li:hover a { | |
color: #eee; | |
text-shadow: 1px 1px 1px #49593f; | |
} | |
div.bio-info { | |
clear: both; | |
background-color: #Abbf8f; | |
padding: 1em; | |
margin-left: 2em; | |
-webkit-border-radius: 4px; | |
-moz-border-radius: 4px; | |
border-radius: 4px; | |
} | |
div.bio-info:hover { | |
background-color: #fefefe; | |
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35); | |
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35); | |
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35); | |
} | |
img.photo { | |
width: 100%; | |
background-color: #fefefe; | |
padding: 10px; | |
} | |
#main { | |
clear: both; | |
padding: 1em; | |
min-height: 300px; | |
border-bottom: 1px #555 dotted; | |
margin-bottom: 5px; | |
} | |
#main p, | |
#main blockquote { | |
overflow: hidden; | |
line-height: 1.5em; | |
} | |
#main blockquote { | |
border-left: 5px solid #aaa; | |
padding-left: 20px; | |
} | |
footer { | |
display: block; | |
margin-bottom: 2em; | |
padding: 1em; | |
background: #666; | |
color: #eee; | |
text-shadow: 1px 1px 1px #000; | |
-webkit-border-bottom-right-radius: 5px; | |
-webkit-border-bottom-left-radius: 5px; | |
-moz-border-radius-bottomright: 5px; | |
-moz-border-radius-bottomleft: 5px; | |
border-bottom-right-radius: 5px; | |
border-bottom-left-radius: 5px; | |
} | |
img.thumbnail { | |
clear: both; | |
width: 100%; | |
} | |
@media screen and (min-width: 768px) { | |
#container { | |
width: 768px; | |
margin: 0 auto; | |
} | |
div.bio-info { | |
width: 300px; | |
float: right; | |
} | |
img.photo { | |
width: 280px; | |
background-color: #fefefe; | |
padding: 10px; | |
} | |
div.bio-info dl {} | |
div.bio-info dl dt { | |
float: left; | |
clear: left; | |
width: 30%; | |
text-align: right; | |
margin-right: 1em; | |
font-weight: 700; | |
} | |
div.bio-info dl dd { | |
float: left; | |
margin: 0; | |
padding: 0; | |
} | |
img.thumbnail { | |
width: 140px; | |
} | |
img.floatleft { | |
float: left; | |
margin: 0 20px 20px 0; | |
} | |
img.floatright { | |
float: right; | |
margin: 0 0 20px 20px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment