151 lines
2.2 KiB
CSS
151 lines
2.2 KiB
CSS
|
||
|
||
/*
|
||
Mobile layout
|
||
240–479 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;
|
||
letter-spacing: -1px;
|
||
}
|
||
h2 {
|
||
text-transform: uppercase;
|
||
letter-spacing: 3px;
|
||
}
|
||
|
||
h3 {
|
||
float: left;
|
||
width: 20%;
|
||
}
|
||
|
||
h3+p {
|
||
float: left;
|
||
width: 80%;
|
||
}
|
||
ul dl {
|
||
dt {
|
||
font-size: 122%;
|
||
font-weight: normal;
|
||
margin-bottom: .75em;
|
||
}
|
||
dd {
|
||
padding: 0 4em 0 0;
|
||
}
|
||
}
|
||
|
||
ol {
|
||
float: left;
|
||
width: 80%;
|
||
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) {
|
||
|
||
|
||
}
|