1 files changed, 340 insertions, 0 deletions
diff --git a/StoneIsland/platforms/android/assets/www/css/blogs.css b/StoneIsland/platforms/android/assets/www/css/blogs.css
new file mode 100755
index 00000000..c45658a0
--- /dev/null
+++ b/StoneIsland/platforms/android/assets/www/css/blogs.css
@@ -0,0 +1,340 @@
+.story #story { display: block }
+#story {
+  display: none;
+}
+#story .links {
+  margin: 15px 0 0;
+  text-align: center;
+  text-transform:uppercase;
+}
+#story .links li {
+  padding: 10px;
+  list-style-type: none;
+  display: inline-block;
+}
+#story .links li:before {
+  content: ' | ',
+}
+#story .links li:first-child:before {
+  content: '',
+}
+#story .links li.active {
+  font-weight: bold;
+  text-decoration: underline;
+}
+#story .content > div {
+  display: none;
+}
+#story .content div.active {
+  display: block;
+}
+
+.hub #hub { display: block }
+#hub {
+  display: none;
+}
+
+.archive #archive { display: block }
+#archive {
+  display: none;
+}
+
+/* FAQ */
+
+.privacy #privacy { display: block }
+.terms #terms { display: block }
+.returns #returns { display: block }
+.care #care { display: block }
+.page {
+  display: none;
+}
+
+.page .content {
+  padding: 10px;
+}
+
+#hub .content .body, #story .content .body {
+  letter-spacing:0.35px;
+  font-size:12px;
+  width:calc(100vw - 40px);
+  box-sizing:border-box;
+  margin:10px auto 20px;
+  clear:both
+}
+
+#hub .content .body:last-child  {
+  margin:10px auto 100px;
+}
+
+#story .content .body:last-child  {
+  margin:10px auto 50px;
+}
+
+.hub_item {
+  position: relative;
+}
+
+.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-left {
+  border:1px solid black;
+  background:rgba(255,255,255,1);
+  background-image:url(../img/left-arrow.png);
+  background-size:5px 10px;
+  background-repeat:no-repeat;
+  background-position:center;
+  width:15px;
+  height:30px;
+  top:26vh;
+  content:'';
+  transform:translateY(-50%);
+  transform-origin:top right;
+  left:20px;
+  font-size:18px;
+  padding:3px 3px 3px 1px;
+  z-index:999;
+  position:absolute;
+  display:block;
+}
+
+.gallery-right {
+  border:1px solid black;
+  background:rgba(255,255,255,1);
+  background-image:url(../img/right-arrow.png);
+  background-size:5px 10px;
+  background-repeat:no-repeat;
+  background-position:center;
+  width:15px;
+  height:30px;
+  top:26vh;
+  content:'';
+  transform:translateY(-50%);
+  transform-origin:top right;
+  right:20px;
+  font-size:18px;
+  padding:3px 1px 3px 3px;
+  z-index:999;
+  position:absolute;
+  display:block;
+}
+
+/* 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
+}
+
+.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;
+}
+
+
+.archive h2 {
+  font-size: 25px;
+  font-weight: normal;
+}
+.archive h2 b {
+  font-size: 28px;
+}
+.archive .body {
+  font-size: 14px;
+  line-height: 1.2em;
+  font-weight: 100;
+}
+
+#archive .heading {
+  position: absolute;
+  top: 0; left: 0;
+  width: 100%;
+  pointer-events: none;
+}
+#archive .menu .items,
+#archive .row .image,
+#archive .row .text {
+  position: absolute;
+  top: 50%; left: 50%;
+  transform-origin: 50% 50%;
+  transform: translateZ(0) translateX(-50%) translateY(-50%);
+}
+
+#archive .menu .items {
+  border-top: 1px solid transparent;
+}
+
+#archive.menu .menu {
+  opacity: 1;
+  pointer-events: auto;
+}
+#archive .menu {
+  background: rgba(255,255,255,0.8);
+  position: absolute;
+  top: 0; left: 0;
+  height: 100%;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s;
+}
+#archive .menu .items {
+  width: 100%;
+}
+#archive .menu .item:first-of-type {
+  border-top: 1px solid black;
+}
+#archive .menu .item {
+  width: 100%;
+  text-align: center;
+  border-bottom: 1px solid black;
+  background: white;
+  padding:12px 0;
+  font-size:14px;
+  letter-spacing:0.7px
+}
+
+#archive .scroll {
+  top: 0; left: 0;
+  height: 100%;
+}
+#archive .row:first-of-type {
+  margin-top: 7em;
+}
+#archive .row:last-of-type {
+  margin-bottom: 10em;
+}
+#archive .row {
+  position: relative;
+  min-height: 80vh;
+  -webkit-perspective: 500px;
+  perspective: 500px;
+  margin-bottom: 5em;
+}
+#archive .row .image {
+  width: 100%; height: 100%;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center center;
+}
+#archive .row.loading .image {
+  background-repeat: no-repeat;
+  background-size: auto auto;
+  background-position: center center;
+  background-image: url('../img/spinner.gif') !important;
+}
+#archive .row .text {
+  width: 80%;
+}
+
+.gallery-video-post {
+position:relative;
+}
+
+.gallery-video-post .play {
+width:60px;
+height:60px;
+border-radius:100px;
+background:white;
+box-shadow:0px 0px 2px #000;
+position:absolute;
+transform:translateY(-50%) translateX(-50%);
+top:50%;
+left:50%;
+}
+
+.gallery-video-post .play:before {
+content:'';
+	width: 0; 
+	height: 0; 
+	border-top: 8px solid transparent;
+	border-bottom: 8px solid transparent;
+	border-left: 8px solid black;
+  position:absolute;
+  top:50%;
+  left:50%;
+  transform:translateY(-50%) translateX(-50%);
+}
+