🚀 Release 1.3.1

fastsitephp · Feb 27, 2020 · 7c678f5 · 7c678f5
1 parent ad4e330
commit 7c678f5
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 FastSitePHP uses [Semantic Versioning](https://docs.npmjs.com/about-semantic-versioning).
 
+## 1.3.1 (February 27, 2020)
+
+* Added `Vary` Response Header with `Accept-Language` on the default route
+* Improved Layout for Mobile Nav Menu Items
+* Fix Mobile Nav Menu to appear on IE 11 for Narrow Layouts
+
 ## 1.3.0 (February 27, 2020)
 
 * Added Mobile Menu

diff --git a/app/app.php b/app/app.php
@@ -8,6 +8,7 @@
 // ------------------------------------------------------------------
 
 use FastSitePHP\Lang\I18N;
+use FastSitePHP\Web\Response;
 
 // --------------------------------------------------------------------------------------
 // Site Configuration
@@ -58,9 +59,16 @@
  * Unlike JavaScript PHP functions do not have access to variables in the
  * parent scope. The [use] keyword as shown below can be used to pass
  * variables from the parent scope.
+ * 
+ * The response header [Vary: Accept-Language] is used for Content
+ * negotiation to let bots know that the content will change based
+ * on language. For example this applies to Googlebot and Bingbot.
  */
 $app->get('/', function() use ($app) {
-    $app->redirect($app->rootUrl() . I18N::getUserDefaultLang() . '/');
+    $res = new Response();
+    return $res
+        ->vary('Accept-Language')
+        ->redirect($app->rootUrl() . I18N::getUserDefaultLang() . '/');
 
     // If your server does not support `index.php` as a fallback resource but
     // still uses it as the default page you can then use the following:
@@ -69,7 +77,10 @@
     if (stripos($root_url, 'index.php/') === false) {
         $root_url .= 'index.php/';
     }
-    $app->redirect($root_url . I18N::getUserDefaultLang() . '/');
+    $res = new Response();
+    return $res
+        ->vary('Accept-Language')
+        ->redirect($root_url . I18N::getUserDefaultLang() . '/');
     */
 });
 

diff --git a/public/css/site.css b/public/css/site.css
@@ -42,7 +42,11 @@ body > main {
     --info-color: rgb(42, 75, 124);
 }
 
-/* Use fallback colors for key page elements for IE */
+/*
+    Use fallback colors for key page elements for IE and make minor adjustments as needed.
+    This does not make IE look exactly like modern browsers but it makes it good enough
+    to use the site.
+*/
 @media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
     header,
     footer,
@@ -53,10 +57,25 @@ body > main {
     a:visited { color:hsla(204, 21%, 23%, 1); }
 
     .nav-item.active .nav-link,
-    .jumbotron { background-color:hsla(204, 21%, 23%, 1); }
+    .jumbotron,
+    .mobile-menu ul li.active a { background-color:hsla(204, 21%, 23%, 1); }
 
-    .nav-item:not(.active):hover .nav-link { background-color:hsla(204, 21%, 83%, 1); color:rgb(87, 114, 132); }
+    .nav-item:not(.active):hover .nav-link,
+    .mobile-menu ul li:not(.active):hover a { background-color:hsla(204, 21%, 83%, 1); color:rgb(87, 114, 132); }
     .nav-item.active:hover .nav-link { color:rgb(87, 114, 132); }
+
+    .mobile-nav .site-title a,
+    .mobile-nav .open-menu a {
+        background-color: hsla(204, 21%, 93%, 1);
+        background-image: linear-gradient(0deg, #fff 0%, hsla(204, 21%, 93%, 1) 100%);
+    }
+    .mobile-nav .site-title a:hover,
+    .mobile-nav .open-menu a:hover {
+        background-color: hsla(204, 21%, 83%, 1);
+        background-image: linear-gradient(0deg, hsla(204, 21%, 83%, 1) 0%, #fff 100%);
+    }
+
+    .mobile-menu { left: 10px; }
 }
 
 body {
@@ -119,7 +138,7 @@ section { background-color: white; }
 }
 .mobile-menu ul li { width:calc(50% - 20px); margin:10px; max-width:200px; }
 .mobile-menu ul.i18n-menu li { width:100%; text-align:center; max-width:400px; }
-.mobile-menu ul li a { text-decoration:none; font-weight:bold; padding:10px; display:block; }
+.mobile-menu ul li a { text-decoration:none; font-weight:bold; padding:10px 20px; display:block; }
 .mobile-menu ul li.active a {
     background-color: var(--dark-color);
     border-radius:2px;
@@ -137,7 +156,7 @@ section { background-color: white; }
 nav.navbar { text-align:center; }
 .navbar-nav { margin:auto; font-weight:bold; }
 .navbar-nav .nav-link { padding:.5em 2em; color:white; margin:auto 5px; }
-.nav-item.active .nav-link { background-color:var(--dark-color); box-shadow:0 0 1px 2px rgba(0,0,0,.5); }
+.nav-item.active .nav-link { background-color:var(--dark-color); box-shadow:0 0 1px 2px rgba(0,0,0,.5); padding:10px 20px; }
 .nav-item:not(.active):hover .nav-link { background-color:var(--light-color); color:var(--main-color); }
 .nav-item.active:hover .nav-link { color:var(--light-color); }
 .nav.flex-column .nav-item a {