artwork styling enhancement

_artworks/t56/2016/01/t56_20160101.md

@@ -1,12 +1,12 @@
 ---
 layout: artwork
-id: asc.1
+id: t56.20160101
 title: Ascii Minimalism I
-year_made: '2015'
-dimensions: 80 characters
+year_made: '2016'
+dimensions: 80 x 41 characters large, 32 x 16 small
 media:
-- ascii characters
-excerpt: A self contained minimalist ascii artwork
+- ascii
+excerpt: A self contained minimalist ascii artwork. Fonts and css styles are allowed and included on page.
 ---
 
 <style>
@@ -15,10 +15,26 @@ excerpt: A self contained minimalist ascii artwork
         color: #FFE2E2;
         font-family: "Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace;
         line-height: .95rem;
+        margin-bottom: 2rem;
+    }
+
+    @media screen and (max-width: 600px) {
+      .ascii-large {
+        display: none;
+      }
+      pre {
+        width: 265px;
+      }
+    }
+    @media screen and (min-width: 600px){
+        .ascii-small {
+          display: none;
+      }
     }
 </style>
 
-<pre>
+<pre class="ascii-large">
+
   -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
   =============================================================================
   -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
@@ -61,3 +77,22 @@ excerpt: A self contained minimalist ascii artwork
   -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
 
 </pre>
+
+<pre class="ascii-small">
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+===============================
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+===============================
+-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
+</pre>

_data/art_index_data.yml

@@ -1,6 +1,6 @@
 
 t47:
-  title: "Artworks Index: T47 - Human Sequel"
+  title: "T47 - Human Sequel"
   description: "When trying to determine just what it is that makes humanity unique, the topic of language never fails to come up. It is the bond that holds societies together, the skill that allows us to share ideas; it is even the code on which our technologies run. When looking to understand the past, language is the remainder that brings the most reward, for nothing can bring the past back to life as vividly as language."
   tags:
   - t47
@@ -10,7 +10,7 @@ t47:
   - sequel
 
 t29:
-  title: "Artworks Index: T29 - Organic Prosper"
+  title: "T29 - Organic Prosper"
   description: "A series of works using plants cloned and grown from seed in ad-hoc hydroponic systems. These plants are sometimes interspersed among plastic plants or placed in cheap plastic containers, so their organic nature is also in competition with an artificial world."
   thumb: /images/t29/t29.1_1_s.jpg
   tags:
@@ -20,7 +20,7 @@ t29:
   - prosper
 
 t56:
-  title: "Artworks Index: T56 - Time Effect"
+  title: "T56 - Time Effect"
   excerpt: "This project involves making one modest piece a day."
   description: "<p>This project involves making one modest piece a day.</p><p>This series began in 2005, with this run-on statement of intention:</p><blockquote>Because of a romantic attachment to such ideas as a strong work ethic, the myth of the artist, daily practice, chopping wood, carrying water, etc., and following a desire to continuously make work, to avoid getting stuck, and maintain a belief in a quick aesthetic, as well as an observation that making bad work is better than making no work, and that most artistic attempts end in failure so a quantity is necessary for success, the following will be done:</blockquote><blockquote>I will produce one piece a day, starting today and continuing for at least one year, which will be collected and documented as a piece unto itself, which will be referred to as T56 and each day's piece will be referred to as T56 followed by the date, which will follow any number of aesthetics or ideas, which may contain seeds for larger, more ambitious pieces, but where each day’s piece will be complete unto itself, i.e. will be a completed work, something I would stand by.</blockquote>"
   thumb: /images/t56_05/t56_050613_l.jpg

_layouts/artwork.html

@@ -6,22 +6,33 @@
   <h1 class="content__title">{{ page.title }}</h1>
 </header>
 
-<article>
-  {% if page.artist != 'self' %}
-   <p>artist: {{ page.artist }}</p>
-  {% endif %}
+<article class="artwork">
+
+  <div class="artwork__description">
+    {{ content }}
+  </div>
 
-  <p>year: {{ page.year_made }}</p>
-  <p>dimensions: {{ page.dimensions }}</p>
-  <p>media: {{ page.media }}</p>
 
   {% for image in page.images %}
     <div class="wrapper__center-image">
       <img src="{{ image }}" alt="{{ page.title }}">
     </div>
   {% endfor %}
 
