Update readme image with brighter colours

Because of the increase in font size, we are now able to use a lower contrast of 3:1 to follow WCAG 2.1 AA. The draft colour reverts to the previous, the live colour is a very slight change.

css/betternavigator.css

@@ -1 +1 @@
-.svg-images--bn-icon--view,.bn-icon-view,.svg-images--bn-icon--user,.bn-icon-user,.svg-images--bn-icon--tools,.bn-icon-tools,.svg-images--bn-icon--tick,.bn-icon-tick,.svg-images--bn-icon--info,.bn-icon-info,.svg-images--bn-icon--flush,.bn-icon-flush,.svg-images--bn-icon--edit,.bn-icon-edit,.svg-images--bn-icon--devmode,.svg-images--bn-icon--db,.bn-icon-db,.svg-images--bn-icon--cog,.bn-icon-cog,.svg-images--bn-icon--close,.bn-icon-close{background:url("svg/sprite.css-ce8a5080.svg") no-repeat}.svg-images--bn-icon--close,.bn-icon-close{background-position:0 0}.svg-images--bn-icon--close-dims,.bn-icon-close{width:16px;height:16px}.svg-images--bn-icon--cog,.bn-icon-cog{background-position:33.3333333333% 0}.svg-images--bn-icon--cog-dims,.bn-icon-cog{width:16px;height:16px}.svg-images--bn-icon--db,.bn-icon-db{background-position:0 50%}.svg-images--bn-icon--db-dims,.bn-icon-db{width:16px;height:16px}.svg-images--bn-icon--devmode{background-position:33.3333333333% 50%}.svg-images--bn-icon--devmode-dims{width:16px;height:16px}.svg-images--bn-icon--edit,.bn-icon-edit{background-position:66.6666666667% 0}.svg-images--bn-icon--edit-dims,.bn-icon-edit{width:16px;height:16px}.svg-images--bn-icon--flush,.bn-icon-flush{background-position:66.6666666667% 50%}.svg-images--bn-icon--flush-dims,.bn-icon-flush{width:16px;height:16px}.svg-images--bn-icon--info,.bn-icon-info{background-position:0 100%}.svg-images--bn-icon--info-dims,.bn-icon-info{width:16px;height:16px}.svg-images--bn-icon--tick,.bn-icon-tick{background-position:33.3333333333% 100%}.svg-images--bn-icon--tick-dims,.bn-icon-tick{width:16px;height:16px}.svg-images--bn-icon--tools,.bn-icon-tools{background-position:66.6666666667% 100%}.svg-images--bn-icon--tools-dims,.bn-icon-tools{width:16px;height:16px}.svg-images--bn-icon--user,.bn-icon-user{background-position:100% 0}.svg-images--bn-icon--user-dims,.bn-icon-user{width:16px;height:16px}.svg-images--bn-icon--view,.bn-icon-view{background-position:100% 50%}.svg-images--bn-icon--view-dims,.bn-icon-view{width:16px;height:16px}span[class^=bn-icon],span[class*=" bn-icon"]{display:inline-block}.bn-icon-close{transform:scale(0.8);margin:-3px -6px 0 0}.bn-icon-db{transform:scale(0.8)}.bn-icon-edit{transform:scale(0.9)}.bn-icon-flush{transform:scale(0.8)}.bn-icon-info{transform:scale(0.8)}.bn-icon-tick{transform:scale(0.85)}.bn-icon-tools{transform:scale(0.9)}.bn-icon-view{transform:scale(0.95)}#BetterNavigator{position:fixed;z-index:99999;max-height:100%;overflow:auto;font-family:Helvetica,Arial,sans-serif;font-size:12px;line-height:16px;text-align:left}#BetterNavigator a{text-decoration:none}#BetterNavigator form{display:none}#BetterNavigator.collapsed{box-shadow:0px 0px 3px rgba(0,0,0,.5)}#BetterNavigator.collapsed.translucent{opacity:.5;transition:opacity 250ms}#BetterNavigator.collapsed.translucent:hover{opacity:1}#BetterNavigator.collapsed #BetterNavigatorStatus{border-width:1px;padding:10px 15px 8px 35px}#BetterNavigator.collapsed #BetterNavigatorContent{display:none}#BetterNavigator.right-top{right:0;top:0}#BetterNavigator.right-top.collapsed{transform-origin:right top;transform:rotate(90deg) translate(100%, 0)}#BetterNavigator.right-bottom{right:0;bottom:0}#BetterNavigator.right-bottom.collapsed{transform-origin:right bottom;transform:rotate(90deg) translate(0, 100%)}#BetterNavigator.left-bottom{left:0;bottom:0}#BetterNavigator.left-bottom.collapsed{transform-origin:left bottom;transform:rotate(90deg) translate(-100%, 0)}#BetterNavigator.left-top{left:0;top:0}#BetterNavigator.left-top.collapsed{transform-origin:left top;transform:rotate(90deg) translate(0, -100%)}#BetterNavigatorStatus{color:#fff;background:#6f6f6f;border:1px solid #646464;border-width:0;text-transform:uppercase;cursor:pointer;padding:10px 15px 8px;font-weight:bold;transition:100ms background-color ease-in-out;font-size:14px;margin:0}#BetterNavigatorStatus #BetterNavigatorStatusButton{appearance:none;width:100%;height:38px;position:absolute;top:0;left:0;border:0;background:rgba(0,0,0,0);text-align:left;padding:2px 14px 0}#BetterNavigatorStatus .bn-icon-cog{margin:-4px 8px -2px -4px}#BetterNavigatorStatus .bn-icon-close{float:right}#BetterNavigatorStatus .bn-icon-cog,#BetterNavigatorStatus .bn-icon-close{opacity:.7}#BetterNavigatorStatus:hover,#BetterNavigatorStatus:focus-visible{background:dimgray}#BetterNavigatorStatus:hover .bn-icon-cog,#BetterNavigatorStatus:hover .bn-icon-close,#BetterNavigatorStatus:focus-visible .bn-icon-cog,#BetterNavigatorStatus:focus-visible .bn-icon-close{opacity:1}#BetterNavigatorStatus.Live{background:#4a831c;border-color:#437619}#BetterNavigatorStatus.Live:hover{background:#467c1b}#BetterNavigatorStatus.Draft{background:#c0462b;border-color:#ad3f27}#BetterNavigatorStatus.Draft:hover{background:#b64329}#BetterNavigatorContent{padding:6px;color:#595d61;background:#cfd8de;border:1px solid #bac2c8;border-width:0 0 1px 1px;min-width:140px;transition:100ms background-color ease-in-out}#BetterNavigatorContent .bn-heading{text-transform:uppercase;font-size:11px;margin:8px 0 4px 0;font-weight:normal}#BetterNavigatorContent span[class^=bn-icon],#BetterNavigatorContent span[class*=" bn-icon"]{margin:-2px 5px -3px -2px}#BetterNavigatorContent a,#BetterNavigatorContent .bn-disabled{display:block;background:#eceff2;color:#313639;font-family:Helvetica,Arial,sans-serif;font-size:12px;border-radius:5px;border-bottom:1px solid #a3aaaf;margin:0 0 4px 0;padding:6px 10px 5px 10px;line-height:16px;font-weight:bold}#BetterNavigatorContent a .light,#BetterNavigatorContent .bn-disabled .light{font-weight:normal}#BetterNavigatorContent a:focus-visible,#BetterNavigatorContent a:hover{background:#fff;color:#000}#BetterNavigatorContent a:active{background:#d4d7da;border-color:#acb3b7}#BetterNavigatorContent .bn-disabled{background:#c6d3da;color:#51565a;cursor:default;pointer-events:none}#BetterNavigatorContent .bn-links{margin:0;padding:0;list-style-type:none}#BetterNavigatorContent .bn-links>:last-child{margin-bottom:0}body>p.message{text-align:left;background:#fff;color:#222;padding:10px 20px;margin:0;border-bottom:1px solid #ccc;border-left:5px solid #1d8aff}/*# sourceMappingURL=betternavigator.css.map */
+.svg-images--bn-icon--view,.bn-icon-view,.svg-images--bn-icon--user,.bn-icon-user,.svg-images--bn-icon--tools,.bn-icon-tools,.svg-images--bn-icon--tick,.bn-icon-tick,.svg-images--bn-icon--info,.bn-icon-info,.svg-images--bn-icon--flush,.bn-icon-flush,.svg-images--bn-icon--edit,.bn-icon-edit,.svg-images--bn-icon--devmode,.svg-images--bn-icon--db,.bn-icon-db,.svg-images--bn-icon--cog,.bn-icon-cog,.svg-images--bn-icon--close,.bn-icon-close{background:url("svg/sprite.css-982681f2.svg") no-repeat}.svg-images--bn-icon--close,.bn-icon-close{background-position:0 0}.svg-images--bn-icon--close-dims,.bn-icon-close{width:16px;height:16px}.svg-images--bn-icon--cog,.bn-icon-cog{background-position:33.3333333333% 0}.svg-images--bn-icon--cog-dims,.bn-icon-cog{width:16px;height:16px}.svg-images--bn-icon--db,.bn-icon-db{background-position:0 50%}.svg-images--bn-icon--db-dims,.bn-icon-db{width:16px;height:16px}.svg-images--bn-icon--devmode{background-position:33.3333333333% 50%}.svg-images--bn-icon--devmode-dims{width:16px;height:16px}.svg-images--bn-icon--edit,.bn-icon-edit{background-position:66.6666666667% 0}.svg-images--bn-icon--edit-dims,.bn-icon-edit{width:16px;height:16px}.svg-images--bn-icon--flush,.bn-icon-flush{background-position:66.6666666667% 50%}.svg-images--bn-icon--flush-dims,.bn-icon-flush{width:16px;height:16px}.svg-images--bn-icon--info,.bn-icon-info{background-position:0 100%}.svg-images--bn-icon--info-dims,.bn-icon-info{width:16px;height:16px}.svg-images--bn-icon--tick,.bn-icon-tick{background-position:33.3333333333% 100%}.svg-images--bn-icon--tick-dims,.bn-icon-tick{width:16px;height:16px}.svg-images--bn-icon--tools,.bn-icon-tools{background-position:66.6666666667% 100%}.svg-images--bn-icon--tools-dims,.bn-icon-tools{width:16px;height:16px}.svg-images--bn-icon--user,.bn-icon-user{background-position:100% 0}.svg-images--bn-icon--user-dims,.bn-icon-user{width:16px;height:16px}.svg-images--bn-icon--view,.bn-icon-view{background-position:100% 50%}.svg-images--bn-icon--view-dims,.bn-icon-view{width:16px;height:16px}span[class^=bn-icon],span[class*=" bn-icon"]{display:inline-block}.bn-icon-close{margin:-4px -6px 0 0;transform:scale(1.1)}.bn-icon-db{transform:scale(0.8)}.bn-icon-edit{transform:scale(0.9)}.bn-icon-flush{transform:scale(0.8)}.bn-icon-info{transform:scale(0.7)}.bn-icon-tick{transform:scale(0.7)}.bn-icon-tools{transform:scale(0.9)}.bn-icon-view{transform:scale(0.95)}#BetterNavigator{position:fixed;z-index:99999;max-height:100%;overflow:auto;font-family:Helvetica,Arial,sans-serif;font-size:12px;line-height:16px;text-align:left}#BetterNavigator a{text-decoration:none}#BetterNavigator form{display:none}#BetterNavigator.collapsed{box-shadow:0px 0px 3px rgba(0,0,0,.5)}#BetterNavigator.collapsed.translucent{opacity:.5;transition:opacity 250ms}#BetterNavigator.collapsed.translucent:hover{opacity:1}#BetterNavigator.collapsed #BetterNavigatorStatus{border-width:1px;padding:10px 15px 8px 35px}#BetterNavigator.collapsed #BetterNavigatorContent{display:none}#BetterNavigator.right-top{right:0;top:0}#BetterNavigator.right-top.collapsed{transform-origin:right top;transform:rotate(90deg) translate(100%, 0)}#BetterNavigator.right-bottom{right:0;bottom:0}#BetterNavigator.right-bottom.collapsed{transform-origin:right bottom;transform:rotate(90deg) translate(0, 100%)}#BetterNavigator.left-bottom{left:0;bottom:0}#BetterNavigator.left-bottom.collapsed{transform-origin:left bottom;transform:rotate(90deg) translate(-100%, 0)}#BetterNavigator.left-top{left:0;top:0}#BetterNavigator.left-top.collapsed{transform-origin:left top;transform:rotate(90deg) translate(0, -100%)}#BetterNavigatorStatus{display:block;color:#fff;background:#6f6f6f;border:1px solid #646464;border-width:0;text-transform:uppercase;cursor:pointer;padding:10px 15px 8px;font-weight:bold;transition:100ms background-color ease-in-out;font-size:14px;line-height:1.2;margin:0}#BetterNavigatorStatus #BetterNavigatorStatusButton{appearance:none;width:100%;height:38px;position:absolute;top:0;left:0;border:0;background:rgba(0,0,0,0);text-align:left;padding:2px 14px 0}#BetterNavigatorStatus .bn-icon-cog{margin:-4px 8px -2px -4px}#BetterNavigatorStatus .bn-icon-close{float:right}#BetterNavigatorStatus .bn-icon-cog,#BetterNavigatorStatus .bn-icon-close{opacity:.7}#BetterNavigatorStatus:hover,#BetterNavigatorStatus:focus-visible{background:dimgray}#BetterNavigatorStatus:hover .bn-icon-cog,#BetterNavigatorStatus:hover .bn-icon-close,#BetterNavigatorStatus:focus-visible .bn-icon-cog,#BetterNavigatorStatus:focus-visible .bn-icon-close{opacity:1}#BetterNavigatorStatus.Live{background:#06ad18;border-color:#059c16}#BetterNavigatorStatus.Live:hover{background:#06a417}#BetterNavigatorStatus.Draft{background:#e6674b;border-color:#cf5d44}#BetterNavigatorStatus.Draft:hover{background:#db6247}#BetterNavigatorContent{padding:6px;color:#595d61;background:#cfd8de;border:1px solid #bac2c8;border-width:0 0 1px 1px;min-width:140px;transition:100ms background-color ease-in-out}#BetterNavigatorContent .bn-heading{display:block;text-transform:uppercase;font-size:11px;line-height:1.2;color:#595d61;margin:8px 0 4px 0;padding:0;font-weight:normal}#BetterNavigatorContent span[class^=bn-icon],#BetterNavigatorContent span[class*=" bn-icon"]{margin:-2px 5px -3px -2px}#BetterNavigatorContent a,#BetterNavigatorContent .bn-disabled{display:block;background:#eceff2;color:#313639;font-family:Helvetica,Arial,sans-serif;font-size:12px;border-radius:5px;border-bottom:1px solid #a3aaaf;margin:0 0 4px 0;padding:6px 10px 5px 10px;line-height:16px;font-weight:bold}#BetterNavigatorContent a .light,#BetterNavigatorContent .bn-disabled .light{font-weight:normal}#BetterNavigatorContent a:focus-visible,#BetterNavigatorContent a:hover{background:#fff;color:#000}#BetterNavigatorContent a:active{background:#d4d7da;border-color:#acb3b7}#BetterNavigatorContent .bn-disabled{background:#c6d3da;color:#51565a;cursor:default;pointer-events:none}#BetterNavigatorContent .bn-links{display:block;margin:0;padding:0;list-style-type:none}#BetterNavigatorContent .bn-links>:last-child{margin-bottom:0}body>p.message{text-align:left;background:#fff;color:#222;padding:10px 20px;margin:0;border-bottom:1px solid #ccc;border-left:5px solid #1d8aff}/*# sourceMappingURL=betternavigator.css.map */

