eryn/erynwells.me
1
0
Fork 0
Code Issues 8 Pull requests 1 Projects Releases Packages Activity Actions

Lots of media query tweaks to make it look nice

Browse source
This commit is contained in:
Eryn Wells 2017-05-07 18:14:39 -07:00
parent d77751eb9d
commit 655380b61e
3 changed files with 62 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

39
root/styles/home.css
View file

@ -1,21 +1,18 @@
@import url(./main.css); @import url(./main.css);
html, body {
height: 100%;
}
body {
/* Flex box: center everything vertically */
align-items: center;
}
.wrapper { .wrapper {
width: 100%;
margin: 20px 8px 20px 8px;
padding: 10px 0 2px 0;
text-align: center; text-align: center;
} }
header {
margin-bottom: 20px;
}
footer {
margin: 0;
padding: 0;
}
.nav { .nav {
text-align: center; text-align: center;
} }
@ -32,25 +29,9 @@ footer {
color: #3486ff; color: #3486ff;
} }
/* Desktops */ @media only screen and (min-width: 760px) {
@media only screen and (min-width: 768px) {
.wrapper { .wrapper {
margin-top: 120px;
padding: 60px 0 8px 0;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
} }
.wrapper {
width: 640px;
}
body {
/* Flex box: center everything vertically */
align-items: center;
}
header {
margin-bottom: 60px;
}
} }

40
root/styles/main.css
View file

@ -3,7 +3,8 @@
html, html,
body, body,
div, div,
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6,
header, footer {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -14,6 +15,9 @@ body, h1, h2, h3, h4, h5, h6 {
} }
body { body {
/* Flex box: center everything horizontally */
display: flex;
justify-content: center;
font-size: 10pt; font-size: 10pt;
} }
@ -52,20 +56,38 @@ a {
transition: color 100ms; transition: color 100ms;
} }
/* Tablets */ @media only screen and (max-width: 500px) {
@media only screen and (min-width: 600px) { header {
margin-bottom: 20px;
}
.wrapper {
width: 100%;
padding: 0 8px;
}
} }
/* Desktops */ @media only screen and (min-width: 500px) {
@media only screen and (min-width: 768px) { header {
margin-bottom: 60px;
}
.wrapper {
width: 480px;
padding: 60px 0 8px 0;
}
}
@media only screen and (min-width: 760px) {
body { body {
/* Flex box: center everything horizontally */ font-size: 13pt;
display: flex;
justify-content: center;
font-size: 10pt;
} }
h1 { h1 {
font-size: 4em; font-size: 4em;
} }
.wrapper {
width: 640px;
}
} }

31
root/styles/resume.css
View file

@ -1,11 +1,6 @@
@import url(./main.css); @import url(./main.css);
.wrapper { .wrapper {
margin-top: 28px;
}
#resume {
width: 100%;
margin: 8px; margin: 8px;
} }
@ -94,10 +89,26 @@ dd {
margin-left: 1em; margin-left: 1em;
} }
/* Desktops */ @media only screen and (max-width: 500px) {
@media only screen and (min-width: 768px) { .wrapper {
#resume { margin-top: 8px;
width: 640px; }
margin: 0; }
@media only screen and (min-width: 500px) {
header {
margin-bottom: 0;
}
.wrapper {
padding-top: 0;
}
}
@media only screen and (min-width: 760px) {
.wrapper {
width: 640px;
margin: 0;
padding: 60px 0;
} }
} }