Social pic template

_includes/schedule-session-full.html

@@ -17,12 +17,12 @@ <h3 class="event-title">{{ post.title }}</h3>
 
   {% if post.presenters %}
     {% for presenter in post.presenters %}
-    <p class="event-byline">
+    <p class="mini-profile-byline">
       {% if presenter.photo_url != blank %}
       <img
         class="avatar"
         src="{{ presenter.photo_url }}"
-        alt="Photo of {{ presenter.presenters }}" />
+        alt="Photo of {{ presenter.name }}" />
       {% endif %}
       {{ presenter.name }}
       {% if presenter.pronouns != blank %}

_includes/schedule-session.html

@@ -31,12 +31,12 @@ <h3 class="event-title">{{ post.title }}</h3>
     {% endif %}
     {% if post.presenters %}
       {% for presenter in post.presenters %}
-      <p class="event-byline">
+      <p class="mini-profile-byline">
         {% if presenter.photo_url != blank %}
         <img
           class="avatar"
           src="{{ presenter.photo_url }}"
-          alt="Photo of {{ presenter.presenters }}" />
+          alt="Photo of {{ presenter.name }}" />
         {% endif %}
         {{ presenter.name }}
         {% if presenter.pronouns != blank %}

_includes/styleguide/dates-example.html

@@ -0,0 +1,46 @@
+<section class="section-pad">
+  <div class="row column xlarge-9">
+    <div class="date-card medium-4 column">
+      <div class="row collapse">
+        <div class="small-5 column">
+          <div class="dates">
+            <div class="month">Sept</div>
+            <div class="days">22</div>
+          </div>
+        </div>
+        <div class="small-7 column">
+          <h3 class="date-card-title">Tutorials</h3>
+          <p>One day, numerous tutorials</p>
+        </div>
+      </div>
+    </div>
+    <div class="date-card medium-4 column">
+      <div class="row collapse">
+        <div class="small-5 column">
+          <div class="dates">
+            <div class="month">Sept</div>
+            <div class="days">23-25</div>
+          </div>
+        </div>
+        <div class="small-7 column">
+          <h3 class="date-card-title">Talks</h3>
+          <p>Dozens of talks chosen by the community</p>
+        </div>
+      </div>
+    </div>
+    <div class="date-card medium-4 column">
+      <div class="row collapse">
+        <div class="small-5 column">
+          <div class="dates">
+            <div class="month">Sept</div>
+            <div class="days">26-27</div>
+          </div>
+        </div>
+        <div class="small-7 column">
+          <h3 class="date-card-title">Sprints</h3>
+          <p>Team up to work on Django!</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

_includes/styleguide/icons-example1.html

@@ -0,0 +1 @@
+<img src="/static/img/globe.svg" alt="A globe" />

_includes/styleguide/icons-example2.html

@@ -0,0 +1,24 @@
+<img
+  src="/static/img/dollar.svg"
+  alt="A dollar symbol"
+  class="icon icon-small" />
+
+<img
+  src="/static/img/dollar.svg"
+  alt="A dollar symbol"
+  class="icon icon-medium" />
+
+<img
+  src="/static/img/dollar.svg"
+  alt="A dollar symbol"
+  class="icon icon-large" />
+
+<img
+  src="/static/img/dollar.svg"
+  alt="A dollar symbol"
+  class="icon icon-xlarge" />
+
+<img
+  src="/static/img/dollar.svg"
+  alt="A dollar symbol"
+  class="icon icon-jumbo" />

_includes/styleguide/icons-example3.html

@@ -0,0 +1,26 @@
+<div class="row">
+  <div class="column small-6 medium-4 large-3">
+    <img
+      src="/static/img/hands.svg"
+      alt="Hands"
+      class="icon" />
+  </div>
+  <div class="column small-6 medium-4 large-3">
+    <img
+      src="/static/img/heart.svg"
+      alt="Heart"
+      class="icon" />
+  </div>
+  <div class="column small-6 medium-4 large-3">
+    <img
+      src="/static/img/program.svg"
+      alt="Program"
+      class="icon" />
+  </div>
+  <div class="column small-6 medium-4 large-3">
+    <img
+      src="/static/img/people.svg"
+      alt="People"
+      class="icon" />
+  </div>
+</div>

