incorporate skeleton layout in the galleries

mediagoblin/static/css/base.css

@@ -107,7 +107,7 @@ input, textarea {
 
 .container {
   margin: auto;
-  width: 96%;
+/*  width: 96%;*/
   max-width: 940px;
 }
 
@@ -275,6 +275,22 @@ text-align: center;
 	margin-left: 8px;
 }
 
+.alpha {
+  margin-left:0;
+}
+
+.omega {
+  margin-right:0;
+}
+
+.heaven {
+  margin-top:0;
+}
+
+.hell {
+  margin-bottom:0;
+}
+
 /* forms */
 
 .form_box,.form_box_xl {
@@ -820,7 +836,7 @@ pre {
   header {
     text-align: center;
   }
-  
+
   .header_right {
     margin-right: 2%;
     float: none;
@@ -829,12 +845,32 @@ pre {
   a.logo {
     margin-left: 2%;
   }
+  
+}
+@media screen and (min-width: 960px) {
+  .container .three.columns {
+    width:180px;
+    margin-left:3px;
+    margin-right:3px;
+  }
+}
+@media only screen and (min-width: 768px) and (max-width: 959px) {
+  .container .three.columns {
+    width:147px;
+    margin-left:2px;
+    margin-right:2px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .thumb_row {
+    margin-bottom: 0;
+  }
 }
-
 @media screen and (max-width: 570px) {
   .media_thumbnail {
     width: 29%;
   }
+
 }
 
 @media screen and (max-width: 380px) {

mediagoblin/static/css/extlib/baseskeleton.css

@@ -1 +0,0 @@
-../../../../extlib/skeleton/stylesheets/base.css

mediagoblin/static/css/extlib/layout.css

@@ -1 +0,0 @@
-../../../../extlib/skeleton/stylesheets/layout.css

mediagoblin/templates/mediagoblin/base.html

@@ -27,25 +27,12 @@
     <title>{% block title %}{{ app_config['html_title'] }}{% endblock %}</title>
     <link rel="stylesheet" type="text/css"
           href="{{ request.staticdirect('/css/extlib/reset.css') }}"/>
+    <link rel="stylesheet" type="text/css"
+          href="{{ request.staticdirect('/css/extlib/skeleton.css') }}"/>
     <link rel="stylesheet" type="text/css"
           href="{{ request.staticdirect('/css/base.css') }}"/>
-    <link rel="stylesheet" type="text/css"
-          href="{{ request.staticdirect('/css/skeletonbase.css') }}"/>
-    <link rel="stylesheet" type="text/css"
-          href="{{ request.staticdirect('/css/skeleton.css') }}"/>
-    <link rel="stylesheet" type="text/css"
-          href="{{ request.staticdirect('/css/layout.css') }}"/>
     <link rel="shortcut icon"
           href="{{ request.staticdirect('/images/goblin.ico') }}" />
-    <script type="text/javascript"
-            src="{{ request.staticdirect('/js/extlib/jquery.js') }}"></script>
-    <script type="text/javascript"
-            src="{{ request.staticdirect('/js/header_dropdown.js') }}"></script>
-    <script type="text/javascript"
-            src="{{ request.staticdirect('/js/notifications.js') }}"></script>
-    <script>
-      var mark_all_comments_seen_url = "{{ request.urlgen('mediagoblin.notifications.mark_all_comment_notifications_seen') }}"
-    </script>
 
     {# For clarification, the difference between the extra_head.html template
      # and the head template hook is that the former should be used by
@@ -183,4 +170,13 @@
     {%- endblock mediagoblin_body %}
     {% include 'mediagoblin/bits/body_end.html' %}
   </body>
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/js/extlib/jquery.js') }}"></script>
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/js/header_dropdown.js') }}"></script>
+    <script type="text/javascript"
+            src="{{ request.staticdirect('/js/notifications.js') }}"></script>
+    <script>
+      var mark_all_comments_seen_url = "{{ request.urlgen('mediagoblin.notifications.mark_all_comment_notifications_seen') }}"
+    </script>
 </html>

mediagoblin/templates/mediagoblin/utils/collection_gallery.html

@@ -19,15 +19,15 @@
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
 {% macro media_grid(request, collection_items, col_number=5) %}
-  <table class="thumb_gallery">
+  <div class="thumb_gallery">
     {% for row in collection_items|batch(col_number) %}
-      <tr class="thumb_row
+      <div class="row thumb_row
                  {%- if loop.first %} thumb_row_first
                  {%- elif loop.last %} thumb_row_last{% endif %}">
         {% for item in row %}
           {% set media_entry = item.get_media_entry %}
           {% set entry_url = media_entry.url_for_self(request.urlgen) %}
-          <td class="media_thumbnail thumb_entry
+          <div class="three columns media_thumbnail thumb_entry
                      {%- if loop.first %} thumb_entry_first
                      {%- elif loop.last %} thumb_entry_last{% endif %}">
             <a href="{{ entry_url }}">
@@ -49,11 +49,11 @@
 	        {%- trans %}(remove){% endtrans -%}
 	      </a>
 	    {% endif %}
-          </td>
+          </div>
         {% endfor %}
-      </tr>
+      </div>
     {% endfor %}
-  </table>
+  </div>
 {%- endmacro %}
 
 {#

mediagoblin/templates/mediagoblin/utils/object_gallery.html

@@ -19,14 +19,14 @@
 {% from "mediagoblin/utils/pagination.html" import render_pagination %}
 
 {% macro media_grid(request, media_entries, col_number=5) %}
-  <table class="thumb_gallery">
+  <div class="thumb_gallery">
     {% for row in media_entries|batch(col_number) %}
-      <tr class="thumb_row
+      <div class="row thumb_row
                  {%- if loop.first %} thumb_row_first
                  {%- elif loop.last %} thumb_row_last{% endif %}">
         {% for entry in row %}
           {% set entry_url = entry.url_for_self(request.urlgen) %}
-          <td class="media_thumbnail thumb_entry
+          <div class="three columns media_thumbnail thumb_entry
                      {%- if loop.first %} thumb_entry_first
                      {%- elif loop.last %} thumb_entry_last{% endif %}">
             <a href="{{ entry_url }}">
@@ -35,11 +35,11 @@
             {% if entry.title %}
               <a class="thumb_entry_title" href="{{ entry_url }}">{{ entry.title }}</a>
             {% endif %}
-          </td>
+          </div>
         {% endfor %}
-      </tr>
+      </div>
     {% endfor %}
-  </table>
+  </div>
 {%- endmacro %}
 
 {#