new modal on project.html (not fully responsive yet), plus removed ha…

…nnahcodes.html and old-main.css/.scss

assets/css/main.css

@@ -2352,6 +2352,267 @@ h1 {
   }
 }
 
+/*---project/hannahcodes-styling---*/
+.project_hc_card_band {
+  width: 90%;
+  max-width: 1500px;
+  margin: 0 auto;
+  display: grid;
+  padding-top: 1em;
+  padding-bottom: 1em;
+  grid-template-columns: 1fr;
+  grid-template-rows: auto;
+  grid-gap: 20px;
+}
+@media (min-width: 30em) {
+  .project_hc_card_band {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+@media (min-width: 60em) {
+  .project_hc_card_band {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+@media screen and (max-width: 1610px) {
+  .project_hc_card_band {
+    width: 95%;
+    margin: auto;
+  }
+}
+@media screen and (max-width: 1410px) {
+  .project_hc_card_band {
+    width: 97%;
+    margin: auto;
+  }
+}
+@media screen and (max-width: 1360px) {
+  .project_hc_card_band {
+    width: 75%;
+    margin: auto;
+  }
+}
+@media screen and (max-width: 1260px) {
+  .project_hc_card_band {
+    width: 80%;
+    margin: auto;
+  }
+}
+@media screen and (max-width: 1140px) {
+  .project_hc_card_band {
+    width: 90%;
+    margin: auto;
+  }
+}
+@media screen and (max-width: 970px) {
+  .project_hc_card_band {
+    width: 90%;
+    margin: auto;
+  }
+}
+@media screen and (max-width: 960px) {
+  .project_hc_card_band {
+    width: 55%;
+    display: block;
+    padding-top: 0em;
+    margin: auto;
+  }
+}
+@media screen and (max-width: 860px) {
+  .project_hc_card_band {
+    width: 60%;
+    display: block;
+    padding-top: 0em;
+    margin: auto;
+  }
+}
+@media screen and (max-width: 760px) {
+  .project_hc_card_band {
+    width: 69%;
+    display: block;
+    padding-top: 0em;
+    margin: auto;
+  }
+}
+@media screen and (max-width: 460px) {
+  .project_hc_card_band {
+    width: 69%;
+    display: block;
+    padding-top: 0em;
+    margin-top: 0em;
+    padding-bottom: 0em;
+    margin: auto;
+  }
+}
+
+/* The Modal (background) */
+.modal {
+  display: none; /* Hidden by default */
+  position: fixed; /* Stay in place */
+  z-index: 1; /* Sit on top */
+  left: 0;
+  top: 0;
+  padding-top: 2em;
+  width: 100%; /* Full width */
+  height: 100%; /* Full height */
+  overflow: auto; /* Enable scroll if needed */
+  background-color: rgb(0, 0, 0); /* Fallback color */
+  background-color: rgba(0, 0, 0, 0.6); /* Black w/ opacity */
+}
+
+.modal_display {
+  margin-top: 13em;
+  padding-top: 2em;
+}
+
+.modal_button {
+  cursor: pointer;
+}
+
+/* The Close Button */
+.close {
+  color: black;
+  float: right;
+  font-size: 1.5em;
+  margin-top: -0.2em;
+  font-weight: bold;
+}
+@media (prefers-color-scheme: dark) {
+  .close {
+    color: #aaa;
+  }
+}
+
+.close:hover,
+.close:focus {
+  color: var(--light-hover-active-colour);
+  text-decoration: none;
+  cursor: pointer;
+}
+@media (prefers-color-scheme: dark) {
+  .close:hover,
+  .close:focus {
+    color: var(--hover-active-colour);
+  }
+}
+
+/* Modal Header */
+.modal-header {
+  padding: 1em;
+  background-color: var(--light-section-4-bg-colour);
+  border-bottom: 1px solid #ffffff;
+  color: var(--light-nav-text-colour);
+  text-align: center;
+  margin: auto;
+}
+@media (prefers-color-scheme: dark) {
+  .modal-header {
+    border-bottom: 1px solid #423f3f;
+    background-color: var(--section-4-bg-colour);
+    color: var(--nav-text-colour);
+  }
+}
+
+.modal_h2 {
+  font-size: 1em;
+}
+
+/* Modal Body */
+.modal-body {
+  padding: 2px 16px;
+}
+
+/* Modal Content */
+.modal-content {
+  position: relative;
+  background-color: var(--light-section-4-bg-colour);
+  margin: auto;
+  padding: 0;
+  border: 1px solid #1b1b1b;
+  width: 65%;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  animation-name: animatetop;
+  animation-duration: 0.4s;
+}
+@media (prefers-color-scheme: dark) {
+  .modal-content {
+    background-color: var(--section-4-bg-colour);
+    color: var(--nav-text-colour);
+  }
+}
+
+/* Add Animation */
+@keyframes animatetop {
+  from {
+    top: -300px;
+    opacity: 0;
+  }
+  to {
+    top: 0;
+    opacity: 1;
+  }
+}
+.project_hc_card_link_svg {
+  fill: var(--light-svg-fill-colour);
+  width: 1.8em;
+  height: 1.8em;
+  padding-left: 0.9em;
+  padding-right: auto;
+}
+@media screen and (max-width: 460px) {
+  .project_hc_card_link_svg {
+    margin-left: -0.2em;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .project_hc_card_link_svg {
+    fill: var(--svg-fill-colour);
+  }
+}
+
+.project_hc_card_links {
+  border: 0.2em;
+  text-decoration: none;
+  display: inline-block;
+  align-items: center;
+  text-align: center;
+  font-size: 16px;
+  margin-left: 0.75em;
+  padding-top: auto;
+}
+.project_hc_card_links:hover {
+  border: 0.2em;
+  color: var(--light-hover-active-colour);
+  text-decoration: none;
+  display: inline-block;
+  align-items: center;
+  text-align: center;
+  font-size: 16px;
+  margin-left: 0.75em;
+  padding-top: auto;
+}
+@media screen and (max-width: 460px) {
+  .project_hc_card_links {
+    margin-left: 0;
+  }
+  .project_hc_card_links:hover {
+    margin-left: 0em;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  .project_hc_card_links:hover {
+    color: var(--hover-active-colour);
+  }
+}
+
+.project_hc_card_source_code_svg {
+  fill: var(--light-sorce-code-svg-fill-colour);
+  width: 1.7em;
+  height: 1.7em;
+  padding-left: 0.7em;
+  padding-right: auto;
+}
+
 /*------7:404.html-styling-----*/
 .error_header_h1 {
   padding-top: 5em;