From 3bfb8a3bb6a18b1b67774b8eb1751c44518bb797 Mon Sep 17 00:00:00 2001
From: whitzhu <whitzhu@gmail.com>
Date: Thu, 28 Jul 2016 15:47:09 -0700
Subject: [PATCH 1/3] Updated Explore Topic Card into lists

---
 .../assets/src/vue/explore-page/index.vue     |  5 +-
 .../plugins/learn/assets/src/vue/learn.styl   |  8 +++
 .../learn/assets/src/vue/list-grid/index.vue  | 69 +++++++++++++++++++
 .../learn/assets/src/vue/list/index.vue       | 68 ++++++++++++++++++
 .../learn/assets/src/vue/topic-card/index.vue | 10 +--
 5 files changed, 154 insertions(+), 6 deletions(-)
 create mode 100644 kolibri/plugins/learn/assets/src/vue/list-grid/index.vue
 create mode 100644 kolibri/plugins/learn/assets/src/vue/list/index.vue

diff --git a/kolibri/plugins/learn/assets/src/vue/explore-page/index.vue b/kolibri/plugins/learn/assets/src/vue/explore-page/index.vue
index 3b49362c851..af2a54c0dae 100644
--- a/kolibri/plugins/learn/assets/src/vue/explore-page/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/explore-page/index.vue
@@ -21,7 +21,7 @@
 
     <span class="visuallyhidden" v-if="subtopics.length">You can navigate groups of content through headings.</span>
 
-    <card-grid v-if="subtopics.length">
+    <list-grid v-if="subtopics.length">
       <topic-card
         v-for="topic in subtopics"
         :id="topic.id"
@@ -29,7 +29,7 @@
         :ntotal="topic.n_total"
         :ncomplete="topic.n_complete">
       </topic-card>
-    </card-grid>
+    </list-grid>
 
     <card-grid v-if="contents.length">
       <content-card
@@ -57,6 +57,7 @@
       'topic-card': require('../topic-card'),
       'content-card': require('../content-card'),
       'card-grid': require('../card-grid'),
