mirror of
https://github.com/there4/markdown-resume.git
synced 2024-12-03 08:59:35 -05:00
f370359d82
Additionally, this updates the page width so that in the transition to the widescreen layout there is never any horizontal page scrolling.
151 lines
2.1 KiB
CSS
151 lines
2.1 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: 40px;
|
||
right: 50px;
|
||
position: absolute;
|
||
}
|
||
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;
|
||
}
|
||
h1 {
|
||
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) {
|
||
|
||
|
||
} |