adding html around each section

brooklynrail · Apr 26, 2019 · a671445 · a671445
1 parent 9ac2200
commit a671445
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 39 deletions.
diff --git a/_includes/analytics.html b/_includes/analytics.html
@@ -1,4 +1,3 @@
-
 <!-- Global site tag (gtag.js) - Google Analytics -->
 <script async src="https://www.googletagmanager.com/gtag/js?id=UA-24931975-7"></script>
 <script>

diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -1,27 +1,41 @@
-<nav role="navigation" class="margin-bottom-1 padding-y-105">
-  <ul class="add-list-reset">
-    {% assign sorted_sections = site.sections | sort:"order" %}
-    {% for section in sorted_sections %}
-    <li class="padding-y-05 font-sans-md tablet:font-sans-lg line-height-sans-1 text-bold line-height-sans-4">
-      <a class="padding-y-05 text-no-underline" href="#{{ section.url | slugify }}" title="view {{ section.nav-title }}">
-        <span class="hover:border-bottom-2px">{{ section.nav-title }}</span> <i class="fas fa-angle-right"></i>
-      </a>
-    </li>
-    {% endfor %}
-  </ul>
-</nav>
+<section>
+  <div class="grid-container">
+    <div class="grid-row grid-gap-4">
+      <div class="grid-col-12">
 
-<ul class="add-list-reset">
-  <li class="padding-y-05 font-sans-sm tablet:font-sans-md text-normal line-height-sans-1 line-height-sans-4">
-    <a class="padding-y-05 text-no-underline" href="https://www.instagram.com/brooklynrail/"><i class="fab fa-instagram"></i> <span class="hover:border-bottom-2px">Instagram</span></a>
-  </li>
-  <li class="padding-y-05 font-sans-sm tablet:font-sans-md text-normal line-height-sans-1 line-height-sans-4">
-    <a class="padding-y-05 text-no-underline" href="https://twitter.com/thebrooklynrail/"><i class="fab fa-twitter"></i> <span class="hover:border-bottom-2px">Twitter</span></a>
-  </li>
-  <li class="padding-y-05 font-sans-sm tablet:font-sans-md text-normal line-height-sans-1 line-height-sans-4">
-    <a class="padding-y-05 text-no-underline" href="https://www.facebook.com/thebrooklynrail/"><i class="fab fa-facebook"></i> <span class="hover:border-bottom-2px">Facebook</span></a>
-  </li>
-  <li class="padding-y-05 font-sans-sm tablet:font-sans-md text-normal line-height-sans-1 line-height-sans-4">
-    <a class="padding-y-05 text-no-underline" href="https://brooklynrail.org/pdf/brooklyn-rail-venice-press-release.pdf"><i class="far fa-file-pdf"></i> <span class="hover:border-bottom-2px">Press release</span></a>
-  </li>
-</ul>
+        <nav role="navigation" class="margin-bottom-1 padding-y-105">
+
+          <ul class="add-list-reset">
+            {% assign sorted_sections = site.sections | sort:"order" %}
+            {% for section in sorted_sections %}
+            <li class="padding-y-05 font-sans-md tablet:font-sans-lg line-height-sans-1 text-bold line-height-sans-4">
+              <a class="padding-y-05 text-no-underline" href="#{{ section.url | slugify }}" title="view {{ section.nav-title }}">
+                <span class="hover:border-bottom-2px">{{ section.nav-title }}</span> <i class="fas fa-angle-right"></i>
+              </a>
+            </li>
+            {% endfor %}
+          </ul>
+
+          <ul class="margin-y-2 add-list-reset">
+            <li class="padding-y-05 font-sans-sm tablet:font-sans-md text-normal line-height-sans-1 line-height-sans-4">
+              <a class="padding-y-05 text-no-underline" href="https://www.instagram.com/brooklynrail/"><i class="fab fa-instagram"></i> <span class="hover:border-bottom-2px">Instagram</span></a>
+            </li>
+            <li class="padding-y-05 font-sans-sm tablet:font-sans-md text-normal line-height-sans-1 line-height-sans-4">
+              <a class="padding-y-05 text-no-underline" href="https://twitter.com/thebrooklynrail/"><i class="fab fa-twitter"></i> <span class="hover:border-bottom-2px">Twitter</span></a>
+            </li>
+            <li class="padding-y-05 font-sans-sm tablet:font-sans-md text-normal line-height-sans-1 line-height-sans-4">
+              <a class="padding-y-05 text-no-underline" href="https://www.facebook.com/thebrooklynrail/"><i class="fab fa-facebook"></i> <span class="hover:border-bottom-2px">Facebook</span></a>
+            </li>
+            <li class="padding-y-05 font-sans-sm tablet:font-sans-md text-normal line-height-sans-1 line-height-sans-4">
+              <a class="padding-y-05 text-no-underline" href="https://brooklynrail.org/pdf/brooklyn-rail-venice-press-release.pdf"><i class="far fa-file-pdf"></i> <span class="hover:border-bottom-2px">Press release</span></a>
+            </li>
+          </ul>
+
+        </nav>
+
+
+
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/_includes/section.html b/_includes/section.html
@@ -1,8 +1,16 @@
 {% assign sorted_sections = site.sections | sort:"order" %}
 {% for section in sorted_sections %}