css/betternavigator.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/_iconsprite.scss","../scss/betternavigator.scss"],"names":[],"mappings":"AAAA,wbACI,wDAGJ,2CAEI,wBAGJ,gDACI,WACA,YAGJ,uCAEI,qCAGJ,4CACI,WACA,YAGJ,qCAEI,0BAGJ,0CACI,WACA,YAGJ,8BAEI,uCAGJ,mCACI,WACA,YAGJ,yCAEI,qCAGJ,8CACI,WACA,YAGJ,2CAEI,uCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,wCAGJ,8CACI,WACA,YAGJ,2CAEI,wCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,6BAGJ,8CACI,WACA,YCvFJ,6CAEE,qBAGF,eAGI,qBACA,qBAQJ,YAGI,qBAGJ,cAGI,qBAGJ,eAGI,qBAGJ,cAGI,qBAGJ,cAGI,sBAGJ,eAGI,qBAQJ,cAGI,sBAKJ,iBACI,eACA,cACA,gBACA,cACA,uCACA,eACA,iBACA,gBAEA,mBACI,qBAGJ,sBACI,aAKJ,2BACI,sCAEA,uCACI,WACA,yBAEA,6CACI,UAIR,kDACI,iBACA,2BAGJ,mDACI,aAIR,2BACI,QACA,MAEA,qCACI,2BACA,2CAIR,8BACI,QACA,SAEA,wCACI,8BACA,2CAIR,6BACI,OACA,SAEA,uCACI,6BACA,4CAIR,0BACI,OACA,MAEA,oCACI,0BACA,4CAOZ,uBACI,MAvKI,KAwKJ,WA5JW,QA6JX,yBACA,eACA,yBACA,eACA,sBACA,iBACA,8CACA,eACA,SAEA,oDACI,gBACA,WACA,YACA,kBACA,MACA,OACA,SACA,yBACA,gBACA,mBAGJ,oCACE,0BAGF,sCACE,YAGF,0EAEE,WAGF,kEAEI,mBAEA,4LAEE,UAIN,4BACI,WA9MI,QA+MJ,qBAEA,kCACI,mBAIR,6BACI,WAtNK,QAuNL,qBAEA,mCACI,mBAOZ,wBACI,YACA,MA3OW,QA4OX,WA3OgB,QA4OhB,yBACA,yBACA,gBACA,8CAEA,oCACI,yBACA,eACA,mBACA,mBAGJ,6FAEE,0BAGF,+DAEI,cACA,WA7PW,QA8PX,MAhQM,QAiQN,uCACA,eACA,kBACA,gCACA,iBACA,0BACA,iBACA,iBAEA,6EACI,mBAIR,wEAEI,WAtRA,KAuRA,MAxRA,KA2RJ,iCACI,mBACA,qBAGJ,qCACI,WAxRmB,QAyRnB,MA3Rc,QA4Rd,eACA,oBAGJ,kCACI,SACA,UACA,qBAEA,8CACI,gBAMZ,eACI,gBACA,gBACA,WACA,kBACA,SACA,6BACA","file":"betternavigator.css"}
+{"version":3,"sourceRoot":"","sources":["../scss/_iconsprite.scss","../scss/betternavigator.scss"],"names":[],"mappings":"AAAA,wbACI,wDAGJ,2CAEI,wBAGJ,gDACI,WACA,YAGJ,uCAEI,qCAGJ,4CACI,WACA,YAGJ,qCAEI,0BAGJ,0CACI,WACA,YAGJ,8BAEI,uCAGJ,mCACI,WACA,YAGJ,yCAEI,qCAGJ,8CACI,WACA,YAGJ,2CAEI,uCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,wCAGJ,8CACI,WACA,YAGJ,2CAEI,wCAGJ,gDACI,WACA,YAGJ,yCAEI,2BAGJ,8CACI,WACA,YAGJ,yCAEI,6BAGJ,8CACI,WACA,YCvFJ,6CAEE,qBAGF,eAGI,qBACA,qBAQJ,YAGI,qBAGJ,cAGI,qBAGJ,eAGI,qBAGJ,cAGI,qBAGJ,cAGI,qBAGJ,eAGI,qBAQJ,cAGI,sBAKJ,iBACI,eACA,cACA,gBACA,cACA,uCACA,eACA,iBACA,gBAEA,mBACI,qBAGJ,sBACI,aAKJ,2BACI,sCAEA,uCACI,WACA,yBAEA,6CACI,UAIR,kDACI,iBACA,2BAGJ,mDACI,aAIR,2BACI,QACA,MAEA,qCACI,2BACA,2CAIR,8BACI,QACA,SAEA,wCACI,8BACA,2CAIR,6BACI,OACA,SAEA,uCACI,6BACA,4CAIR,0BACI,OACA,MAEA,oCACI,0BACA,4CAOZ,uBACI,cACA,MAxKI,KAyKJ,WA7JW,QA8JX,yBACA,eACA,yBACA,eACA,sBACA,iBACA,8CACA,eACA,gBACA,SAEA,oDACI,gBACA,WACA,YACA,kBACA,MACA,OACA,SACA,yBACA,gBACA,mBAGJ,oCACE,0BAGF,sCACE,YAGF,0EAEE,WAGF,kEAEI,mBAEA,4LAEE,UAIN,4BACI,WAhNI,QAiNJ,qBAEA,kCACI,mBAIR,6BACI,WAxNK,QAyNL,qBAEA,mCACI,mBAOZ,wBACI,YACA,MA7OW,QA8OX,WA7OgB,QA8OhB,yBACA,yBACA,gBACA,8CAEA,oCACI,cACA,yBACA,eACA,gBACA,MAzPO,QA0PP,mBACA,UACA,mBAGJ,6FAEE,0BAGF,+DAEI,cACA,WAnQW,QAoQX,MAtQM,QAuQN,uCACA,eACA,kBACA,gCACA,iBACA,0BACA,iBACA,iBAEA,6EACI,mBAIR,wEAEI,WA5RA,KA6RA,MA9RA,KAiSJ,iCACI,mBACA,qBAGJ,qCACI,WA9RmB,QA+RnB,MAjSc,QAkSd,eACA,oBAGJ,kCACI,cACA,SACA,UACA,qBAEA,8CACI,gBAMZ,eACI,gBACA,gBACA,WACA,kBACA,SACA,6BACA","file":"betternavigator.css"}

