more css on hub and story

1 files changed, 116 insertions, 1 deletions

diff --git a/StoneIsland/www/css/blogs.css b/StoneIsland/www/css/blogs.css
index c83ed355..f3552bc7 100644
--- a/StoneIsland/www/css/blogs.css
+++ b/StoneIsland/www/css/blogs.css
@@ -3,8 +3,9 @@
   display: none;
 }
 #story .links {
-  margin: 0;
+  margin: 15px 0 0;
   text-align: center;
+  text-transform:uppercase;
 }
 #story .links li {
   padding: 10px;
@@ -48,4 +49,118 @@
 
 .page .content {
   padding: 10px;
+}
+
+#content .content .body {
+  letter-spacing:0.35px;
+  font-size:12px;
+  width:calc(100vw - 40px);
+  box-sizing:border-box;
+  margin:10px auto 20px;
+}
+
+.content-header {
+  width:calc(100vw - 40px);
+  box-sizing:border-box;
+  margin:20px auto 0px;
+}
+
+.content-header .title, .content-header .subtitle {
+  display:block;
+  font-weight:bold;
+  font-size:14px;
+  text-transform:uppercase
+}
+
+.content-header .title {
+  margin:0;
+  padding:0;
+  line-height:13px;
+}
+
+.content-header .subtitle {
+  padding-bottom:10px
+}
+
+.content-share {
+  border:1px solid black;
+  padding:4px 8px;
+  float:right
+}
+
+.content-header span.date, .content-header span.store {
+  font-size:10px;
+}
+
+/* NOTE: optional arrows */
+
+.gallery-multiple-images::before {
+  border:1px solid black;
+  top:50%;
+  transform:scale(.5,1) translateY(-50%);
+  transform-origin:top left;
+  left:20px;
+  content:'\25C0';
+  font-size:18px;
+  padding:6px 14px;
+  z-index:999;
+  position:absolute;
+  display:block;
+  background:rgba(255,255,255,1);
+}
+
+.gallery-multiple-images::after {
+  border:1px solid black;
+  top:50%;
+  transform:scale(.5,1) translateY(-50%);
+  transform-origin:top right;
+  right:20px;
+  content:'\25B6';
+  font-size:18px;
+  padding:6px 14px;
+  z-index:999;
+  position:absolute;
+  display:block;
+  background:rgba(255,255,255,1);
+}
+
+/* NOTE: not sure if this down arrow is necessary.. the fade
+         might do..? what do you think? it can be removed
+         with javascript when the body hits the bottom of
+         the page */
+
+.fade-cover {
+  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1));
+  position:fixed;
+  bottom:0;
+  width:100vw;
+  height:100px;
+  box-sizing:border-box
+}
+
+.fade-cover::before {
+  border:1px solid black;
+  top:50%;
+  left:50%;
+  margin-left:-24px;
+  transform:scale(1,.5) translateY(-50%);
+  transform-origin:bottom right;
+  content:'\25BC';
+  font-size:17px;
+  padding:9px 11px;
+  z-index:999;
+  position:absolute;
+  display:block;
+  background:rgba(255,255,255,1);
+}
+
+#story img {
+box-sizing:border-box;
+width:calc(100vw + 150px);
+position:relative;
+left:-75px;
+}
+
+ul.links {
+-webkit-padding-start: 0px!important
 }
\ No newline at end of file