Fix speakers rendering

src/Schedule.jsx

@@ -35,7 +35,7 @@ export default function Schedule({
     return (<>
         {isLoading && <>Loading... <progress value={loadingProgress} /></>}
         <div className="schedule">
-            {header && <>
+            {header && rows && <>
                 <table>
                     <thead>
                         <tr>
@@ -98,25 +98,28 @@ export default function Schedule({
             </section>)}
             {speakers && <>
                 <div className="grid members">
-                    {Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} className="col4 member">
+                    {Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} className="col4 wmember">
                         <a href={'#'.concat(getSpeakerName(speaker))}>
                             <img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)} />
                         </a>
                     </div>)}
                 </div>
-                {Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId} id={getSpeakerName(speaker)}>
+                {Object.entries(speakers).map(([speakerId, speaker]) => <Fragment key={speakerId}>
+                    <div className="speaker" id={getSpeakerName(speaker)}>
                         <img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)}/>
                         <h3>{getSpeakerName(speaker)}</h3>
-                    <div>
+                        <div className="icons">
                             {speaker.twitter && <a href={'https://twitter.com/'.concat(speaker.twitter)}>
-                            twitter
+                                <i className="fa fa-twitter" />
                             </a>}
                             {speaker.github && <a href={'https://github.com/'.concat(speaker.github)}>
-                            github
+                                <i className="fa fa-github"/>
                             </a>}
                         </div>
                         <p>{speaker.biography}</p>
-                </div>)}
+                    </div>
+                    <div className="separator" />
+                </Fragment>)}
             </>}
         </div>
     </>);

src/Schedule.scss

@@ -195,4 +195,39 @@
       }
     }
   }
+
+  .speaker {
+    position: relative;
+    margin: 0 0 2em 0;
+
+    &::after {
+      content: " ";
+      clear: both;
+      display: block;
+    }
+
+    > img {
+      float: left;
+      padding: 0.3em;
+      background: #FFF;
+      box-shadow: 0 0 1px 1px #999;
+      margin: 0 1em 2em 0;
+    }
+
+    .icons {
+      text-align: center;
+      display: inline-block;
+      margin: 0 0 0 0.1em;
+
+      a {
+        display: inline-block;
+        margin: 0 0.3em 0 0;
+      }
+    }
+
+    h3 {
+      margin: 0 0 0.4em 0;
+      padding: 0;
+    }
+  }
 }