styling media queries

2021-05-15 15:35:52 -04:00
parent b63e5ca1ff
commit 37152f1614
2 changed files with 245 additions and 207 deletions
--- a/index.html
+++ b/index.html
@@ -15,9 +15,10 @@
    <title>Tyler Koenig</title>
  </head>
  <body>
+    <div id="wrapper">
      <nav>
+        <a href="index.html">TYLER KOENIG</a>
        <ul>
-        <li style="float: left"><a href="index.html">TYLER KOENIG</a></li>
          <li><a href="#projects" target="_self">PROJECTS</a></li>
          <li><a href="#contact" target="_self">CONTACT</a></li>
          <li><a href="#bio" target="_self">ABOUT</a></li>
@@ -39,8 +40,8 @@
          <div id="bio">
            <h2>about me</h2>
            <p>
-            I'm Tyler Koenig, a lifelong student. Graduated with an Associate of
-            Arts from Lorain County Community College in 2018.
+              I'm Tyler Koenig, a lifelong student. Graduated with an Associate
+              of Arts from Lorain County Community College in 2018.
            </p>
            <h4>skills</h4>
            <ul>
@@ -120,7 +121,10 @@
                  >
                </h3>
              </div>
-            <img src="/images/shelter.png" alt="virtual-pet-shelter-console" />
+              <img
+                src="/images/shelter.png"
+                alt="virtual-pet-shelter-console"
+              />
              <ul class="project-skills">
                <h4>skills</h4>
                <li>TDD</li>
@@ -172,5 +176,6 @@
          ></a>
        </div>
      </footer>
+    </div>
  </body>
 </html>
--- a/style.css
+++ b/style.css
@@ -1,4 +1,5 @@
 body {
+  box-sizing: border-box;
  color: #c9cacc;
  background-color: #1b1b1b;
  font-size: 15px;
@@ -6,39 +7,40 @@ body {
  font-weight: 400;
  line-height: 1.725;
  text-rendering: geometricPrecision;
-  min-height: 100%;
+  min-height: 100vh;
  margin: 0 auto;
 }

-@media (max-width: 768px) {
-  nav {
+#wrapper {
  display: flex;
  flex-direction: column;
+  width: 100%;
+  margin: 0 auto;
 }
+
+nav {
+  /* border: 1px solid red; */
+  /* margin: 0 auto; */
+  /* width: 70%; */
+}
+
+nav a {
+  text-decoration: none;
+  border: 1px solid yellow;
+  padding: 1rem;
+  font-weight: 600;
+  display: flex;
+  justify-content: center;
+  color: #c9cacc;
 }

 nav ul {
  list-style-type: none;
-  margin: 0 auto;
-  padding: 0;
-  overflow: hidden;
+  margin: auto;
+  padding: 0em;
 }

-nav li {
-  float: right;
-}
-
-nav li a {
-  display: block;
-  color: #c9cacc;
-  font-weight: 600;
-  text-align: center;
-  letter-spacing: 0.18rem;
-  padding: 14px 16px;
-  text-decoration: none;
-}
-
-nav li a:hover {
+nav a:hover {
  background-color: #2a9d8f;
  transition: 150ms ease-in;
 }
@@ -61,8 +63,11 @@ header img {
 }

 h1 {
+  line-height: 2rem;
  /* border: 1px solid red; */
-  margin: 0.5rem;
+  /* margin: .5rem auto; */
+  /* justify-content: space-evenly; */
+  /* text-align: center; */
  letter-spacing: 0.01rem;
 }

@@ -88,27 +93,13 @@ h4 {
  letter-spacing: 0.01rem;
 }

-/* h2 {
-  font-size: 1.3rem;
-} */
-
-main {
-  width: 620px;
-  margin: 0 auto;
-}
-
 #aboutMe {
-  display: flex;
-  border: 2px solid black;
+  border: 2px solid white;
  padding: 1.5rem;
-  margin: 0 auto;
-  text-align: center;
-  justify-content: center;
  letter-spacing: 0.01rem;
 }

 #bio {
-  flex: 3;
  border: 1px solid purple;
  padding: 1.5rem;
  text-align: start;
@@ -123,17 +114,13 @@ main {
 }

 #contact {
-  flex: 1;
+  /* justify-content: space-between; */
  border: 1px solid red;
-  text-align: end;
-  margin: 0 auto;
  padding: 1.5rem;
 }

 .contactLinks li {
-  list-style: none;
-  line-height: 2rem;
-  letter-spacing: 0.01rem;
+  display: inline;
 }

 .contactLinks a {
@@ -148,22 +135,26 @@ main {
 }

 #projects {
+  display: flex;
+  flex-direction: column;
  border: 2px solid green;
  padding: 1.5rem;
 }

 #projects h2 {
-  margin: 0 auto;
+  margin: 0;
  padding: 1.5rem;
  border: 1px solid #3d405b;
 }

 .project-item {
+  display: flex;
+  flex-direction: column;
  border: 1px solid blue;
  margin: 0 auto;
  text-align: center;
  font-weight: 200;
-  padding: 1.5rem;
+  /* padding: 1.5rem; */
 }

 .project-item a {
@@ -179,34 +170,31 @@ main {
  border: 1px solid brown;
  text-align: left;
  margin: 0 auto;
-  /* padding: 1rem; */
-}
-
-#projects h4 {
-  font-weight: 400;
+  padding: 1.5rem;
 }

 .project-skills {
  color: #666;
  border: 1px solid red;
  list-style: none;
-  width: 33%;
-  margin: 1.5rem auto;
-  text-align: end;
-  float: left;
-  line-height: 1.15rem;
+  width: 66%;
+  margin: 0 auto;
+  line-height: 1.25rem;
+  text-align: start;
+  padding-top: 0;
+  padding-bottom: 1.5rem;
 }

 .project-item img {
-  max-height: 200px;
-  /* width: 45%; */
+  width: 100%;
  border: 2px solid red;
-  margin: 1rem auto;
+  margin: auto;
 }

 footer {
  color: #666;
  display: flex;
+  flex-direction: column-reverse;
  justify-content: space-around;
  align-items: center;
  margin: 0 auto;
@@ -233,3 +221,48 @@ footer {
  color: #c9cacc;
  transition: 160ms ease-in;
 }
+
+@media (min-width: 768px) {
+  #wrapper {
+  }
+  nav {
+    display: flex;
+  }
+
+  nav a {
+    margin: auto;
+    flex: 4;
+    justify-content: flex-start;
+
+    /* justify-content: space-between; */
+  }
+
+  nav li {
+    display: inline-block;
+  }
+
+  nav ul {
+    display: flex;
+    flex: 2;
+  }
+
+  #aboutMe {
+    display: flex;
+  }
+
+  .contactLinks {
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 1200px) {
+  #wrapper {
+    width: 920px;
+  }
+
+  nav {
+    /* width: 150%; */
+    /* text-align: center; */
+  }
+}