community page(tablet+mobile)

Author: alexchorman

_includes/toc.html

@@ -0,0 +1,85 @@
+{% capture tocWorkspace %}
+    {% comment %}
+        Version 1.0.4
+          https://github.com/allejo/jekyll-toc
+
+        "...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe
+
+        Usage:
+            {% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %}
+
+        Parameters:
+            * html       (string) - the HTML of compiled markdown generated by kramdown in Jekyll
+
+        Optional Parameters:
+            * sanitize   (bool)   : false  - when set to true, the headers will be stripped of any HTML in the TOC
+            * class      (string) :   ''   - a CSS class assigned to the TOC
+            * id         (string) :   ''   - an ID to assigned to the TOC
+            * h_min      (int)    :   1    - the minimum TOC header level to use; any header lower than this value will be ignored
+            * h_max      (int)    :   6    - the maximum TOC header level to use; any header greater than this value will be ignored
+            * ordered    (bool)   : false  - when set to true, an ordered list will be outputted instead of an unordered list
+            * item_class (string) :   ''   - add custom class for each list item; has support for '%level%' placeholder, which is the current heading level
+
+        Output:
+            An ordered or unordered list representing the table of contents of a markdown block. This snippet will only generate the table of contents and will NOT output the markdown given to it
+    {% endcomment %}
+
+    {% capture my_toc %}{% endcapture %}
+    {% assign orderedList = include.ordered | default: false %}
+    {% assign minHeader = include.h_min | default: 1 %}
+    {% assign maxHeader = include.h_max | default: 6 %}
+    {% assign nodes = include.html | split: '<h' %}
+    {% assign firstHeader = true %}
+
+    {% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %}
+
+    {% for node in nodes %}
+        {% if node == "" %}
+            {% continue %}
+        {% endif %}
+
+        {% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
+
+        {% if headerLevel < minHeader or headerLevel > maxHeader %}
+            {% continue %}
+        {% endif %}
+
+        {% if firstHeader %}
+            {% assign firstHeader = false %}
+            {% assign minHeader = headerLevel %}
+        {% endif %}
+
+        {% assign indentAmount = headerLevel | minus: minHeader | add: 1 %}
+        {% assign _workspace = node | split: '</h' %}
+
+        {% assign _idWorkspace = _workspace[0] | split: 'id="' %}
+        {% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
+        {% assign html_id = _idWorkspace[0] %}
+
+        {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
+        {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
+
+        {% assign space = '' %}
+        {% for i in (1..indentAmount) %}
+            {% assign space = space | prepend: '    ' %}
+        {% endfor %}
+
+        {% unless include.item_class == blank %}
+            {% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %}
+        {% endunless %}
+
+        {% capture my_toc %}{{ my_toc }}
+{{ space }}{{ listModifier }} {{ listItemClass }} [{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}](#{{ html_id }}){% endcapture %}
+
+    {% endfor %}
+
+    {% if include.class %}
+        {% capture my_toc %}{:.{{ include.class }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+
+    {% if include.id %}
+        {% capture my_toc %}{: #{{ include.id }}}
+{{ my_toc | lstrip }}{% endcapture %}
+    {% endif %}
+{% endcapture %}{% assign tocWorkspace = '' %}{{ my_toc | markdownify | strip }}

_sass/screen.scss

@@ -1050,13 +1050,6 @@ h1 span.fa, h2 span.fa, h3 span.fa, h4 span.fa, h5 span.fa, h6 span.fa {
 .starttitle a{
     margin:0 20px auto;
 }
-.introlink{
-    text-align:center;
-    font-size:125%;
-    font-weight:bold;
-    margin-top:30px;
-}
-
 .support-card {
     min-height: 395px;
 }
@@ -2172,6 +2165,9 @@ button.active {
 /* Resources page end */
 
 /* Community page start */
+.community {
+    padding: 70px 0;
+}
 .community-row {
     flex-wrap: wrap;
     justify-content: center;
@@ -2182,6 +2178,7 @@ button.active {
 .community-card {
     min-height: 475px;
     margin-right: 30px;
+    width: 370px;
 }
 .community-card:nth-child(3n+3) {
     margin-right: 30px;
@@ -2190,8 +2187,6 @@ button.active {
     margin: 0 auto 60px;
     text-align: center;
 }
-/* Community page end */
-
 .organizations-row {
     justify-content: left;
     flex-wrap: wrap;
@@ -2200,22 +2195,36 @@ button.active {
     width: 31.6%;
     margin-right: 2.5%;
     margin-bottom: 50px;
+    text-align: left;
 }
 .organizations-item:nth-child(3n+3) {
     margin-right: 0;
 }
-.organizations-item img {
+.organization-img {
     width: 40px;
     height: 33px;
     margin-right: 28px;
 }
-.organizations-item h3 {
+.organization-country {
     margin: 0;
     font-size: 137.5%;
     color: #13161F;
     line-height: 36px;
     font-weight: 400;
 }
+.organization-link {
+    font-size: 112.5%;
+    color: #4D5060;
+    line-height: 34px;
+}
+.introlink{
+    text-align:center;
+    font-size: 125%;
+    color: #4D5060;
+    line-height: 34px;
+}
+/* Community page end */
+
 // .resourcesorg{
 //     margin-bottom:40px;
 //     text-align:left;
@@ -3236,6 +3245,18 @@ button.active {
     .notice {
         margin: 0 0 10px;
     }
+    .community-row {
+        justify-content: space-between;
+    }
+    .community-card:nth-child(3n+3) {
+        margin-right: 0;
+    }
+    .organizations-item {
+        width: 47.5%;
+    }
+    .organizations-item:nth-child(3n+3) {
+        margin-right: 2.5%;
+    }
 }
 
 @media handheld, only screen and ( max-width: 48em ), only screen and ( max-device-width: 48em ){
@@ -3675,6 +3696,9 @@ button.active {
         border-left: none;
         border-top: 1px solid #dfdfdf;
     }
+    .community {
+        padding: 50px 0;
+    }
 }
 @media handheld, only screen and ( max-width: 40em ), only screen and ( max-device-width: 40em ){
     p {
@@ -3958,6 +3982,9 @@ button.active {
     .glossary-subpage-left>p {
         margin: 0 0 10px;
     }
+    .organizations-item {
+        width: 100%;
+    }
 }
 
 @import 'wallets';