4 files changed, 13 insertions, 4 deletions
diff --git a/alabaster-lite/css/alabaster.css b/alabaster-lite/css/alabaster.css
index ddc1e15..9c7c426 100644
--- a/alabaster-lite/css/alabaster.css
+++ b/alabaster-lite/css/alabaster.css
@@ -388,7 +388,7 @@ a.footnote-reference:hover {
     border-bottom: 1px solid #6D4100;
 }
 
-@media screen and (max-width: 870px) {
+@media screen and (max-width: 900px) {
     div.sphinxsidebar {
       display: none;
     }
@@ -440,7 +440,7 @@ a.footnote-reference:hover {
     }
 }
 
-@media screen and (max-width: 870px) {
+@media screen and (max-width: 900px) {
     body {
         margin: 0;
         padding: 20px 30px;
diff --git a/alabaster-lite/css/fkfd.css b/alabaster-lite/css/fkfd.css
index eaedf26..4690e06 100644
--- a/alabaster-lite/css/fkfd.css
+++ b/alabaster-lite/css/fkfd.css
@@ -10,6 +10,15 @@ body {
   background-repeat: no-repeat;
 }
 
+@media screen and (max-width: 900px) {
+  body {
+    margin-top: 20px;
+    background-image: url("../img/spectrum-horiz.png");
+    background-position: top;
+    background-repeat: repeat-x;
+  }
+}
+
 div.body {
   color: #3E4349;
 }
@@ -162,7 +171,7 @@ div.footer a {
   }
 }
 
-@media screen and (max-width: 870px) {
+@media screen and (max-width: 900px) {
   div.sphinxsidebar {
     float: none;
     width: 100%;
@@ -198,7 +207,7 @@ div.footer a {
   grid-template-columns: 180px;
 }
 
-@media screen and (max-width: 870px) {
+@media screen and (max-width: 720px) {
   .category-block-container {
     /* one column only on narrow screens */
     grid-template-columns: 320px;
diff --git a/docs/img/spectrum-horiz.png b/docs/img/spectrum-horiz.png
new file mode 100644
index 0000000..77f88e0
--- /dev/null
+++ b/docs/img/spectrum-horiz.png
diff --git a/docs/img/spectrum.png b/docs/img/spectrum.png
index 712dfc2..555e189 100644
--- a/docs/img/spectrum.png
+++ b/docs/img/spectrum.png