+      'list-grid': require('../list-grid'),
     },
     computed: {
       title() {
diff --git a/kolibri/plugins/learn/assets/src/vue/learn.styl b/kolibri/plugins/learn/assets/src/vue/learn.styl
index 2b67950a9f9..82f9a1c327e 100644
--- a/kolibri/plugins/learn/assets/src/vue/learn.styl
+++ b/kolibri/plugins/learn/assets/src/vue/learn.styl
@@ -11,10 +11,18 @@ $n-cols-array = 1 2 3 4 5     // possible numbers of columns
 $left-margin = 100px
 $right-margin = 25px
 
+$list-height = 60px         // fixed card height
+$list-width = 100%         // fixed card width
+$list-gutter = 20px
+$n-cols-list-array = 1
+
 // compute the target grid width based on the number of columns
 grid-width($n-cols)
   ($card-width * $n-cols) + ($card-gutter * ($n-cols + 1))
 
+grid-list-width($n-cols)
+  ($list-width * $n-cols) + ($list-gutter * ($n-cols + 1))
+
 $portrait-breakpoint = $left-margin * 2 + grid-width(1) + $right-margin
 
 // compute the media query breakpoint, based on the target grid width
diff --git a/kolibri/plugins/learn/assets/src/vue/list-grid/index.vue b/kolibri/plugins/learn/assets/src/vue/list-grid/index.vue
new file mode 100644
index 00000000000..d59b99c9c45
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/vue/list-grid/index.vue
@@ -0,0 +1,69 @@
+<template>
+
+  <section>
+    <h3>{{header}}</h3>
+    <div class="list-grid">
+      <slot></slot>
+    </div>
+  </section>
+
+</template>
+
+
+<script>
+
+  module.exports = {
+    props: [
+      'header',
+    ],
+  };
+
+</script>
+
+
+<style lang="stylus">
+
+  @require '../learn.styl'
+  @require 'jeet'
+
+  // Disable styling to make this a more generic container
+
+  // @stylint off
+  .list-grid > *
+  // @stylint on
+
+    margin-bottom: $list-gutter
+    column(1, cycle: 1, gutter: 0)
+    min-width: $list-width
+
+    // Assumes least to greatest
+    for $n-cols, $i in $n-cols-list-array
+      $grid-list-width = grid-list-width($n-cols)
+
+      if($i)
+        // We're only defining the min-width for this, so we need to uncycle
+        // the column widths that are defined "on top" of this one
+        @media (min-width: breakpoint($grid-list-width))
+          column(1/$n-cols, uncycle: $n-cols-list-array[($i-1)], cycle: $n-cols, gutter: $list-gutter/$grid-list-width)
+
+      // The highest level shouldn't need to uncycle anything.
+      @media (min-width: breakpoint($grid-list-width))
+        column(1/$n-cols, cycle: $n-cols, gutter: $list-gutter/$grid-list-width)
+
+      // Only functions as intended when there are 2 different sizes, how it's
+      // working now is beyond me. Need a refactor.
+
+</style>
+
+
+<style lang="stylus" scoped>
+
+  @require 'jeet'
+
+  h2
+    margin-top: 0
+
+  .list-grid
+    cf()
+
+</style>
diff --git a/kolibri/plugins/learn/assets/src/vue/list/index.vue b/kolibri/plugins/learn/assets/src/vue/list/index.vue
new file mode 100644
index 00000000000..8f6b9050b91
--- /dev/null
+++ b/kolibri/plugins/learn/assets/src/vue/list/index.vue
@@ -0,0 +1,68 @@
+<template>
+
+  <a class='root'>
+    <div class='thumb-wrapper'>
+      <slot></slot>
+    </div>
+    <div class='text'>
+      <span class="title">{{ title }}</span>
+    </div>
+  </a>
+
+</template>
+
+
+<script>
+
+  module.exports = {
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="stylus" scoped>
+
+  @require '~core-theme.styl'
+  @require '../learn.styl'
+
+  $thumb-width = 60px
+
+  .root
+    display: block
+    width: $list-width
+    height: $list-height
+    background-color: $core-bg-light
+    overflow: hidden
+    border-radius: $radius
+
+  .thumb-wrapper
+    position: relative
+    display: block
+    float: left
+    width: $thumb-width
+    height: $list-height
+    border-radius: $radius 0 0  $radius
+    overflow: hidden
+
+  .text
+    position: relative
+    display: block
+    width: 100%
+    height: $list-height
+    padding: 0.6em
+    font-size: 0.9rem
+    font-weight: bold
+    color: $core-text-default
+
+  .title
+    position: absolute
+    top: 50%
+    transform: translateY(-50%)
+
+</style>
diff --git a/kolibri/plugins/learn/assets/src/vue/topic-card/index.vue b/kolibri/plugins/learn/assets/src/vue/topic-card/index.vue
index d3a1ab3c8cd..c1b5859e6ee 100644
--- a/kolibri/plugins/learn/assets/src/vue/topic-card/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/topic-card/index.vue
@@ -1,9 +1,9 @@
 <template>
 
   <div>
-    <card v-link="link" :title="title">
+    <list v-link="link" :title="title">
       <div class='thumbnail'></div>
-    </card>
+    </list>
   </div>
 
 </template>
@@ -15,7 +15,7 @@
 
   module.exports = {
     components: {
-      card: require('../card'),
+      list: require('../list'),
     },
     props: {
       id: {
@@ -43,12 +43,14 @@
 <style lang="stylus" scoped>
 
   .thumbnail
-    width: 100%
+    position: relative
+    width: 60%
     height: 100%
     background-position: center
     background-image: url(../icons/folder.svg)
     background-repeat: no-repeat
     // chosen to approximage ~0.5em - the card's internal padding
     background-size: 78%
+    margin-left: 10%
 
 </style>

From 52408cd0c1887cb78d5893577d40c6a1c17e3135 Mon Sep 17 00:00:00 2001
From: indirectlylit <devon@indirectlylit.com>
Date: Fri, 29 Jul 2016 09:50:51 -0700
Subject: [PATCH 2/3] naming refactor

---
 .../{card => card-grid/grid-item}/index.vue   |   2 +-
 .../vue/{list-grid => card-list}/index.vue    |   6 +++---
 .../{list => card-list/list-item}/index.vue   |   2 +-
 .../images/default_thumbnail.png              | Bin
 .../index.vue                                 |   6 +++---
 .../src/vue/expandable-content-grid/index.vue |   6 +++---
 .../assets/src/vue/explore-page/index.vue     |  18 +++++++++---------
 .../assets/src/vue/search-widget/index.vue    |  12 ++++++------
 .../{topic-card => topic-list-item}/index.vue |   6 +++---
 9 files changed, 29 insertions(+), 29 deletions(-)
 rename kolibri/plugins/learn/assets/src/vue/{card => card-grid/grid-item}/index.vue (96%)
 rename kolibri/plugins/learn/assets/src/vue/{list-grid => card-list}/index.vue (95%)
 rename kolibri/plugins/learn/assets/src/vue/{list => card-list/list-item}/index.vue (97%)
 rename kolibri/plugins/learn/assets/src/vue/{content-card => content-grid-item}/images/default_thumbnail.png (100%)
 rename kolibri/plugins/learn/assets/src/vue/{content-card => content-grid-item}/index.vue (95%)
 rename kolibri/plugins/learn/assets/src/vue/{topic-card => topic-list-item}/index.vue (88%)

diff --git a/kolibri/plugins/learn/assets/src/vue/card/index.vue b/kolibri/plugins/learn/assets/src/vue/card-grid/grid-item/index.vue
similarity index 96%
rename from kolibri/plugins/learn/assets/src/vue/card/index.vue
rename to kolibri/plugins/learn/assets/src/vue/card-grid/grid-item/index.vue
index 9a61b6b3885..134836556b3 100644
--- a/kolibri/plugins/learn/assets/src/vue/card/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/card-grid/grid-item/index.vue
@@ -29,7 +29,7 @@
 <style lang="stylus" scoped>
 
   @require '~core-theme.styl'
-  @require '../learn.styl'
+  @require '../../learn.styl'
 
   $thumb-width = $card-height * 3.0 / 2.5;
 
diff --git a/kolibri/plugins/learn/assets/src/vue/list-grid/index.vue b/kolibri/plugins/learn/assets/src/vue/card-list/index.vue
similarity index 95%
rename from kolibri/plugins/learn/assets/src/vue/list-grid/index.vue
rename to kolibri/plugins/learn/assets/src/vue/card-list/index.vue
index d59b99c9c45..05e3e2d7160 100644
--- a/kolibri/plugins/learn/assets/src/vue/list-grid/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/card-list/index.vue
@@ -2,7 +2,7 @@
 
   <section>
     <h3>{{header}}</h3>
-    <div class="list-grid">
+    <div class="card-list">
       <slot></slot>
     </div>
   </section>
@@ -29,7 +29,7 @@
   // Disable styling to make this a more generic container
 
   // @stylint off
-  .list-grid > *
+  .card-list > *
   // @stylint on
 
     margin-bottom: $list-gutter
@@ -63,7 +63,7 @@
   h2
     margin-top: 0
 
-  .list-grid
+  .card-list
     cf()
 
 </style>
diff --git a/kolibri/plugins/learn/assets/src/vue/list/index.vue b/kolibri/plugins/learn/assets/src/vue/card-list/list-item/index.vue
similarity index 97%
rename from kolibri/plugins/learn/assets/src/vue/list/index.vue
rename to kolibri/plugins/learn/assets/src/vue/card-list/list-item/index.vue
index 8f6b9050b91..8a91f6d5eb0 100644
--- a/kolibri/plugins/learn/assets/src/vue/list/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/card-list/list-item/index.vue
@@ -29,7 +29,7 @@
 <style lang="stylus" scoped>
 
   @require '~core-theme.styl'
-  @require '../learn.styl'
+  @require '../../learn.styl'
 
   $thumb-width = 60px
 
diff --git a/kolibri/plugins/learn/assets/src/vue/content-card/images/default_thumbnail.png b/kolibri/plugins/learn/assets/src/vue/content-grid-item/images/default_thumbnail.png
similarity index 100%
rename from kolibri/plugins/learn/assets/src/vue/content-card/images/default_thumbnail.png
rename to kolibri/plugins/learn/assets/src/vue/content-grid-item/images/default_thumbnail.png
diff --git a/kolibri/plugins/learn/assets/src/vue/content-card/index.vue b/kolibri/plugins/learn/assets/src/vue/content-grid-item/index.vue
similarity index 95%
rename from kolibri/plugins/learn/assets/src/vue/content-card/index.vue
rename to kolibri/plugins/learn/assets/src/vue/content-grid-item/index.vue
index 6f1c6566348..a755dd0faff 100644
--- a/kolibri/plugins/learn/assets/src/vue/content-card/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/content-grid-item/index.vue
@@ -1,7 +1,7 @@
 <template>
 
   <div>
-    <card v-link="link" :title="title">
+    <grid-item v-link="link" :title="title">
       <div class='thumbnail' :class="{ 'thumbnail-center' : !thumb }" :style='{ "background-image": thumb }'>
         <content-icon
           :class='thumb ? "content-icon" : "content-icon-center" '
@@ -10,7 +10,7 @@
           :progress="progress">
         </content-icon>
       </div>
-    </card>
+    </grid-item>
   </div>
 
 </template>
@@ -26,7 +26,7 @@
   module.exports = {
     components: {
       'content-icon': require('../content-icon'),
-      'card': require('../card'),
+      'grid-item': require('../card-grid/grid-item'),
     },
     props: {
       id: {
diff --git a/kolibri/plugins/learn/assets/src/vue/expandable-content-grid/index.vue b/kolibri/plugins/learn/assets/src/vue/expandable-content-grid/index.vue
index 28fd33756b6..1e0a2c1afd7 100644
--- a/kolibri/plugins/learn/assets/src/vue/expandable-content-grid/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/expandable-content-grid/index.vue
@@ -2,14 +2,14 @@
 
   <div>
     <card-grid :header="title" v-if="slicedContents.length">
-      <content-card
+      <content-grid-item
         v-for="content in slicedContents"
         :title="content.title"
         :thumbnail="content.thumbnail"
         :kind="content.kind"
         :progress="content.progress"
         :id="content.id">
-      </content-card>
+      </content-grid-item>
     </card-grid>
 
     <div class='button-wrapper' v-if="contents.length > nCollapsed">
@@ -49,7 +49,7 @@
       },
     },
     components: {
-      'content-card': require('../content-card'),
+      'content-grid-item': require('../content-grid-item'),
       'card-grid': require('../card-grid'),
     },
     data() {
diff --git a/kolibri/plugins/learn/assets/src/vue/explore-page/index.vue b/kolibri/plugins/learn/assets/src/vue/explore-page/index.vue
index af2a54c0dae..d31c3a6fc84 100644
--- a/kolibri/plugins/learn/assets/src/vue/explore-page/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/explore-page/index.vue
@@ -21,18 +21,18 @@
 
     <span class="visuallyhidden" v-if="subtopics.length">You can navigate groups of content through headings.</span>
 
-    <list-grid v-if="subtopics.length">
-      <topic-card
+    <card-list v-if="subtopics.length">
+      <topic-list-item
         v-for="topic in subtopics"
         :id="topic.id"
         :title="topic.title"
         :ntotal="topic.n_total"
         :ncomplete="topic.n_complete">
-      </topic-card>
-    </list-grid>
+      </topic-list-item>
+    </card-list>
 
     <card-grid v-if="contents.length">
-      <content-card
+      <content-grid-item
         v-for="content in contents"
         class="card"
         :title="content.title"
@@ -40,7 +40,7 @@
         :kind="content.kind"
         :progress="content.progress"
         :id="content.id">
-      </content-card>
+      </content-grid-item>
     </card-grid>
 
   </div>
@@ -54,10 +54,10 @@
     components: {
       'breadcrumbs': require('../breadcrumbs'),
       'page-header': require('../page-header'),
-      'topic-card': require('../topic-card'),
-      'content-card': require('../content-card'),
+      'topic-list-item': require('../topic-list-item'),
+      'content-grid-item': require('../content-grid-item'),
       'card-grid': require('../card-grid'),
-      'list-grid': require('../list-grid'),
+      'card-list': require('../card-list'),
     },
     computed: {
       title() {
diff --git a/kolibri/plugins/learn/assets/src/vue/search-widget/index.vue b/kolibri/plugins/learn/assets/src/vue/search-widget/index.vue
index 43994020a51..41368d0fca8 100644
--- a/kolibri/plugins/learn/assets/src/vue/search-widget/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/search-widget/index.vue
@@ -30,18 +30,18 @@
       </h4>
 
       <card-grid v-if="topics.length && showTopics">
-        <topic-card
+        <topic-list-item
           v-for="topic in topics"
           class="card"
           :id="topic.id"
           :title="topic.title"
           :ntotal="topic.n_total"
           :ncomplete="topic.n_complete">
-        </topic-card>
+        </topic-list-item>
       </card-grid>
 
       <card-grid v-if="contents.length">
-        <content-card
+        <content-grid-item
           v-for="content in contents"
           class="card"
           :title="content.title"
@@ -49,7 +49,7 @@
           :kind="content.kind"
           :progress="content.progress"
           :id="content.id">
-        </content-card>
+        </content-grid-item>
       </card-grid>
     </div>
 
@@ -102,8 +102,8 @@
       },
     },
     components: {
-      'topic-card': require('../topic-card'),
-      'content-card': require('../content-card'),
+      'topic-list-item': require('../topic-list-item'),
+      'content-grid-item': require('../content-grid-item'),
       'card-grid': require('../card-grid'),
     },
     vuex: {
diff --git a/kolibri/plugins/learn/assets/src/vue/topic-card/index.vue b/kolibri/plugins/learn/assets/src/vue/topic-list-item/index.vue
similarity index 88%
rename from kolibri/plugins/learn/assets/src/vue/topic-card/index.vue
rename to kolibri/plugins/learn/assets/src/vue/topic-list-item/index.vue
index c1b5859e6ee..3501eaccec6 100644
--- a/kolibri/plugins/learn/assets/src/vue/topic-card/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/topic-list-item/index.vue
@@ -1,9 +1,9 @@
 <template>
 
   <div>
-    <list v-link="link" :title="title">
+    <list-item v-link="link" :title="title">
       <div class='thumbnail'></div>
-    </list>
+    </list-item>
   </div>
 
 </template>
@@ -15,7 +15,7 @@
 
   module.exports = {
     components: {
-      list: require('../list'),
+      'list-item': require('../card-list/list-item'),
     },
     props: {
       id: {

From bf5acd6f11077f7df0b6165ff91cc8d65adb6d4b Mon Sep 17 00:00:00 2001
From: indirectlylit <devon@indirectlylit.com>
Date: Fri, 29 Jul 2016 10:14:27 -0700
Subject: [PATCH 3/3] update display strategy

---
 .../learn/assets/src/vue/card-grid/index.vue  |  3 --
 .../learn/assets/src/vue/card-list/index.vue  | 37 +------------------
 .../src/vue/card-list/list-item/index.vue     | 35 +++++++++---------
 .../plugins/learn/assets/src/vue/learn.styl   |  7 ----
 4 files changed, 20 insertions(+), 62 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/vue/card-grid/index.vue b/kolibri/plugins/learn/assets/src/vue/card-grid/index.vue
index ea4f646aceb..2f401f99027 100644
--- a/kolibri/plugins/learn/assets/src/vue/card-grid/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/card-grid/index.vue
@@ -60,9 +60,6 @@
 
   @require 'jeet'
 
-  h2
-    margin-top: 0
-
   .card-grid
     cf()
 
diff --git a/kolibri/plugins/learn/assets/src/vue/card-list/index.vue b/kolibri/plugins/learn/assets/src/vue/card-list/index.vue
index 05e3e2d7160..562f46d9f52 100644
--- a/kolibri/plugins/learn/assets/src/vue/card-list/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/card-list/index.vue
@@ -24,46 +24,13 @@
 <style lang="stylus">
 
   @require '../learn.styl'
-  @require 'jeet'
-
-  // Disable styling to make this a more generic container
 
   // @stylint off
   .card-list > *
   // @stylint on
-
-    margin-bottom: $list-gutter
-    column(1, cycle: 1, gutter: 0)
-    min-width: $list-width
-
-    // Assumes least to greatest
-    for $n-cols, $i in $n-cols-list-array
-      $grid-list-width = grid-list-width($n-cols)
-
-      if($i)
-        // We're only defining the min-width for this, so we need to uncycle
-        // the column widths that are defined "on top" of this one
-        @media (min-width: breakpoint($grid-list-width))
-          column(1/$n-cols, uncycle: $n-cols-list-array[($i-1)], cycle: $n-cols, gutter: $list-gutter/$grid-list-width)
-
-      // The highest level shouldn't need to uncycle anything.
-      @media (min-width: breakpoint($grid-list-width))
-        column(1/$n-cols, cycle: $n-cols, gutter: $list-gutter/$grid-list-width)
-
-      // Only functions as intended when there are 2 different sizes, how it's
-      // working now is beyond me. Need a refactor.
+    margin-bottom: $card-gutter
 
 </style>
 
 
-<style lang="stylus" scoped>
-
-  @require 'jeet'
-
-  h2
-    margin-top: 0
-
-  .card-list
-    cf()
-
-</style>
+<style lang="stylus" scoped></style>
diff --git a/kolibri/plugins/learn/assets/src/vue/card-list/list-item/index.vue b/kolibri/plugins/learn/assets/src/vue/card-list/list-item/index.vue
index 8a91f6d5eb0..51cb4bde1d3 100644
--- a/kolibri/plugins/learn/assets/src/vue/card-list/list-item/index.vue
+++ b/kolibri/plugins/learn/assets/src/vue/card-list/list-item/index.vue
@@ -30,39 +30,40 @@
 
   @require '~core-theme.styl'
   @require '../../learn.styl'
+  @require 'jeet'
 
-  $thumb-width = 60px
+  $min-height = 60px         // min card height
 
   .root
+    position: relative
     display: block
-    width: $list-width
-    height: $list-height
+    min-height: 60px
     background-color: $core-bg-light
-    overflow: hidden
     border-radius: $radius
+    display: table
+    width: 100%
 
   .thumb-wrapper
-    position: relative
-    display: block
-    float: left
-    width: $thumb-width
-    height: $list-height
-    border-radius: $radius 0 0  $radius
-    overflow: hidden
+    position: absolute
+    left: 0.4em
+    width: $min-height
+    height: $min-height
+    border-radius: $radius 0 0 $radius
 
   .text
     position: relative
-    display: block
     width: 100%
-    height: $list-height
-    padding: 0.6em
     font-size: 0.9rem
     font-weight: bold
     color: $core-text-default
+    display: table-row
 
   .title
-    position: absolute
-    top: 50%
-    transform: translateY(-50%)
+    display: table-cell
+    width: 100%
+    height: 100%
+    padding: 0.8em
+    padding-left: $min-height
+    vertical-align: middle
 
 </style>
diff --git a/kolibri/plugins/learn/assets/src/vue/learn.styl b/kolibri/plugins/learn/assets/src/vue/learn.styl
index 82f9a1c327e..adcc692c97a 100644
--- a/kolibri/plugins/learn/assets/src/vue/learn.styl
+++ b/kolibri/plugins/learn/assets/src/vue/learn.styl
@@ -11,18 +11,11 @@ $n-cols-array = 1 2 3 4 5     // possible numbers of columns
 $left-margin = 100px
 $right-margin = 25px
 
-$list-height = 60px         // fixed card height
-$list-width = 100%         // fixed card width
-$list-gutter = 20px
-$n-cols-list-array = 1
 
 // compute the target grid width based on the number of columns
 grid-width($n-cols)
   ($card-width * $n-cols) + ($card-gutter * ($n-cols + 1))
 
-grid-list-width($n-cols)
-  ($list-width * $n-cols) + ($list-gutter * ($n-cols + 1))
-
 $portrait-breakpoint = $left-margin * 2 + grid-width(1) + $right-margin
 
 // compute the media query breakpoint, based on the target grid width