gallery layout udpate

src/style/gallery.scss

@@ -1,35 +1,34 @@
-.gallery-block {
-  margin: 2em 0 0;
-  display: block;
+@import "variables";
+
+//.gallery-block {
+//  margin: 2em 0 0;
+//  display: block;
+//}
+
+.album-collection{
+
 }
 
-.gallery-period{
-  margin-bottom: 2em;
-  
-  & > div{
-    margin: 1.5em 0 0;
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    align-items: flex-start;
-  }
+.album-collection__body{
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  align-items: flex-start;
+
+  margin-bottom: $double-margin;
+}
+
+.album-collection__title{
 
-  p.period{
-    text-align: center;
-    font-size: 1.5em;
-    font-weight: bold;
-  }
 }
 
 .gallery-album {
-  margin: 0 1em 2em;
-
-  h3{
-    margin: 0 0 0.35em;
-  }
+  width: calc(33% - #{$single-margin});
+  margin-bottom: $single-margin;
 
   img {
-    max-width: 100%;
+    width: 100%;
+    max-width: 500px;
   }
 }
 
@@ -120,7 +119,7 @@
   }
 }
 
-@media screen and (max-width: 31.25em) {
+@media screen and (max-width: $mobile-width) {
   .album-block {
     width: 100%;
     margin: 1em auto 2em;
@@ -157,7 +156,7 @@
   }
 }
 
-@media screen and (min-width: 31.25em) and (max-width: 59.99999em){
+@media screen and (min-width: $mobile-width) and (max-width: $desktop-width){
   .album-block {
     .album-info{
       width: 100%;

src/templates/views/gallery.html

@@ -1,22 +1,14 @@
-<div class="gallery-block" ng-controller="GalleryPageController">
-
-    <div class="gallery-period" ng-repeat="period in years">
-        <p class="period">{{period.year}}</p>
-        <div><div class="gallery-album" ng-repeat="album in period.albums">
-            <h3><a href="{{album.url}}">{{album.title}}</a></h3>
-            <a href="{{album.url}}" class="invisible">
-                <img ng-src="{{album.preview_url}}" alt=""/>
-            </a>
-            <p>{{album.course}}</p>
-        </div></div>
+<div class="content content_wide" ng-controller="GalleryPageController">
+    <div class="album-collection" ng-repeat="period in years">
+        <h2 class="album-collection__title">{{period.year}}</h2>
+        <div class="album-collection__body">
+            <div class="gallery-album" ng-repeat="album in period.albums">
+                <h3><a href="{{album.url}}">{{album.title}}</a></h3>
+                <a href="{{album.url}}" class="invisible">
+                    <img ng-src="{{album.preview_url}}" alt="{{album.title}}"/>
+                </a>
+                <p>{{album.course}}</p>
+            </div>
+        </div>
     </div>
-
-
-    <!--<div class="gallery-album" ng-repeat="album in albums">-->
-        <!--<h3><a href="{{album.url}}">{{album.title}}</a></h3>-->
-        <!--<a href="{{album.url}}" class="invisible">-->
-            <!--<img ng-src="{{album.preview_url}}" alt=""/>-->
-        <!--</a>-->
-        <!--<p>{{album.course}}</p>-->
-    <!--</div>-->
 </div>