Add page: Crystal 1.0 Conference

_events/2021-crystal-1.0.html

@@ -3,11 +3,7 @@
 description: >
   July 8th 2021, 12:30pm - 9:30pm UTC
 
-custom_body_classes:
-  - main
-  - conference
-header:
-  delaunay: true
+layout: event
 ---
 
 <div class="container">
@@ -69,27 +65,31 @@ <h3>
                 {{ session["Talk title"] }}
               </h3>
               {% if session["Theme"] %}
-                <div>
-                  <i class="material-icons">label</i>
+                <div class="icon-prefix">
+                  {% include icons/label.svg %}
                   {{ session["Theme"] }}
                 </div>
               {% endif %}
-              <div>
-                <i class="material-icons">schedule</i>
+              <div class="icon-prefix">
+                {% include icons/schedule.svg %}
                 {{ session["Duration (minutes)"] }} minutes at {{ session["Room" ] }}
               </div>
               <p class="session-links">
                 {% if session["Video Link"] %}
-                  <a href="{{ session["Video Link"] }}" class="with-icon">
-                    <i class="material-icons">videocam</i>
-                    Recording
-                  </a>
+                  <div class="link-item">
+                    <a href="{{ session["Video Link"] }}">
+                      {% include icons/videocam.svg %}
+                      Recording
+                    </a>
+                  </div>
                 {% endif %}
                 {% if session["Slides Link"] %}
-                  <a href="{{ session["Slides Link"] }}" class="with-icon">
-                    <i class="material-icons">slideshow</i>
-                    Slides
-                  </a>
+                  <div class="link-item">
+                    <a href="{{ session["Slides Link"] }}">
+                      {% include icons/slideshow.svg %}
+                      Slides
+                    </a>
+                  </div>
                 {% endif %}
               </p>
               {% if session["Abstract"] %}

_sass/components/_link-item.scss

@@ -9,16 +9,15 @@
   @media (min-width: 160ch) {
     margin-left: -1.5em;
   }
-}
 
