Get started page (#100)

* get started content finished, just hero left

* get-started page completed

* linting fixed

* Update typography.css

* disabled colour stylelint

* fixed hero

* added js

* minor changes

* mobile adjustments

* fixed mobile spacing

assets/js/bioconductor.js

@@ -58,6 +58,21 @@ document.addEventListener("DOMContentLoaded", function () {
   navLink.forEach((n) => n.addEventListener("click", closeMenu));
 });
 
+//Changes body and hero background color once clicked on certain links
+function changeBackgroundColors() {
+  const heroElement = document.querySelector(".hero");
+  const targetPageRegex = /\/install\//;
+
+  if (targetPageRegex.test(window.location.href)) {
+    document.body.style.backgroundColor = "#fff";
+    heroElement.style.backgroundColor = "var(--neutral-n50)";
+  }
+}
+
+changeBackgroundColors();
+
+window.addEventListener("hashchange", changeBackgroundColors);
+
 function log(message) {
   if (fb_lite) {
     //console.log(message);

assets/style/bioconductor.css

@@ -6,7 +6,6 @@ body {
 }
 
 main {
-  background: var(--neutral-n50);
   margin: 1rem 0;
   overflow: hidden;
 }

assets/style/colors.css

@@ -56,6 +56,7 @@
   --misc-annotations: #ff8a00;
   --misc-error: #a92626;
   --misc-dark: #070707;
+  --misc-purple: #a333f1;
 
   /* Gradients */
   --gradient-warmcool: linear-gradient(to right, #ff2f4b, #4e5cff);

assets/style/get-started.css

@@ -0,0 +1,119 @@
+.install-hero {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-top: 0.5rem;
+}
+
+.get-started-h1 {
+  color: var(--misc-dark) !important;
+}
+
+.instructions-install {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-bottom: 2rem;
+}
+
+.instructions-install p {
+  text-align: left;
+  margin: 0 0 1rem;
+}
+
+.instructions-install a {
+  color: var(--misc-dark);
+}
+
+/* stylelint-disable color-function-notation, alpha-value-notation */
+.warmcool-gradient {
+  background-image: var(--gradient-reversewarmcool);
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.06),
+    0 10px 10px 0 rgba(0, 0, 0, 0.05), 0 22px 13px 0 rgba(0, 0, 0, 0.03),
+    0 39px 16px 0 rgba(0, 0, 0, 0.01), 0 61px 17px 0 rgba(0, 0, 0, 0);
+}
+
+.install-row {
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: row;
+  margin: 1px;
+  gap: 3rem;
+}
+
+.install-content {
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: 0.9rem 1.5rem;
+  border-radius: 0.5rem;
+}
+
+.install-blockquote {
+  border-left: 2px solid var(--misc-purple);
+  background-color: transparent;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-around;
+  padding: 0;
+  padding-left: 10px;
+  gap: 10px;
+}
+
+.install-section {
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.install-section a {
+  color: black;
+}
+
+.code-install {
+  margin-top: 1.6rem;
+  width: 100%;
+  box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.06),
+    0 10px 10px 0 rgba(0, 0, 0, 0.05), 0 22px 13px 0 rgba(0, 0, 0, 0.03),
+    0 39px 16px 0 rgba(0, 0, 0, 0.01), 0 61px 17px 0 rgba(0, 0, 0, 0);
+}
+
+/* stylelint-enable color-function-notation, alpha-value-notation */
+
+.code-install code {
+  font-size: 1.25rem;
+  text-align: start;
+}
+
+.step-1 {
+  padding-bottom: 0.5rem;
+}
+
+.step-3 {
+  align-self: end;
+}
+
+@media (width <= 678px) {
+  .instructions-install img {
+    display: none;
+  }
+
+  .instructions-install {
+    padding-bottom: 0;
+  }
+
+  .install-row {
+    flex-direction: column;
+
+    /* stylelint-disable-next-line value-no-vendor-prefix */
+    width: -webkit-fill-available;
+    gap: 1.5rem;
+  }
+
+  .code-install {
+    margin-top: 0;
+  }
+}

assets/style/hero.css

@@ -16,6 +16,7 @@
 }
 
 /* disabled here due to a linting error, but we need the webkit marker for this to work */
+
 /* stylelint-disable */
 .hero mark {
   background: var(--gradient-brandreverse);