html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body {
background-color: #EEE;
}
a {
color: #000;
}
#joseph-img {
display: block;
width: 20vw;
height: 20vw;
margin-left: auto;
margin-right: auto;
border-radius: 10vw;
margin-top: 8vw;
}
h1, h2, h3, h4, a, p, span, button, input {
color: #000;
font-family: "Roboto", sans-serif;
font-weight: 500;
}
h1 {
display: block;
font-size: 6vw;
margin-left: auto;
margin-right: auto;
margin-top: 3vw;
text-align: center;
}
p {
display: block;
font-size: 3vw;
margin-left: auto;
margin-right: auto;
margin-top: 2vw;
text-align: center;
width: 50vw;
}
.unit {
width: 75vw;
border: 1vw solid #000;
border-radius: 1vw;
margin: 10vw auto;
text-align: center;
}
.unit img {
width: 60vw;
margin: 2vw auto;
}
h2 {
font-size: 3.5vw;
margin-top: 1vw;
}
.unit p {
margin-bottom: 4vw;
color: #000;
}
#nav-container {
width: 90vw;
margin-top: 5vw;
margin-bottom: 2vw;
margin-left: auto;
margin-right: auto;
}
#top-of-nav, #bottom-of-nav {
text-align: center;
height: 8vw;
}
.nav-box {
font-size: 3vw;
margin: 1vw;
padding: 0.5vw;
}
#purple {
background-color: #000;
color: #EEE;
border: 1vw solid #000;
cursor: pointer;
}
#pink {
background-color: #EEE;
color: #000;
border: 1vw solid #000;
cursor: pointer;
}
#red {
background-color: #EEE;
color: #000;
border: 1vw solid #000;
cursor: pointer;
}
#blue {
background-color: #EEE;
color: #000;
border: 1vw solid #000;
cursor: pointer;
}
#legal_container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 3vw;
margin-left: auto;
margin-right: auto;
width: 89vw;
}
#float_left, #float_right {
border: 1vw solid #000;
border-radius: 1vw;
text-align: center;
padding: 1.5vw;
width: 30vw;
}
footer h1 {
margin-bottom: 2vw;
}
footer h2, footer p {
font-size: 2vw;
margin: 0 auto;
width: 28vw;
}
#nav-links {
margin: 0 auto;
text-align: center;
}
#nav-links h4, #nav-links a {
font-size: 3vw;
color: #000;
}
#nav-links a {
margin: 1vw;
text-decoration-thickness: 0.4vw;
}
hr {
width: 50vw;
height: 1vw;
color: #000;
background-color: #000;
}
/*
The following code applies only to the Unit Conversion page.
*/
/*
Code directly below gets rid of arrows in input field for most browsers.
*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/*
Code directly below gets rid of arrows in input field on Firefox.
*/
input[type=number]{
-moz-appearance: textfield;
appearance: textfield;
}
#hold_number {
margin: 0 auto;
text-align: center;
}
#enter_num {
width: 45vw;
font-size: 3vw;
border: 1vw solid #000;
color: #000;
background-color: #EEE;
text-align: right;
}
#convert_button {
font-size: 3vw;
color: #EEE;
background-color: #000;
border: 1vw solid #000;
font-weight: 500;
}
#convert_button:active {
background-color: #EEE;
color: #000;
}
.measurement {
width: 75vw;
border: 1vw solid #000;
margin: 3.5vw auto;
text-align: center;
}
.measurement h3 {
font-size: 5vw;
margin: 1vw;
}
#p2, #p4, #p6 {
margin-bottom: 1vw;
}
/*
WHAT IS LEFT TO DO:
1: Update below section for purple, at min-width 1000px.
^ done
2: Update all other CSS files completely.
^ done
3: Double check the math to see that it is correct.
^ done
4: Add comments to code, and alt tags if needed.
^ done
5: Add navigation bar to both HTML pages.
^ done
6: Change img for this page only.
^ done
7: Publish newly edited pages to josephharrisongiroux.com.
*/
/*
If the browser window is at least 1000px, the content will not increase in width further.
*/
@media (min-width: 1000px) {
#joseph-img {
width: 200px;
height: 200px;
border-radius: 100px;
margin-top: 80px;
}
h1 {
font-size: 60px;
margin-top: 30px;
}
p {
font-size: 30px;
margin-top: 20px;
width: 500px;
}
.unit {
width: 750px;
border: 10px solid #000;
margin: 100px auto;
text-align: center;
}
.unit img {
width: 600px;
margin: 20px auto;
}
h2 {
font-size: 35px;
margin-top: 10px;
}
.unit p {
margin-bottom: 40px;
color: #000;
}
#nav-container {
width: 900px;
margin-top: 50px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
#top-of-nav, #bottom-of-nav {
text-align: center;
height: 80px;
}
.nav-box {
font-size: 30px;
margin: 10px;
padding: 5px;
}
#purple {
background-color: #000;
color: #EEE;
border: 10px solid #000;
}
#pink {
background-color: #EEE;
color: #000;
border: 10px solid #000;
}
#red {
background-color: #EEE;
color: #000;
border: 10px solid #000;
}
#blue {
background-color: #EEE;
color: #000;
border: 10px solid #000;
}
#legal_container {
margin-bottom: 30px;
width: 890px;
}
#float_left, #float_right {
border: 10px solid #000;
border-radius: 10px;
text-align: center;
padding: 15px;
width: 300px;
}
footer h1 {
margin-bottom: 20px;
}
footer h2, footer p {
font-size: 20px;
margin: 0 auto;
width: 280px;
}
#nav-links {
margin: 0 auto;
text-align: center;
}
#nav-links h4, #nav-links a {
font-size: 30px;
color: #000;
}
#nav-links a {
margin: 10px;
text-decoration-thickness: 4px;
}
hr {
width: 500px;
height: 10px;
color: #000;
background-color: #000;
}
/*
The below section only applies to Unit Conversion page.
*/
/*
#enter_num {
width: 450px;
font-size: 30px;
border: 10px solid #90F;
color: #90F;
background-color: #EEE;
text-align: right;
}
#convert_button {
font-size: 30px;
color: #EEE;
background-color: #90F;
border: 10px solid #90F;
font-weight: 500;
}
#convert_button:active {
background-color: #EEE;
color: #90F;
}
.measurement {
width: 750px;
border: 10px solid #90F;
margin: 35px auto;
text-align: center;
}
.measurement h3 {
font-size: 50px;
margin: 10px;
}
#p2, #p4, #p6 {
margin-bottom: 10px;
}
*/
}