Add speak description structure

src/ComingSoon.elm

@@ -1,8 +1,8 @@
-module Main exposing (Model, Msg(..), codeOfConduct, init, main, update, view)
+module ComingSoon exposing (Model, Msg(..), codeOfConduct, init, main, update, view)
 
 import Browser exposing (UrlRequest)
 import Browser.Navigation
-import Html exposing (Html, a, div, h1, h2, h3, h5, img, main_, p, section, span, text)
+import Html exposing (Html, a, div, h1, h2, h3, img, main_, p, section, span, text)
 import Html.Attributes exposing (class, href, id, src, target)
 import Html.Events exposing (onClick)
 import Url exposing (Url)

src/main.css

@@ -341,6 +341,7 @@ nav.menu {
   .speaker:last-child {
     margin-bottom: 0; }
   .speaker__profile_img {
+    position: relative;
     background-size: cover;
     background-position: center center;
     min-height: 500px;
@@ -358,15 +359,22 @@ nav.menu {
       padding: 7px 15px;
       border-top: 3px solid #000000;
       border-left: 3px solid #000000;
+      border-bottom: 3px solid #000000;
       position: absolute;
-      bottom: 0;
+      bottom: -3px;
       right: 0;
       font-family: "Londrina Solid", cursive;
       text-transform: uppercase;
       letter-spacing: 2px;
       font-size: 1.5rem;
       color: #000000;
-      margin: 0; }
+      margin: 0;
+      transition: .3s background ease-in-out; }
+      .speaker__profile_img h3:hover, .speaker__profile_img h3:focus {
+        background: #000000;
+        color: #ffffff; }
+    .speaker__profile_img--appended {
+      min-height: 300px; }
   .speaker__bio {
     padding: 30px;
     background: #ffffff;
@@ -386,25 +394,50 @@ nav.menu {
       font-weight: bold; }
       .speaker__bio a:hover, .speaker__bio a:focus {
         color: #e73c4e; }
-  .speaker.has-only-bio h3 {
+  .speaker.stand-alone h3 {
     font-family: "Londrina Solid", cursive;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 1.5rem;
-    color: #000000; }
-  .speaker.has-only-bio .speaker__bio {
-    border-left: 3px solid #000000; }
+    color: #266bbd;
+    margin-top: 1.5rem; }
+  .speaker.stand-alone .speaker__social a {
+    color: #266bbd;
+    transition: .3s color ease-in-out; }
+    .speaker.stand-alone .speaker__social a:hover, .speaker.stand-alone .speaker__social a:focus {
+      color: #e73c4e; }
+  .speaker.stand-alone .speaker__bio {
+    padding-bottom: 40px; }
+    @media (max-width: 769px) {
+      .speaker.stand-alone .speaker__bio {
+        padding-bottom: 30px; } }
+    @media (max-width: 576px) {
+      .speaker.stand-alone .speaker__bio {
+        padding-bottom: 20px; } }
+    .speaker.stand-alone .speaker__bio a {
+      color: #266bbd;
+      transition: .3s color ease-in-out; }
+      .speaker.stand-alone .speaker__bio a:hover, .speaker.stand-alone .speaker__bio a:focus {
+        color: #e73c4e; }
   .speaker__social {
     margin-bottom: 20px; }
     .speaker__social a {
-      color: #266bbd;
       font-size: 1.3em;
+      color: #266bbd;
       padding-right: 10px;
       transition: color .3s ease-in-out; }
       .speaker__social a:last-child {
         padding-right: 0; }
       .speaker__social a:hover, .speaker__social a:focus {
         color: #e73c4e; }
+    .speaker__social.level-item {
+      margin-bottom: 0; }
+      .speaker__social.level-item a {
+        font-size: 0.8em;
+        color: #e73c4e;
+        padding-right: 15px; }
+        .speaker__social.level-item a:hover, .speaker__social.level-item a:focus {
+          color: #266bbd; }
   .speaker::after {
     background: #ffffff;
     width: 100%;
@@ -433,7 +466,10 @@ nav.menu {
       margin-right: 0px; }
     .highlights .highlight.talk {
       background: #266bbd;
-      color: #ffffff; }
+      color: #ffffff;
+      transition: .3s background ease-in-out; }
+      .highlights .highlight.talk:hover, .highlights .highlight.talk:focus {
+        background: #e73c4e; }
     .highlights .highlight.small {
       padding: 3px 10px;
       font-size: 14px; }
@@ -494,6 +530,15 @@ h1.callout {
   width: 100%;
   text-align: center;
   position: relative; }
+  h1.callout.stand-alone {
+    max-width: 60%; }
+    @media (max-width: 769px) {
+      h1.callout.stand-alone {
+        max-width: 75%; } }
+    @media (max-width: 576px) {
+      h1.callout.stand-alone {
+        max-width: 95%;
+        margin-left: auto !important; } }
   h1.callout.left {
     margin: 0 auto 0 -40px; }
     h1.callout.left:after {
@@ -652,6 +697,10 @@ footer {
       #newsletter a:hover:after {
         background: #000000; }
 
+.page--stand-alone__speaker {
+  min-height: 100vh;
+  position: relative; }
+
 .page--stand-alone {
   color: #000000; }
   .page--stand-alone .container--wrapper {
@@ -734,3 +783,10 @@ footer {
       color: #ffffff; }
       #grants a:hover:after {
         background: #266bbd; }
+
+.speaker-link {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0; }

src/main.scss

@@ -401,6 +401,7 @@ $ribbonSize: 0.5em;
     margin-bottom: 0;
   }
   &__profile_img{
+    position: relative;
     span{
       color: #000000;
     }
@@ -419,15 +420,24 @@ $ribbonSize: 0.5em;
       padding: 7px 15px;
       border-top: 3px solid #000000;
       border-left: 3px solid #000000;
+      border-bottom: 3px solid #000000;
       position: absolute;
-      bottom: 0;
+      bottom: -3px;
       right: 0;
       font-family: $londrina;
       text-transform: uppercase;
       letter-spacing: 2px;
       font-size: 1.5rem;
       color: #000000;
       margin: 0;
+      transition: .3s background ease-in-out;
+      &:hover, &:focus{
+        background: #000000;
+        color: #ffffff;
+      }
+    }
+    &--appended{
+      min-height: 300px;
     }
   }
   &__bio{
@@ -453,23 +463,46 @@ $ribbonSize: 0.5em;
       }
     }
   }
-  &.has-only-bio{
+  &.stand-alone{
     h3{
       font-family: $londrina;
       text-transform: uppercase;
       letter-spacing: 2px;
       font-size: 1.5rem;
-      color: #000000;
+      color: $theme-dark-blue;
+      margin-top: 1.5rem;
+    }
+    .speaker__social{
+      a{
+        color: $theme-dark-blue;
+        transition: .3s color ease-in-out;
+        &:hover, &:focus{
+          color: $theme-darker-pink;
+        }
+      }
     }
     .speaker__bio{
-      border-left: 3px solid #000000;
+      padding-bottom: 40px;
+      @include md{
+        padding-bottom: 30px;
+      }
+      @include sm{
+        padding-bottom: 20px;
+      }
+      a{
+        color: $theme-dark-blue;
+        transition: .3s color ease-in-out;
+        &:hover, &:focus{
+          color: $theme-darker-pink;
+        }
+      }
     }
   }
   &__social{
     margin-bottom: 20px;
-    a{
-      color: $theme-dark-blue;
+    a {
       font-size: 1.3em;
+      color: $theme-dark-blue;
       padding-right:10px;
       transition: color .3s ease-in-out;
       &:last-child{
@@ -479,6 +512,17 @@ $ribbonSize: 0.5em;
         color: $theme-darker-pink;
       }
     }
+    &.level-item {
+      margin-bottom: 0;
+      a {
+        font-size: 0.8em;
+        color: $theme-darker-pink;
+        padding-right:15px;
+        &:hover, &:focus {
+          color: $theme-dark-blue;
+        }
+      }
+    }
   }
   &::after{
     background: #ffffff;
@@ -511,6 +555,10 @@ $ribbonSize: 0.5em;
     &.talk{
       background: $theme-dark-blue;
       color: #ffffff;
+      transition: .3s background ease-in-out;
+      &:hover, &:focus{
+        background: $theme-darker-pink;
+      }
     }
     &.small{
       padding: 3px 10px;
@@ -587,6 +635,16 @@ h1.callout{
   width: 100%;
   text-align: center;
   position: relative;
+  &.stand-alone{
+    max-width: 60%;
+    @include md{
+      max-width: 75%;
+    }
+    @include sm{
+      max-width: 95%;
+      margin-left: auto !important;
+    }
+  }
   &.left{
     margin:0 auto 0 -40px;
     &:after{
@@ -784,6 +842,11 @@ footer{
   }
 }
 
+.page--stand-alone__speaker{
+  min-height: 100vh;
+  position: relative;
+}
+
 .page--stand-alone{
   .container--wrapper{
     padding: 60px 20px 80px 20px;
@@ -893,4 +956,12 @@ footer{
     }
   }
 
+}
+
+.speaker-link{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top:0;
+  left:0;
 }