From 54c34e38fa0e6d1cde6dce6ff480adc8d937955f Mon Sep 17 00:00:00 2001 From: Divya Manian Date: Thu, 15 Dec 2011 20:03:26 -0800 Subject: [PATCH] adding new styles. all of them are not quite there yet and need tweaking. The sass file is a messs. --- config.rb | 2 +- css/style.css | 320 ++++++++++++++++++++---------------------------- img/denim.png | Bin 0 -> 20623 bytes index.html | 36 +++--- js/script.js | 20 ++- sass/style.scss | 237 ++++++++++++++++++++++------------- template.html | 8 +- 7 files changed, 326 insertions(+), 297 deletions(-) create mode 100644 img/denim.png diff --git a/config.rb b/config.rb index 3ca52a80..2a27c59c 100644 --- a/config.rb +++ b/config.rb @@ -11,7 +11,7 @@ # output_style = :expanded or :nested or :compact or :compressed # To enable relative paths to assets via compass helper functions. Uncomment: -# relative_assets = true +relative_assets = true # To disable debugging comments that display the original location of your selectors. Uncomment: line_comments = false diff --git a/css/style.css b/css/style.css index 532c2b0c..6826c07f 100644 --- a/css/style.css +++ b/css/style.css @@ -37,7 +37,7 @@ body { body, button, input, select, textarea { font-family: sans-serif; - color: #222; + color: #e3d7bf; } ::-moz-selection { @@ -56,12 +56,12 @@ body, button, input, select, textarea { Links ========================================================================== */ a { - color: #e16734; + color: #149CD7; text-decoration: none; } a:visited { - color: #6c2b10; + color: #07364b; } a:focus { @@ -240,14 +240,11 @@ button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; } -input[type="checkbox"], input[type="radio"] { - box-sizing: border-box; -} - input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; + -webkit-appearance: normal; } button::-moz-focus-inner, input::-moz-focus-inner { @@ -276,8 +273,15 @@ table { Primary styles Author: Divya Manian ========================================================================== */ +* { + box-sizing: border-box; +} + html { - box-shadow: 0 0 5em #e3d7bf inset; + background-color: #232927; + color: #e3d7bf; + background: -o-radial-gradient(20% 20%, circle cover, rgba(32, 124, 202, 0.1) 10%, transparent 10%), -o-radial-gradient(30% 30%, circle cover, rgba(205, 92, 92, 0.2) 5%, transparent 5%), -o-radial-gradient(60% 40%, circle cover, rgba(255, 255, 255, 0.1) 15%, transparent 15%), -o-radial-gradient(80% 60%, circle cover, rgba(128, 128, 0, 0.2) 8%, transparent 8%), -o-radial-gradient(40% 60%, circle cover, rgba(32, 124, 202, 0.2) 5%, transparent 5%), -o-radial-gradient(40% 50%, circle cover, rgba(0, 0, 0, 0.2) 5%, transparent 5%), url('../img/denim.png?1323991851'); + background: -webkit-radial-gradient(20em 20em, circle cover, rgba(32, 124, 202, 0.1) 10em, transparent 10em), -webkit-radial-gradient(30em 30em, circle cover, rgba(205, 92, 92, 0.2) 5em, transparent 5em), -webkit-radial-gradient(60em 40em, circle cover, rgba(255, 255, 255, 0.1) 15em, transparent 15em), -webkit-radial-gradient(80em 60em, circle cover, rgba(128, 128, 0, 0.2) 8em, transparent 8em), -webkit-radial-gradient(40em 60em, circle cover, rgba(32, 124, 202, 0.2) 5em, transparent 5em), -webkit-radial-gradient(40em 50em, circle cover, rgba(0, 0, 0, 0.2) 5em, transparent 5em), url('../img/denim.png?1323991851'); min-height: 100%; max-width: 100%; } @@ -300,23 +304,21 @@ h2 { header.index h1 { font-size: 5em; text-transform: uppercase; - color: #232927; - text-shadow: 1px 1px 1px #e88860, 2px 2px 1px #e88860, 3px 3px 1px #e88860; + text-shadow: 1px 1px 1px #e88860, 2px 2px 1px #e88860, 3px 3px 1px #e88860, 4px 4px 1px #0c0d0d, 5px 5px 3px #0c0d0d; + line-height: 1.2em; + margin: 0.8em 0 0.5em 0; } header.index h1 img { vertical-align: -10%; } -header.index h1 { - line-height: 1.2em; - margin: 0; -} - header.index h1 + h2 { font-size: 1em; text-transform: lowercase; - margin: 3em 0; + margin: 0 auto; + max-width: 60%; + text-shadow: 1px 1px 1px #0c0d0d; } header.index h1, header.index h2 b { @@ -329,109 +331,86 @@ header.index h2 b { color: #e88860; } -header.index h1 b, header.index h3, article h3 b i { +header.index h1 b, +header.index h3, +article h3 b i { font-family: 'Open Sans', sans-serif; text-transform: uppercase; display: block; line-height: 1; } -header.index h3 { - background: url(../dark_mosaic.png) #232927; - color: white; - position: relative; - box-shadow: 0.05em 0.05em 0.4em 0.15em #1e2322; - padding: 1em; - font-size: 1em; - line-height: 1.5; -} - -header.index h3::before, -header.index h3::after { - content: ""; - width: 0; - height: 0; - border: 5em solid #232927; - border-width: 20px 0 20px 20px; - border-color: #1e2322 transparent #1e2322; - position: absolute; - left: -20px; - top: 50%; - margin-top: -20px; - z-index: -1; -} - -header.index h3::after { - border-width: 20px 20px 20px 0; - border-color: #1e2322 transparent #1e2322; - left: auto; - right: -20px; -} - -header.index h3 a { - color: #e88860; -} - -header.index h3 a + a::before { - content: " / "; - color: white; -} - -header.index h3 b { - word-spacing: 0.15em; - text-transform: uppercase; -} - -header.index h3, header.index h2, -article h3 b i { +header.index h3, +header.index h2 { font-weight: normal; text-transform: none; font-style: normal; } -header.index h4 { - background: #e3d7bf; - padding: 1em; - box-shadow: 0 0 1px #232927; +header.index > div { + padding: 1em 0 4em 0; } header.index input[type="search"] { width: 50%; + padding: 0.5em 1em; + background: white; + border-radius: 10em; + border: 0; + color: black; } -header.index h3, header.index h4 { +header.index h3 { margin: 0; } article h2 { color: #232927; - text-shadow: 2px 2px 1px #f5cbb9; + text-shadow: 1px 1px 1px #0b587a; + letter-spacing: 1px; } article { - overflow: hidden; min-height: 2em; - padding: 1em 0; - position: relative; - background: -webkit-gradient(radial, 50% 200%, 0, 50% 200%, 40, color-stop(0%, #e8cf11), color-stop(40%, rgba(248, 237, 155, 0))); - background: -webkit-radial-gradient(50% 200%, ellipse, #e8cf11, rgba(248, 237, 155, 0) 40%); - background: -moz-radial-gradient(50% 200%, ellipse, #e8cf11, rgba(248, 237, 155, 0) 40%); - background: -o-radial-gradient(50% 200%, ellipse, #e8cf11, rgba(248, 237, 155, 0) 40%); - background: -ms-radial-gradient(50% 200%, ellipse, #e8cf11, rgba(248, 237, 155, 0) 40%); - background: radial-gradient(50% 200%, ellipse, #e8cf11, rgba(248, 237, 155, 0) 40%); + background: white; + color: #232927; + margin-bottom: 2em; + border-radius: 0.3rem; + box-shadow: 0 0 7px #0c0d0d; } article > header { background: #e3d7bf; - border-radius: 0 0.5em 0.5em 0; + border-radius: 0.3rem; + box-shadow: 0 0 7px #d3c19c inset; + position: relative; } article > header h4, article > header h2, article > header h3, article > header a { display: inline-block; vertical-align: middle; margin: 0; } -article > header a { - float: right; +article > header > a { + position: absolute; + margin-top: 1em; + right: 1em; + width: 2em; + height: 2em; +} +article > header > a:before { + content: "+"; + font-size: 2rem; + line-height: 1.7rem; + text-align: center; + font-family: sans-serif; + color: white; + text-shadow: 1px 1px 1px #957941; + box-shadow: 0 0 7px #b49455 inset; + width: 1em; + display: block; + height: 1em; + border-radius: 1em; + background: #c4ab78; } article > header i { font-style: normal; @@ -442,11 +421,20 @@ article > header h4, article > header b, article > header h3 { article > header h4 { font-size: 0.8em; text-transform: uppercase; + position: absolute; + left: -5em; + text-align: right; + margin-top: 1.5em; + display: block; + width: 4.5em; + z-index: 1; + color: #e3d7bf; + text-shadow: 1px 1px 1px #232927; } article > header h3 { background: indianred; border-radius: 0.2rem 0 0 0.2rem; - padding: 0.5rem 0 0.5rem 1rem; + padding: 0.5rem 0.5rem 0.5rem 1rem; margin-right: 1em; color: white; text-shadow: 1px 1px black; @@ -454,31 +442,32 @@ article > header h3 { text-transform: uppercase; font-weight: bold; position: relative; + box-shadow: 4px 0px 6px #b43737 inset; } article > header h3:before, article > header h3:after { content: ""; height: 50%; - width: 1em; + width: 0.8em; position: absolute; - right: -1em; - background: -webkit-gradient(linear, 45deg, 45deg, color-stop(50%, #cd5c5c), color-stop(50%, rgba(205, 92, 92, 0))); - background: -webkit-linear-gradient(45deg, #cd5c5c 50%, rgba(205, 92, 92, 0) 50%); - background: -moz-linear-gradient(45deg, #cd5c5c 50%, rgba(205, 92, 92, 0) 50%); - background: -o-linear-gradient(45deg, #cd5c5c 50%, rgba(205, 92, 92, 0) 50%); - background: -ms-linear-gradient(45deg, #cd5c5c 50%, rgba(205, 92, 92, 0) 50%); - background: linear-gradient(45deg, #cd5c5c 50%, rgba(205, 92, 92, 0) 50%); + right: -0.8em; + background: -webkit-gradient(linear, 34deg, 34deg, color-stop(50%, #cd5c5c), color-stop(53%, #bc3a3a), color-stop(56%, rgba(205, 92, 92, 0))); + background: -webkit-linear-gradient(34deg, #cd5c5c 50%, #bc3a3a 53%, rgba(205, 92, 92, 0) 56%); + background: -moz-linear-gradient(34deg, #cd5c5c 50%, #bc3a3a 53%, rgba(205, 92, 92, 0) 56%); + background: -o-linear-gradient(34deg, #cd5c5c 50%, #bc3a3a 53%, rgba(205, 92, 92, 0) 56%); + background: -ms-linear-gradient(34deg, #cd5c5c 50%, #bc3a3a 53%, rgba(205, 92, 92, 0) 56%); + background: linear-gradient(34deg, #cd5c5c 50%, #bc3a3a 53%, rgba(205, 92, 92, 0) 56%); } article > header h3:before { top: 0; } article > header h3:after { bottom: 0; - background: -webkit-gradient(linear, -45deg, -45deg, color-stop(50%, #cd5c5c), color-stop(50%, rgba(205, 92, 92, 0))); - background: -webkit-linear-gradient(-45deg, #cd5c5c 50%, rgba(205, 92, 92, 0) 50%); - background: -moz-linear-gradient(-45deg, #cd5c5c 50%, rgba(205, 92, 92, 0) 50%); - background: -o-linear-gradient(-45deg, #cd5c5c 50%, rgba(205, 92, 92, 0) 50%); - background: -ms-linear-gradient(-45deg, #cd5c5c 50%, rgba(205, 92, 92, 0) 50%); - background: linear-gradient(-45deg, #cd5c5c 50%, rgba(205, 92, 92, 0) 50%); + background: -webkit-gradient(linear, -34deg, -34deg, color-stop(50%, #cd5c5c), color-stop(53%, #bc3a3a), color-stop(56%, rgba(205, 92, 92, 0))); + background: -webkit-linear-gradient(-34deg, #cd5c5c 50%, #bc3a3a 53%, rgba(205, 92, 92, 0) 56%); + background: -moz-linear-gradient(-34deg, #cd5c5c 50%, #bc3a3a 53%, rgba(205, 92, 92, 0) 56%); + background: -o-linear-gradient(-34deg, #cd5c5c 50%, #bc3a3a 53%, rgba(205, 92, 92, 0) 56%); + background: -ms-linear-gradient(-34deg, #cd5c5c 50%, #bc3a3a 53%, rgba(205, 92, 92, 0) 56%); + background: linear-gradient(-34deg, #cd5c5c 50%, #bc3a3a 53%, rgba(205, 92, 92, 0) 56%); } article > header h3 i { font-size: 0.3em; @@ -493,119 +482,76 @@ article > header h3 i b { } article > header h3.use { background: olive; + box-shadow: 4px 0px 6px #434300 inset; } article > header h3.use:before { - background: -webkit-gradient(linear, 45deg, 45deg, color-stop(50%, #808000), color-stop(50%, rgba(128, 128, 0, 0))); - background: -webkit-linear-gradient(45deg, #808000 50%, rgba(128, 128, 0, 0) 50%); - background: -moz-linear-gradient(45deg, #808000 50%, rgba(128, 128, 0, 0) 50%); - background: -o-linear-gradient(45deg, #808000 50%, rgba(128, 128, 0, 0) 50%); - background: -ms-linear-gradient(45deg, #808000 50%, rgba(128, 128, 0, 0) 50%); - background: linear-gradient(45deg, #808000 50%, rgba(128, 128, 0, 0) 50%); + background: -webkit-gradient(linear, 34deg, 34deg, color-stop(50%, #808000), color-stop(53%, #666700), color-stop(56%, rgba(128, 128, 0, 0))); + background: -webkit-linear-gradient(34deg, #808000 50%, #666700 53%, rgba(128, 128, 0, 0) 56%); + background: -moz-linear-gradient(34deg, #808000 50%, #666700 53%, rgba(128, 128, 0, 0) 56%); + background: -o-linear-gradient(34deg, #808000 50%, #666700 53%, rgba(128, 128, 0, 0) 56%); + background: -ms-linear-gradient(34deg, #808000 50%, #666700 53%, rgba(128, 128, 0, 0) 56%); + background: linear-gradient(34deg, #808000 50%, #666700 53%, rgba(128, 128, 0, 0) 56%); } article > header h3.use:after { - background: -webkit-gradient(linear, -45deg, -45deg, color-stop(50%, #808000), color-stop(50%, rgba(128, 128, 0, 0))); - background: -webkit-linear-gradient(-45deg, #808000 50%, rgba(128, 128, 0, 0) 50%); - background: -moz-linear-gradient(-45deg, #808000 50%, rgba(128, 128, 0, 0) 50%); - background: -o-linear-gradient(-45deg, #808000 50%, rgba(128, 128, 0, 0) 50%); - background: -ms-linear-gradient(-45deg, #808000 50%, rgba(128, 128, 0, 0) 50%); - background: linear-gradient(-45deg, #808000 50%, rgba(128, 128, 0, 0) 50%); + background: -webkit-gradient(linear, -34deg, -34deg, color-stop(50%, #808000), color-stop(53%, #666700), color-stop(56%, rgba(128, 128, 0, 0))); + background: -webkit-linear-gradient(-34deg, #808000 50%, #666700 53%, rgba(128, 128, 0, 0) 56%); + background: -moz-linear-gradient(-34deg, #808000 50%, #666700 53%, rgba(128, 128, 0, 0) 56%); + background: -o-linear-gradient(-34deg, #808000 50%, #666700 53%, rgba(128, 128, 0, 0) 56%); + background: -ms-linear-gradient(-34deg, #808000 50%, #666700 53%, rgba(128, 128, 0, 0) 56%); + background: linear-gradient(-34deg, #808000 50%, #666700 53%, rgba(128, 128, 0, 0) 56%); } article > header h3.caution { background: orange; + box-shadow: 4px 0 6px #c27d00 inset; } article > header h3.caution:before { - background: -webkit-gradient(linear, 45deg, 45deg, color-stop(50%, #ffa500), color-stop(50%, rgba(128, 128, 0, 0))); - background: -webkit-linear-gradient(45deg, #ffa500 50%, rgba(128, 128, 0, 0) 50%); - background: -moz-linear-gradient(45deg, #ffa500 50%, rgba(128, 128, 0, 0) 50%); - background: -o-linear-gradient(45deg, #ffa500 50%, rgba(128, 128, 0, 0) 50%); - background: -ms-linear-gradient(45deg, #ffa500 50%, rgba(128, 128, 0, 0) 50%); - background: linear-gradient(45deg, #ffa500 50%, rgba(128, 128, 0, 0) 50%); + background: -webkit-gradient(linear, 34deg, 34deg, color-stop(50%, #ffa500), color-stop(53%, #e69500), color-stop(56%, rgba(255, 165, 0, 0))); + background: -webkit-linear-gradient(34deg, #ffa500 50%, #e69500 53%, rgba(255, 165, 0, 0) 56%); + background: -moz-linear-gradient(34deg, #ffa500 50%, #e69500 53%, rgba(255, 165, 0, 0) 56%); + background: -o-linear-gradient(34deg, #ffa500 50%, #e69500 53%, rgba(255, 165, 0, 0) 56%); + background: -ms-linear-gradient(34deg, #ffa500 50%, #e69500 53%, rgba(255, 165, 0, 0) 56%); + background: linear-gradient(34deg, #ffa500 50%, #e69500 53%, rgba(255, 165, 0, 0) 56%); } article > header h3.caution:after { - background: -webkit-gradient(linear, -45deg, -45deg, color-stop(50%, #ffa500), color-stop(50%, rgba(128, 128, 0, 0))); - background: -webkit-linear-gradient(-45deg, #ffa500 50%, rgba(128, 128, 0, 0) 50%); - background: -moz-linear-gradient(-45deg, #ffa500 50%, rgba(128, 128, 0, 0) 50%); - background: -o-linear-gradient(-45deg, #ffa500 50%, rgba(128, 128, 0, 0) 50%); - background: -ms-linear-gradient(-45deg, #ffa500 50%, rgba(128, 128, 0, 0) 50%); - background: linear-gradient(-45deg, #ffa500 50%, rgba(128, 128, 0, 0) 50%); + background: -webkit-gradient(linear, -34deg, -34deg, color-stop(50%, #ffa500), color-stop(53%, #e69500), color-stop(56%, rgba(255, 165, 0, 0))); + background: -webkit-linear-gradient(-34deg, #ffa500 50%, #e69500 53%, rgba(255, 165, 0, 0) 56%); + background: -moz-linear-gradient(-34deg, #ffa500 50%, #e69500 53%, rgba(255, 165, 0, 0) 56%); + background: -o-linear-gradient(-34deg, #ffa500 50%, #e69500 53%, rgba(255, 165, 0, 0) 56%); + background: -ms-linear-gradient(-34deg, #ffa500 50%, #e69500 53%, rgba(255, 165, 0, 0) 56%); + background: linear-gradient(-34deg, #ffa500 50%, #e69500 53%, rgba(255, 165, 0, 0) 56%); } article div.more { max-height: 0em; overflow: hidden; - -webkit-transition: max-height 1s linear; - -o-transition: max-height 1s linear; - -moz-transition: max-height 1s linear; - -ms-transition: max-height 1s linear; -} - -article:hover div.more { - max-height: 10em; -} - -div#main, h1, header.index h2, header.index h3, header.index h4 { - -webkit-transition: all 0.6s cubic-bezier(0.83, 1.47, 0.63, 0.9); - -o-transition: all 0.6s cubic-bezier(0.83, 1.47, 0.63, 0.9); - -moz-transition: all 0.6s cubic-bezier(0.83, 1.47, 0.63, 0.9); - -ms-transition: all 0.6s cubic-bezier(0.83, 1.47, 0.63, 0.9); - -webkit-transition: all 0.6s cubic-bezier(0.83, 1, 0.63, 0.9); - -webkit-transform: translateZ(0); + box-shadow: 0 -1px 7px #232927; + -webkit-transition: max-height 0.3s ease-in; + -o-transition: max-height 0.3s ease-in; + -moz-transition: max-height 0.3s ease-in; + -ms-transition: max-height 0.3s ease-in; } - -h1, h2, h3, h4 { - -moz-transition-duration: 0.3s; - -webkit-transition-duration: 0.3s; - -o-transition-duration: 0.3s; - transition-duration: 0.3s; +article div.more .recco { + margin: 0.5em 1em; } - -.searching div#main { - -moz-transform: translate(0, -400px); - -webkit-transform: translate(0, -400px); - -o-transform: translate(0, -400px); - -ms-transform: translate(0, -400px); - transform: translate(0, -400px); - -moz-transition-duration: 0.8s; - -webkit-transition-duration: 0.8s; - -o-transition-duration: 0.8s; - transition-duration: 0.8s; +article div.more .polyfills { + margin: 0.5em 1em 1.5em; } - -.searching h1 { - -moz-transform: translate(-1200px, 0px); - -webkit-transform: translate(-1200px, 0px); - -o-transform: translate(-1200px, 0px); - -ms-transform: translate(-1200px, 0px); - transform: translate(-1200px, 0px); +article div.more .polyfills b { + font-weight: bold; } - -.searching header h2 { - -moz-transform: translate(1200px, 0px); - -webkit-transform: translate(1200px, 0px); - -o-transform: translate(1200px, 0px); - -ms-transform: translate(1200px, 0px); - transform: translate(1200px, 0px); +article div.more .polyfills p { + display: inline; } -.searching header h3 { - opacity: 0; +article.expanded > header { + border-bottom: 1px solid #91a19b; + box-shadow: 0 0 7px #d3c19c inset, 0 1px 7px #758983; } - -.searching header h4 { - -moz-transform: translate(0px, -393px); - -webkit-transform: translate(0px, -393px); - -o-transform: translate(0px, -393px); - -ms-transform: translate(0px, -393px); - transform: translate(0px, -393px); - border-radius: 0 0 20px 20px; +article.expanded > header > a:before { + content: "-"; } - -.test div#main { - -moz-transform: translate(0, -2480px); - -webkit-transform: translate(0, -2480px); - -o-transform: translate(0, -2480px); - -ms-transform: translate(0, -2480px); - transform: translate(0, -2480px); +article.expanded div.more { + max-height: 10em; } /* ============================================================================= diff --git a/img/denim.png b/img/denim.png new file mode 100644 index 0000000000000000000000000000000000000000..3b0bb7e372ea6bc992090c5e9f4b56d93adecf13 GIT binary patch literal 20623 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 Use the new and shiny responsibly. Look up properties and see if it is ready for use, and if so how you should use it with a polyfill, a fallback value or as it is. -

