159 lines
2.4 KiB
CSS
Raw Normal View History

/*
Mobile layout
240479 px
Zoomed out below 320 px
*/
@media screen and (min-width: 15em) {
}
/*
Wide mobile layout
480-767 px
Zoomed in above 480 px
*/
@media screen and (min-width: 30em) {
}
/*
Tablet layout
600-911 px
Zoomed in above 600 px
*/
@media screen and (min-width: 37.5em) {
body {
padding: 2em 0;
}
blockquote {
top: 10px;
right: 50px;
position: absolute;
}
h1 { /* Open up the top section height so we don't collapse on the blockquote */
margin-top: .5em;
}
ol {
margin: 0 0 0 1em;
}
ol li {
width: 50%;
margin: 0;
}
ol li:nth-child(1), ol li:nth-child(2) {
border-top: none;
}
}
/*
Widescreen layout
912-1887 px
Zoomed in above 912 px
*/
@media screen and (min-width: 57em) {
.container {
width: 912px;
}
.resume {
position:relative;
padding: 40px 50px;
}
blockquote {
top: 40px;
right: 50px;
position: absolute;
}
h1 {
margin-top: 0;
font-size: 48px;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: normal;
}
h2 {
text-transform: uppercase;
font-style: italic;
letter-spacing: 2px;
font-weight: normal;
}
h3 {
float: left;
width: 16%;
}
h3+p {
float: left;
width: 84%;
}
ul li {
width: 28%;
float: left;
}
ul dl {
dt {
font-size: 122%;
font-weight: normal;
margin-bottom: .75em;
}
dd {
padding: 0 4em 0 0;
}
}
ol {
float: left;
width: 84%;
margin: .6em 0 0;
}
ol li {
width: 33%;
margin: 0;
}
ol li:nth-child(3n) {
width: 34%;
}
ol li:nth-child(1), ol li:nth-child(2), ol li:nth-child(3) {
border-top: none;
}
dl {
margin: .5em 0 0;
dt {
}
dd {
}
strong {
float: right;
margin-top: -2em;
}
em {
font-size: 130%;
font-style: normal;
}
}
}
/*
Huge-screen layout
1888-2520 px
Zoomed in above 1920 px
*/
@media screen and (min-width: 118em) {
}