_includes/styleguide/icons-example4.html

@@ -0,0 +1,8 @@
+<section class="clearfix">
+  <img
+    src="/static/img/navigate.svg"
+    alt="Compass"
+    class="icon icon-xlarge float-left" />
+  <p>DjangoCon US is a six-day international conference for the community by the community about the Django web framework, held each year in North America.</p>
+  <p>DjangoCon US has something for everyone, from the person who develops Django applications for a living to the person who just tinkers in their spare time. You'll discover details about a range of diverse applications that people from all over the world are building with Django, get a deeper understanding of concepts you’re already familiar with and discover new ways to use them, and have a lot of fun!</p>
+</section>

_includes/styleguide/icons-example5.html

@@ -0,0 +1,8 @@
+<section class="clearfix">
+  <img
+    src="/static/img/megaphone.svg"
+    alt="Megaphone"
+    class="icon icon-xlarge float-right" />
+  <p>DjangoCon US is a six-day international conference for the community by the community about the Django web framework, held each year in North America.</p>
+  <p>DjangoCon US has something for everyone, from the person who develops Django applications for a living to the person who just tinkers in their spare time. You'll discover details about a range of diverse applications that people from all over the world are building with Django, get a deeper understanding of concepts you’re already familiar with and discover new ways to use them, and have a lot of fun!</p>
+</section>

_includes/styleguide/photo-feature-example1.html

@@ -0,0 +1,10 @@
+<section class="row v-pad-bottom">
+  <figure class="column small-12 medium-6">
+    <img src="/static/img/home-testimonial.jpg" alt="" />
+  </figure>
+
+  <div class="column small-12 medium-6">
+    <h3>Photo Feature Title</h3>
+    <p>A few lines of text. If you just want to put a photo or some text side-by-side you can use this format. This uses the standard Foundation grid. On smaller displays, the photo will be on top. You can change this by changing the order of the two <code>.column</code> nodes.</p>
+  </div>
+</section>

_includes/styleguide/photo-feature-example2.html

@@ -0,0 +1,9 @@
+<section class="row medium-collapse v-pad-bottom">
+  <figure class="column small-12 medium-6">
+    <img src="/static/img/home-testimonial.jpg" alt="" />
+  </figure>
+
+  <div class="column small-12 medium-6">
+    <img src="/static/img/about.jpg" alt="" />
+  </div>
+</section>

_includes/styleguide/styleguide-building-blocks.html

@@ -0,0 +1,40 @@
+<h1>Building Blocks (Sections)</h1>
+
+<p>Most sections of the site consist of block-like structures. These structures follow a similar format:</p>
+
+{% highlight html %}<div class="section-pad">
+  <div class="row">
+    <div class="column">
+      <!-- content here -->
+    </div>
+  </div>
+</div>{% endhighlight %}
+
+<div class="ss-code-live">
+  <div class="section-pad">
+    <div class="row">
+      <div class="column">
+        &lt;!-- content here (but not really) --&gt;
+      </div>
+    </div>
+  </div>
+</div>
+
+<p>By default, this doesn't do much except setup a full width grid and a single column. To learn more about the grid system, please see Foundation's docs on the <a href="https://foundation.zurb.com/sites/docs/grid.html">Legacy Grid</a>. However, there are a few helpful tips to keep in mind:</p>
+
+<ul>
+  <li>The website uses a 12 column grid</li>
+  <li>The maximum width (as of 2019) is 1200px.</li>
+  <li>Always start the column class list with <code>.column</code>.</li>
+  <li>You'll generally want to focus on small, medium, and large sizes. You can determine a column's width by using <code>.[size]-[column-width]</code>. So for example, <code>.medium-6</code> would create a 50% wide column on medium displays.</li>
+  <li>If you do not define a larger size, the previous size will be used. Example: <code>.small-12 .medium-3</code> results in a column that is 1/4 wide (as 1/4 of 12 columns is 3)</li>
+</ul>
+
+<p>These building blocks can be themed using the classes outlined under <a href="#themed-page-sections">Themed page sections</a>. As these building blocks are meant to stack, you'll want to alternate between section themes.</p>
+
+<p>You can roll your own top and bottom padding by using the following classes:</p>
+
+<ul>
+  <li><code>.v-pad-top</code> - Handles top padding for small and large displays.</li>
+  <li><code>.v-pad-bottom</code> - Handles bottom padding for small and large displays.</li>
+</ul>

