Add browser compatibility page and implement IE10+ support.

kelyvin · Mar 7, 2016 · ff6698a · ff6698a
1 parent 64f20b8
commit ff6698a
Show file tree

Hide file tree

Showing 11 changed files with 89 additions and 16 deletions.
diff --git a/assets/css/caffeine-theme.css b/assets/css/caffeine-theme.css
diff --git a/assets/img/backgrounds/browser-compatibility.jpg b/assets/img/backgrounds/browser-compatibility.jpg
diff --git a/assets/js/caffeine-theme.js b/assets/js/caffeine-theme.js
diff --git a/assets/js/src/__init.js b/assets/js/src/__init.js
@@ -5,7 +5,7 @@ $(function() {
         openHash = "#open";
 
     window.CaffeineTheme = CaffeineTheme = {
-        version: "2.2.2",
+        version: "2.3.0",
         search: {
             container: function() {
                 return $("#results");
@@ -27,7 +27,12 @@ $(function() {
             return document.body;
         })(),
         is: function(property, value) {
-            return this.app.dataset[property] === value;
+            if (this.app.dataset) {
+                return this.app.dataset[property] === value;
+            } else {
+                return this.app.getAttribute("data-" + property) === value;
+            }
+
         },
         isOpen: function () {
             return location.hash === openHash;

diff --git a/assets/js/src/main.js b/assets/js/src/main.js
@@ -6,8 +6,16 @@ $(function() {
         el;
 
     el = CaffeineTheme.app;
-    el.dataset.page = CaffeineTheme.context();
-    el.dataset.device = CaffeineTheme.device();
+
+    if (el.dataset) {
+        el.dataset.page = CaffeineTheme.context();
+        el.dataset.device = CaffeineTheme.device();
+    } else {
+        $(el)
+            .attr("data-page", CaffeineTheme.context())
+            .attr("data-device", CaffeineTheme.device());
+    }
+
     CaffeineTheme.readTime();
 
     if (window.profile_title) {
@@ -49,6 +57,8 @@ $(function() {
             // Sets up scroll reveal effects
             if (window.ScrollReveal && $(cardName).length > 0) {
                 window.sr = window.ScrollReveal().reveal(cardName);
+            } else {
+                $posts.css("visibility", "visible");
             }
         }
     });

diff --git a/assets/scss/components/_media-queries.scss b/assets/scss/components/_media-queries.scss
@@ -178,6 +178,14 @@
             }
         }
     }
+
+    body {
+        .page-browser-compatibility {
+            .error-body {
+                margin-top: 20px;
+            }
+        }
+    }
 }
 
 // ------------------------------

diff --git a/assets/scss/components/_page-error.scss b/assets/scss/components/_page-error.scss
@@ -1,18 +1,32 @@
 body {
+    &.page-browser-compatibility,
     &.page-error {
         width: 100%;
         height: 100%;
         font-size: 16px;
         font-weight: normal;
         line-height: 25px;
         text-align: center;
-        background: url("/assets/img/backgrounds/404_error_background.jpg") center/cover no-repeat;
+    }
 
+    &.page-error {
+        background: url("/assets/img/backgrounds/404_error_background.jpg") center/cover no-repeat;
         > article {
             @include center-absolute;
         }
     }
 
+    &.page-browser-compatibility {
+        @include background-filter;
+        background: url("/assets/img/backgrounds/browser-compatibility.jpg") center/cover no-repeat;
+
+        .error-body {
+            text-align: left;
+            margin: 100px 20px 20px;
+            padding: 20px;
+            background-color: rgba(0,0,0,.2);
+        }
+    }
 }
 
 .error-body {

diff --git a/assets/scss/modules/_effects.scss b/assets/scss/modules/_effects.scss
@@ -29,7 +29,6 @@
     vertical-align: middle;
     transform: translateZ(0);
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-    backface-visibility: hidden;
     -moz-osx-font-smoothing: grayscale;
     transition-duration: 0.3s;
     transition-property: transform;
@@ -48,8 +47,6 @@
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
   box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
   -moz-osx-font-smoothing: grayscale;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
@@ -76,8 +73,6 @@
     transform: translateZ(0);
     vertical-align: middle;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
 }
 
 .hvr-grow-rotate:hover,
@@ -183,8 +178,6 @@
     transform: translateZ(0);
     vertical-align: middle;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
 }
 
 .hvr-buzz-out:hover,

diff --git a/default.hbs b/default.hbs
@@ -1,6 +1,11 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <!--[if IE 9]>
+        <script type="text/javascript">
+            window.location = "/browser-compatibility";
+        </script>
+        <![endif]-->
         <title>{{meta_title}}</title>
         {{> meta}}
         <link rel="stylesheet" type="text/css" href="{{asset "css/caffeine-theme.css"}}" />

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "caffeine-theme",
   "description": "Minimalist and Elegant theme for Ghost",
   "homepage": "https://github.com/kelyvin/caffeine-theme",
-  "version": "2.2.2",
+  "version": "2.3.0",
   "author": {
     "name": "Kelyvin",
     "url": "https://github.com/kelyvin"

diff --git a/page-browser-compatibility.hbs b/page-browser-compatibility.hbs
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <title>Browser Compatibility Error</title>
+        {{> meta}}
+        <link rel="stylesheet" type="text/css" href="{{asset "css/caffeine-theme.css"}}" />
+        {{ghost_head}}
+    </head>
+  <body class="page-browser-compatibility">
+    <article>
+        <section>
+            <div class="error-body">
+                <h1>
+                    Looks like your coffee's gone stale. It's time for a new cup!
+                </h1>
+                <hr class="divider short">
+                <h2>
+                     Caffeine Coding runs on the latest Chrome, Firefox, Safari, and IE10+. Your browser is outdated and it may be time to upgrade.
+                </h2>
+                <div class="call-to-action-container">
+                    <nav class="navigation left">
+                        <ul class="links">
+                            <li class="nav-blog expanded">
+                                <a href="http://browsehappy.com/" title="Browse Happy">Click here to find out more!</a>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+            </div>
+        </section>
+    </article>
+    {{ghost_foot}}
+    <script type="text/javascript" src="{{asset "js/caffeine-theme.js"}}"></script>
+    {{> google-analytics}}
+  </body>
+</html>