From 4593f537df5abe1d2cfae4a4b12bb12da20e61c8 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 27 Dec 2010 20:55:27 -0500 Subject: [PATCH] html : Refine styles for example options --- _layouts/elements.html | 60 ++++---- .../2010-12-13-elements-complete.html | 2 +- .../examples/2010-12-16-elements-partial.html | 3 +- css/style.css | 129 ++++++++++++++++-- 4 files changed, 152 insertions(+), 42 deletions(-) diff --git a/_layouts/elements.html b/_layouts/elements.html index cd871a6..385e789 100644 --- a/_layouts/elements.html +++ b/_layouts/elements.html @@ -9,18 +9,18 @@ -
+

{{ page.title }}

Filters

-
    -
  • show all
    • +
      +
    • show all
    • metalloid
    • metal -
        +
        • alkali
        • alkaline-earth
        • lanthanoid
          • @@ -31,7 +31,7 @@
        • nonmetal -
            +
            • other
            • halogen
            • noble-gas
              • @@ -42,30 +42,28 @@

              Sort Ascending

              -
                -
              • original-order
                • -
              • name
                • -
              • symbol
                • -
              • number
                • -
              • weight
                • -
              • category
                • + -

                Sort Descending

                - -
                  -
                • original-order
                  • -
                • name
                  • -
                • symbol
                  • -
                • number
                  • -
                • weight
                  • -
                • category
                  • +

                  Layouts

                  -
                    -
                  • masonry
                    • +
                      +
                    • masonry
                    • clearFloat
                    • cellsByRow
                    • masonryHorizontal
                      • @@ -75,7 +73,7 @@

                      Etc

                      -
                        +
                        • Toggle variable sizes
                        • Insert new elements
                          • @@ -264,6 +262,20 @@ $('#xray').find('a').click(function(){ $demo.toggleClass('xray'); }); + + + $('#options').find('.option-set a').click(function(){ + var $this = $(this); + + // don't proceed if already selected + if ( $this.hasClass('selected') ) { + return; + } + + $this.parents('.option-set').find('.selected').removeClass('selected'); + $this.addClass('selected'); + + }) }); diff --git a/_posts/examples/2010-12-13-elements-complete.html b/_posts/examples/2010-12-13-elements-complete.html index 1996bfb..716295d 100644 --- a/_posts/examples/2010-12-13-elements-complete.html +++ b/_posts/examples/2010-12-13-elements-complete.html @@ -4,7 +4,7 @@ layout: elements category: examples --- -
                          +
                          {% for element in site.elements %} {% include element-partial.html %} {% endfor %} diff --git a/_posts/examples/2010-12-16-elements-partial.html b/_posts/examples/2010-12-16-elements-partial.html index 412282c..946be3c 100644 --- a/_posts/examples/2010-12-16-elements-partial.html +++ b/_posts/examples/2010-12-16-elements-partial.html @@ -4,8 +4,7 @@ layout: elements category: examples --- - -
                          +
                          {% for element in site.elements limit:10 offset:60 %} {% include element-partial.html %} {% endfor %} diff --git a/css/style.css b/css/style.css index dae75a4..546ea09 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,11 @@ -html { - height: 100%; +/**** Base styles ****/ + +* { + margin: 0; + padding: 0; } + body { padding: 20px; font-family: 'Helvetica Neue', Arial, sans-serif; @@ -9,17 +13,36 @@ body { line-height: 1.5em; background: #1D1D1D; color: #FFF; - height: 100%; } + +h1, h2, h3, p, ul, ol, pre, dl { + margin-bottom: 1.0em; +} + + +ul, ol { + margin-left: 1.5em; +} + + a { color: #FB4; text-decoration: none; } -.wrap { + +/**** Isotope styles ****/ + +/* required for containers to inherit vertical size from window */ +html, +body { + height: 100%; +} + +.iso-container { background: transparent; - border: 4px solid #FFF; + border: 1px solid #FFF; padding: 20px; } @@ -152,7 +175,7 @@ a { height: 340px; } -.wrap.isotope, +.iso-container.isotope, .isotope .element { -webkit-transition-duration: 1.0s; -moz-transition-duration: 1.0s; @@ -161,7 +184,7 @@ a { } -.wrap.isotope.no-transition, +.iso-container.isotope.no-transition, .isotope.no-transition .element { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; @@ -170,7 +193,7 @@ a { } -.wrap.isotope { +.iso-container.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; /* -o-transition-property: height, width;*/ @@ -184,18 +207,86 @@ a { transition-property: transform, opacity; } +/**** Example Options ****/ -#filters li li, -.options li { - display: inline-block; - margin-right: 0.5em; +#options { + padding-bottom: 1.0em; +} + +#options h3 { + margin-bottom: 0.2em; +} + +#options ul { + margin: 0; list-style: none; } +#options ul ul { + margin-left: 1.5em; +} + +#options .floated li { + float: left; +} + .isotope-hidden { pointer-events: none; } +#options li { +} + +#options li a { + display: inline-block; + padding: 0.5em; + background-color: #FB2; + color: #222; + font-weight: bold; + text-shadow: 0 1px hsla( 0, 0%, 100%, 0.5 ); + background-image: -moz-linear-gradient(-90deg, + hsla( 0, 0%, 100%, 0.4 ) , + hsla( 0, 0%, 100%, 0.0 ) + ); + background-image: -webkit-gradient(linear, 0 top, 0 bottom, + from( hsla( 0, 0%, 100%, 0.4 ) ), + to( hsla( 0, 0%, 100%, 0.0 ) ) + ); + margin-bottom: 0.2em; +} + +#options li a:hover { + background-color: #2BF; +} + +#options li a:active { + background-color: #29D; + -webkit-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); + -moz-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); + -o-box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); + box-shadow: inset 0 2px 8px hsla( 0, 0%, 0%, 0.6 ); +} + +#options .floated li a { + border-left: 1px solid hsla( 0, 0%, 100%, 0.5 ); + border-right: 1px solid hsla( 0, 0%, 0%, 0.2 ); +} + +#options .floated li:first-child a { + border-radius: 10px 0 0 10px; + border-left: none; +} + +#options .floated li:last-child a { + border-radius: 0 10px 10px 0; +} + +#options .option-set li a.selected { + background-color: #13F; + text-shadow: none; + color: white; +} + /**** Horizontal ****/ /*.horizontal #options { @@ -205,13 +296,21 @@ a { top: 20px; } -.horizontal .wrap { +.horizontal .iso-container { height: 80%; position: relative; margin-left: 340px; top: 20px; }*/ -.horizontal .wrap { +.horizontal .iso-container { height: 80%; -} \ No newline at end of file +} + + + +/* >> The Magnificent CLEARFIX: Updated to prevent margin-collapsing on child elements << j.mp/bestclearfix */ +.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden; } +.clearfix:after { clear: both; } +/* fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */ +.clearfix { zoom: 1; }