Merge pull request #304 from sul-cidr/feature/styles-for-tags-on-level0

Feature/styles for tags on level0

src/_catalog-of-shodan/kiri.md

@@ -25,10 +25,36 @@ second-level-menu-active: catalog-shodan
         <div class="introductory-table__definition">Non-congruent</div>
       </div>
     </div> 
-    <p>Popular term among the performers for the final shōdan of a play. It is the second dance-to-text shōdan of a play, the kuse being potentially the first one. In scholarly circles this module is usually differentiated on the basis of its rhythmic organization: it is called noriji when set in ōnori, chūnoriji when set in chūnori, but there is no specific name when set in hiranori.</p>
+    <p>Popular term among <strong>the performers</strong> for the <em>final shōdan</em> of a play. It is the second dance-to-text shōdan of a play, the kuse being potentially the first one. In scholarly circles this module is usually differentiated on the basis of its rhythmic organization: it is called noriji when set in ōnori, chūnoriji when set in chūnori, but there is no specific name when set in hiranori.</p>
     <p>We have used the generic term kiri for the last module of both plays.</p> 
   </div>
 
+  {% include image.html src="/assets/images/nohkan-small.jpg" %}
+
+  {% include image-no-background.html src="/assets/images/nohkan-small.jpg" %}
+
+  {% include video.html src="http://d7rcwrflqckpu.cloudfront.net/bh626gj8179_sl.mp4" %}
+
+  {% include video-no-background.html src="http://d7rcwrflqckpu.cloudfront.net/bh626gj8179_sl.mp4" %}
+
+  <table class="content-table">
+    <tr class="content-table__row content-table__row--header">
+      <td class="content-table__column">Type of actor</td>
+      <td class="content-table__column">Role</td>
+      <td class="content-table__column">Schools</td>
+    </tr>
+    <tr class="content-table__row">
+      <td class="content-table__column">Shite</td>
+      <td class="content-table__column">The primary actor and vocal soloist is usually masked. In some plays the shite has a companion actor called the shite tsure who can also be masked. Although the tsure can also dance, if only one is to dance it will always be the shite. The story evolves around him. At first, we usually know nothing if not very little about his true identity. Often he is a character from another world, embodying for example a divine being or deceased person. In the latter case, (and considering that most plays are composed of two acts) the first act shite is often a spirit who has taken the form of a person, and the ghost or apparition of the same spirit in the second act.  KONGÔ Tatsunori and UDAKA Tatsushige, the shite featured in the examples are from the Kongô school.</td>
+      <td class="content-table__column">Kanze, Hôshô, Komparu, Kongô, Kita</td>
+    </tr>
+    <tr class="content-table__row">
+      <td class="content-table__column">Waki</td>
+      <td class="content-table__column">The secondary actor is always a male character living in the narrative present hence he is never masked. We usually know much about him since he often introduces himself at the very beginning of a play. He engages the shite and as such provides him with a reason to appear and perform. Plays without a waki are exceptionally few. The waki is always a realistic character. There are three majors types of waki character: a shrine official or retainer; a warrior; or most commonly a traveling priest. In some plays the waki has one or few unmasked companion actors called waki tsure. Featured ARIMATSU Ryôichi is from the Takayasu school.</td>
+      <td class="content-table__column">Hôshô, Fukuô, Takayasu</td>
+    </tr>
+  </table> 
+
   <div class="tabs-container">
     <div class="tabs-container__links">
       <div class="wrapper">

src/_includes/image-no-background.html

@@ -0,0 +1,3 @@
+<div class="image-container--no-background">
+  <img src="{{ include.src }}" alt="">
+</div>

src/_includes/menu-instrument-large.html

@@ -1,7 +1,7 @@
 <div class="card-menu card-menu--large">
   <div class="row row--center-x">
     <div class="col col-2">
-      <a href="#" class="card-menu__element" style="background-image: url('/assets/images/voices-small.jpg');">
+      <a href="/music/voices/" class="card-menu__element" style="background-image: url('/assets/images/voices-small.jpg');">
         <span>Voices</span>
       </a>
     </div>

src/_includes/menu-instrument-small.html