_includes/styleguide/styleguide-dates-section.html

@@ -0,0 +1,7 @@
+<h1>Dates Section</h1>
+
+{% highlight html %}{% include styleguide/dates-example.html %}{% endhighlight %}
+
+<div class="ss-code-live">
+  {% include styleguide/dates-example.html %}
+</div>

_includes/styleguide/styleguide-icons.html

@@ -0,0 +1,52 @@
+<h1>Icons</h1>
+
+<p>You can add icons in content by including them just like images. Because most icons are SVGs, they will likely expand to take up the full width available:</p>
+
+{% highlight html %}{% include styleguide/icons-example1.html %}{% endhighlight %}
+
+<div class="ss-code-live">
+  {% include styleguide/icons-example1.html %}
+</div>
+
+<hr />
+
+<h2>Sizing Icons</h2>
+
+<p>Big, full width icons may not be preferred. There are two ways to size icons:</p>
+
+<ul>
+  <li>Use the icon size classes: <code>icon-small</code>, <code>icon-medium</code>, <code>icon-large</code>, <code>icon-xlarge</code>, or <code>icon-jumbo</code>.</li>
+  <li>Put icons in the grid.</li>
+</ul>
+
+{% highlight html %}{% include styleguide/icons-example2.html %}{% endhighlight %}
+
+<div class="ss-code-live">
+  {% include styleguide/icons-example2.html %}
+</div>
+
+{% highlight html %}{% include styleguide/icons-example3.html %}{% endhighlight %}
+
+<div class="ss-code-live">
+  {% include styleguide/icons-example3.html %}
+</div>
+
+<hr />
+
+<h2>Icons in Content</h2>
+
+<p>You may wish to place an icon in or around content. Foundation provides some handy helpers for this: <code>.float-left</code> and <code>.float-right</code>. Because these use CSS floats, you'll need to wrap the float (or the container) in an element with the <code>.clearfix</code> class.</p>
+
+<p><strong>NOTE:</strong> Blog posts have the <code>.clearfix</code> class added by default.</p>
+
+{% highlight html %}{% include styleguide/icons-example4.html %}{% endhighlight %}
+
+<div class="ss-code-live">
+  {% include styleguide/icons-example4.html %}
+</div>
+
+{% highlight html %}{% include styleguide/icons-example5.html %}{% endhighlight %}
+
+<div class="ss-code-live">
+  {% include styleguide/icons-example5.html %}
+</div>

_includes/styleguide/styleguide-nav.html

@@ -14,18 +14,31 @@
   <li class="tabs-title">
     <a href="#logo-files">Logo files</a>
   </li>
-  {% comment %}
   <li class="tabs-title">
-    <a href="#icons">Icons</a>
+    <a href="#typography">Typography</a>
+  </li>
+  <li class="tabs-title">
+    <a href="#building-blocks">Building Blocks (Sections)</a>
   </li>
-  {% endcomment %}
   <li class="tabs-title">
     <a href="#themed-page-sections">Themed page sections</a>
   </li>
+  <li class="tabs-title">
+    <a href="#icons">Icons</a>
+  </li>
   <li class="tabs-title">
     <a href="#photo-hero-section">Photo hero section</a>
   </li>
+  <li class="tabs-title">
+    <a href="#photo-feature">Photo feature</a>
+  </li>
   <li class="tabs-title">
     <a href="#profile-card">Profile card</a>
   </li>
+  <li class="tabs-title">
+    <a href="#presenters">Presenters List</a>
+  </li>
+  <li class="tabs-title">
+    <a href="#dates-section">Dates Section</a>
+  </li>
 </ul>

