/* ================================ pacific.css */ /* GLOBAL RESETS & DEFAULTS */ * { box-sizing: border-box; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; background-color: #EAEAEA; text-align: center; /* For narrow screens */ } h1, h2, h3 { margin: 0; padding: 0; } /* WRAPPER - MOBILE FIRST */ #wrapper { /* Remove any fixed widths/floats for mobile */ background-color: #90C7E3; padding-bottom: 20px; /* The border, width, box-shadow, and grid will be added in the large media query */ } /* HEADER */ header { background-color: #000033; color: #ffffff; text-align: center; padding: 0.5em 0; font-family: Georgia, "Times New Roman", serif; font-weight: bold; } /* Header Title Link */ header a { color: #ffffff; text-decoration: none; } header a:hover { color: #90C7E3; } h1 { padding: 0.5em 0; margin: 0; font-size: 2em; } /* NAVIGATION - MOBILE */ nav { background-color: #e3e3e3; text-align: center; padding: 0; /* No floats or widths here */ } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { border-bottom: 1px solid #003366; /* Dark blue bottom border */ padding: 0.5em 0; } /* NAVIGATION LINKS */ nav a { color: #003366; text-decoration: none; font-weight: bold; } nav a:visited { color: #003366; } nav a:hover { color: #A52A2A; /* Brownish hover (example) */ } /* HERO IMAGES (RESTORE BACKGROUND-IMAGE) */ #homehero, #yurthero, #trailhero { width: 100%; /* Full width on mobile */ height: 320px; /* Example height */ background-size: cover; background-repeat: no-repeat; background-position: center; } #homehero { background-image: url('coast2.jpg'); } #yurthero { background-image: url('yurt.jpg'); } #trailhero { background-image: url('trail.jpg'); } /* MAIN CONTENT */ main { background-color: #ffffff; padding: 1em; text-align: left; /* Let main text align left by default */ overflow: auto; } /* HEADINGS */ h2 { font-family: Georgia, "Times New Roman", serif; font-size: 1.8em; color: #003366; text-align: center; font-weight: bold; margin-bottom: 0.5em; } h3 { font-family: Georgia, "Times New Roman", serif; font-size: 1.2em; color: #000033; font-weight: bold; } /* PARAGRAPHS */ p { font-size: 1em; line-height: 1.5; margin: 0 0 1em 0; font-family: Georgia, "Times New Roman", serif; } /* UL INSIDE MAIN */ main ul { list-style-position: inside; list-style-image: url('marker.gif'); padding-left: 1em; } main ul li { margin-bottom: 0.5em; } /* FOOTER */ footer { background-color: #ffffff; padding: 1em; font-size: 0.9em; font-style: italic; text-align: center; border-top: 1px solid #000033; margin-top: 1em; } footer a { color: #0000EE; text-decoration: underline; } /* ========================================= MEDIUM LAYOUT: MIN-WIDTH: 600px ========================================= */ @media screen and (min-width: 600px) { /* Horizontal Navigation */ nav ul { display: flex; flex-flow: row nowrap; justify-content: space-around; } nav ul li { border-bottom: none; /* Remove bottom border in horizontal nav */ } /* Example: Add left/right padding for sections */ section { padding: 0 2em; } /* For pages that add class="content" on , display a 3-column grid in

*/ .content main { display: grid; grid-template-rows: auto; grid-template-columns: 1fr 1fr 1fr; gap: 1em; } .content h2 { grid-row: 1 / 2; grid-column: 1 / 4; /* Span across all 3 columns */ } .content section { grid-row: 2 / 3; grid-column: auto; text-align: center; .content footer { grid-row: auto; grid-column: 1 / 4; } } /* ========================================= LARGE LAYOUT: MIN-WIDTH: 1024px ========================================= */ @media screen and (min-width: 1024px) { #wrapper { margin: 0 auto; width: 80%; border: 1px solid #003366; box-shadow: 3px 3px 10px #333; display: grid; /* 4 rows: header, (hero in row 2), (main in row 3), footer in row 4 */ grid-template-columns: 180px 1fr; grid-template-rows: auto auto auto auto; } header { /* Header spans both columns in the first row */ grid-column: 1 / 3; grid-row: 1 / 2; /* ...other header styles... */ } /* Let the nav fill rows 2 AND 3 (the entire left column). That way, its background color extends behind the hero and main. */ nav { grid-column: 1 / 2; grid-row: 2 / 4; background: #FFFFFF; background: linear-gradient(180deg, #FFFFFF, #90C7E3); ul { flex-direction: column; padding-top: 1em; } } /* Hero image in the second column, row 2 */ #homehero, #yurthero, #trailhero { grid-column: 2 / 3; grid-row: 2 / 3; width: 100%; } /* Main content in the second column, row 3 */ main { grid-column: 2 / 3; grid-row: 3 / 4; padding: 1em; } /* Footer spans both columns in the last row (row 4) */ footer { grid-column: 1 / 3; grid-row: 4 / 5; } }