-.link-item {
-  position: relative;
-  line-height: var(--line-height-md);
-  font-size: 90%;
-
-  + .link-item {
+  .link-item + .link-item {
     margin-top: var(--block-flow-sm);
   }
+}
+
+.link-item {
+  @extend .icon-prefix;
+  margin-inline-start: 0;
 
   a {
     color: var(--light-text);
@@ -37,16 +36,27 @@
     }
   }
 
-  svg {
+  p {
+    font-size: 90%;
+    line-height: var(--line-height-md);
+    color: var(--light-gray);
+  }
+}
+
+.icon-prefix {
+  position: relative;
+  font-size: 90%;
+  line-height: var(--line-height-md);
+  margin-inline-start: 1.2em;
+  color: var(--light-gray);
+
+  > svg:first-child,
+  > :any-link > svg:first-child {
     width: 1.2em;
     position: absolute;
     right: calc(100% + 0.3em);
     margin-top: 0.15em;
-  }
 
-  p {
-    font-size: 90%;
-    line-height: var(--line-height-md);
-    color: var(--light-gray);
+    fill: currentColor;
   }
 }

_sass/main.scss

@@ -42,6 +42,7 @@
 @layer pages {
   @import "pages/blog";
   @import "pages/error";
+  @import "pages/conference";
   @import "pages/releases";
   @import "pages/sponsors";
   @import "pages/styleguide";

_sass/pages/_conference.scss

@@ -0,0 +1,238 @@
+.conference-session-list {
+  margin: 50px 0 80px 0;
+
+  header {
+    position: sticky;
+    top: 0;
+    margin: 0;
+    background-color: white;
+    z-index: 100;
+    width: 100vw;
+    padding-left: 15vw;
+    margin-left: -15vw;
+    margin-bottom: 30px;
+    transition: all 0.25s;
+
+    &.shadow {
+      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
+    }
+  }
+}
+
+.conference-sessions-grid {
+  display: grid;
+  grid-template-columns: auto 1fr 1fr 1fr;
+  column-gap: 30px;
+  row-gap: 40px;
+  align-items: start;
+
+  .conference-session {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    row-gap: 12px;
+    grid-column: 1;
+
+    border-left: 4px solid black;
+    padding-left: 10px;
+    height: 100%;
+    align-items: start;
+
+    :first-child:last-child {
+      max-width: 65em;
+    }
+
+    @media only screen and (min-width: 900px) {
+      &--track-1,
+      &--main {
+        grid-column: 2;
+      }
+      &--track-2 {
+        grid-column: 3;
+      }
+      &--track-3 {
+        grid-column: 4;
+      }
+      &--span2 {
+        grid-row-end: 2 span;
+      }
+      &--span6 {
+        grid-row-end: 6 span;
+      }
+      &--span7 {
+        grid-row-end: 7 span;
+      }
+    }
+  }
+
+  .conference-sessions-break {
+    margin-top: -4px;
+    font-size: 1.4rem;
+    color: var(--primary-text);
+    font-weight: 500;
+    grid-column: 1;
+
+    @media only screen and (min-width: 900px) {
+      grid-column: 2 / -1;
+    }
+  }
+}
+
+.conference-slot-info {
+  grid-column: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+
+  @media only screen and (min-width: 900px) {
+    align-items: end;
+  }
+
+  time {
+    text-align: right;
+    font-size: inherit;
+    font-weight: normal;
+
+    small {
+      display: block;
+    }
+  }
+}
+
+hr.custom-hr {
+  position: relative;
+  content: "";
+  border: none;
+  border-top: 1px var(--light-gray) solid;
+  margin: 30px 0;
+  overflow: visible;
+  grid-column: 1 / -1;
+
+  &::before {
+    position: absolute;
+    bottom: -3px;
+    left: -6px;
+    content: "";
+    width: 5px;
+    height: 5px;
+    border: 1px var(--light-gray) solid;
+  }
+
+  &::after {
+    position: absolute;
+    bottom: -3px;
+    right: -6px;
+    content: "";
+    width: 5px;
+    height: 5px;
+    border: 1px var(--light-gray) solid;
+  }
+}
+
+.conference-session {
+  .conference-track {
+    display: inline-flex;
+    align-items: center;
+    font-size: 1rem;
+    font-weight: bold;
+    text-transform: uppercase;
+    background-color: var(--light-gray);
+    border-radius: 4px;
+    margin-right: 12px;
+    height: 1.5rem;
+    padding: 4px;
+    color: var(--white);
+
+    &--main {
+      display: none;
+    }
+  }
+
+  .presenter {
+    display: grid;
+    grid-auto-flow: column;
+    column-gap: 12px;
+    align-items: center;
+    width: -moz-fit-content;
+    width: fit-content;
+    line-height: var(--line-height-sm);
+    color: var(--lighter-text);
+    font-size: 90%;
+
+    .speaker-image {
+      width: 36px;
+      height: 36px;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
+      box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.2);
+
+      border-radius: 50%;
+    }
+  }
+
+  > h3 {
+    margin: 0;
+    font-size: 1.2rem;
+    color: var(--black);
+  }
+}
+
+.speaker {
+  .github_handle {
+    font-size: 1rem;
+    i {
+      transform: scale(0.7);
+      opacity: 0.6;
+      margin-right: -5px;
+      margin-top: -3px;
+    }
+  }
+}
+
+.theme {
+  display: flex;
+  align-items: center;
+  height: 1.2rem;
+  border-radius: 0.6rem;
+  padding: 0 0.5rem;
+  color: var(--primary-text);
+  border: 1px var(--primary-text) solid;
+  width: -moz-fit-content;
+  width: fit-content;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  vertical-align: text-top;
+  white-space: nowrap;
+}
+
+@media only screen and (max-width: 900px) {
+  .conference-session-list {
+    .conference-slot {
+      .conference-slot-inner {
+        grid-template-columns: 1fr;
+        row-gap: 60px;
+      }
+    }
+    header {
+      position: unset;
+      padding-left: unset;
+      margin-left: unset;
+      width: unset;
+      &.shadow {
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.session-links {
+  display: flex;
+  gap: 0.5em;
+  flex-wrap: wrap;
+}
+.session-summary {
+  font-size: 90%;
+  line-height: var(--line-height-md);
+  color: var(--lighter-text);
+}