package.json

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

src/Schedule.scss

@@ -86,148 +86,9 @@
     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,7 +12,3 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
-a img {
-  border: none;
-}

src/main.jsx

@@ -1,8 +1,6 @@
 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,11 +354,6 @@
   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"