_includes/styleguide/styleguide-photo-feature.html

@@ -0,0 +1,20 @@
+<h1>Photo Feature</h1>
+<p>This component is always two columns, relying on the default Foundation grid.</p>
+
+{% highlight html %}{% include styleguide/photo-feature-example1.html %}{% endhighlight %}
+
+<div class="ss-code-live">
+  {% include styleguide/photo-feature-example1.html %}
+</div>
+
+<hr />
+
+<h2>Collapsed, Two Images</h2>
+
+<p>The collapsed version simply removes gutters between the two columns, which is ideal if you want two images of similar size to touch.</p>
+
+{% highlight html %}{% include styleguide/photo-feature-example2.html %}{% endhighlight %}
+
+<div class="ss-code-live">
+  {% include styleguide/photo-feature-example2.html %}
+</div>

_includes/styleguide/styleguide-presenters.html

@@ -0,0 +1,27 @@
+<h1>Presenters List</h1>
+
+<p>The presenters list features a list of avatars and titles, meant for a list of speakers. Minimal information should be shown.</p>
+
+{% highlight html %}<section class="section-pad mini-profile-block">
+<div class="mini-profile-list">
+    <a href="#" class="mini-profile-byline">
+      <img class="avatar" src="https://placeimg.com/64/64/animals/1" alt="Presenter Name">Majorly Cute Animal
+    </a>
+
+    <!-- Repeat <a> as needed -->
+</div>
+</section>{% endhighlight %}
+
+<section class="section-pad mini-profile-block">
+  <div class="mini-profile-list">
+    {% for i in (1..16) %}
+    {% assign adj = "Majorly Cute,Incredibly Cuddly,Awesomely Funny,Super Friendly" | split:"," %}
+    {% assign y = i | modulo: 4 %}
+      <a href="#" class="mini-profile-byline">
+        <img class="avatar" src="https://placeimg.com/64/64/animals/{{ i }}" alt="Presenter Name">
+          {{ adj[y] }}
+         Animal
+      </a>
+    {% endfor %}
+  </div>
+</section>

_includes/styleguide/styleguide-typography.html

@@ -0,0 +1,9 @@
+<h1>Typography</h1>
+
+<p>Foundation provides <a href="https://foundation.zurb.com/sites/docs/typography-helpers.html">a series of typography helpers</a> that may be useful when laying out content. These include helpers for alignment, sizing, and number formatting.</p>
+
+{% highlight html %}{% include styleguide/typography-example.html %}{% endhighlight %}
+
+<div class="ss-code-live">
+  {% include styleguide/typography-example.html %}
+</div>

_includes/styleguide/typography-example.html

@@ -0,0 +1,24 @@
+<h1>Heading Level 1</h1>
+<h1>Heading Level 2</h1>
+<h1>Heading Level 3</h1>
+<h1>Heading Level 4</h1>
+<h1>Heading Level 5</h1>
+<h1>Heading Level 6</h1>
+
+<p>DjangoCon US has something for everyone, from the person who develops Django applications for a <strong>living to the person</strong> who just tinkers in their spare time. You'll discover details about a range of diverse applications that people from all over the world are <em>building with Django</em>, get a deeper understanding of concepts you’re already familiar with and discover new ways to use them, and have a lot of fun!</p>
+
+<p class="lead">DjangoCon US has something for everyone, from the person who develops Django applications for a <strong>living to the person</strong> who just tinkers in their spare time. You'll discover details about a range of diverse applications that people from all over the world are <em>building with Django</em>, get a deeper understanding of concepts you’re already familiar with and discover new ways to use them, and have a lot of fun!</p>
+
+<ul>
+  <li>Unordered List item 1</li>
+  <li>Unordered List item 2</li>
+  <li>Unordered List item 3</li>
+  <li>Unordered List item 4</li>
+</ul>
+
+<ol>
+  <li>Ordered List item 1</li>
+  <li>Ordered List item 2</li>
+  <li>Ordered List item 3</li>
+  <li>Ordered List item 4</li>
+</ol>