- -

+
+ +
@@ -30,7 +30,7 @@

html

avoid

audio

- [Open] +

As with video, you need to provide your audio file in multiple formats for these to work. jPlayer also has a jQuery dependency. Sound Manager has extensive API for further customization.

@@ -43,7 +43,7 @@

audio

html

use with polyfill

canvas

- [Open] +

Canvas is definitely good to go for modern browsers. But if you are looking to use it in IE 8 and below, use FlashCanvas.

@@ -56,7 +56,7 @@

canvas

html

caution with polyfill

datalist

- [Open] +

Jeremy Keith has a graceful fallback solution that does not use a script.

@@ -69,7 +69,7 @@

datalist

html

use with polyfill

dataset

- [Open] +

More info about dataset

@@ -82,7 +82,7 @@

dataset

html

use with polyfill

details

- [Open] +

Use detail element if you intent to show a summary which when clicked reveals detailed information.

@@ -95,7 +95,7 @@

details

html

use with fallback

Eventsource

- [Open] +

EventSource.js provides base fallback and is not dependent on jQuery.

@@ -108,7 +108,7 @@

Eventsource

html

use with polyfill

geo-location

- [Open] +

The Geolocation shim requires jQuery to work, but if you are looking for a mobile specific script, you are better off using the geo-location-javascript.