css/svg/sprite.css-982681f2.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="utf-8"?><svg width="64" height="48" viewBox="0 0 64 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg width="16" height="16" fill="#FFF" viewBox="0 0 16 16" id="images--bn-icon--close" xmlns="http://www.w3.org/2000/svg"><path d="M11.478 11.879a.96.96 0 0 1-1.358 0L7.999 9.455l-2.121 2.423A.96.96 0 0 1 4.52 10.52L6.726 8 4.519 5.478A.96.96 0 0 1 5.877 4.12l2.122 2.425L10.12 4.12a.96.96 0 0 1 1.358 1.358L9.272 8l2.206 2.52a.96.96 0 0 1 0 1.358z"/></svg><svg width="16" height="16" fill="#FFF" viewBox="0 0 16 16" id="images--bn-icon--cog" x="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.59 9.535a3.053 3.053 0 0 1 1.127-4.164l-1.572-2.723a3.017 3.017 0 0 1-1.529.414A3.052 3.052 0 0 1 9.574 0H6.429a3.009 3.009 0 0 1-.406 1.535c-.839 1.454-2.706 1.948-4.17 1.106L.281 5.364a3 3 0 0 1 1.123 1.117 3.053 3.053 0 0 1-1.12 4.16l1.572 2.723c.448-.261.967-.41 1.522-.41A3.052 3.052 0 0 1 6.42 16h3.145a3.012 3.012 0 0 1 .406-1.519 3.053 3.053 0 0 1 4.163-1.11l1.572-2.723a3.008 3.008 0 0 1-1.116-1.113zM8 11.24a3.24 3.24 0 1 1 0-6.48 3.24 3.24 0 0 1 0 6.48z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--db" y="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.582 0 0 1.119 0 2.5v2C0 5.881 3.582 7 8 7s8-1.119 8-2.5v-2C16 1.119 12.418 0 8 0z"/><path d="M8 8.5C3.582 8.5 0 7.381 0 6v3c0 1.381 3.582 2.5 8 2.5s8-1.119 8-2.5V6c0 1.381-3.582 2.5-8 2.5z"/><path d="M8 13c-4.418 0-8-1.119-8-2.5v3C0 14.881 3.582 16 8 16s8-1.119 8-2.5v-3c0 1.381-3.582 2.5-8 2.5z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--devmode" x="16" y="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 9.662c1.912 0 3.514-.65 3.61-1.498l-.9-2.522c-.211.609-1.38 1.041-2.71 1.041s-2.499-.432-2.71-1.041l-.899 2.522c.097.849 1.698 1.498 3.61 1.498zm0-5.364c.899 0 1.734-.278 1.978-.711l-.809-2.269C9.047.976 8.496.8 7.999.8s-1.048.177-1.17.518L6.02 3.587c.245.433 1.08.711 1.978.711zm7.024 6.155L12.02 9.242l.346.966c-.018 1.023-2.003 1.839-4.366 1.839s-4.35-.815-4.366-1.839l.346-.966-3.004 1.211c-.842.339-.878.967-.078 1.395l5.65 3.03c.798.428 2.106.428 2.906 0l5.65-3.03c.799-.428.763-1.056-.079-1.395z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--edit" x="32" xmlns="http://www.w3.org/2000/svg"><path d="M14.049 1.951c-1.154-1.154-2.02-.982-2.02-.982L1.768 11.229l-.808 3.81 3.81-.808L15.031 3.973c-.001 0 .173-.866-.982-2.022zM4.544 13.774l-1.299.28c-.125-.234-.276-.469-.552-.746s-.511-.426-.746-.553l.28-1.298.376-.375s.706.014 1.505.813c.798.797.813 1.505.813 1.505l-.377.374z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--flush" x="32" y="16" xmlns="http://www.w3.org/2000/svg"><path d="M16 6h-6l2.243-2.243C11.11 2.624 9.603 2 8 2s-3.109.624-4.243 1.757C2.624 4.89 2 6.397 2 8s.624 3.109 1.757 4.243A5.961 5.961 0 0 0 8 14a5.963 5.963 0 0 0 4.516-2.049l1.505 1.317a8 8 0 1 1-.364-10.924L16 0v6z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--info" y="32" xmlns="http://www.w3.org/2000/svg"><path d="M16 9V8h-3.02a5.785 5.785 0 0 0-1.12-3.004h2.53L15.485.617l-.97-.243-.905 3.621h-2.729l-.042-.032A2.996 2.996 0 0 0 8.001-.001a2.996 2.996 0 0 0-2.838 3.964l-.042.032H2.392L1.487.374l-.97.243 1.095 4.379h2.53A5.785 5.785 0 0 0 3.022 8H.002v1h3.021c.059.713.242 1.388.526 1.996H1.612L.517 15.375l.97.243.905-3.621h1.756c.917 1.219 2.303 1.996 3.854 1.996s2.937-.777 3.854-1.996h1.756l.905 3.621.97-.243-1.095-4.379h-1.937A5.903 5.903 0 0 0 12.981 9h3.021z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--tick" x="16" y="32" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 2 6 9.5 2.5 6 0 8.5l6 6 10-10z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--tools" x="32" y="32" xmlns="http://www.w3.org/2000/svg"><path d="M2.508 5.512c.746-.58 1.366-.18 2.192.777.093.108.218-.018.289-.08S6.15 5.165 6.203 5.12c.053-.047.117-.135.033-.234a27.04 27.04 0 0 1-.594-.761C4.196 2.233 9.599.95 8.769.93 8.347.919 6.652.899 6.399.927c-1.026.108-2.315 1.067-2.964 1.514-.849.581-1.166.922-1.218.969-.24.21-.038.694-.474 1.075-.46.402-.747.098-1.014.331-.132.117-.502.394-.607.486-.106.094-.126.251-.017.377 0 0 1.011 1.117 1.096 1.216.084.098.313.182.454.057s.506-.442.566-.498c.062-.053-.04-.689.286-.942zm4.566.414c-.096-.111-.215-.114-.318-.023L5.609 6.905a.232.232 0 0 0-.022.32l6.635 7.551a.425.425 0 0 0 .601.042l.776-.65a.432.432 0 0 0 .042-.606L7.074 5.927zm8.848-3.214c-.059-.395-.264-.313-.37-.146-.106.169-.577.882-.77 1.205-.192.32-.666.953-1.547.328-.918-.649-.599-1.102-.439-1.406a32.33 32.33 0 0 1 .726-1.272c.071-.108-.012-.422-.297-.29s-2.018.82-2.258 1.808c-.246 1.005.206 1.903-.68 2.795l-1.074 1.12 1.079 1.253 1.323-1.256c.315-.317.989-.625 1.598-.486 1.306.295 2.019-.195 2.449-1.006.386-.725.322-2.251.262-2.646zM2.191 13.642a.431.431 0 0 0 0 .606l.761.744c.166.167.43.097.597-.07l3.926-3.859-1.202-1.371-4.081 3.95z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--user" x="48" xmlns="http://www.w3.org/2000/svg"><path d="M9 11.041v-.825c1.102-.621 2-2.168 2-3.716C11 4.015 11 2 8 2S5 4.015 5 6.5c0 1.548.898 3.095 2 3.716v.825c-3.392.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--view" x="48" y="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 3.52C2.751 3.52 0 7.386 0 8c0 .613 2.751 4.48 8 4.48S16 8.613 16 8c0-.614-2.752-4.48-8-4.48zm0 7.926c-1.964 0-3.556-1.542-3.556-3.446S6.036 4.553 8 4.553 11.555 6.097 11.555 8 9.964 11.446 8 11.446zM8 8c-.326-.358.53-1.723 0-1.723-.982 0-1.778.772-1.778 1.723S7.018 9.723 8 9.723 9.778 8.951 9.778 8c0-.438-1.502.303-1.778 0z"/></svg></svg>

