1
0
Fork 0
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
reyasume/_includes/assets/css/resizing.css

109 lines
2.1 KiB

/* Too small for big margins */
@media only screen and (max-width: 700px) and (min-width: 571px) {
main {
padding: 0 calc((100vw - 550px) / 2) 72px calc((100vw - 550px) / 2);
}
}
@media only screen and (max-width: 570px) {
main {
padding: 0 10px 72px 10px;
}
#print {
display: none;
}
}
/* Too small to display the full name, so hide last name and put the
* dates in the education and experience sections on their own lines */
@media only screen and (max-width: 550px) {
.lastname {
display: none;
}
.program .date {
position: static;
text-align: inherit;
}
}
/* Too small to display both names, so shorten first name to "Mari"
* Also, please get a new phone, or resize the window */
@media only screen and (max-width: 400px) {
.fullname {
display: none;
}
}
/* Large desktop only - full size columns and empty space */
@media only screen and (min-width: 1307px) {
main, footer {
width: 1307px;
margin-left: auto;
margin-right: auto;
}
}
@media only screen and (min-width: 1307px) {
:root {
font-size: 20px;
}
}
@media only screen and (min-width: 900px) and (max-width:1307px) {
:root {
font-size: calc(13px + (100vw - 900px) * 7 / 407)
}
}
/* Not large desktop - no empty space on the sides */
@media only screen and (max-width: 1119px) {
main {
width: 100%;
}
}
/* Smaller than desktop - no columns */
@media only screen and (max-width: 815px) {
#content .divider {
display: none;
}
#content > .left {
width: auto;
float: none;
clear: none;
padding-right: 0;
}
#content > .right {
width: auto;
float: none;
clear: none;
padding-left: 0;
}
}
/* Phone or tablet only - single column, no empty space */
@media only screen and (max-width: 960px) {
}
/* Tablet or desktop only */
@media only screen and (min-width: 700px) {
}
/* Phone only */
@media only screen and (max-width: 699px) {
}
/* Large phone only */
@media only screen and (min-width: 500px) and (max-width: 699px) {
}
/* Large phone, tablet, or desktop only */
@media only screen and (min-width: 500px) {
}
/* Small phone only */
@media only screen and (max-width: 499px) {
}