initial commit

1 files changed, 663 insertions, 0 deletions

diff --git a/assets/css/styles.css b/assets/css/styles.css
new file mode 100644
index 0000000..3a10983
--- /dev/null
+++ b/assets/css/styles.css
@@ -0,0 +1,663 @@
+/* Base CSS */
+:root {
+  --accent: rgb(249, 207, 0);
+  --accent-8: rgba(249, 207, 0, 0.8);
+  --accent-5: rgba(249, 207, 0, 0.5);
+  --accent-25: rgba(249, 207, 0, 0.25);
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background: black;
+  color: white;
+  padding-top: 43px;
+}
+
+h1, h2, h3, h4, h5, h6, .navbar-brand {
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
+}
+
+p {
+  font-family: 'Montserrat', sans-serif;
+}
+
+a:active, a:focus {
+  outline: none;
+}
+
+.navbar {
+  padding: 1rem 2rem;
+  background: black;
+}
+
+.dropdown-menu {
+  background: black;
+  border: 1px solid white;
+}
+
+.dropdown-item {
+  color: rgba(255, 255, 255, .5);
+}
+
+.dropdown-item:focus, .dropdown-item:hover {
+  background-color: black;
+  color: rgba(255, 255, 255, .75);
+}
+
+.dropdown-item.active, .dropdown-item:active {
+  background: black;
+  color: var(--accent);
+  font-weight: bold;
+}
+
+li.nav-item {
+  margin-left: 0.25rem;
+  margin-right: 0.25rem;
+}
+
+@media (min-width: 992px) {
+  .nav-item.active {
+    border-bottom: 3px solid var(--accent);
+  }
+}
+
+footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.footer-brand {
+  color: white;
+  margin-left: 4px;
+}
+
+.footer-brand span {
+  color: var(--accent);
+}
+
+.footer-brand:hover {
+  color: rgba(255, 255, 255, 0.8);
+  text-decoration: none;
+}
+
+footer .d-block {
+  margin-left: 4px;
+}
+
+footer .d-flex {
+  padding: 0 15px;
+}
+
+.footer-link {
+  color: white;
+  margin-right: 0.25rem;
+  margin-left: 0.25rem;
+}
+
+.footer-link-sep {
+  margin-right: 0.5rem;
+  margin-left: 0.5rem;
+}
+
+.footer-link:hover {
+  color: var(--accent);
+}
+
+.link {
+  color: white;
+}
+
+.link:hover {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+/* Override Bootstrap Styles */
+.btn-primary {
+  background-color: var(--accent);
+  border-color: var(--accent);
+  color: black;
+}
+
+.btn-primary:hover {
+  background-color: var(--accent-8);
+  border-color: var(--accent-8);
+  color: black;
+}
+
+.btn-primary:not(:disabled):not(.disabled).active:focus, .btn-primary:not(:disabled):not(.disabled):active:focus, .show>.btn-primary.dropdown-toggle:focus {
+  box-shadow: 0 0 0 .2rem var(--accent-5);
+}
+
+.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
+  background-color: var(--accent);
+  border-color: var(--accent);
+  color: black;
+}
+
+.btn-primary.focus, .btn-primary:focus {
+  box-shadow: 0 0 0 .2rem var(--accent-5);
+}
+
+.contact-button {
+  border: 1px solid var(--accent);
+  border: 1px solid var(--accent-5);
+  color: #eee;
+  padding: 2rem;
+  width: 100%
+}
+
+.contact-button:hover {
+  border: 1px solid var(--accent);
+  color: #fff;
+}
+
+/* home page */
+#hero {
+  background-attachment: fixed;
+  background-image: url("https://img.cleberg.net/space-wiki/hero-banner.jpg");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 65vh;
+}
+
+#hero div.text-center {
+  margin-top: 3rem;
+  margin-right: 0.5rem;
+  margin-left: 0.5rem;
+}
+
+#hero-title {
+  font-size: 5rem;
+}
+
+@media (max-width: 768px) {
+  #hero-title {
+    font-size: 3rem;
+  }
+}
+
+@media (max-width: 576px) {
+  #hero-title {
+    font-size: 2rem;
+  }
+}
+
+#hero-subtitle {
+  color: var(--accent);
+  text-transform: uppercase;
+}
+
+#explore-content {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+#explore-options {
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+}
+
+.explore-card {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  background: inherit;
+  color: inherit;
+  border: 1px solid #fff;
+  cursor: pointer;
+}
+
+.explore-card .card-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.explore-icon {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+#apod-wrapper {
+  margin-bottom: 4rem;
+}
+
+#apod-container {
+  display: none;
+}
+
+#apod-credit {
+  font-size: 0.8rem;
+  opacity: 0.5;
+}
+
+#apod-img, #apod-vid {
+  display: none;
+  max-width: 95vw;
+  max-height: 80vh;
+  margin: 2rem auto auto auto;
+}
+
+#apod-explanation {
+  font-size: 0.9rem;
+}
+
+/* planets */
+.planet-container {
+  min-height: calc(100vh - 5rem);
+}
+
+.planets-nav {
+  margin: 5rem auto;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid white;
+  width: max-content;
+  padding: 0.25rem 2rem;
+  border-radius: 0.25rem;
+}
+
+.planets-nav-item {
+  margin: 0.5rem 0;
+}
+
+.planets-nav-item:not(.active) {
+  color: var(--accent);
+}
+
+.planets-nav-item.active {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.planets-nav-item.active:before {
+  color: #fff;
+  content: "<";
+  padding: 0 1rem;
+}
+
+.planets-nav-item.active:after {
+  color: #fff;
+  content: ">";
+  padding: 0 1rem;
+}
+
+#sun-breadcrumb:before {
+  content: none;
+}
+
+#neptune-breadcrumb:after {
+  content: none;
+}
+
+.planet-about {
+  font-weight: bold;
+  margin-bottom: 0;
+  text-transform: uppercase;
+  color: var(--accent);
+}
+
+.planet-title {
+  margin-bottom: 4rem;
+}
+
+.planet-description {
+  margin-bottom: 4rem;
+}
+
+.planet-stats {
+  margin-bottom: 2rem;
+}
+
+.planet-link {
+  text-transform: uppercase;
+  color: var(--accent);
+  margin-bottom: 2rem;
+}
+
+.planet-link:hover {
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 2px solid var(--accent);
+}
+
+.solar-system {
+  margin-top: 10rem;
+  margin-bottom: 5rem;
+}
+
+.solar-system>h1 {
+  margin-bottom: 4rem;
+}
+
+.planet-img {
+  width: 100%;
+}
+
+@media (max-width: 768px) {
+  .planet-img {
+    margin: 3rem auto;
+  }
+}
+
+/* gallery */
+#search_container {
+  margin-top: 5rem;
+}
+
+#temporary-banner {
+  text-align: center;
+  padding: 5rem 3rem;
+  background: #222;
+  color: rgba(255, 255, 255, 0.7);
+  border-radius: 0.5rem;
+}
+
+#search_container {
+  margin-top: 6rem;
+  margin-bottom: 4rem;
+}
+
+#search_row {
+  margin-bottom: 4rem;
+}
+
+#search_row div {
+  margin-top: 0.5rem;
+}
+
+#search_input {
+  background: inherit;
+  color: inherit;
+  height: 3rem;
+  padding: 1.5rem;
+  font-size: 1.5rem;
+}
+
+#search_button {
+  width: 100%;
+  height: 100%;
+}
+
+.gallery-card {
+  background: inherit;
+  color: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.gallery-card .card-title {
+  margin: 0;
+}
+
+/* about */
+#meet-us, #contact-us {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+  text-align: center;
+}
+
+#banner-title {
+  margin-bottom: 2rem;
+}
+
+#banner-title a {
+  color: var(--accent);
+}
+
+#meet-us-card {
+  text-align: left;
+  width: 100%;
+  background: inherit;
+  color: inherit;
+}
+
+#meet-us-card .card-img-left {
+  display: block;
+  height: 200px;
+  width: 200px;
+  border: 1px solid white;
+  margin-bottom: 2rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+#meet-us-card .card-link {
+  color: var(--accent);
+}
+
+#meet-us-card .card-link:hover {
+  color: var(--accent);
+  opacity: 0.8;
+}
+
+.form-control {
+  background: inherit;
+  color: inherit;
+  border: 1px solid white;
+}
+
+.form-control:focus {
+  background: inherit;
+  color: inherit;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 .2rem var(--accent-25);
+}
+
+/* missions */
+#timeline-page-container {
+  margin: 5rem auto;
+}
+
+#centered-timeline {
+  margin: 4rem auto;
+}
+
+.timeline {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.timeline h1, .timeline h2, .timeline h3, .timeline h4, .timeline h5, .timeline h6 {
+  line-height: inherit;
+}
+
+h2.timeline-title {
+  color: var(--accent);
+}
+
+h3.timeline-title {
+  color: white;
+}
+
+/*----- TIMELINE ITEM -----*/
+.timeline-item {
+  padding-left: 40px;
+  position: relative;
+}
+
+.timeline-item:last-child {
+  padding-bottom: 0;
+}
+
+/*----- TIMELINE INFO -----*/
+.timeline-info {
+  font-size: 12px;
+  font-weight: 700;
+  /* letter-spacing: 3px; */
+  margin: 0 0 .5em 0;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+/*----- TIMELINE MARKER -----*/
+.timeline-marker {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 15px;
+}
+
+.timeline-marker:before {
+  background: #f9cf00;
+  border: 3px solid transparent;
+  border-radius: 100%;
+  content: "";
+  display: block;
+  height: 15px;
+  position: absolute;
+  top: 4px;
+  left: 0;
+  width: 15px;
+  transition: background 0.3s ease-in-out, border 0.3s ease-in-out;
+}
+
+.timeline-marker:after {
+  content: "";
+  width: 3px;
+  background: #CCD5DB;
+  display: block;
+  position: absolute;
+  top: 24px;
+  bottom: 0;
+  left: 6px;
+}
+
+.timeline-item:last-child .timeline-marker:after {
+  content: none;
+}
+
+.timeline-item:not(.period):hover .timeline-marker:before {
+  background: transparent;
+  border: 3px solid #f9cf00;
+}
+
+/*----- TIMELINE CONTENT -----*/
+.timeline-content {
+  padding-bottom: 40px;
+}
+
+.timeline-content p:last-child {
+  margin-bottom: 0;
+}
+
+/*----- TIMELINE PERIOD -----*/
+.period {
+  padding: 0;
+}
+
+.period .timeline-info {
+  display: none;
+}
+
+.period .timeline-marker:before {
+  background: transparent;
+  content: "";
+  width: 15px;
+  height: auto;
+  border: none;
+  border-radius: 0;
+  top: 0;
+  bottom: 30px;
+  position: absolute;
+  border-top: 3px solid #CCD5DB;
+  border-bottom: 3px solid #CCD5DB;
+}
+
+.period .timeline-marker:after {
+  content: "";
+  height: 32px;
+  top: auto;
+}
+
+.period .timeline-content {
+  padding: 40px 0 70px;
+}
+
+.period .timeline-title {
+  margin: 0;
+}
+
+/*----------------------------------------------
+    MOD: TIMELINE CENTERED
+----------------------------------------------*/
+@media (min-width: 992px) {
+
+  .timeline-centered,
+  .timeline-centered .timeline-item,
+  .timeline-centered .timeline-info,
+  .timeline-centered .timeline-marker,
+  .timeline-centered .timeline-content {
+    display: block;
+    margin: 0;
+    padding: 0;
+  }
+
+  .timeline-centered .timeline-item {
+    padding-bottom: 40px;
+    overflow: hidden;
+  }
+
+  .timeline-centered .timeline-marker {
+    position: absolute;
+    left: 50%;
+    margin-left: -7.5px;
+  }
+
+  .timeline-centered .timeline-info,
+  .timeline-centered .timeline-content {
+    width: 50%;
+  }
+
+  .timeline-centered>.timeline-item:nth-child(odd) .timeline-info {
+    float: left;
+    text-align: right;
+    padding-right: 30px;
+  }
+
+  .timeline-centered>.timeline-item:nth-child(odd) .timeline-content {
+    float: right;
+    text-align: left;
+    padding-left: 30px;
+  }
+
+  .timeline-centered>.timeline-item:nth-child(even) .timeline-info {
+    float: right;
+    text-align: left;
+    padding-left: 30px;
+  }
+
+  .timeline-centered>.timeline-item:nth-child(even) .timeline-content {
+    float: left;
+    text-align: right;
+    padding-right: 30px;
+  }
+
+  .timeline-centered>.timeline-item.period .timeline-content {
+    float: none;
+    padding: 0;
+    width: 100%;
+    text-align: center;
+  }
+
+  .timeline-centered .timeline-item.period {
+    padding: 50px 0 90px;
+  }
+
+  .timeline-centered .period .timeline-marker:after {
+    height: 30px;
+    bottom: 0;
+    top: auto;
+  }
+
+  .timeline-centered .period .timeline-title {
+    left: auto;
+  }
+}