Implement Cards and State-based Menu

1 files changed, 43 insertions, 9 deletions

diff --git a/css/xengineering.css b/css/xengineering.css
index 0224dc1..a55d72a 100644
--- a/css/xengineering.css
+++ b/css/xengineering.css
@@ -28,8 +28,12 @@ a {
   color: blue;
 }
 
-nav a {
-  display: none;
+nav {
+  background-color: black;
+}
+
+.menu-anchor {
+  display: block;
   padding: 16px;
   text-align: center;
   color: lightgray;
@@ -37,12 +41,12 @@ nav a {
   text-decoration: none;
 }
 
-nav a:hover {
+.menu-anchor:hover {
   color: black;
   background-color: lightgray;
 }
 
-nav button {
+#menu-button {
   display: block;
   border: 0px;
   width: 100%;
@@ -53,7 +57,7 @@ nav button {
   text-decoration: none;
 }
 
-nav button:hover {
+#menu-button:hover {
   color: black;
   background-color: lightgray;
 }
@@ -66,23 +70,24 @@ pre {
   border-radius: 5px;
 }
 
-main div {
+.card {
   color: black;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   padding: 10px;
   border-radius: 5px;
+  margin-bottom: 16px;
 }
 
-main div:hover {
+a .card:hover {
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }
 
-main div h3 {
+.card h3 {
   margin-top: 0px;
   text-align: center;
 }
 
-main div p {
+.card p {
   margin-bottom: 0px;
   text-align: center;
 }
@@ -106,6 +111,35 @@ main div p {
 
 @media only screen and (min-width: 768px) {
 
+  h1 {
+    text-align: left;
+  }
+
+  nav {
+    height: 100%;
+    width: 200px;
+    position: fixed;
+    top: 0px;
+  }
+
+  #menu-button {
+    display: none;
+  }
+
+  .menu-anchor {
+    text-align: left;
+  }
+
+  main {
+    margin-left: 200px;
+  }
+
+  main * {
+    max-width: 960px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
 }
 
 /******************************************************************************/