Fix Twitter and GitHub icons in speaker profiles

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.6.0",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/Schedule.jsx

@@ -35,10 +35,8 @@ export default function Schedule({
     return (<>
         {isLoading && <>Loading... <progress value={loadingProgress} /></>}
         <div className="schedule">
-            {header && <>
-                <table style={{
-                    textAlign: 'center',
-                }}>
+            {header && rows && <>
+                <table>
                     <thead>
                         <tr>
                             {header.map(hall => <th key={hall.id}>{hall.name}</th>)}
@@ -60,9 +58,7 @@ export default function Schedule({
                 <div className="separator"/>
             </>}
             {tracks && <>
-                <table style={{
-                    textAlign: 'center',
-                }}>
+                <table>
                     <tbody>
                         {Object.entries(tracks).filter(([, track]) =>
                             !isTrackHidden(track)
@@ -93,9 +89,7 @@ export default function Schedule({
                 {event.abstract && <p>
                     {event.abstract}
                 </p>}
-                <p style={{
-                    textAlign: 'right',
-                }}>
+                <p className="feedback">
                     <strong>
                         <a href={event.feedback_url}>Submit feedback</a>
                     </strong>
@@ -103,26 +97,29 @@ export default function Schedule({
                 <div className="separator" />
             </section>)}
             {speakers && <>
-                <div>
-                    {Object.entries(speakers).map(([speakerId, speaker]) => <div key={speakerId}>
+                <div className="grid members">
+                    {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)}>
-                    <img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)}/>
-                    <h3>{getSpeakerName(speaker)}</h3>
-                    <div>
-                        {speaker.twitter && <a href={'https://twitter.com/'.concat(speaker.twitter)}>
-                            twitter
-                        </a>}
-                        {speaker.github && <a href={'https://github.com/'.concat(speaker.github)}>
-                            github
-                        </a>}
+                {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 className="icons">
+                            {speaker.twitter && <a href={'https://twitter.com/'.concat(speaker.twitter)}>
+                                <i className="fa-brands fa-twitter" />
+                            </a>}
+                            {speaker.github && <a href={'https://github.com/'.concat(speaker.github)}>
+                                <i className="fa-brands fa-github"/>
+                            </a>}
+                        </div>
+                        <p>{speaker.biography}</p>
                     </div>
-                    <p>{speaker.biography}</p>
-                </div>)}
+                    <div className="separator" />
+                </Fragment>)}
             </>}
         </div>
     </>);

src/Schedule.scss

@@ -86,9 +86,148 @@
     margin: 0 1em 2em 0;
   }
 
+  section p.feedback {
+    text-align: right;
+  }
+
+  .grid {
+    box-sizing: border-box;
+    width: 100%;
+  }
+
+  .grid::after {
+    content: " ";
+    clear: both;
+    display: block;
+  }
+
+  .grid .col2 {
+    width: 50%;
+    float: left;
+    box-sizing: border-box;
+  }
+
+  .grid .col2 + .col2, .grid .col3 + .col3, .grid .col4 + .col4 {
+    padding: 0 0 0 1em;
+  }
+
+  .grid .col3 {
+    float: left;
+    box-sizing: border-box;
+  }
+
+  .grid .col3:nth-child(3n + 1) {
+    clear: both;
+    padding: 0;
+  }
+
+  .grid .col4 {
+    width: 25%;
+    float: left;
+    box-sizing: border-box;
+  }
+
+  .grid .col4:nth-child(4n + 1) {
+    clear: both;
+    padding: 0;
+  }
+
+  .grid .col-left {
+    width: 70%;
+    float: left;
+    box-sizing: border-box;
+    padding: 0 1.6em 0 0;
+  }
+
+  .grid .col-right {
+    width: 30%;
+    float: left;
+    margin-bottom: 2em;
+    box-sizing: border-box;
+  }
+
+  .grid .col-right .content {
+    width: 100%;
+  }
+
+  @media all and (max-width: 600px) {
+    .grid .col2, .grid .col3, .grid .col4, .grid .col-left, .grid .col-right {
+      width: 100%;
+      float: none;
+      padding: 0 0 1em 0;
+    }
+    .grid .col2 + .col2, .grid .col3 + .col3, .grid .col4 + .col4 {
+      padding: 0;
+    }
+  }
+
   .separator {
     margin: 2.4em 0;
     height: 1px;
     background: #DBDBDB;
   }
+
+  .members {
+    margin: 0 0 2em 0;
+
+    .member {
+      margin: 0 0 1em 0;
+
+      a {
+        display: block;
+
+        > img {
+          width: 100px;
+          max-width: 100%;
+          padding: 0.3em;
+          background: #FFF;
+          box-shadow: 0 0 1px 1px #999;
+        }
+      }
+
+      span {
+        display: block;
+      }
+
+      .icons a {
+        display: inline-block;
+        margin: 0 0.3em 0 0;
+      }
+    }
+  }
+
+  .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;
+    }
+  }
 }

src/index.css

@@ -12,3 +12,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+a img {
+  border: none;
+}

src/main.jsx

@@ -1,6 +1,8 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import App from './App.jsx';
+
+import '@fortawesome/fontawesome-free/css/all.css';
 import './index.css';
 
 createRoot(document.getElementById('root')).render(

yarn.lock

@@ -354,6 +354,11 @@
   dependencies:
     levn "^0.4.1"
 
+"@fortawesome/fontawesome-free@^6.6.0":
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-6.6.0.tgz#0e984f0f2344ee513c185d87d77defac4c0c8224"
+  integrity sha512-60G28ke/sXdtS9KZCpZSHHkCbdsOGEhIUGlwq6yhY74UpTiToIh8np7A8yphhM4BWsvNFtIvLpi4co+h9Mr9Ow==
+
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"