diff --git a/index.html b/index.html index fa08eb38..509c1c1c 100644 --- a/index.html +++ b/index.html @@ -13,58 +13,57 @@

Shopping List

-
- + +

- +
+ + +
diff --git a/main.css b/main.css index 785bdb1e..653b1c0f 100644 --- a/main.css +++ b/main.css @@ -1,3 +1,15 @@ +.visually-hidden { /*https://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html*/ + position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + padding:0 !important; + border:0 !important; + height: 1px !important; + width: 1px !important; + overflow: hidden; +} +body:hover .visually-hidden a, body:hover .visually-hidden input, body:hover .visually-hidden button { display: none !important; } + * { box-sizing: border-box; } @@ -18,6 +30,13 @@ button:hover { width: 250px; } +#js-shopping-list-add-item h2 { + display: inline-block; + margin: 0; + font-size: 1em; + font-weight: normal; +} + .container { max-width: 600px; margin: 0 auto; @@ -34,14 +53,18 @@ button:hover { padding: 20px; } +.shopping-list > li:target { + background: #f9ec8f; +} + .shopping-item { display: block; color: grey; font-style: italic; font-size: 20px; - margin-bottom: 15px; + margin: 0 0 15px 0; } -.shopping-item__checked { +input[type="checkbox"]:checked + label { text-decoration: line-through; } \ No newline at end of file