From c75fa056ad3323511df9af2626b734a69d21f096 Mon Sep 17 00:00:00 2001
From: horm <horak@horm.cz>
Date: Tue, 10 Mar 2020 19:57:57 +0100
Subject: [PATCH] Add WIP support for volunteer section

---
 README.md                     | 13 +++++++++++++
 src/components/post/styles.js | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 48 insertions(+)

diff --git a/README.md b/README.md
index aa60946c..276c4e93 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,19 @@ Do not use heading level 1:
 ...
 ```
 
+### Volunteers section (WIP)
+
+You can also add volunteers to the article by adding this HTML: 
+```html
+<div class="volunteers">
+    <div class="volunteer">
+        <img width="80px" height="80px" src="https://data.cesko.digital/picture.jpg" alt=""/>
+        <div class="name">John Doe</div>
+        <div class="note">Software Developer</div>
+    </div>
+</div>
+```
+
 ## How to Insert News Items
 
 News items are stored in the `content/news.yaml` file in the following format:
diff --git a/src/components/post/styles.js b/src/components/post/styles.js
index 9c94da9e..8ab248d8 100644
--- a/src/components/post/styles.js
+++ b/src/components/post/styles.js
@@ -147,6 +147,41 @@ export const Content = styled.div`
   h2 {
     margin-top: 50px;
   }
+  
+  .volunteers {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+  
+  .volunteer {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 15px;
+    width: 170px;
+    text-align: center;
+    
+    img {
+      width: 80px;
+      height: 80px;
+      border-radius: 40px;
+      object-fit: cover;
+    }
+    
+    .name {
+    margin-top: 10px;
+    margin-bottom: 5px;
+    }
+    
+    .note {
+      font-size: 14px;
+      opacity: 0.5;
+      
+    }
+   
+  }
 `;
 
 export const Arrow = styled.img`