css/svg/sprite.css-ce8a5080.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><svg width="64" height="48" viewBox="0 0 64 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><svg width="16" height="16" fill="#FFF" viewBox="0 0 16 16" id="images--bn-icon--close" xmlns="http://www.w3.org/2000/svg"><path d="M15.854 12.854 11 8l4.854-4.854a.503.503 0 0 0 0-.707L13.561.146a.499.499 0 0 0-.707 0L8 5 3.146.146a.5.5 0 0 0-.707 0L.146 2.439a.499.499 0 0 0 0 .707L5 8 .146 12.854a.5.5 0 0 0 0 .707l2.293 2.293a.499.499 0 0 0 .707 0L8 11l4.854 4.854a.5.5 0 0 0 .707 0l2.293-2.293a.499.499 0 0 0 0-.707z"/></svg><svg width="16" height="16" fill="#FFF" viewBox="0 0 16 16" id="images--bn-icon--cog" x="16" xmlns="http://www.w3.org/2000/svg"><path d="M14.59 9.535a3.053 3.053 0 0 1 1.127-4.164l-1.572-2.723a3.017 3.017 0 0 1-1.529.414A3.052 3.052 0 0 1 9.574 0H6.429a3.009 3.009 0 0 1-.406 1.535c-.839 1.454-2.706 1.948-4.17 1.106L.281 5.364a3 3 0 0 1 1.123 1.117 3.053 3.053 0 0 1-1.12 4.16l1.572 2.723c.448-.261.967-.41 1.522-.41A3.052 3.052 0 0 1 6.42 16h3.145a3.012 3.012 0 0 1 .406-1.519 3.053 3.053 0 0 1 4.163-1.11l1.572-2.723a3.008 3.008 0 0 1-1.116-1.113zM8 11.24a3.24 3.24 0 1 1 0-6.48 3.24 3.24 0 0 1 0 6.48z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--db" y="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 0C3.582 0 0 1.119 0 2.5v2C0 5.881 3.582 7 8 7s8-1.119 8-2.5v-2C16 1.119 12.418 0 8 0z"/><path d="M8 8.5C3.582 8.5 0 7.381 0 6v3c0 1.381 3.582 2.5 8 2.5s8-1.119 8-2.5V6c0 1.381-3.582 2.5-8 2.5z"/><path d="M8 13c-4.418 0-8-1.119-8-2.5v3C0 14.881 3.582 16 8 16s8-1.119 8-2.5v-3c0 1.381-3.582 2.5-8 2.5z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--devmode" x="16" y="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 9.662c1.912 0 3.514-.65 3.61-1.498l-.9-2.522c-.211.609-1.38 1.041-2.71 1.041s-2.499-.432-2.71-1.041l-.899 2.522c.097.849 1.698 1.498 3.61 1.498zm0-5.364c.899 0 1.734-.278 1.978-.711l-.809-2.269C9.047.976 8.496.8 7.999.8s-1.048.177-1.17.518L6.02 3.587c.245.433 1.08.711 1.978.711zm7.024 6.155L12.02 9.242l.346.966c-.018 1.023-2.003 1.839-4.366 1.839s-4.35-.815-4.366-1.839l.346-.966-3.004 1.211c-.842.339-.878.967-.078 1.395l5.65 3.03c.798.428 2.106.428 2.906 0l5.65-3.03c.799-.428.763-1.056-.079-1.395z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--edit" x="32" xmlns="http://www.w3.org/2000/svg"><path d="M14.049 1.951c-1.154-1.154-2.02-.982-2.02-.982L1.768 11.229l-.808 3.81 3.81-.808L15.031 3.973c-.001 0 .173-.866-.982-2.022zM4.544 13.774l-1.299.28c-.125-.234-.276-.469-.552-.746s-.511-.426-.746-.553l.28-1.298.376-.375s.706.014 1.505.813c.798.797.813 1.505.813 1.505l-.377.374z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--flush" x="32" y="16" xmlns="http://www.w3.org/2000/svg"><path d="M16 6h-6l2.243-2.243C11.11 2.624 9.603 2 8 2s-3.109.624-4.243 1.757C2.624 4.89 2 6.397 2 8s.624 3.109 1.757 4.243A5.961 5.961 0 0 0 8 14a5.963 5.963 0 0 0 4.516-2.049l1.505 1.317a8 8 0 1 1-.364-10.924L16 0v6z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--info" y="32" xmlns="http://www.w3.org/2000/svg"><path d="M16 9V8h-3.02a5.785 5.785 0 0 0-1.12-3.004h2.53L15.485.617l-.97-.243-.905 3.621h-2.729l-.042-.032A2.996 2.996 0 0 0 8.001-.001a2.996 2.996 0 0 0-2.838 3.964l-.042.032H2.392L1.487.374l-.97.243 1.095 4.379h2.53A5.785 5.785 0 0 0 3.022 8H.002v1h3.021c.059.713.242 1.388.526 1.996H1.612L.517 15.375l.97.243.905-3.621h1.756c.917 1.219 2.303 1.996 3.854 1.996s2.937-.777 3.854-1.996h1.756l.905 3.621.97-.243-1.095-4.379h-1.937A5.903 5.903 0 0 0 12.981 9h3.021z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--tick" x="16" y="32" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 2 6 9.5 2.5 6 0 8.5l6 6 10-10z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--tools" x="32" y="32" xmlns="http://www.w3.org/2000/svg"><path d="M2.508 5.512c.746-.58 1.366-.18 2.192.777.093.108.218-.018.289-.08S6.15 5.165 6.203 5.12c.053-.047.117-.135.033-.234a27.04 27.04 0 0 1-.594-.761C4.196 2.233 9.599.95 8.769.93 8.347.919 6.652.899 6.399.927c-1.026.108-2.315 1.067-2.964 1.514-.849.581-1.166.922-1.218.969-.24.21-.038.694-.474 1.075-.46.402-.747.098-1.014.331-.132.117-.502.394-.607.486-.106.094-.126.251-.017.377 0 0 1.011 1.117 1.096 1.216.084.098.313.182.454.057s.506-.442.566-.498c.062-.053-.04-.689.286-.942zm4.566.414c-.096-.111-.215-.114-.318-.023L5.609 6.905a.232.232 0 0 0-.022.32l6.635 7.551a.425.425 0 0 0 .601.042l.776-.65a.432.432 0 0 0 .042-.606L7.074 5.927zm8.848-3.214c-.059-.395-.264-.313-.37-.146-.106.169-.577.882-.77 1.205-.192.32-.666.953-1.547.328-.918-.649-.599-1.102-.439-1.406a32.33 32.33 0 0 1 .726-1.272c.071-.108-.012-.422-.297-.29s-2.018.82-2.258 1.808c-.246 1.005.206 1.903-.68 2.795l-1.074 1.12 1.079 1.253 1.323-1.256c.315-.317.989-.625 1.598-.486 1.306.295 2.019-.195 2.449-1.006.386-.725.322-2.251.262-2.646zM2.191 13.642a.431.431 0 0 0 0 .606l.761.744c.166.167.43.097.597-.07l3.926-3.859-1.202-1.371-4.081 3.95z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--user" x="48" xmlns="http://www.w3.org/2000/svg"><path d="M9 11.041v-.825c1.102-.621 2-2.168 2-3.716C11 4.015 11 2 8 2S5 4.015 5 6.5c0 1.548.898 3.095 2 3.716v.825c-3.392.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z"/></svg><svg width="16" height="16" viewBox="0 0 16 16" id="images--bn-icon--view" x="48" y="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 3.52C2.751 3.52 0 7.386 0 8c0 .613 2.751 4.48 8 4.48S16 8.613 16 8c0-.614-2.752-4.48-8-4.48zm0 7.926c-1.964 0-3.556-1.542-3.556-3.446S6.036 4.553 8 4.553 11.555 6.097 11.555 8 9.964 11.446 8 11.446zM8 8c-.326-.358.53-1.723 0-1.723-.982 0-1.778.772-1.778 1.723S7.018 9.723 8 9.723 9.778 8.951 9.778 8c0-.438-1.502.303-1.778 0z"/></svg></svg>