@@ -121,7 +121,7 @@

geo-location dom

use with fallback

history

- [Open] +

History.js has cross-compatibility between HTML5 browser implementations and optional hashchange fallback for HTML4 browsers. PJax (pushState + ajax = pjax) is what is used by Github for their fallback solution.

@@ -134,7 +134,7 @@

history

html

use with polyfill

menu

- [Open] +

Do note that this polyfill requires a jQuery dependency.

@@ -147,7 +147,7 @@

menu

html

use with polyfill

meter

- [Open] +
@@ -160,7 +160,7 @@

meter

html

use with polyfill

progress

- [Open] +
@@ -173,7 +173,7 @@

progress

html

use with fallback

ruby

- [Open] +

If you are using Ruby element you dont need a script-based fallback but you can provide a CSS based set of good defaults.

@@ -186,7 +186,7 @@

ruby

svg

use with polyfill

svg

- [Open] +

SVG has good support for several years in most browsers except IE. IE9 brings support, which means you can use a polyfill library like SVGWeb or Canvg or create SVG dynamically via RaphaelJS.

@@ -199,7 +199,7 @@

svg

use with polyfill

text-shadow

- [Open] +
@@ -212,7 +212,7 @@

text-shadow

html

use with polyfill

video

- [Open] +

Do note you need to supply your video in various formats to cater to all browsers and fallbacks. There is also a way to do this without any scripting as explained by Kroc Camen in his article Video for Everybody.

