1 files changed, 119 insertions, 0 deletions
diff --git a/src/styles/pages/_speaker.scss b/src/styles/pages/_speaker.scss
new file mode 100644
index 0000000..64a84e7
--- /dev/null
+++ b/src/styles/pages/_speaker.scss
@@ -0,0 +1,119 @@
+.page.speakers {
+
+  main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .hero {
+    display: flex;
+    flex-direction: column;
+
+    header, .description {
+      padding: var(--space-4) var(--container-margin);
+    }
+
+    header {
+      align-self: center;
+      padding-left: 0;
+
+      display: flex;
+      align-items: center;
+
+      .speaker-img {
+        --size: 6rem;
+        height: var(--size, 6rem);
+        min-width: var(--size, 6rem);
+        border-radius: 100%;
+        background-size: cover;
+        box-shadow: 0 0 var(--space-3) var(--darken-3);
+        margin-right: var(--space-4);
+      }
+
+      h1 {
+        margin: 0;
+        padding: 0;
+      }
+
+      ul.socials {
+        display: flex;
+        flex-wrap: wrap;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        font-size: 1.25em;
+        justify-content: flex-start;
+
+        li {
+          flex: 0 1 auto;
+          padding-right: var(--space-4);
+          a.social {
+            width: auto;
+            color: inherit;
+            .icon {
+              width: 1em;
+            }
+          }
+        }
+
+      }
+    }
+
+
+    .description {
+
+      .talks {
+        margin: 1rem auto ;
+        max-width: var(--block-text-max-width);
+
+        padding-left: 0;
+        list-style: none;
+
+        .talk {
+          margin-top: 1rem;
+          border: thin solid var(--darken-1);
+          display: inline-flex;
+          padding: var(--space-2);
+          border-radius: var(--space-1);
+
+          .tags, .language {
+            margin-right: 1ch;
+          }
+
+          .tags {
+            white-space: nowrap;
+            align-self: center;
+          }
+
+          &.tag- {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  section.speaker {
+    align-self: center;
+    margin: 1rem auto ;
+    max-width: var(--block-text-max-width);
+
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .speaker-company {
+      margin: var(--space-3) 0;
+      display: flex;
+      align-items: center;
+    }
+
+    p {
+      line-height: 1.5;
+      font-size: 110%;
+    }
+
+  }
+}