mirror of
https://github.com/there4/markdown-resume.git
synced 2024-12-03 08:59:35 -05:00
ca2e1db998
This fixes the tendency of large lists to flow past the section header and cause the columns of the list to not be aligned correctly. This also fixes an issue with the spacing between the end of said lists and `<hr>`s.
159 lines
2.4 KiB
CSS
159 lines
2.4 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;
|
||
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: 78%;
|
||
}
|
||
|
||
ul li {
|
||
width: 33%;
|
||
float: left;
|
||
}
|
||
ul dl {
|
||
dt {
|
||
font-size: 122%;
|
||
font-weight: normal;
|
||
margin-bottom: .75em;
|
||
}
|
||
dd {
|
||
padding: 0 4em 0 0;
|
||
}
|
||
}
|
||
|
||
ol {
|
||
float: left;
|
||
width: 79%;
|
||
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) {
|
||
|
||
|
||
} |