diff --git a/js/script.js b/js/script.js index f28c2600..f47d85d6 100644 --- a/js/script.js +++ b/js/script.js @@ -10,5 +10,21 @@ var listOptions = { featureList = new List('gfs', listOptions); document.getElementById('livesearch').addEventListener('search', function() { - featureList.search(this.value, listOptions.valueNames); -}, false); \ No newline at end of file +}, false); + +var expandfeatures = document.querySelectorAll('a.expand'), + count = expandfeatures.length; + +for(var i = 0; i < count; i++) { + expandfeatures[i].onclick = (function(e, i) { + return function(e) { + var parent = e.target.parentNode.parentNode; + console.log(parent); + if(!parent.classList.contains('expanded')) { + parent.classList.add('expanded'); + } else { + parent.classList.remove('expanded'); + } + }; + })(i); +} diff --git a/sass/style.scss b/sass/style.scss index b84fe7f0..2de4c512 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -47,7 +47,7 @@ html { font-size: 100%; overflow-y: scroll; -webkit-tap-highlight-color: rgba(0, body { margin: 0; font-size: 13px; line-height: 1.231; } -body, button, input, select, textarea { font-family: sans-serif; color: #222; } +body, button, input, select, textarea { font-family: sans-serif; color: $lightest; } ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; } ::selection { background: #fe57a1; color: #fff; text-shadow: none; } @@ -57,8 +57,8 @@ body, button, input, select, textarea { font-family: sans-serif; color: #222; } Links ========================================================================== */ -a { color: $contrast; text-decoration: none; } -a:visited { color: darken($contrast, 30%); } +a { color: #149CD7; text-decoration: none; } +a:visited { color: darken(#149CD7, 30%); } a:focus { outline: thin dotted; } /* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */ @@ -148,8 +148,7 @@ button, input { line-height: normal; *overflow: visible; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } -input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } -input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } +input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: normal; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } @@ -170,9 +169,32 @@ table { border-collapse: collapse; border-spacing: 0; } Primary styles Author: Divya Manian ========================================================================== */ - +* { box-sizing: border-box; } -html { box-shadow: 0 0 5em $lightest inset; min-height: 100%; max-width: 100%; } +html { + background-color: $dark; + color: $lightest; + background: -o-radial-gradient(20% 20%, circle cover, transparentize(#207cca, 0.9) 10%, transparent 10%), + -o-radial-gradient(30% 30%, circle cover, transparentize(#cd5c5c, 0.8) 5%, transparent 5%), + -o-radial-gradient(60% 40%, circle cover, transparentize(white, 0.9) 15%, transparent 15%), + -o-radial-gradient(80% 60%, circle cover, transparentize(olive, 0.8) 8%, transparent 8%), + -o-radial-gradient(40% 60%, circle cover, transparentize(#207cca, 0.8) 5%, transparent 5%), + -o-radial-gradient(40% 50%, circle cover, transparentize(black, 0.8) 5%, transparent 5%), + image-url('denim.png'); + background: -webkit-radial-gradient(20em 20em, circle cover, transparentize(#207cca, 0.9) 10em, transparent 10em), + -webkit-radial-gradient(30em 30em, circle cover, transparentize(#cd5c5c, 0.8) 5em, transparent 5em), + -webkit-radial-gradient(60em 40em, circle cover, transparentize(white, 0.9) 15em, transparent 15em), + -webkit-radial-gradient(80em 60em, circle cover, transparentize(olive, 0.8) 8em, transparent 8em), + -webkit-radial-gradient(40em 60em, circle cover, transparentize(#207cca, 0.8) 5em, transparent 5em), + -webkit-radial-gradient(40em 50em, circle cover, transparentize(black, 0.8) 5em, transparent 5em), + image-url('denim.png'); + +// background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat; + +// background-attachment: scroll, fixed, fixed, scroll, scroll, fixed, scroll; + min-height: 100%; + max-width: 100%; +} body { max-width: 70%; @@ -187,67 +209,130 @@ header.index { h2 { text-transform: uppercase; } -header.index h1{ font-size: 5em; text-transform: uppercase; color: $dark; text-shadow: 1px 1px 1px lighten($contrast, 10%), 2px 2px 1px lighten($contrast, 10%), 3px 3px 1px lighten($contrast, 10%);} +header.index h1{ + font-size: 5em; + text-transform: uppercase; + text-shadow: 1px 1px 1px lighten($contrast, 10%), + 2px 2px 1px lighten($contrast, 10%), + 3px 3px 1px lighten($contrast, 10%), + 4px 4px 1px darken($dark, 10%), + 5px 5px 3px darken($dark, 10%); + line-height: 1.2em; + margin: 0.8em 0 0.5em 0; +} + header.index h1 img { vertical-align: -10%; } -header.index h1 { line-height: 1.2em; margin: 0; } -header.index h1 + h2 { font-size: 1em; text-transform: lowercase; margin: 3em 0; } +header.index h1 + h2 { + font-size: 1em; + text-transform: lowercase; + margin: 0 auto; + max-width: 60%; + text-shadow: 1px 1px 1px darken($dark, 10%); +} header.index h1, header.index h2 b { font-family: 'Francois One', sans-serif; } header.index h2 b { font-size: 2em; display: block; color: lighten($contrast, 10%); } -header.index h1 b, header.index h3, article h3 b i { font-family: 'Open Sans', sans-serif; text-transform: uppercase; display: block; line-height: 1; } - - -header.index h3 { background: url(../dark_mosaic.png) $dark; color: white; position: relative; box-shadow: 0.05em 0.05em 0.4em 0.15em $darkest; padding: 1em; font-size: 1em; line-height: 1.5; } - -header.index h3::before, -header.index h3::after { content: ""; width: 0; height: 0; border: 5em solid $dark; border-width: 20px 0 20px 20px; border-color: $darkest transparent $darkest; position: absolute; left: -20px; top: 50%; margin-top: -20px; z-index: -1; } +header.index h1 b, +header.index h3, +article h3 b i { + font-family: 'Open Sans', sans-serif; + text-transform: uppercase; + display: block; + line-height: 1; +} -header.index h3::after { border-width: 20px 20px 20px 0; border-color: $darkest transparent $darkest; left: auto; right: -20px; } -header.index h3 a { color: lighten($contrast, 10%); } -header.index h3 a + a::before { content: " / "; color: white; } -header.index h3 b { word-spacing: 0.15em; text-transform: uppercase; } +header.index h3, +header.index h2 { + font-weight: normal; + text-transform: none; + font-style: normal; +} -header.index h3, header.index h2, -article h3 b i { font-weight: normal; text-transform: none; font-style: normal; } +header.index > div { padding: 1em 0 4em 0; } -header.index h4 { background: $lightest; padding: 1em; box-shadow: 0 0 1px $dark; } -header.index input[type="search"] { width: 50%; } +header.index input[type="search"] { + width: 50%; + padding: 0.5em 1em; + background: white; + border-radius: 10em; + border: 0; + color: darken($dark, 20%); +} -header.index h3, header.index h4 { margin: 0; } +header.index h3 { margin: 0; } -article h2 { color: $dark; text-shadow: 2px 2px 1px lighten($contrast, 30%); } +article h2 { + color: $dark; + text-shadow: 1px 1px 1px darken(#149CD7, 20%); + letter-spacing: 1px; +} article { - overflow: hidden; min-height: 2em; padding: 1em 0; position: relative; - @include background(radial-gradient(50% 200%, ellipse, hsl(53, 86%, 49%), hsla(53, 86%, 79%, 0) 40%)); + min-height: 2em; + background: white; + color: $dark; + margin-bottom: 2em; + border-radius: 0.3rem; + box-shadow: 0 0 7px darken($dark, 10%); } article > header { background: $lightest; - border-radius: 0 0.5em 0.5em 0; - + border-radius: 0.3rem; + box-shadow: 0 0 7px darken($lightest, 10%) inset; + position: relative; h4, h2, h3, a { display: inline-block; vertical-align: middle; margin: 0; } - a { float: right; } + > a { + position: absolute; + margin-top: 1em; + right: 1em; + width: 2em; + height: 2em; + &:before { + content: "+"; + font-size: 2rem; + line-height: 1.7rem; + text-align: center; + font-family: sans-serif; + color: white; + text-shadow: 1px 1px 1px darken($lightest, 40%); + box-shadow: 0 0 7px darken($lightest, 30%) inset; + width: 1em; + display: block; + height: 1em; + border-radius: 1em; + background: darken($lightest, 20%); + } + } i { font-style: normal; } h4, b, h3 { font-weight: normal; } h4 { font-size: 0.8em; - text-transform: uppercase; + text-transform: uppercase; + position: absolute; + left: -5em; + text-align: right; + margin-top: 1.5em; + display: block; + width: 4.5em; + z-index: 1; + color: $lightest; + text-shadow: 1px 1px 1px $dark; } h3 { background: indianred; border-radius: 0.2rem 0 0 0.2rem; - padding: 0.5rem 0 0.5rem 1rem; + padding: 0.5rem 0.5rem 0.5rem 1rem; margin-right: 1em; color: white; text-shadow: 1px 1px black; @@ -255,14 +340,15 @@ article > header { text-transform: uppercase; font-weight: bold; position: relative; + box-shadow: 4px 0px 6px darken(#CD5C5C, 12%) inset; &:before, &:after { content: ""; height: 50%; - width: 1em; + width: 0.8em; position: absolute; - right: -1em; - @include background(linear-gradient(45deg, #CD5C5C 50%, transparentize(#CD5C5C, 1) 50%)); + right: -0.8em; + @include background(linear-gradient(34deg, #CD5C5C 50%, darken(#CD5C5C, 10%) 53%, transparentize(#CD5C5C, 1) 56%)); } &:before { @@ -271,7 +357,7 @@ article > header { &:after { bottom: 0; - @include background(linear-gradient(-45deg, #CD5C5C 50%, transparentize(#CD5C5C, 1) 50%)); + @include background(linear-gradient(-34deg, #CD5C5C 50%, darken(#CD5C5C, 10%) 53%, transparentize(#CD5C5C, 1) 56%)); } i { @@ -288,23 +374,25 @@ article > header { &.use { background: olive; + box-shadow: 4px 0px 6px darken(olive, 12%) inset; &:before{ - @include background(linear-gradient(45deg, olive 50%, transparentize(olive, 1) 50%)); + @include background(linear-gradient(34deg, olive 50%, darken(olive, 5%) 53%, transparentize(olive, 1) 56%)); } &:after { - @include background(linear-gradient(-45deg, olive 50%, transparentize(olive, 1) 50%)); + @include background(linear-gradient(-34deg, olive 50%, darken(olive, 5%) 53%, transparentize(olive, 1) 56%)); } } &.caution { background: orange; + box-shadow: 4px 0 6px darken(#ffa500, 12%) inset; &:before{ - @include background(linear-gradient(45deg, #FFA500 50%, transparentize(olive, 1) 50%)); + @include background(linear-gradient(34deg, #FFA500 50%, darken(#ffa500, 5%) 53%, transparentize(#ffa500, 1) 56%)); } &:after { - @include background(linear-gradient(-45deg, #FFA500 50%, transparentize(olive, 1) 50%)); + @include background(linear-gradient(-34deg, #FFA500 50%, darken(#ffa500, 5%) 53%, transparentize(#ffa500, 1) 56%)); } } } @@ -313,52 +401,31 @@ article > header { } -article div.more { - max-height: 0em; - overflow: hidden; - @include our-transition("max-height 1s linear"); -} - -article:hover div.more { - max-height: 10em; -} - - - - -div#main, h1, header.index h2, header.index h3, header.index h4 { - @include our-transition(all 0.6s cubic-bezier(.83,1.47,.63,.9)); - -webkit-transition: all 0.6s cubic-bezier(0.83, 1, 0.63, 0.9); - -webkit-transform: translateZ(0); -} - -h1, h2, h3, h4 { - @include transition-duration(0.3s); -} - -.searching div#main { - @include transform(translate(0, -400px)); - @include transition-duration(0.8s); -} - -.searching h1 { @include transform(translate(-1200px, 0px)); } - -.searching header h2 { - @include transform(translate(1200px, 0px)); -} - -.searching header h3 { opacity: 0; } - -.searching header h4 { - @include transform(translate(0px, -393px)); - border-radius: 0 0 20px 20px; +article div.more { + max-height: 0em; + overflow: hidden; + box-shadow: 0 -1px 7px $dark; + @include our-transition("max-height 0.3s ease-in"); + + .recco { margin: 0.5em 1em; } + .polyfills { margin: 0.5em 1em 1.5em; } + .polyfills b { font-weight: bold; } + + .polyfills p { display: inline; } } -.test div#main { - @include transform(translate(0, -2480px)); +article.expanded { + > header { + border-bottom: 1px solid lighten($dark, 45%); + box-shadow: 0 0 7px darken($lightest, 10%) inset, 0 1px 7px lighten($dark, 35%); + } + > header > a:before { + content: "-"; + } + + div.more { max-height: 10em; } + } - - /* ============================================================================= Non-semantic helper classes Please define your styles before this section. diff --git a/template.html b/template.html index f3a5685f..bbc3ff89 100644 --- a/template.html +++ b/template.html @@ -18,9 +18,9 @@

Use the new and shiny responsibly. Look up properties and see if it is ready for use, and if so how you should use it with a polyfill, a fallback value or as it is.

-

- -

+
+ +
@@ -30,7 +30,7 @@

{{kind}}

{{status}} {{{polyfillaction tags}}}

{{{feature}}}

- [Open] +
{{{contents}}}