Bug #2, Fix make CSS styles responsive; prep v1.0-beta.2 [iet:8994834]

nfreear · May 15, 2017 · c899c48 · c899c48
1 parent ea98f4b
commit c899c48
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git a/README.md b/README.md
@@ -27,7 +27,8 @@ Note ~ this is not an official widget!
 * Basic internationalization,
 * Basic automated testing in place (Travis-CI),
 * Accessible ~ _let me know if you spot a problem!_
-* Compatible with all modern browsers, and MSIE 10-11 ([MSIE 9 is in-progress][ie])
+* Responsive design,
+* Compatible with [all modern browsers, and MSIE 9-11][ie],
 * CDN courtesy of [RawGit][] (thank you!) - with HTTPS/SSL.
 
 [Wishlist][].
@@ -48,7 +49,7 @@ Via [RawGit][] - production / CDN:
 ```html
 <div id="id-gaad"></div>
 
-<script src="https://cdn.rawgit.com/nfreear/gaad-widget/1.0-rc.1/build/GAAD.widget.js"></script>
+<script src="https://cdn.rawgit.com/nfreear/gaad-widget/1.0-beta.2/build/GAAD.widget.js"></script>
 ```
 
 Local hosting:
@@ -105,8 +106,8 @@ Twitter: [@nfreear][].
 [@nfreear]: https://twitter.com/nfreear
 [gaad-widget]: https://github.com/nfreear/gaad-widget
 [gaad-image]: https://github.com/nfreear/gaad-widget/raw/master/style/GAAD.widget.png
-[wishlist]: https://github.com/nfreear/gaad-widget/issues/2#!-Wishlist
-[ie]: https://github.com/nfreear/gaad-widget/issues/3#!-MSIE-9-11
+[wishlist]: https://github.com/nfreear/gaad-widget/issues/2#!-Wishlist "Wishlist"
+[ie]: https://github.com/nfreear/gaad-widget/issues/3#!-MSIE-9-11 "Browser compatibility"
 [gist]: https://gist.github.com/nfreear/eef4be96147cb5c1182cbc9e595f2833
 [Datejs]: https://github.com/datejs/Datejs
 [RawGit]: https://rawgit.com/

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gaad-widget",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-beta.2",
   "description": "Display a banner-link to promote Global Accessibility Awareness Day (GAAD). Display the banner for a period before and after the day.",
   "author": "Nick Freear {@nfreear}",
   "license": "MIT",
@@ -12,13 +12,14 @@
     "datejs": "https://github.com/datejs/Datejs#8164739566"
   },
   "devDependencies": {
+    "csslint": "^1.0.5",
     "semistandard": "^11.0.0",
     "uglifyjs": "^2.4.10"
   },
   "scripts": {
     "build": "node_modules/.bin/uglifyjs src/c*.js node_modules/Datejs/build/date.js src/w*.js --comments=/^[!*]/ -bo build/GAAD.widget.js",
     "build-min": "node_modules/.bin/uglifyjs build/*.widget.js --comments=/^[!*]/ -mo build/GAAD.widget.min.js",
-    "test": "node_modules/.bin/semistandard"
+    "test": "node_modules/.bin/semistandard; node_modules/.bin/csslint style"
   },
   "semistandard": {
     "ignore": "build/"

diff --git a/style/GAAD.widget.css b/style/GAAD.widget.css
@@ -7,16 +7,31 @@
 .gaad-widget-js {
   background: #00385E;
   border: 3px solid #f8c958;
-  border-radius: 6px;
+  border-radius: 7px;
   color: #fff;
   display: block;
-  font: 1.2em 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font: normal 1.15em 'Helvetica Neue', Helvetica, Arial, sans-serif;
   line-height: 1.6em;
-  margin: 1em;
-  padding: 20px;
+  margin: 0 0 1.3em;
+  padding: 1em;
   text-align: center;
 }
+
 .gaad-widget-js a {
   color: #fff;
   text-decoration: underline;
 }
+
+.gaad-widget-js a:hover,
+.gaad-widget-js a:focus {
+  color: #eee;
+}
+
+@media (max-width: 767px) {
+
+  .gaad-widget-js {
+    border-width: 2px;
+    font-size: 1.05em;
+    padding: 0.6em;
+  }
+}