1 files changed, 63 insertions, 34 deletions

diff --git a/StoneIsland/platforms/ios/www/css/blogs.css b/StoneIsland/platforms/ios/www/css/blogs.css
index bf5ab68f..2d4a52c3 100755
--- a/StoneIsland/platforms/ios/www/css/blogs.css
+++ b/StoneIsland/platforms/ios/www/css/blogs.css
@@ -6,17 +6,22 @@
   margin: 15px 0 0;
   text-align: center;
   text-transform:uppercase;
+  display:flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
 }
 #story .links li {
-  padding: 10px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 48px;
+  padding: 0 8px;
   list-style-type: none;
-  display: inline-block;
-}
-#story .links li:before {
-  content: ' | ',
-}
-#story .links li:first-child:before {
-  content: '',
+  font-size: 1rem;
+  border: 1px solid black;
+  margin: 5px;
 }
 #story .links li.active {
   font-weight: bold;
@@ -57,7 +62,7 @@ animation: mfadein 0.6s;
 
 #hub .content .body, #story .content .body {
   letter-spacing:0.35px;
-  font-size:12px;
+  font-size: 1rem;
   width:calc(100vw - 40px);
   box-sizing:border-box;
   margin:10px auto 20px;
@@ -65,7 +70,7 @@ animation: mfadein 0.6s;
 }
 
 #hub .content .body:last-child  {
-  margin:10px auto 100px;
+  margin:20px auto 100px;
 }
 
 #story .content .body:last-child  {
@@ -85,14 +90,14 @@ animation: mfadein 0.6s;
 .content-header .title, .content-header .subtitle {
   display:block;
   font-weight:bold;
-  font-size:14px;
+  font-size: 1rem;
   text-transform:uppercase
 }
 
 .content-header .title {
   margin:0;
   padding:0;
-  line-height:13px;
+  line-height:1.4em;
 }
 
 .content-header .subtitle {
@@ -101,12 +106,17 @@ animation: mfadein 0.6s;
 
 .content-share {
   border:1px solid black;
-  padding:4px 8px 2px;
+  padding: 0 12px;
+  height: 48px;
+  font-size: 1rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   float:right
 }
 
 .content-header span.date, .content-header span.store {
-  font-size:10px;
+  font-size: 1rem;
 }
 
 /* NOTE: optional arrows */
@@ -118,19 +128,18 @@ animation: mfadein 0.6s;
   background-size:5px 10px;
   background-repeat:no-repeat;
   background-position:center;
-  width:15px;
-  height:30px;
+  width:24px;
+  height:48px;
   top:26vh;
   content:'';
   transform:translateY(-50%);
   transform-origin:top right;
   left:20px;
-  font-size:18px;
+  font-size: 1.125rem;
   padding:3px 3px 3px 1px;
   z-index:2;
   position:absolute;
   display:block;
-  animation: gallery-fade 4s forwards;
 }
 .gallery-right {
   border:1px solid black;
@@ -139,19 +148,18 @@ animation: mfadein 0.6s;
   background-size:5px 10px;
   background-repeat:no-repeat;
   background-position:center;
-  width:15px;
-  height:30px;
+  width:24px;
+  height:48px;
   top:26vh;
   content:'';
   transform:translateY(-50%);
   transform-origin:top right;
   right:20px;
-  font-size:18px;
+  font-size: 1.125rem;
   padding:3px 1px 3px 3px;
   z-index:2;
   position:absolute;
   display:block;
-  animation: gallery-fade 4s forwards;
 }
 
 @-webkit-keyframes gallery-fade {
@@ -183,7 +191,7 @@ animation: mfadein 0.6s;
   transform:scale(1,.5) translateY(-50%);
   transform-origin:bottom right;
   content:'\25BC';
-  font-size:17px;
+  font-size: 1.063rem;
   padding:9px 11px;
   z-index:999;
   position:absolute;
@@ -205,11 +213,11 @@ ul.links {
 }
 
 .archive h1 {
-  font-size:26px;
+  font-size: 1.625rem;
   border-bottom:0;
-  margin-top:8px;
+  margin-top: 8px;
   padding-bottom:0;
-  line-height:24px;
+  line-height: 1;
 }
 
 .archive .subtitle {
@@ -220,20 +228,20 @@ ul.links {
   margin:0 0 12px;
   padding:0;
   font-weight:bold;
-  font-size:14px;
+  font-size: 1rem;
 }
 
 
 .archive h2 {
-  font-size: 25px;
+  font-size: 1.563rem;
   font-weight: normal;
 }
 .archive h2 b {
-  font-size: 28px;
+  font-size: 1.75rem;
 }
 .archive .body {
-  font-size: 14px;
-  line-height: 1.2em;
+  font-size: 0.875rem;
+  line-height: 1.4rem;
   font-weight: 100;
 }
 
@@ -252,6 +260,13 @@ ul.links {
   transform: translateZ(0) translateX(-50%) translateY(-50%);
 }
 
+.accessible #archive .row .image,
+.accessible #archive .row .text {
+  position: relative;
+  top: auto; left: auto;
+  transform: translateZ(0);
+}
+
 #archive .menu .items {
   border-top: 1px solid transparent;
 }
@@ -278,11 +293,14 @@ ul.links {
 }
 #archive .menu .item {
   width: 100%;
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   border-bottom: 1px solid black;
   background: white;
-  padding:12px 0;
-  font-size:14px;
+  padding:0;
+  height: 48px;
+  font-size: 1rem;
   letter-spacing:0.7px
 }
 
@@ -318,6 +336,17 @@ ul.links {
 #archive .row .text {
   width: 80%;
 }
+.accessible #archive .row .image {
+  display: block;
+  height: 50vh;
+  opacity: 1 !important;
+}
+.accessible #archive .row .text {
+  display: block;
+  margin: 0 auto;
+  opacity: 1 !important;
+  width: 90%;
+}
 
 .gallery-video-post {
   position:relative;