@charset "UTF-8";
html, body {
margin: 0px;
padding: 0px;
text-align: center;
}
body {
background-color: white; /* This sets the overall background color to white */
color: rgba(0,176,38,1.00); /* This makes our test a pleasant green */
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif"; /* This makes all of our type a clean sans-serif */
}
.container {
position: relative;
display: flex;
min-height: 100vh; /* "min-height" property means make this object the specified height until the content within it exceeds that height, then stretch to fit. "vh" is a height measurement value. It means "viewport height" and measures the height of the bowser window displaying the website. The number in front is a percentage of the viewport height. In this case "100vh" means 100% of the viewport height or full screen height */
}
.michael {
width: 35vw; /* "vw" is a width measurement value. It means "viewport width" and measures the width of the bowser window displaying the website. The number in front is a percentage of the viewport height. In this case "35vw" means 35% of the viewport width. */
background-image: url("../images/michael-full.png");
background-position: right top;
background-repeat: no-repeat;
background-size: cover;
}
main {
width: 65vw; /* 65% of the viewport width */
}
header {
text-align: right;
padding: 35px 25px 10px 70px;
}
header h1 {
margin: 0px;
font-size: 4.5rem; /* "rem" is a type measurement. It means a percentage of the "em" size (the dimensions of the capital "M") of the default font in your HTML. It's better than "em" becuse it always measures from the tag while "em" can be affected by font sizing on it's container.*/
}
.gradient-stripe {
background-color: white;
height: 6px;
background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(0,176,38,1.00) 71.15%);
background-image: -moz-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(0,176,38,1.00) 71.15%);
background-image: -o-linear-gradient(0deg,rgba(255,255,255,1.00) 0%,rgba(0,176,38,1.00) 71.15%);
background-image: linear-gradient(90deg,rgba(255,255,255,1.00) 0%,rgba(0,176,38,1.00) 71.15%); /* All of this mess makes a CSS gradient. A pain to hand code. One of the few things Michael has been know to use Dreamweavre to do. */
}
.hamburger-container label, #hamburger {
display: none; /* This hides our checkbox and hamburger menu when the website is at larger resolutions */
}
.main-nav {
font-weight: bold;
text-align: right;
font-size: 1.75rem;
}
.main-nav ul {
list-style-type: none; /* This and "list-style-image" are used to strip the bullets off the bulleted list */
list-style-image: none; /* This and "list-style-type" are used to strip the bullets off the bulleted list */
display: flex;
justify-content: flex-end; /* This pins all of our buttons to the right */
margin: 0px;
padding: 25px 15px 15px 35px;
}
.main-nav ul li {
postion: relative; /* This makes sure our buttons can properly contain the dropdown menus without them pinning to corners of our borwser window */
}
.main-nav ul a /* Look at that three deep compound selector! This ones looking for tags inside of tags that are inside of a tag that has a class style of "main-nav" on it */ {
color: rgba(0,176,38,1.00);
text-decoration: none;
padding: 15px;
}
.main-nav ul a:hover /* Ooooooh, our first pseudo-class selector! In this case, this black type style will only be applied when the tag this style is applied to get's rolled over by a mouse. */ {
color: black;
}
/* Dropdown menu styles */
.main-nav ul li ul /* Look at that meaty compound selector! That's to style the unordered list that contains our drop down menu. Don't woory, they'll be getting weirder really quickly */ {
position: absolute; /* This lets us size our dropdown menu buttons without stretching the button that contains the menu */
flex-direction: column; /* This makes sure our dropdown menu drops down instead of being a parallel horizontal line under our menu */
background-color: white; /* I tossed in a background color so our menu is visible against the type */
border-top: 2px solid rgba(0,176,38,1.00); /* These boders add a nice little stroke to the top, left, and right of our menu */
border-left: 2px solid rgba(0,176,38,1.00);
border-right: 2px solid rgba(0,176,38,1.00);
padding: 0px; /* Cleaning out the padding from our ".main-nav ul" style further up the CSS */
margin-left: -85px; /* This moves the menu over to the left so that it's right edge is aligned with it's containing button */
display: none; /* This hides our dropdown menu */
}
.main-nav ul li:hover ul /* As promised, or compund selectors are getting weirder. This one has a pseudo-class style right smack in the middle. This one says to make our dropdown visible whenever the main menu - it's inside gets rolled over by a mouse */ {
display: block; /* This shows our dropdown menu */
}
.main-nav ul li ul a /* Now we're getting deeper! This one directly styles our buttons in your dropdown menu */ {
display: block; /* This makes sure our buttons fill their space and can be widened as needed */
border-bottom: 2px solid rgba(0,176,38,1.00); /* This puts a stroke on the last uncovered edge of our menu and separates our buttons */
min-width: 200px; /* This widens oure buttons */
}
.main-nav ul li ul a:hover /* This one controls the colors of the rollovers of the buttons in our dropdown menu */ {
color: white;
background-color: black;
}
/* End dropdown menu styles */
section {
color: black;
text-align: justify;
padding: 10px 30px 25px 80px;
font-size: 1.2rem;
line-height: 1.9rem; /* Open up that leading! */
clear: both; /* This keeps our content from being affected by the mobile nav */
}
.drop-cap {
color: rgba(0,176,38,1.00);
font-weight: bold;
font-size: 2em;
}
aside {
font-style: italic;
text-align: right;
font-size: 1.1rem;
line-height: 2rem;
}
aside img {
float: left;
margin: 0px 25px 30px 40px;
}
aside p {
margin: 30px 0px 0px 0px;
padding: 30px 50px 30px 0px;
background-image: url("../images/closing-quote.png"), url("../images/opening-quote.png"); /* Not one, but two background images! Each url() link is separated by a comma and a space*/
background-position: 96% bottom, 29% top; /* Two background positions too! The percentages are distances from the left edge, the other word pins the images to the top or the bottom */
background-repeat: no-repeat;
}
.clear {
clear: both;
}
footer {
color: black;
padding: 5px 30px 20px 80px;
text-align: right;
font-size: 0.85rem
}
@media only screen and (max-width: 1566px) /* Our first media query. Note how we only have those styles, properties and values we are modifying in each media query. No more and no less. That avoids duplication and makes life easier for us. */ {
header h1 {
font-size: 3.5rem; /* Shrinking Michael name to fit */
}
aside p {
background-position: 96% bottom, 35% top; /* Moving beginning quote in */
}
}
@media only screen and (max-width: 1260px) {
header h1 {
font-size: 3rem;
}
.main-nav {
font-size: 1.4rem; /* Shrinking navigation to fit */
}
aside p {
background-position: 96% bottom, 45% top;
}
}
@media only screen and (max-width: 1100px) {
header h1 {
font-size: 5rem;
}
.navbullet /* This is a little wild. It's a class style that only gets applied at 1100px and below. To users viewing the site at a higfher resolution, they will see nothing. The purpose of this style is to hide the separator bullets between our buttons so that we have a little more room in the navigation and to prep our nav for it's column display at lower resolutions. */ {
display: none;
}
section {
font-size: 1rem; /* Shrinking the bodycopy to fit */
line-height: 1.6rem;
}
aside img /* This style moves the Michael trapped in the circle above the pull quote */ {
display: block;
float: none;
margin: 35px auto 0px;
}
aside p {
margin: 0px;
background-position: 96% bottom, 1% top; /* Moving beginning quote out */
}
}
@media only screen and (max-width: 1000px) {
.main-nav {
font-size: 1.2rem;
}
}
@media only screen and (max-width: 1000px) {
.main-nav {
font-size: 1.2rem; /* Shrinking nav to fit */
}
}
@media only screen and (max-width: 900px) {
.michael {
display: none; /* Hiding the Michael picture to the left */
}
main {
width: 100vw; /* Enlarging the content area to fit 100% of the browser's viewport. 100vw means 100% of the device viewport that's displaying this */
}
header {
text-align: center; /* Align Michael's name to the center */
padding: 20px 10px 10px 10px; /* Give it more room at smaller sizes */
}
header h1 {
font-size: 5.5rem; /* Make the name plenty big */
}
.hamburger-container label /* The browser has gotten thin enough to trigger our hamburger menu. Let's show him off. */ {
display: block; /* Make the hamburger visible */
cursor: pointer; /* Put in a pointer so people know this is a button */
font-weight: bold; /* This is to make it bold and obvious */
font-size: 4rem; /* This is to make it huge so a finger can poke it */
padding: 0px 12px; /* Putting a little distance between the hamburger and it's edge */
line-height: 5rem; /* adding some vertical height to the box */
border: 4px solid rgba(0,176,38,1.00); /* Show where the bedges are */
border-radius: 10px; /* Round the edges so it's not so harsh */
margin: 20px; /* Kick it away from the edge of the browser window and the lane above it */
float: right; /* Send it over to the right like the man nav on higher resolution browser windows */
}
.hamburger-container label:hover /* Throw a rollover on it so users know it's clickable/pokable */ {
background-color: black;
color: lightgray;
border: 4px solid lightgray;
}
.hamburger-container input:checked ~ .main-nav /* This absolutely insane selector makes our menu visible when the invisible checkbox is checked by someone clicking / poking the hamburger. */ {
display: block;
}
.main-nav {
text-align: center; /* Centering the nav text to prepare to make it a coulmn */
font-size: 2.5rem; /* Make the text nice and big for fat fingers to touch instead of precise cursors */
display: none;
clear: both;
}
.main-nav ul {
flex-direction: column; /* Convert our lovely navigation row into an equally lovely navigation column */
padding: 15px;
}
.main-nav ul li:last-child {
border-bottom: 2px solid rgba(0,176,38,1.00); /* Put a green border on the last
- in our
tags. This will keep the borders between buttons from getting too thick */
}
.main-nav ul a {
display: block; /* This stretches to buttons to 100% of the width of their container and lets us add margin and padding to make them easier for fat fingers to use. */
border-top: 2px solid rgba(0,176,38,1.00); /* These three borders add separation between out buttons */
border-left: 2px solid rgba(0,176,38,1.00);
border-right: 2px solid rgba(0,176,38,1.00);
padding: 20px; /* This padding makes these buttons even more fat and easy to use for fingers */
}
.main-nav ul a:hover /* Changing the rollover to suit a column layout better */ {
color: white;
background-color: rgba(0,176,38,1.00);
}
/* Dropdown menu styles */
.main-nav ul li ul {
position: relative; /* This allows our dropdowns to slide seamlessly below their parent button */
background-color: darkseagreen; /* Separate our dropdown menus visually from their parent buttons with a different background color */
border: none; /* Clean off any borders these buttons might have once had to avoid doubling up on borders. We'll let our "".main-nav ul a" style take care of the border for these */
padding: 0px; /* Clean off any padding these might have had */
display: block; /* Makes sure the dropdowns are visible. Lol! */
margin: 0px; /* Clean off any margin these might have had */
}
.main-nav ul li ul li:last-child {
border-bottom: none; /* Clean off any bottom borders these buttons might have once had to avoid doubling up on borders. We'll let our ".main-nav ul li:last-child" style take care of the border for this one. */
}
.main-nav ul li ul a {
display: block; /* Make sure these buttons fill out their space */
border-bottom: none; /* Clean off any bottom borders these buttons might have once had to avoid doubling up on borders. We'll let our ".main-nav ul a" style take care of the border for these */
color: white;
width: auto; /* This forces the width to fill the space that's containg it rather than expanding to 200px wide as the cascade would have us do from the min-width on the "main-nav ul li ul a" style ouside of these media queries */
}
.main-nav ul li ul a:hover /* Adjusting the rollovers to something that better suits this new column menu */ {
color: white;
background-color: black;
}
/* End dropdown menu styles */
aside p {
background-position: 96% bottom, 0% top; /* Move the beginning quote further outward */
}
}