Add WIP support for volunteer section

cesko-digital · Mar 10, 2020 · c75fa05 · c75fa05
1 parent 6ff86c7
commit c75fa05
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 0 deletions.
diff --git 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
@@ -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`