columns

4 files changed, 62 insertions, 18 deletions

diff --git a/megapixels/app/site/parser.py b/megapixels/app/site/parser.py
index 00470e4b..06c45f41 100644
--- a/megapixels/app/site/parser.py
+++ b/megapixels/app/site/parser.py
@@ -27,6 +27,7 @@ def parse_markdown(metadata, sections, s3_path, skip_h1=False):
   current_group = []
   footnotes = []
   in_stats = False
+  in_columns = False
   in_footnotes = False
   ignoring = False
 
@@ -50,6 +51,7 @@ def parse_markdown(metadata, sections, s3_path, skip_h1=False):
       footnotes.append(section)
     elif ignoring:
       continue
+
     elif '### statistics' in section.lower() or '### sidebar' in section.lower():
       if len(current_group):
         groups.append(format_section(current_group, s3_path))
@@ -64,6 +66,26 @@ def parse_markdown(metadata, sections, s3_path, skip_h1=False):
       if 'end sidebar' not in section.lower():
         current_group.append(section)
       in_stats = False
+
+    elif '=== columns' in section.lower():
+      if len(current_group):
+        groups.append(format_section(current_group, s3_path))
+      current_group = []
+      in_columns = True
+      column_partz = section.split(' ')
+      if len(column_partz) == 3:
+        column_count = column_partz[2]
+      else:
+        column_count = "N"
+      groups.append("<section><div class='columns columns-{}'>".format(column_count))
+    elif in_columns is True and '===' in section:
+      groups.append(format_section(current_group, s3_path, type='column', tag='div'))
+      current_group = []
+      if 'end columns' in section:
+        groups.append("</div></section>")
+        in_columns = False
+        current_group = []
+
     elif section.strip().startswith('{% include'):
       groups.append(format_section(current_group, s3_path))
       current_group = []
diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index 0244b86b..b9e99efe 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -842,21 +842,20 @@ ul.map-legend li.source:before {
   color: #fff;
 }
 .content-about p {
-  font-size:16px;
+  font-size: 16px;
 }
 .content-about ul{
- font-size:14px;
+ font-size: 14px;
  font-weight: 300; 
 }
