diff options
| -rw-r--r-- | StoneIsland/www/css/blogs.css | 19 | ||||
| -rw-r--r-- | StoneIsland/www/css/products.css | 107 | ||||
| -rw-r--r-- | StoneIsland/www/index.html | 15 |
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> |