@@ -1,7 +1,7 @@
 <nav class="third-level-menu__container">
   <div class="wrapper">
     <ul class="card-menu card-menu--small">
-      <li class="{% if page.third-level-menu-active == 'voices' %}active{% endif %}"><a href="" class="card-menu__element" style="background-image: url('/assets/images/voices-small.jpg');"><span>Voices</span></a></li>
+      <li class="{% if page.third-level-menu-active == 'voices' %}active{% endif %}"><a href="/music/voices/" class="card-menu__element" style="background-image: url('/assets/images/voices-small.jpg');"><span>Voices</span></a></li>
       <li class="{% if page.third-level-menu-active == 'taiko' %}active{% endif %}"><a href="/music/taiko/" class="card-menu__element" style="background-image: url('/assets/images/taiko-small.jpg');"><span>Taiko</span></a></li>
       <li class="{% if page.third-level-menu-active == 'otsuzumi' %}active{% endif %}"><a href="/music/otsuzumi-kotsuzumi/" class="card-menu__element" style="background-image: url('/assets/images/otsuzumi-kotsuzumi-small.jpg');"><span>Otsuzumi & Kotsuzumi</span></a></li>
       <li class="{% if page.third-level-menu-active == 'nohkan' %}active{% endif %}"><a href="/music/nohkan/" class="card-menu__element" style="background-image: url('/assets/images/nohkan-small.jpg');"><span>Nohkan</span></a></li>

src/_includes/video-no-background.html

@@ -0,0 +1,5 @@
+<div class="video-website--no-background">
+  <video id="player" controls="" controlslist="nodownload">
+    <source src="{{ include.src }}" type="video/mp4">
+  </video>
+</div>

src/_includes/video.html

@@ -0,0 +1,7 @@
+<div class="video-website">
+  <div class="wrapper">
+    <video id="player" controls="" controlslist="nodownload">
+      <source src="{{ include.src }}" type="video/mp4">
+    </video>
+  </div>
+</div>

src/_music/nohkan.md

@@ -14,20 +14,4 @@ third-level-menu-active: taiko
     <h2>Nohkan</h2>
     <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
   </div>
-
-  <div id="tabs"></div>
-  <section id='intro' title='Introduction' class='tabbed-narrative'>
-    <p>
-    Intro. Lorem ipsum dolor sit amet, <time datetime='00:00:10.000' title='00:10:98.987'>consectetur</time> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-    </p>
-  </section>
-
-  <section id='part1' title='Nohkan' class='tabbed-narrative'>
-    <p>
-    Part I. Lorem ipsum dolor sit amet, <time datetime='00:00:20' title='00:11:98.987'>consectetur</time> adipisicing elit. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-  </section>
-
-</main>
-
-
+</main>

src/_music/taiko.md

@@ -19,25 +19,9 @@ fourth-level-menu-active: sound
   </div>
 
   {% include image.html src="/assets/images/maibataraki.jpg" %}
-
+  
   <div class="text-container">
     <h2>Taiko Patterns and Rhythmic Organization</h2>
     <p>At a basic level the sounds of the taiko are sequenced to create patterns. Most patterns are eight beats long and typically start on the 2nd or 6th beat of the 8-beat metric unit. However there are patterns as short as two and as long as 24 beats in duration. The patterns are sequenced into larger phrases and sections. They are selected and ordered according to various sets of rules based on their formal function. The sequencing can vary depending on a specific section. The following figure shows one example of standard categories of patterns used in dance and ô-nori chanting; and how they can be sequenced.</p>
   </div>
-
-  <div id="tabs"></div>
-  <section id='intro' title='Introduction' class='tabbed-narrative'>
-    <p>
-    Intro. Lorem ipsum dolor sit amet, <time datetime='00:00:10.000' title='00:10:98.987'>consectetur</time> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
-    </p>
-  </section>
-
-  <section id='part1' title='Hashitomi Kiri' class='tabbed-narrative'>
-    <p>
-    Part I. Lorem ipsum dolor sit amet, <time datetime='00:00:20' title='00:11:98.987'>consectetur</time> adipisicing elit. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-    </p>
-  </section>
-
-</main>
-
-
+</main>

