jekyll-theme-composer 0.1.0

data/_layouts/home.html

@@ -0,0 +1,34 @@
+---
+layout: default
+---
+
+<div class="home">
+  {%- if page.title -%}
+    <h1 class="page-heading">{{ page.title }}</h1>
+  {%- endif -%}
+
+  {{ content }}
+
+  {%- if site.posts.size > 0 -%}
+    <h2 class="post-list-heading">{{ page.list_title | default: "News" }}</h2>
+    <ul class="post-list">
+      {%- for post in site.posts -%}
+      <li>
+        {%- assign date_format = site.composer.date_format | default: "%b %-d, %Y" -%}
+        <span class="post-meta">{{ post.date | date: date_format }}</span>
+        <h3>
+          <a class="post-link" href="{{ post.url | relative_url }}">
+            {{ post.title | escape }}
+          </a>
+        </h3>
+        {%- if site.show_excerpts -%}
+          {{ post.excerpt }}
+        {%- endif -%}
+      </li>
+      {%- endfor -%}
+    </ul>
+
+    <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | relative_url }}">via RSS</a></p>
+  {%- endif -%}
+
+</div>

data/_layouts/page.html

@@ -0,0 +1,14 @@
+---
+layout: default
+---
+<article class="post">
+
+  <header class="post-header">
+    <h1 class="post-title">{{ page.title | escape }}</h1>
+  </header>
+
+  <div class="post-content">
+    {{ content }}
+  </div>
+
+</article>

data/_layouts/post.html

@@ -0,0 +1,27 @@
+---
+layout: default
+---
+<article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
+
+  <header class="post-header">
+    <h1 class="post-title p-name" itemprop="name headline">{{ page.title | escape }}</h1>
+    <p class="post-meta">
+      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+        {%- assign date_format = site.composer.date_format | default: "%b %-d, %Y" -%}
+        {{ page.date | date: date_format }}
+      </time>
+      {%- if page.author -%}
+        • <span itemprop="author" itemscope itemtype="http://schema.org/Person"><span class="p-author h-card" itemprop="name">{{ page.author }}</span></span>
+      {%- endif -%}</p>
+  </header>
+
+  <div class="post-content e-content" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+  {%- if site.disqus.shortname -%}
+    {%- include disqus_comments.html -%}
+  {%- endif -%}
+
+  <a class="u-url" href="{{ page.url | relative_url }}" hidden></a>
+</article>

data/_layouts/work.html

@@ -0,0 +1,66 @@
+---
+layout: default
+---
+
+<article class="work">
+
+  <h1>{{ page.title }}</h1>
+
+  {%- include media.html -%}
+
+  <h2 class="instrumentation-title">Instrumentation</h2>
+  <div class="instrumentation">{{ page.instrumentation }}</div>
+
+  {%- if page.duration -%}
+    <h2 class="duration-title">Duration</h2>
+    <div class="duration">
+      {{ page.duration }}
+    </div>
+  {%- endif -%}
+
+  {%- if page.commissioned_by or page.written_for or page.premiered_at or page.premiered_on or page.premiered_by -%}
+    <h2 class="performance-title">Performance Information</h2>
+    {%- if page.commissioned_by -%}
+      <div class="commission">
+        Commissioned by <span class="commissioned_by">{{ page.commissioned_by }}</span>
+      </div>
+    {%- endif -%}
+    {%- if page.written_for -%}
+      <div class="written-for">
+        Written for <span class="written-for">{{ page.written_for }}</span>
+      </div>
+    {%- endif -%}
+    {%- if page.premiered_at or page.premiered_on or page.premiered_by -%}
+      <div class="premier">
+        Premiered
+        {%comment%}
+          There's probably a better way of forcing a space between words than {{ " " }},
+          but hey, it works and it's concise.
+        {%endcomment%}
+        {%- if page.premiered_on -%}
+          {%- assign date_format = site.composer.premier_date_format | default: "%B %-d, %Y" -%}
+          {{ " " }}on <span class="premiered-on">{{ page.premiered_on | date: date_format }}</span>
+        {%- endif -%}
+        {%- if page.premiered_by -%}
+          {{ " " }}by <span class="premiered-by">{{ page.premiered_by }}</span>
+        {%- endif -%}
+        {%- if page.premiered_at -%}
+          {{ " " }}in <span class="premiered-at">{{ page.premiered_at }}</span>
+        {%- endif -%}
+      </div>
+    {%- endif -%}
+  {%- endif -%}
+
+  {%- if page.score_url -%}
+    <h2 class="score-title">Score</h2>
+    <div class="score">
+      View the <a href="{{ page.score_url | relative_url }}">score</a>
+    </div>
+  {%- endif -%}
+  
+  <h2 class="program-note-title">Program Notes</h2>
+  <div class="program-note">
+    {{ content }}
+  </div>
+
+</article>

data/_layouts/works.html

