Refactor. JS time!

Assignments/HTML/MP06_CalebFontenot/public_html/pacific.css

@@ -0,0 +1,202 @@
+/*
+Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
+Click nbfs://nbhost/SystemFileSystem/Templates/ClientSide/css.css to edit this template
+*/
+/* 
+    Created on : Jan 25, 2023, 9:50:47 AM
+    Author     : caleb
+*/
+* {
+    box-sizing: border-box;
+}
+body {
+    background-color: #EAEAEA;
+
+    color: #555555;
+    font-family: Arial, Helvetica, sans-serif;
+}
+
+header {
+    background-color: #002171;
+    color: #FFFFFF;
+    text-align: center;
+}
+
+nav {
+    //float: left;
+    //width: 160px;
+    font-weight: bold;
+    padding: 0;
+    font-size: 120%;
+    text-align: center;
+    text-decoration: none;
+}
+
+nav ul {
+    list-style-type: none;
+    margin: 0;
+    padding-left: 0;
+    font-size: 1.2em;
+}
+nav li {
+    border-bottom: 1px solid darkblue;
+}
+
+nav a:link, a:visited {
+    color: #344873;
+    text-decoration: none;
+}
+nav :hover {
+    color: #A52A2A;
+}
+header a:link a:visited {
+    text-decoration: none;
+    color: #FFFFFF;
+}
+
+
+main {
+    padding: 1px 20px 20px 30px;
+    display: block;
+    overflow: auto;
+    background-color: #FFFFFF;
+}
+
+h1{
+    margin-bottom: 0;
+    font-family: Georgia, "Times New Roman", sans-serif;
+    //font-size: 3em;
+    padding-bottom: 0.5em;
+    letter-spacing: 0.25em;
+}
+h2 {
+    color: #1976D2;
+    font-family: Georgia, "Times New Roman", sans-serif;
+    text-shadow: 1px 1px #CCCCCC;
+}
+h3 {
+    color: #000033;
+    font-family: Georgia, "Times New Roman", sans-serif;
+}
+dt {
+    color: #002171;
+}
+footer {
+    font-size: 75%;
+    font-style: italic;
+    font-family: Georgia, "Times New Roman", sans-serif;
+    text-align: center;
+    padding: 2em;
+}
+
+img {
+    height: 100%;
+    width: 100%;
+}
+// Classes and ids
+.resort {
+    color: #1976D2;
+    font-weight: bold;
+}
+
+#contact { font-size: 90%}
+
+#homehero {
+    height: 300px;
+    //margin-left: 190px;
+    background-image: url("images/coast2.jpg");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+#yurthero {
+    height: 300px;
+    background-image: url("images/yurt.jpg");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    //margin-left: 190px;
+}
+#trailhero {
+    height: 300px;
+    background-image: url("images/trail.jpg");
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    //margin-left: 190px;
+}
+#body {
+    background-color: #FFFFFF;
+    //margin-left: 190px;
+    width: auto;
+}
+
+#wrapper {
+    background-color: #90C7E3;
+    //width: 80%;
+    background-image: linear-gradient(to bottom, #FFFFFF, #90C7E3);
+    //min-width: 960px;
+    //max-width: 2048px;
+    //box-shadow: 1px 1px 1px #000033;
+    //margin-left: auto;
+    //margin-right: auto;
+}
+#headerlink {
+    color: white;
+    text-decoration: none;
+}
+
+table {
+    border: 0px;
+}
+nav li {
+    box-shadow: 1px 1px 1px blue;
+    //font-size: 0.5em;
+}
+
+// Medium Styles
+
+@media (min-width: 600px) {
+    nav ul {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-around;
+    }
+    nav li {
+        boarder-bottom: none;
+    }
+    section {
+        margin-left: 2em;
+        margin-right: 2em;
+        flex: 1;
+    }
+    .flow {
+        display: flex;
+        flex-direction: row;
+    }
+}
+@media (min-width: 1024px) {
+    #wrapper {
+        margin: auto;
+        width: 80%;
+        border: 1px solid #002171;
+        box-shadow: 3px 3px 3px #002171;
+    }
+    nav { text-align: left;
+          padding-left: 1em;
+        
+    }
+@supports (display: grid)
+    nav ul {flex-direction: column;
+            padding-top: 1em;}
+    .hero { grid-area: hero;}
+    header { grid-area: header;}
+    nav { grid-area: nav;}
+    main { grid-area: main;}
+    footer { grid-area: footer; }
+    #wrapper { display: grid;
+               grid-template: "header header"
+                              "nav  hero"
+                              "nav  main"
+                              "nav footer"
+                              / 180px 1fr;
+    }
+}