Feat/homepage events (#83)

* html * hero * hero button * hero section * page content added * flex on the content section * added svgs * set margins for headings * finished responsive design * finished responsive design * finished with events section * events section done * linitng * hiding scrollbar * liner fixes * linter changes * Update bioconductor-v2.css
Bioconductor · Jul 27, 2023 · 7ef30c0 · 7ef30c0
1 parent cdfae84
commit 7ef30c0
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 50 deletions.
diff --git a/assets/style/bioconductor-v2.css b/assets/style/bioconductor-v2.css
@@ -1,10 +1,13 @@
 body {
   font-family: "Atkinson Hyperlegible", sans-serif;
   margin: 0;
-  background: var(--neutral-n50);
   color: #070707;
 }
 
+main {
+  background: var(--neutral-n50);
+}
+
 .container {
   margin: 0 auto;
   width: calc(100% - 3rem);

diff --git a/assets/style/buttons.css b/assets/style/buttons.css
@@ -1,3 +1,37 @@
+.white-button {
+  background: var(--neutral-n50);
+  color: var(--primary-p400);
+  min-height: 20px;
+  max-height: 20px;
+  cursor: pointer;
+  display: block;
+  width: fit-content;
+  transition: 0.3s;
+  padding: 0.6rem 0.8rem;
+  border-radius: 8rem;
+}
+
+.white-button:hover {
+  background: var(--primary-p50);
+}
+
+.white-button:active {
+  background: var(--primary-p200);
+}
+
+.white-button * {
+  vertical-align: middle;
+}
+
+.white-button svg {
+  margin-bottom: 1px;
+}
+
+.white-button svg:hover {
+  background: var(--primary-p50);
+  stroke: black;
+}
+
 .button-hero {
   padding: 1rem 1.625rem;
   border-radius: 16rem;
@@ -64,10 +98,11 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+  .button-hero,
+  .white-button,
   .brand-border-button,
   .brand-border-button svg path,
-  .brand-border-button span,
-  .button-hero {
+  .brand-border-button span {
     transition: none;
   }
 }
diff --git a/assets/style/home.css b/assets/style/home.css
@@ -1,3 +1,64 @@
+.events-header {
+  display: flex;
+  justify-content: space-between;
+  margin-right: 6.25rem;
+  margin-bottom: 1rem;
+}
+
+.events-header h3 {
+  margin-left: 1rem;
+}
+
+.events-container {
+  display: flex;
+  overflow-x: scroll;
+  gap: 1.56rem;
+  margin-bottom: 1.5rem;
+  -ms-overflow-style: none; /* disable scrollbar for IE and Edge */
+  scrollbar-width: none; /* disable scrollbar for Firefox */
+}
+
+.events-container::-webkit-scrollbar {
+  display: none; /* disable scrollbar for chrome */
+}
+
+.event-card-container {
+  display: inline-block;
+  background-color: white;
+  padding: 0.875rem;
+  min-width: 17.5rem;
+  max-width: 17.5rem;
+  max-height: 12.25rem;
+}
+
+.event-card {
+  height: 100%;
+  width: 100%;
+}
+
+.event-card .format-bold {
+  margin-top: 0;
+  margin-bottom: 1.5rem;
+  width: 100%;
+  flex: 1 0 0;
+  align-self: stretch;
+  height: 4.75rem;
+  color: var(--primary-p500);
+  max-width: 12.8rem;
+}
+
+.event-date-location {
+  padding-top: 1rem;
+  border-top: 1px solid;
+  border-color: var(--primary-p-50, #ebf4f7);
+}
+
+.event-date-location * {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  color: var(--neutral-n400);
+}
+
 .information-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
@@ -133,6 +194,10 @@
     width: 60%;
   }
 
+  .events-header {
+    margin: auto;
+  }
+
   .information-container {
     display: flex;
     flex-direction: column;

diff --git a/content/index.html b/content/index.html
@@ -351,62 +351,102 @@ <h2>Join 1 Million + people using Bioconductor</h2>
     </div>
 
     <section class="events">
-      <span>
-        <h3>Events</h3>
-        <a>see all events</a>
+      <span class="events-header">
+        <h3>🗓️ Events</h3>
+        <a class="button white-button format-bold" href="/help/events/"
+          >See all events
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="14"
+            height="15"
+            viewBox="0 0 14 15"
+            fill="none">
+            <path
+              d="M5.25 3.66665L9.33333 7.74998L5.25 11.8333"
+              stroke="#3792AD"
+              stroke-width="2.2"
+              stroke-linecap="round"
+              stroke-linejoin="round" />
+          </svg>
+        </a>
       </span>
-      <div class="event-container">
-        <div class="event-card">
-          <p>CSHL course: Statistical Analysis of Genome Scale Data</p>
-          <div class="event-date-location">
-            <span>
-              <time datetime="2023-06-30">30 June</time> -
-              <time datetime="2023-07-13">13 July 2023</time>
-            </span>
-            New York, USA
+      <div class="events-container">
+        <div class="event-card-container">
+          <div class="event-card">
+            <p class="format-bold">
+              CSHL course: Statistical Analysis of Genome Scale Data
+            </p>
+            <div class="event-date-location">
+              <span>
+                <time class="text-small" datetime="2023-06-30">30 June</time> -
+                <time class="text-small" datetime="2023-07-13"
+                  >13 July 2023</time
+                >
+              </span>
+              <p class="text-small">New York, USA</p>
+            </div>
           </div>
         </div>
-        <div class="event-card">
-          <p>
-            ISMB/ECCB 2023 tutorial: Orchestrating Large-Scale Single-Cell
-            Analysis with Bioconductor
-          </p>
-          <div class="event-date-location">
-            <span class="event-date-location">
-              <time datetime="2023-07-23">23 July 2023</time>
-            </span>
-            <p>Lyon, France</p>
+        <div class="event-card-container">
+          <div class="event-card">
+            <p class="format-bold">
+              ISMB/ECCB 2023 tutorial: Orchestrating Large-Scale Single-Cell
+              Analysis with Bioconductor
+            </p>
+            <div class="event-date-location">
+              <span>
+                <time class="text-small" datetime="2023-07-23"
+                  >23 July 2023</time
+                >
+              </span>
+              <p class="text-small">Lyon, France</p>
+            </div>
           </div>
         </div>
-        <div class="event-card">
-          <p>RNA-seq analysis with Bioconductor</p>
-          <div class="event-date-location">
-            <span class="event-date-location">
-              <time datetime="2023-07-31">31 June</time> -
-              <time datetime="2023-08-01">01 August 2023</time>
-            </span>
-
-            <p>Boston, USA</p>
+        <div class="event-card-container">
+          <div class="event-card">
+            <p class="format-bold">RNA-seq analysis with Bioconductor</p>
+            <div class="event-date-location">
+              <span class="event-date-location">
+                <time class="text-small" datetime="2023-07-31">31 June</time> -
+                <time class="text-small" datetime="2023-08-01"
+                  >01 August 2023</time
+                >
+              </span>
+              <p class="text-small">Boston, USA</p>
+            </div>
           </div>
         </div>
-        <div class="event-card">
-          <p>BioC2023: Where Software and Biology Connect</p>
-          <div class="event-date-location">
-            <span class="event-date-location">
-              <time datetime="2023-08-02">02</time> -
-              <time datetime="2023-08-04">04 August 2023</time>
-            </span>
-            <p>Boston, USA and Virtual Conference</p>
+        <div class="event-card-container">
+          <div class="event-card">
+            <p class="format-bold">
+              BioC2023: Where Software and Biology Connect
+            </p>
+            <div class="event-date-location">
+              <span class="event-date-location">
+                <time class="text-small" datetime="2023-08-02">02</time> -
+                <time class="text-small" datetime="2023-08-04"
+                  >04 August 2023</time
+                >
+              </span>
+              <p class="text-small">Boston, USA and Virtual Conference</p>
+            </div>
           </div>
         </div>
-        <div class="event-card">
-          <p>EuroBioC2023: European Bioconductor cONFERENCE</p>
-          <div class="event-date-location">
-            <span>
-              <time datetime="2023-08-02">02</time> -
-              <time datetime="2023-08-04">04 August 2023</time>
-            </span>
-            <p>Ghent, Belgium</p>
+        <div class="event-card-container">
+          <div class="event-card">
+            <p class="format-bold">
+              EuroBioC2023: European Bioconductor Conference
+            </p>
+            <div class="event-date-location">
+              <span>
+                <time class="text-small" datetime="2023-08-02">02</time> -
+                <time class="text-small" datetime="2023-08-04"
+                  >04 August 2023</time
+                >
+              </span>
+              <p class="text-small">Ghent, Belgium</p>
+            </div>
           </div>
         </div>
       </div>