@@ -0,0 +1,44 @@
+---
+layout: default
+---
+
+<div class="works">
+  {%- if page.title -%}
+    <h1 class="page-heading">{{ page.title }}</h1>
+  {%- endif -%}
+
+  {{ content }}
+
+  {%- if site.works.size > 0 -%}
+    <ul class="work-list">
+      {%- assign works_by_date_desc = site.works | reverse -%}
+      {%- for work in works_by_date_desc -%}
+        <li>
+          {%- assign date_format = site.composer.work_date_format | default: "%Y" -%}
+          <div class="work-heading">
+            <a class="work-link" href="{{ work.url | relative_url }}">
+              <span class="work-title">{{ work.title }}</span>
+              <span class="work-date">({{ work.date | date: date_format }})</span>
+            </a>
+          </div>
+
+          {%- assign instrumentation = work.instrumentation_summary | default: work.instrumentation -%}
+          {%- assign duration = work.duration -%}
+          {%- if instrumentation or duration -%}
+            <div class="work-info">
+              {%- if instrumentation -%}
+                <span class="instrumentation">{{ instrumentation }}</span>
+                {%- if duration -%},{{ " " }}
+                {%- endif -%}
+              {%- endif -%}
+              {%- if duration -%}
+                {{ duration }}
+              {%- endif -%}
+            </div>
+          {%- endif -%}
+        </li>
+      {%- endfor -%}
+    </ul>
+  {%- endif -%}
+
+</div>

data/_sass/composer/_base.scss

@@ -0,0 +1,276 @@
+@use "sass:math";
+
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+  margin: 0;
+  padding: 0;
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+  font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+  color: $text-color;
+  background-color: $background-color;
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-feature-settings: "kern" 1;
+     -moz-font-feature-settings: "kern" 1;
+       -o-font-feature-settings: "kern" 1;
+          font-feature-settings: "kern" 1;
+  font-kerning: normal;
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+  margin-bottom: math.div($spacing-unit, 2);
+}
+
+
+
+/**
+ * `main` element
+ */
+main {
+  display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
+}
+
+
+
+/**
+ * Images
+ */
+img {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+  display: block;
+}
+
+figcaption {
+  font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+  margin-left: $spacing-unit;
+}
+
+li {
+  > ul,
+  > ol {
+    margin-bottom: 0;
+  }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: $base-font-weight;
+}
+
+h2 {
+  margin-top: $spacing-unit;
+}
+
+h3 {
+  margin-top: math.div($spacing-unit, 2);
+}
+
+h4 {
+  margin-top: math.div($spacing-unit, 3);
+}
+
+h5 {
+  margin-top: math.div($spacing-unit, 4);
+}
+
+h6 {
+  margin-top: math.div($spacing-unit, 5);
+}
+
+
+
+/**
+ * Links
+ */
+a {
+  color: $brand-color;
+  text-decoration: none;
+
+  &:visited {
+    color: darken($brand-color, 15%);
+  }
+
+  &:hover {
+    color: $text-color;
+    text-decoration: underline;
+  }
+
+  .social-media-list &:hover {
+    text-decoration: none;
+
+    .username {
+      text-decoration: underline;
+    }
+  }
+}
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+  color: $grey-color;
+  border-left: 4px solid $grey-color-light;
+  padding-left: math.div($spacing-unit, 2);
+  @include relative-font-size(1.125);
+  letter-spacing: -1px;
+  font-style: italic;
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+  @include relative-font-size(0.9375);
+  border: 1px solid $grey-color-light;
+  border-radius: 3px;
+  background-color: #eef;
+}
+
+code {
+  padding: 1px 5px;
+}
+
+pre {
+  padding: 8px 12px;
+  overflow-x: auto;
+
+  > code {
+    border: 0;
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+  max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+  max-width:         calc(#{$content-width} - (#{$spacing-unit} * 2));
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: $spacing-unit;
+  padding-left: $spacing-unit;
+  @extend %clearfix;
+
+  @include media-query($on-laptop) {
+    max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
+    max-width:         calc(#{$content-width} - (#{$spacing-unit}));
+    padding-right: math.div($spacing-unit, 2);
+    padding-left: math.div($spacing-unit, 2);
+  }
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+
+
+/**
+ * Icons
+ */
+
+.svg-icon {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    fill: #{$grey-color};
+    padding-right: 5px;
+    vertical-align: text-top;
+}
+
+.social-media-list {
+  li + li {
+    padding-top: 5px;
+  }
+}
+
+
+
+/**
+ * Tables
+ */
+table {
+  margin-bottom: $spacing-unit;
+  width: 100%;
+  text-align: $table-text-align;
+  color: lighten($text-color, 18%);
+  border-collapse: collapse;
+  border: 1px solid $grey-color-light;
+  tr {
+    &:nth-child(even) {
+      background-color: lighten($grey-color-light, 6%);
+    }
+  }
+  th, td {
+    padding: math.div($spacing-unit, 3) math.div($spacing-unit, 2);
+  }
+  th {
+    background-color: lighten($grey-color-light, 3%);
+    border: 1px solid darken($grey-color-light, 4%);
+    border-bottom-color: darken($grey-color-light, 12%);
+  }
+  td {
+    border: 1px solid $grey-color-light;
+  }
+}