src/_sass/commons/_mixins.scss

@@ -7,6 +7,7 @@
 
 @mixin text($size, $font:'display') {
   @if $font == 'display' {
+    font-family: $font-display;
     font-size: map-get($font-sizes-display, $size);
     line-height: map-get($line-heights-display, $size);
   } 

src/_sass/commons/_reset.scss

@@ -27,7 +27,8 @@ ol, ul {
 	list-style: none;
 }
 
-a {
+a,
+time {
 	color: $red;
 	font-family: inherit;
 }

src/_sass/commons/_variables-typography.scss

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700|Source+Serif+Pro:400,600');
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700|Source+Serif+Pro:400,600,700');
 
 $grid-height: 4;
 

src/_sass/components/website/content-table.scss

@@ -0,0 +1,32 @@
+.content-table {
+  border-top: $border;
+  @extend .wrapper;
+}
+
+.content-table__row {
+  border-bottom: $border;
+
+  &:nth-child(2n+1) {
+    background-color: rgba($beige-light,0.5);
+  }
+}
+
+.content-table__column {
+  padding: 0.5rem 1rem;
+  min-width: 9rem;
+  vertical-align: top;
+
+  @include text(md, 'text');
+}
+
+.content-table__row--header {
+  .content-table__column {
+    background-color: $beige-light;
+    color: $green;
+    font-weight: $fw-semibold;
+    vertical-align: middle;
+
+    @include text(xxs);
+    @include uppercase();
+  }
+}

src/_sass/layouts/_layout-commons.scss

@@ -31,14 +31,17 @@
   padding: 2rem 0;
 }
 
-.image-container {
+.image-container,
+.video-website {
   background-color: $beige-light;
   border-bottom: $border;
   border-top: $border;
   margin: 4rem 0;
   padding: 4rem 0;
+}
 
-  img {
-    max-width: 100%;
-  }
+.image-container--no-background,
+.video-website--no-background {
+  margin: 2rem 0;
+  padding: 2rem 0;
 }

src/_sass/layouts/_page.scss

@@ -22,10 +22,30 @@
       width: 4rem;
     }
   }
+
+  img,
+  video {
+    display: block;
+    margin: 0 auto;
+    max-width: 100%;
+  }
+
   p {
     color: $brown;
 
     @include text(lg,'text');
+
+    * {
+      font-family: $font-text;
+    }
+
+    strong {
+      font-weight: $fw-bold;
+    }
+
+    em {
+      font-style: italic;
+    }
   }
 }
 
@@ -37,3 +57,4 @@
     max-width: $wrapper-small;
   }
 }
+

src/assets/main.scss

@@ -20,6 +20,7 @@
 @import "components/website/third-level-menu";
 @import "components/website/card-menu";
 @import "components/website/introductory-table";
+@import "components/website/content-table";
 @import "components/website/section-introduction";
 @import "components/videoplayer/narrative";
 @import "components/videoplayer/intermedia-table";

src/libretti.md

@@ -8,7 +8,7 @@ permalink: /libretti/
 {% include second-menu-elements.html %}
 
 <main class="page-content">
-  <div class="wrapper">
+  <div class="text-container">
     <h2>Libretti</h2>
     <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
   </div>

src/movement.md

@@ -8,7 +8,7 @@ permalink: /movement/
 {% include second-menu-elements.html %}
 
 <main class="page-content">
-  <div class="wrapper">
+  <div class="text-container">
     <h2>Dance Patterns and Modes: An Introduction</h2>
     <p>The movements of all characters in Noh are choreographed using an extensive vocabulary of basic patterns called kata. Plays use the same kata as modules to build complex stage motion and dances. The sequencing of kata also forms a unified system. Many formal similarities are found between analogous sections of different plays. A large but not exhaustive collection of these kata can be found on this website. Featured KONGÔ Tatsunori and consequently all examples are from the Kongô school.</p>
     <p>Kata patterns can be classified into two categories: structural and decorative. Our classification and English translation of kata names is entirely based on the monumental work of Monica Bethe and Karen Brazell. [Dance in the No Theater, Volumes 1, 2, and 3 published by Cornell University under the Cornell East Asia Series number 29.</p>