-  <p>
-    {{ content }}
-  </p>
+  <div class="artwork__meta">
+    {% if page.artist != 'self' %}
+      <div class="artwork__meta-artist">artist: {{ page.artist }}</div>
+    {% endif %}
+
+    <div class="artwork__meta-year">year: {{ page.year_made }}</div>
+    <div class="artwork__meta-dimensions">dimensions: {{ page.dimensions }}</div>
+
+
+    <div class="artwork__meta-media">media:
+      {% for media in page.media %}
+      {{ media }}{% unless forloop.last %},{% endunless %}
+      {% endfor %}
+    </div>
+  </div>
+
 </article>

_pages/artworks.html

@@ -17,40 +17,3 @@ <h2>Art Indices:</h2>
   {% endfor %}
 
 </section>
-
-<header>
-  <h2>Artworks:</h2>
-</header>
-<section class="image-index">
-
-    {% for artwork in site.artworks %}
-      {% if artwork.artist == 'self' %}
-
-        <article class="image-index__article">
-
-          <div class="image-index__image">
-            <a href="{{ artwork.url }}">
-             <img src="{{ artwork.thumb }}" alt="{{ artwork.title }}">
-            </a>
-          </div>
-
-          <div class="image-index__description">
-            <h2 class="image-index__description-title">
-              <a href="{{ artwork.url }}">{{artwork.title}}</a>
-            </h2>
-            <div class="image-index__description-item">
-              {{ artwork.id }}
-            </div>
-            <div class="image-index__description-item">
-              {{ artwork.year_made }}
-            </div>
-            <div class="image-index__description-text small-text">
-              {{ artwork.content | strip_html | truncate: 240, '...' }}
-            </div>
-          </div>
-          <div class="clear"></div>
-        </article>
-
-      {% endif %}
-    {% endfor %}
-</section>

_plugins/_artworks.rb

@@ -77,7 +77,7 @@ def set_duration
     end
 
     def set_month(m_num)
-      %w( January February March April May June July August September October November December)[m_num.to_i]
+      %w( January February March April May June July August September October November December)[m_num.to_i - 1]
     end
 
     def set_collected_artworks

css/_artwork.scss

@@ -0,0 +1,17 @@
+
+
+.artwork {
+
+}
+
+.artwork__meta {
+  margin-bottom: 1rem;
+  background-color: $color-grey-E;
+}
+
+.artwork__meta-artist,
+.artwork__meta-year,
+.artwork__meta-dimensions,
+.artwork__meta-media {
+  @extend .data-text;
+}

css/_base.scss

@@ -38,11 +38,15 @@ img {
   max-width: 100%;
 }
 
+.data-text {
+   font-size: .85rem;
+   font-family: $monospace-font-family;
+   color: $color-gris-9;
+}
+
 .caption {
-  font-size: .85rem;
+  @extent .data-text;
   margin: 0 auto 1rem auto;
-  font-family: $monospace-font-family;
-  color: $color-gris-9;
 }
 
 

css/_image_index.scss

@@ -2,16 +2,18 @@
 .image-index__article {
   margin-bottom: $spacing-unit/4;
   border-bottom: 1px solid $color-gris-C;
+}
+
+.image-index__image {
+  width: 100%;
   img {
-    float: left;
-    margin: 16px 15px 10px 0;
+    margin: 16px auto 10px auto;
     max-width: 150px;
     max-height: 150px;
+    display: block;
   }
 }
 
-.image-index__image {}
-
 
 .image-index__description {}
 
@@ -27,3 +29,13 @@
   color: $color-gris-A;
   margin-left: 5 * $spacing-unit;
 }
+
+
+@include media-query($mobile-breakpoint) {
+  .image-index__article {
+    img {
+      float: left;
+      margin: 16px 15px 10px 0;
+    }
+  }
+}

css/main.scss

@@ -21,7 +21,7 @@ $spacing-unit:     2rem;
 $spacing-unit-bottom: $spacing-unit / 2;
 
 // Design mobile first, override with breakpoints:
-$mobile-breakpoint:          600px;
+$mobile-breakpoint:        600px;
 $tablet-breakpoint:        800px;
 
 
@@ -80,6 +80,7 @@ $tablet-breakpoint:        800px;
 
 // Import partials from `sass_dir` (defaults to `_sass`)
 @import
+        "artwork",
         "base",
         "layout",
         "syntax_highlighting",