images/bn-icon/close.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF"><path d="M15.854 12.854 11 8l4.854-4.854a.503.503 0 0 0 0-.707L13.561.146a.499.499 0 0 0-.707 0L8 5 3.146.146a.5.5 0 0 0-.707 0L.146 2.439a.499.499 0 0 0 0 .707L5 8 .146 12.854a.5.5 0 0 0 0 .707l2.293 2.293a.499.499 0 0 0 .707 0L8 11l4.854 4.854a.5.5 0 0 0 .707 0l2.293-2.293a.499.499 0 0 0 0-.707z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF"><path d="M11.478 11.879a.96.96 0 0 1-1.358 0L7.999 9.455l-2.121 2.423A.96.96 0 0 1 4.52 10.52L6.726 8 4.519 5.478A.96.96 0 0 1 5.877 4.12l2.122 2.425L10.12 4.12a.96.96 0 0 1 1.358 1.358L9.272 8l2.206 2.52a.96.96 0 0 1 0 1.358z"/></svg>

images/bn-icon/cog.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF"><path d="M14.59 9.535a3.053 3.053 0 0 1 1.127-4.164l-1.572-2.723a3.017 3.017 0 0 1-1.529.414A3.052 3.052 0 0 1 9.574 0H6.429a3.009 3.009 0 0 1-.406 1.535c-.839 1.454-2.706 1.948-4.17 1.106L.281 5.364a3 3 0 0 1 1.123 1.117 3.053 3.053 0 0 1-1.12 4.16l1.572 2.723c.448-.261.967-.41 1.522-.41A3.052 3.052 0 0 1 6.42 16h3.145a3.012 3.012 0 0 1 .406-1.519 3.053 3.053 0 0 1 4.163-1.11l1.572-2.723a3.008 3.008 0 0 1-1.116-1.113zM8 11.24a3.24 3.24 0 1 1 0-6.48 3.24 3.24 0 0 1 0 6.48z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF"><path d="M14.59 9.535a3.053 3.053 0 0 1 1.127-4.164l-1.572-2.723a3.017 3.017 0 0 1-1.529.414A3.052 3.052 0 0 1 9.574 0H6.429a3.009 3.009 0 0 1-.406 1.535c-.839 1.454-2.706 1.948-4.17 1.106L.281 5.364a3 3 0 0 1 1.123 1.117 3.053 3.053 0 0 1-1.12 4.16l1.572 2.723c.448-.261.967-.41 1.522-.41A3.052 3.052 0 0 1 6.42 16h3.145a3.012 3.012 0 0 1 .406-1.519 3.053 3.053 0 0 1 4.163-1.11l1.572-2.723a3.008 3.008 0 0 1-1.116-1.113zM8 11.24a3.24 3.24 0 1 1 0-6.48 3.24 3.24 0 0 1 0 6.48z"/></svg>