-  <h2 id="{{ section.id | slugify }}">{{ section.title | escape }}</h2>
-  <div data-edit-this="{{ section.path }}">
-    {{ section.content }}
+<section class="margin-y-5">
+  <div class="grid-container">
+    <div class="grid-row grid-gap-4" data-edit-this="{{ section.path }}">
+      <div class="grid-col-12">
+        <h2 id="{{ section.id | slugify }}">{{ section.title | escape }}</h2>
+        <div>
+          {{ section.content }}
+        </div>
+      </div>
+    </div>
   </div>
+</section>
 
 {% endfor %}
diff --git a/_includes/video-strip.html b/_includes/video-strip.html
@@ -0,0 +1,20 @@
+<section class="margin-y-3">
+  <div class="grid-container">
+    <div class="grid-row grid-gap-1">
+
+      <div class="grid-col-6 tablet:grid-col-3">
+
+        {% include video.html youtube_id="y-NJAL1fS3U" %}
+
+      </div>
+
+      <div class="grid-col-6 tablet:grid-col-3">
+
+        {% include video.html youtube_id="y-NJAL1fS3U" %}
+
+      </div>
+
+
+    </div>
+  </div>
+</section>
diff --git a/_includes/video.html b/_includes/video.html
@@ -0,0 +1,3 @@
+<div class="video margin-bottom-1">
+  <iframe width="300" height="189" src="https://www.youtube.com/embed/{{ include.youtube_id }}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+</div>
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -28,13 +28,13 @@ <h1 class="margin-0 text-bold font-sans-xl desktop-lg:font-sans-3xl">{{ page.tit
         <div data-edit-this="{{ page.path }}">
           {{ content }}
         </div>
-
-        {% include navigation.html %}
-
-        {% include section.html %}
-
-
       </div>
     </div>
   </div>
+</section>
+
+    {% include navigation.html %}
+
+    {% include section.html %}
+
 </section>
diff --git a/_layouts/section.html b/_layouts/section.html
@@ -2,4 +2,4 @@
 layout: default
 ---
 
-{{ content }}
+  {{ content }}
diff --git a/assets/css/styles.css b/assets/css/styles.css
diff --git a/assets/css/styles.css.map b/assets/css/styles.css.map
diff --git a/assets/sass/_custom.scss b/assets/sass/_custom.scss
@@ -83,6 +83,25 @@
     @include u-font('sans', 'xs');
   }
 }
+
+.video{
+  position: relative;
+  padding-bottom: 56.25%;
+  padding-top: 30px;
+  height: 0;
+  overflow: hidden;
+}
+
+.video iframe,
+.video object,
+.video embed {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
 code{
   @include u-padding-x('05');
   @include u-padding-y('2px');

diff --git a/index.md b/index.md
@@ -12,5 +12,6 @@ twitter:
   card: summary_large_image
 ---
 
+
 <div class="lead margin-bottom-105 tablet:margin-bottom-3 font-sans-lg tablet:font-sans-xl measure-2 text-light">
 <p><a href="https://brooklynrail.org">The Brooklyn Rail</a>, an independent arts publication based in New York city, was invited to exhibit at the <a href="https://www.labiennale.org/en/art/2019/information">2019 Venice Biennale</a>. Our engagement consists of an <a href="#exhibition">exhibition</a> of the works by <a href="#artists">73 artists</a> at the Chiesa di Santa Maria delle Penitenti curated by <a href="#curators">Phong Bui and Francesca Pietropaolo</a>, our “<a href="#social-environment">Social Environment</a>” recreated in the Sala delle Colonne next to the Chiesa, and a series of <a href="#events">events</a> around both the exhibition and climate change.</p></div>