From 6fb3d5f8baf1f16e69ab172f8680d3c75a3b2423 Mon Sep 17 00:00:00 2001
From: Vencislav Atanasov <git@6bez10.info>
Date: Sat, 21 Sep 2024 23:37:47 +0300
Subject: [PATCH] Fix member pictures rendering

---
 src/Schedule.jsx  |   4 +-
 src/Schedule.scss | 100 ++++++++++++++++++++++++++++++++++++++++++++++
 src/index.css     |   4 ++
 3 files changed, 106 insertions(+), 2 deletions(-)

diff --git a/src/Schedule.jsx b/src/Schedule.jsx
index 3073685..c2da344 100644
--- a/src/Schedule.jsx
+++ b/src/Schedule.jsx
@@ -97,8 +97,8 @@ 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 member">
                         <a href={'#'.concat(getSpeakerName(speaker))}>
                             <img width="100" height="100" src={defaultSpeaker} alt={getSpeakerName(speaker)} />
                         </a>
diff --git a/src/Schedule.scss b/src/Schedule.scss
index ae6eefd..4ccf4ba 100644
--- a/src/Schedule.scss
+++ b/src/Schedule.scss
@@ -90,9 +90,109 @@
     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;
+      }
+    }
+  }
 }
diff --git a/src/index.css b/src/index.css
index 359af23..3f40e52 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,3 +12,7 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+a img {
+  border: none;
+}