proper board members layout & styling

_src/_assets/scss/_board.scss

@@ -1,8 +1,66 @@
-.boardmember__title {
+.boardmember {
+    margin-top: $spacer * $line-height;
+}
+
+.boardmember__name,
+.boardmember__position,
+.boardmember__social {
+    margin: 0;
+}
+
+.boardmember__name {
     font-size: $font-size-h3;
-    margin-bottom: 0;
+}
+
+.boardmember__info {
+    margin-bottom: $spacer;
+    position: relative;
+
+    @media ($screen-xs) {
+        display: flex;
+        align-items: center;
+    }
+}
+
+$avatar-size: 100px;
+
+.boardmember__avatar {
+    width: $avatar-size;
+    height: $avatar-size;
+    border-radius: $border-radius;
+    margin-right: $spacer;
+    border: 3px solid $brand-02;
+    background: $brand-02;
+}
+
+.boardmember__social {
+    font-size: $font-size-small;
+
+    @media ($screen-md) {
+        position: absolute;
+        top: calc(#{$avatar-size} + #{$spacer});
+        left: 0;
+        width: $avatar-size;
+        text-align: center;
+
+        a {
+            display: block;
+        }
+    }
 }
 
 .boardmember__bio {
+    p {
+        opacity: .75;
+        font-size: $font-size-small;
 
+        &:first-child {
+            opacity: 1;
+            font-size: $font-size-base;
+        }
+    }
+
+    @media ($screen-md) {
+        padding-left: calc(#{$avatar-size} + #{$spacer});
+    }
 }

_src/_assets/scss/_variables.scss

@@ -49,10 +49,12 @@ $link-color:                $brand-01 !default;
 //
 // Responsive breakpoints
 //
+$screen-xs-min:             30em !default;
 $screen-sm-min:             40em !default;
 $screen-md-min:             58em !default;
 $screen-lg-min:             85em !default;
 
+$screen-xs:                 'min-width: #{$screen-xs-min}';
 $screen-sm:                 'min-width: #{$screen-sm-min}';
 $screen-md:                 'min-width: #{$screen-md-min}';
 $screen-lg:                 'min-width: #{$screen-lg-min}';

_src/_data/board.yml

@@ -1,34 +1,76 @@
+#
+# HEADS UP!
+#
+# Possible keys:
+# - name
+# - position
+# - bio
+# - social (optional)
+# - prefix (optional): used to prefix the name, like Dr.
+#
+# The photo is grabbed automatically based on the webified version of the name.
+# Each photo needs to be put as a square JPG in _src/_assets/img/board/ with the file name reflecting the name, e.g. David Holtzman would be david-holtzman.jpg
+#
+
+
 - name: David Holtzman
   position: President
+
   bio: |
     David Holtzman is an information technology security expert, educator and activist. He started his career as a cryptographic analyst, military codebreaker, U.S. Naval Security Group submariner, and Soviet Manned Space Program analyst. Holtzman is an early-stage internet pioneer.
 
     He was the CTO at Network Solutions when it managed the domain name system, where he oversaw the explosive growth of the commercial internet to more than 20 million domain names by the late 1990s. He is the author of Privacy Lost: How Technology is Endangering Your Privacy, and a regular commentator for major news media, including Bloomberg Television, BBC, CNN, The New York Times, Business Week, and The Washington Post.
 
+  social:
+      - name: Twitter
+        link: https://twitter.com/theglobalpov
+
+
 - name: Constance Choi
   position: Secretary
+
   bio: |
-    Constance Choi is the co-founder and Director of COALA, an international multidisciplinary collaborative research and development initiative on blockchain technologies, smart contracts, and decentralized autonomous applications. Choi co-founded and was General Counsel and Chief Compliance Officer of the Kraken digital asset exchange.
+    Constance Choi is the co-founder and Director of [COALA](http://coala.global/), an international multidisciplinary collaborative research and development initiative on blockchain technologies, smart contracts, and decentralized autonomous applications. Choi co-founded and was General Counsel and Chief Compliance Officer of the Kraken digital asset exchange.
 
     She holds a J.D. from UC Berkeley School of Law, and undergraduate degrees from Brown University and University of Cambridge. She has practiced at several law firms, including the Electronic Frontier Foundation, focusing on internet and technology law, intellectual property, privacy, data security, and constitutional rights.
 
+  social:
+      - name: Twitter
+        link: https://twitter.com/sevenadvisory
+
+
 - name: Greg McMullen
   position: Treasurer
   bio: |
-    Greg McMullen is a lawyer, internet advocate, and Chief Policy Officer at BigchainDB, where he built the framework for the IPDB Foundation and helped bring together its founding caretakers. He is a leading member of the COALA IP working group and co-authored the COALA IP specification and policy paper.
+    Greg McMullen is a lawyer, internet advocate, and Chief Policy Officer at BigchainDB, where he built the framework for the IPDB Foundation and helped bring together its founding caretakers. He is a leading member of the [COALA IP](https://www.coalaip.org/) working group and co-authored the COALA IP specification and policy paper.
 
     Before joining BigchainDB and IPDB, he was a litigator at one of Canada’s top class actions law firms, where he worked on class actions involving privacy, copyright, competition law, and price fixing conspiracies. He served on the board of directors the BC Civil Liberties Association, Canada’s largest civil liberties organization, and authored the BCCLA’s guide to privacy and security when crossing borders with electronic devices.
 
-- name: Dr. Nina-Luisa Siedler
+  social:
+      - name: Twitter
+        link: https://twitter.com/gmcmullen
+
+
+- name: Nina-Luisa Siedler
+  prefix: Dr.
   position: Member-at-Large
   bio: |
-    Dr. Nina-Luisa Siedler is a lawyer and partner at DWF Berlin with over 15 years of experience. She is interested in FinTech and decentralized technology, and her practice includes blockchain matters. She is an advisor to Blockchain Hub Berlin.
+    Dr. Nina-Luisa Siedler is a lawyer and partner at [DWF Berlin](https://www.dwf.law/people/n/nina-siedler/) with over 15 years of experience. She is interested in FinTech and decentralized technology, and her practice includes blockchain matters. She is an advisor to Blockchain Hub Berlin.
 
     Dr. Siedler is specialized in structured finance, including credit and capital market instruments, especially acquisition and project financing, real estate transactions, asset-backed securities, structured cover bonds, debt loans, and corporate bonds.
 
+  social:
+      - name: Twitter
+        link: https://twitter.com/ninsie3
+
+
 - name: Kaspar Korjus
   position: Member-at-Large
   bio: |
-    Kaspar Korjus is the Managing Director of Estonia’s e-Residency program, which offers a fully digital identity for global citizens. e-Residency is built on inclusion, transparency, and legitimacy. It is meant to empower citizens globally and provide world-wide digital and financial inclusion.
+    Kaspar Korjus is the Managing Director of Estonia’s [e-Residency](https://e-estonia.com/e-residents/about/) program, which offers a fully digital identity for global citizens. e-Residency is built on inclusion, transparency, and legitimacy. It is meant to empower citizens globally and provide world-wide digital and financial inclusion.
 
     Korjus was chosen by Megan Smith, CTO of the United States, as one of 20 digital leaders for the Global Leaders Digital Exchange (GLDE) program, and is listed in Forbes Estonia’s “30 under 30” as #1 in Technology and Finance.
+
+  social:
+      - name: Twitter
+        link: https://twitter.com/kasparkorjus

_src/_includes/board.html

@@ -8,8 +8,26 @@
 
         <div class="grid__col">
             <div class="boardmember">
-                <h1 class="boardmember__title">{{ member.name }}</h1>
-                <p class="boardmember__position">{{ member.position }}</p>
+                <div class="boardmember__info">
+                    <img class="boardmember__avatar" src="/assets/img/board/{{ slug }}.jpg">
+
+                    <div class="boardmember__meta">
+                        <h1 class="boardmember__name">
+                            {% if member.prefix %}{{ member.prefix }} {% endif %}
+                            {{ member.name }}
+                        </h1>
+                        <p class="boardmember__position">{{ member.position }}</p>
+
+                        {% if member.social %}
+                        <p class="boardmember__social">
+                            {% for item in member.social %}
+                                <a href="{{ item.link }}">{{ item.name }}</a>
+                            {% endfor %}
+                        </p>
+                        {% endif %}
+                    </div>
+                </div>
+
                 <div class="boardmember__bio">{{ member.bio | markdownify }}</div>
             </div>
         </div>