css: fix bootstrap to use '.sr-only'

diff --git a/src/newslash_web/css/bootstrap.less b/src/newslash_web/css/bootstrap.less
index 02a1389..c3fa048 100644 (file)
--- a/src/newslash_web/css/bootstrap.less
+++ b/src/newslash_web/css/bootstrap.less
@@ -19,10 +19,11 @@
 
 // Core CSS
 // @import "bootstrap/scaffolding.less";
+@import "scaffolding-compat.less";
 
 // import from bootstrap/scaffolding.less
 // Reset the box-sizing
-//
+
 // Heads up! This reset may cause conflicts with some third-party widgets.
 // For recommendations on resolving such conflicts, see
 // http://getbootstrap.com/getting-started/#third-box-sizing

diff --git a/src/newslash_web/css/scaffolding-compat.less b/src/newslash_web/css/scaffolding-compat.less
new file mode 100644 (file)
index 0000000..35dcce7
--- /dev/null
+++ b/src/newslash_web/css/scaffolding-compat.less
@@ -0,0 +1,14 @@
+// Only display content to screen readers
+//
+// See: http://a11yproject.com/posts/how-to-hide-content
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0,0,0,0);
+  border: 0;
+}