Apply new layout to snap page

snapcore · Jun 21, 2016 · 5074ac5 · 5074ac5
1 parent 347b761
commit 5074ac5
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 25 deletions.
diff --git a/www/src/css/headline.css b/www/src/css/headline.css
@@ -12,7 +12,7 @@
   flex:1;
   font-size:18px;
   font-weight:400;
-  margin:20px 15px 5px 10px;
+  margin:0 15px 5px 10px;
 }
 
 @media screen and (min-width: 640px) {

diff --git a/www/src/css/snap.css b/www/src/css/snap.css
@@ -11,6 +11,7 @@
   line-height:1.3;
   padding:1.3em 0;
   align-items: flex-start;
+  margin:0 10px;
 }
 
 .b-snap__meta {
@@ -75,3 +76,14 @@
 .b-snap__tab-content {
   padding:1.3em 0;
 }
+
+.b-snap__details {
+  margin:0 10px;
+}
+
+@media screen and (min-width: 640px) {
+  .b-snap__banner,
+  .b-snap__details {
+    margin:0 15px;
+  }
+}
diff --git a/www/src/js/templates/snap-layout.hbs b/www/src/js/templates/snap-layout.hbs
@@ -1,28 +1,32 @@
-<div class="b-layout__container">
-  <div class="b-snap__banner">
-    <div class="b-icon">
-      <img src="{{ icon }}" width="70" height="70">
+<div class="inner-wrapper">
+  <div class="twelve-col last-col">
+    <div class="b-layout__container">
+      <div class="b-snap__banner">
+        <div class="b-icon">
+          <img src="{{ icon }}" width="70" height="70">
+        </div>
+        <div class="b-snap__meta">
+          <h1 class="b-snap__title">{{ name }} {{ version }} {{ binary_filesize }}</h1>
+          <p>
+          <span>{{ binary_filesize}}</span>
+          </p>
+        </div>
+        <div class="b-snap__actions">
+          {{> installer}}
+        </div>
+      </div>
     </div>
-    <div class="b-snap__meta">
-      <h1 class="b-snap__title">{{ name }} {{ version }} {{ binary_filesize }}</h1>
-      <p>
-      <span>{{ binary_filesize}}</span>
-      </p>
-    </div>
-    <div class="b-snap__actions">
-      {{> installer}}
+
+    <div class="b-layout__container b-snap__details">
+      {{#if description}}
+      <p>{{ description }}</p>
+      {{/if}}
+      {{#if prettyInstalledSize}}
+      <p>Installed size: {{prettyInstalledSize}}</p>
+      {{/if}}
+      {{#if prettyDownloadSize}}
+      <p>Download size: {{prettyDownloadSize}}</p>
+      {{/if}}
     </div>
   </div>
 </div>
-
-<div class="b-layout__container">
-  {{#if description}}
-  <p>{{ description }}</p>
-  {{/if}}
-  {{#if prettyInstalledSize}}
-  <p>Installed size: {{prettyInstalledSize}}</p>
-  {{/if}}
-  {{#if prettyDownloadSize}}
-  <p>Download size: {{prettyDownloadSize}}</p>
-  {{/if}}
-</div>