Skip to content
Permalink
Browse files

Added some intentiional disruptive styles to the testing page which b…

…reaks styling as per the bug filed in issue #18, then made some changes to the CSS implementation to fix that along with some other minor spacing issues.
  • Loading branch information...
SirRawlins committed May 5, 2016
1 parent 06676c0 commit 3b482634883984a077678abe90eec4dd5a669a04
Showing with 34 additions and 4 deletions.
  1. +1 −1 dist/status-bar.min.css
  2. +19 −1 index.css
  3. +14 −2 src/stylesheets/status-bar.css

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -1 +1,19 @@
html, body { padding: 5px; }
/*
* Basic template styles to make the page look a little
* tidier for testing and development testing purposes.
*/
html, body { padding: 5px; }

/*
* Disruptive Defaults
*
* Often peoples websites and apps will have CSS styles applied to
* various root level objects such as headings, paragraphs, buttons etc
* which we don't want to be inheritted by our status bar.
*
* Here we create some intentially disruptive styles which will break
* the status bar if we dont happen to get things right.
*/
h1, h2, h3, h4, h5, h6 { margin-left: 20px; font-weight: 600; font-size: 64px;}
p { margin-bottom: 60px; color: pink; }
a { text-decoration: underline; }
@@ -53,13 +53,25 @@
content: " ";
}

/*
* Resets
*
* Reset any margins or paddings which may be applied
* to generic paragraphs and suchlike.
*/
.sorry-status-notice-header,
.sorry-status-notice-text,
.sorry-status-notice-link {
margin: 0;
padding: 0;
}

/*
* Notice Header
*
* Contains the 'Ongoing' and the 'Bullhorn' Icon.
*/
.sorry-status-notice-header {
margin-top: 0;
margin-bottom: 16px;

font-weight: 700;
@@ -163,6 +175,7 @@ button.sorry-status-notice-close {
@media (min-width: 972px) {
.sorry-status-notice-content {
margin: 0 auto;
padding-right: 0;
max-width: 768px;

text-align: center;
@@ -172,7 +185,6 @@ button.sorry-status-notice-close {
.sorry-status-notice-text,
.sorry-status-notice-link {
display: inline-block;
margin-top: 0;
margin-bottom: 0;

text-align: left;

0 comments on commit 3b48263

Please sign in to comment.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.