some css on product page

3 files changed, 136 insertions, 5 deletions

diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css
index 77304daa..52dd73c1 100644
--- a/StoneIsland/www/css/blogs.css
+++ b/StoneIsland/www/css/blogs.css
@@ -163,4 +163,23 @@
 
 ul.links {
   -webkit-padding-start: 0px!important
+}
+
+.archive h1 {
+  font-size:26px;
+  border-bottom:0;
+  margin-top:8px;
+  padding-bottom:0;
+  line-height:24px;
+}
+
+.archive .subtitle {
+  box-sizing:border-box;
+  width:calc(100vw - 10px);
+  position:relative;
+  text-align:center;
+  margin:0 0 12px;
+  padding:0;
+  font-weight:bold;
+  font-size:14px;
 }
\ No newline at end of file
diff --git a/StoneIsland/www/css/products.css b/StoneIsland/www/css/products.css
index 4dace6ea..163c470c 100644
--- a/StoneIsland/www/css/products.css
+++ b/StoneIsland/www/css/products.css
@@ -63,4 +63,109 @@
   padding-bottom: 10px;
   text-align: center;
   width: 100%;
-}
\ No newline at end of file
+}
+
+.product .content {
+  box-sizing:border-box;
+  width:calc(100vw - 40px);
+  position:relative;
+  margin:0 auto 40px;
+  padding:0;
+}
+
+.product .content h2 {
+  font-size:15px;
+  margin:15px 0 0px;
+
+  max-width:60%;
+  position:relative
+}
+
+#product::before {
+content:'';
+width:100%;
+  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
+height:40px;
+z-index:2;
+position:absolute;
+bottom:0px;
+left:0
+}
+
+.product .style {
+padding:4px 9px;
+border:1px solid black;
+float:left
+}
+
+.product .share {
+float:right;
+padding:4px 9px;
+border:1px solid black;
+}
+
+.product .type {
+display:table-cell;
+font-size:12px;
+}
+
+.product .size {
+padding-right:16px;
+position:relative
+}
+
+.product .price {
+display:table-cell;
+font-size:14px;
+text-align:right
+}
+
+.product .price, .product .type {
+font-weight:bold;
+margin:0;
+padding:10px 0;
+}
+
+.type-price {
+display:table;
+position:relative;
+width:100%
+}
+
+.style-share {
+letter-spacing:0.5px;
+}
+
+.size-color {
+position:relative
+}
+
+.type-price, .style-share {
+clear:both;
+position:relative;
+box-sizing:border-box
+}
+
+
+.size-color::after {
+  content: '';
+  display: inline-block;
+  width: 1px;
+  height: calc(100% + 4px);
+  transform: translateY(-2px);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  background: #999;
+}
+
+
+.product .fit {
+clear:both;
+font-size:10px;
+letter-spacing:0.5px;
+text-decoration:underline;
+text-transform:uppercase;
+padding:12px 0 4px;
+}
+
diff --git a/StoneIsland/www/index.html b/StoneIsland/www/index.html
index 80eb9490..edc8b35f 100644
--- a/StoneIsland/www/index.html
+++ b/StoneIsland/www/index.html
@@ -163,6 +163,7 @@
   <div id="archive">
     <div class="scroll">
       <h1>ARCHIVE</h1>
+      <div class="subtitle">'982-'015</div>
       <div class="content">
         <script type="text/html" class="template">
           <img src="{{image}}">
@@ -241,13 +242,19 @@
       </div>
       <div class="content">
         <h2><b class="num"></b><span class="title"></h2>
-        <span class="type"></span>
-        <span class="price"></span>
+        <div class="type-price">
+          <span class="type"></span>
+          <span class="price"></span>
+        </div>
+        <div class="style-share">
         <span class="style">
-          <span class="size"></span>
-          <span class="color"></span>
+          <div class="size-color">
+            <span class="size"></span>
+            <span class="color"></span>
+          </div>
         </span>
         <span class="share">SHARE +</span>
+        </div>
         <div class="fit">Fits Large</div>
         <div class="body">
         </div>