-.content-about section > p:first-of-type{
-  font-size:23px;
-  line-height:39px;
+.content-about section:first-of-type > p:first-of-type {
+  font-size: 23px;
+  line-height: 39px;
 }
 .content-about .about-menu ul li {
   display: inline-block;
   font-size: 14px;
   font-weight: 400;
-  margin-right: 8px;
   text-transform: uppercase;
   margin-right: 15px;
   font-family: 'Roboto';
@@ -870,6 +869,21 @@ ul.map-legend li.source:before {
   border-bottom: 1px solid #ddd;
   color: #ddd;
 }
+
+/* columns */
+
+.columns {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+}
+.columns-3 .column {
+  width: 33%;
+  padding-right: 20px;
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+}
+
 /* about page */
 
 
diff --git a/site/content/pages/about/index.md b/site/content/pages/about/index.md
index c2d67f16..5fc147c9 100644
--- a/site/content/pages/about/index.md
+++ b/site/content/pages/about/index.md
@@ -29,7 +29,7 @@ The MegaPixels site is made possible with support from <a href="http://mozilla.o
 
 <div class="flex-container team-photos-container">
     <div class="team-member">
-        <h3>Adam Harvey</h4>
+        <h3>Adam Harvey</h3>
         <p>is Berlin-based American artist and researcher. His previous projects (CV Dazzle, Stealth Wear, and SkyLift) explore the potential for counter-surveillance as artwork. He is the founder of VFRAME (visual forensics software for human rights groups) and is a currently researcher in residence at Karlsruhe HfG.</p>
         <p><a href="https://ahprojects.com">ahprojects.com</a></p>
         </p>
@@ -42,29 +42,37 @@ The MegaPixels site is made possible with support from <a href="http://mozilla.o
     </div>
 </div>
 
-MegaPixels.cc is an independent research project about publicly available face recognition datasets. This website is based, in part, on earlier installations and research project about facial recognition datasets in 2016-2018, in particular the MegaFace dataset. Since then it has evolved into a large-scale survey and analysis of publicly available face and person analysis dataset usage, geographies, and ethics.
+MegaPixels.cc is an independent research project about publicly available face recognition datasets. This website is based, in part, on earlier installations and research projects about facial recognition datasets in 2016-2018, which focused particularly on the MegaFace dataset. Since then it has evolved into a large-scale survey of publicly-available face and person analysis datasets, covering their usage, geographies, and ethics.
 
-An academic report and presentation on the findings is forthcoming. This site is published to make the research more accessible to a wider audience and to include visualizations and interactive features not possible in PDF publications. Continued research on MegaPixles is supported by a 1 year Researcher-in-Residence grant from Karlsruhe HfG.
+An academic report and presentation on the findings is forthcoming. This site is published to make the research more accessible to a wider audience and to include visualizations and interactive features not possible in PDF publications. Continued research on MegaPixels is supported by a 1 year Researcher-in-Residence grant from Karlsruhe HfG.
 
 When possible, and once thoroughly verified, data generated for MegaPixels will be made available for download on [github.com/adamhrv/megapixels](https://github.com/adamhrv/megapixels)
 
+=== columns 3
+
 #### Team
 
 - Adam Harvey: Concept, research, design, computer vision
 - Jules LaPlace: Information and systems architecture, data retrieval, web applications
 
+===========
+
 #### Contributing Researchers
 
 - Berit Gilma: Dataset statistics and discovery
 - Beth (aka Ms. Celeb): Dataset usage verification and research
 - Mathana Stender: Commercial usage verification and research on LFW
 
+===========
+
 #### Code and Libraries
 
 - [Semantic Scholar](https://semanticscholar.org) for citation aggregation
 - Leaflet.js for maps
 - C3.js for charts
-- D3.js and ThreeJS for 3D visualizations
+- ThreeJS for 3D visualizations
 - PDFMiner.Six and Pandas for research paper data analysis
 
+=== end columns
+
 Please direct questions, comments, or feedback to [mastodon.social/@adamhrv](https://mastodon.social/@adamhrv)
\ No newline at end of file
diff --git a/site/public/about/index.html b/site/public/about/index.html
index 5b98ab34..18ad797a 100644
--- a/site/public/about/index.html
+++ b/site/public/about/index.html
@@ -39,7 +39,7 @@
 <p>The MegaPixels site is made possible with support from <a href="http://mozilla.org">Mozilla</a></p>
 <div class="flex-container team-photos-container">
    <div class="team-member">
-       <h3>Adam Harvey</h4>
+       <h3>Adam Harvey</h3>
        <p>is Berlin-based American artist and researcher. His previous projects (CV Dazzle, Stealth Wear, and SkyLift) explore the potential for counter-surveillance as artwork. He is the founder of VFRAME (visual forensics software for human rights groups) and is a currently researcher in residence at Karlsruhe HfG.</p>
        <p><a href="https://ahprojects.com">ahprojects.com</a></p>
        </p>
@@ -50,29 +50,29 @@
        </p>
        <p><a href="https://asdf.us/">asdf.us</a></p>
    </div>
-</div><p>MegaPixels.cc is an independent research project about publicly available face recognition datasets. This website is based, in part, on earlier installations and research project about facial recognition datasets in 2016-2018, in particular the MegaFace dataset. Since then it has evolved into a large-scale survey and analysis of publicly available face and person analysis dataset usage, geographies, and ethics.</p>
-<p>An academic report and presentation on the findings is forthcoming. This site is published to make the research more accessible to a wider audience and to include visualizations and interactive features not possible in PDF publications. Continued research on MegaPixles is supported by a 1 year Researcher-in-Residence grant from Karlsruhe HfG.</p>
+</div><p>MegaPixels.cc is an independent research project about publicly available face recognition datasets. This website is based, in part, on earlier installations and research projects about facial recognition datasets in 2016-2018, which focused particularly on the MegaFace dataset. Since then it has evolved into a large-scale survey of publicly-available face and person analysis datasets, covering their usage, geographies, and ethics.</p>
+<p>An academic report and presentation on the findings is forthcoming. This site is published to make the research more accessible to a wider audience and to include visualizations and interactive features not possible in PDF publications. Continued research on MegaPixels is supported by a 1 year Researcher-in-Residence grant from Karlsruhe HfG.</p>
 <p>When possible, and once thoroughly verified, data generated for MegaPixels will be made available for download on <a href="https://github.com/adamhrv/megapixels">github.com/adamhrv/megapixels</a></p>
-<h4>Team</h4>
+</section><section><div class='columns columns-3'><div class='column'><h4>Team</h4>
 <ul>
 <li>Adam Harvey: Concept, research, design, computer vision</li>
 <li>Jules LaPlace: Information and systems architecture, data retrieval, web applications</li>
 </ul>
-<h4>Contributing Researchers</h4>
+</div><div class='column'><h4>Contributing Researchers</h4>
 <ul>
 <li>Berit Gilma: Dataset statistics and discovery</li>
 <li>Beth (aka Ms. Celeb): Dataset usage verification and research</li>
 <li>Mathana Stender: Commercial usage verification and research on LFW</li>
 </ul>
-<h4>Code and Libraries</h4>
+</div><div class='column'><h4>Code and Libraries</h4>
 <ul>
 <li><a href="https://semanticscholar.org">Semantic Scholar</a> for citation aggregation</li>
 <li>Leaflet.js for maps</li>
 <li>C3.js for charts</li>
-<li>D3.js and ThreeJS for 3D visualizations</li>
+<li>ThreeJS for 3D visualizations</li>
 <li>PDFMiner.Six and Pandas for research paper data analysis</li>
 </ul>
-<p>Please direct questions, comments, or feedback to <a href="https://mastodon.social/@adamhrv">mastodon.social/@adamhrv</a></p>
+</div></div></section><section><p>Please direct questions, comments, or feedback to <a href="https://mastodon.social/@adamhrv">mastodon.social/@adamhrv</a></p>
 </section>
 
   </div>