images/bn-icon/flush.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M16 6h-6l2.243-2.243C11.11 2.624 9.603 2 8 2s-3.109.624-4.243 1.757C2.624 4.89 2 6.397 2 8s.624 3.109 1.757 4.243C4.89 13.376 6.397 14 8 14a5.963 5.963 0 0 0 4.516-2.049l1.505 1.317a8 8 0 1 1-.364-10.924L16 0v6z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M16 6h-6l2.243-2.243C11.11 2.624 9.603 2 8 2s-3.109.624-4.243 1.757C2.624 4.89 2 6.397 2 8s.624 3.109 1.757 4.243A5.961 5.961 0 0 0 8 14a5.963 5.963 0 0 0 4.516-2.049l1.505 1.317a8 8 0 1 1-.364-10.924L16 0v6z"/></svg>

javascript/betternavigator.js

@@ -52,6 +52,11 @@ function initialiseBetterNavigator() {
     if (getCookie('BetterNavigator') === 'open') {
         BetterNavigator.classList.add('open');
         BetterNavigator.classList.remove('collapsed');
+
+        // update the button state
+        BetterNavigatorStatusButton.setAttribute('aria-expanded', 'true');
+        BetterNavigatorStatusIcon.classList.remove('bn-icon-cog');
+        BetterNavigatorStatusIcon.classList.add('bn-icon-close');
     }
 
     if (BetterNavigatorLogoutForm) {

scss/_iconsprite.md

@@ -0,0 +1,38 @@
+# SVG Sprites
+
+An SVG sprite is used for icons, this is generated by the [svg-sprite](https://github.com/svg-sprite/svg-sprite) node module. This means icons can be easily pre-loaded when the navigator is collapsed.
+
+## Using the icons
+
+After compilation, a `_iconsprite.scss` file is created. This should be included in the main scss.
+
+To include an icon as background image in an element, extend the icon and the dimensions
+
+```scss
+.bn-icon-close {
+  @extend .svg-images--bn-icon--close;
+  @extend .svg-images--bn-icon--close-dims;
+}
+```
+
+## Adding or removing icons
+
+If you need to add or remove an icon, then add or remove it from the `./images/bn-icon/` directory and re-compile.
+
+Only SVG is supported, and it is recommended to compress the SVG first using a tool such as [svgo](https://github.com/svg/svgo) or [svgomg](https://jakearchibald.github.io/svgomg/) first.
+
+## Compiling the icon sprite
+
+This can be done by running `npm run build:svg` from the root of the module.
+
+All icons in the `./images/bn-icon/` directory are compiled into a single SVG and output to `./css/svg/`.
+
+The `./scss/_iconsprite.scss` file is generated with the correct background positions based on the size of each icon.
+
+## License
+
+Icons are sourced from [IcoMoon](https://icomoon.io/) and are from the following packs:
+* [IcoMoon - Free](https://icomoon.io/#icons) by [Keyamoon](http://keyamoon.com/) (GPL / CC BY 4.0)
+* [Entypo+](http://www.entypo.com/) by [Daniel Bruce](http://danielbruce.se/) (CC BY-SA 4.0)
+
+The icons have been compressed and resized.

scss/_iconsprite.scss

@@ -1,5 +1,5 @@
 %svg-common {
-    background: url("svg/sprite.css-ce8a5080.svg") no-repeat;
+    background: url("svg/sprite.css-982681f2.svg") no-repeat;
 }
 
 .svg-images--bn-icon--close {

scss/betternavigator.scss

@@ -17,8 +17,8 @@ $buttonColorDisabled: #51565A;
 $buttonBackground: #ECEFF2;
 $buttonBackgroundDisabled: #C6D3DA;
 $buttonBorder: #A3AAAF;
-$liveColor: #4A831C;
-$stageColor: #C0462B;
+$liveColor: #06AD18;
+$stageColor: #E6674B;
 $archiveColor: #6F6F6F;
 
 // Icons
@@ -30,8 +30,8 @@ span[class*=' bn-icon']{
 .bn-icon-close {
     @extend .svg-images--bn-icon--close;
     @extend .svg-images--bn-icon--close-dims;
-    transform: scale(0.8);
-    margin: -3px -6px 0 0;
+    margin: -4px -6px 0 0;
+    transform: scale(1.1);
 }
 
 .bn-icon-cog {
@@ -60,13 +60,13 @@ span[class*=' bn-icon']{
 .bn-icon-info {
     @extend .svg-images--bn-icon--info;
     @extend .svg-images--bn-icon--info-dims;
-    transform: scale(0.8);
+    transform: scale(0.7);
 }
 
 .bn-icon-tick {
     @extend .svg-images--bn-icon--tick;
     @extend .svg-images--bn-icon--tick-dims;
-    transform: scale(0.85);
+    transform: scale(0.7);
 }
 
 .bn-icon-tools {
@@ -174,6 +174,7 @@ span[class*=' bn-icon']{
 // Status
 
 #BetterNavigatorStatus {
+    display: block;
     color: $textColor;
     background: $archiveColor;
     border: 1px solid mix($black, $archiveColor, 10%);
@@ -184,6 +185,7 @@ span[class*=' bn-icon']{
     font-weight: bold;
     transition: 100ms background-color ease-in-out;
     font-size: 14px;
+    line-height: 1.2;
     margin: 0;
 
     #BetterNavigatorStatusButton {
@@ -253,9 +255,13 @@ span[class*=' bn-icon']{
     transition: 100ms background-color ease-in-out;
 
     .bn-heading {
+        display: block;
         text-transform: uppercase;
         font-size: 11px;
+        line-height: 1.2;
+        color: $contentColor;
         margin: 8px 0 4px 0;
+        padding: 0;
         font-weight: normal;
     }
 
@@ -302,6 +308,7 @@ span[class*=' bn-icon']{
     }
 
     .bn-links {
+        display: block;
         margin: 0;
         padding: 0;
         list-style-type: none;

templates/JonoM/BetterNavigator/BetterNavigator.ss

@@ -44,7 +44,7 @@
 
         <% if $Mode == 'dev' || $IsDeveloper %>
 
-        <h2 class="bn-heading"><%t JonoM\BetterNavigator.DEVELOPER_TOOLS_HEADING 'Developer tools' %></h2>
+            <h3 class="bn-heading"><%t JonoM\BetterNavigator.DEVELOPER_TOOLS_HEADING 'Developer tools' %></h2>
 
             <ul class="bn-links">
 
@@ -79,7 +79,7 @@
 
         <% if $Mode == 'dev' %>
 
-        <h2 class="bn-heading"><%t JonoM\BetterNavigator.DEBUGGING_HEADING 'Debugging' %></h2>
+            <h3 class="bn-heading"><%t JonoM\BetterNavigator.DEBUGGING_HEADING 'Debugging' %></h2>
 
             <ul class="bn-links">