diff --git a/basic.html b/basic.html index f6bfd4a..5fb5d2f 100644 --- a/basic.html +++ b/basic.html @@ -1,26 +1,31 @@ - + + + + Moving Boxes - + - + - + + + + + -
- -
- moving boxes -
- - -
- - - - -
+
+ +

Moving Boxes

+ + + + + + +
- + + \ No newline at end of file diff --git a/css/movingboxes.css b/css/movingboxes.css index 69edd9f..7a33822 100644 --- a/css/movingboxes.css +++ b/css/movingboxes.css @@ -1,27 +1,12 @@ -/* Default MovingBoxes wrapper size */ -#movingboxes { - width: 900px; - min-height: 200px; -} - -/* Default MovingBoxes panel size */ -#movingboxes > li { - width: 350px; -} - /*** Overall MovingBoxes Slider ***/ .mb-wrapper { border: 5px solid #ccc; - margin: 0 auto; + margin: 0 auto 20px; position: relative; left: 0; top: 0; - border-radius: 1em; - -moz-border-radius: 1em; - -webkit-border-radius: 1em; + border-radius: 10px; box-shadow: inset 0 0 10px #888; - -moz-box-shadow: inset 0 0 10px #888; - -webkit-box-shadow: inset 0 0 10px #888; } /* Panel Wrapper */ @@ -41,13 +26,13 @@ /* active slider border highlight */ .mb-active-slider { - border-color: #999bff; + border-color: #333; } /*** Slider panel ***/ .mb-slider .mb-panel { margin: 0; - padding: 5px; + padding: 20px; display: block; cursor: pointer; float: left; @@ -111,19 +96,21 @@ a.mb-scrollButtons.disabled { z-index: 100; } .mb-controls a { - color: #444; - font: 12px Georgia, Serif; + color: #666; + font: 18px/2.2 Georgia, Serif; display: inline-block; text-decoration: none; padding: 2px; - height: 18px; margin: 0 5px 0 0; text-align: center; outline: 0; } -.mb-controls a.current, .mb-controls a:hover { - color: #fff; +.mb-controls a:hover { + color: black; +} +.mb-controls a.current { + color: white; } .mb-active-slider .mb-controls { - background: #999bff; + background: #333; } \ No newline at end of file diff --git a/demo/demo.css b/demo/demo.css index a3d18ba..169c160 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -1,21 +1,53 @@ /* Moving Boxes demo CSS */ -* { margin: 0; padding: 0; } -body { font: 11px Helvetica, Arial, sans-serif; } -#wrapper {} + +@import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700); + +* { + margin: 0; + padding: 0; +} + +body { + font: 16px/1.4 'PT Sans', sans-serif; +} + +.demo-title { + text-align: center; + color: #a71700; + text-transform: uppercase; + padding: 30px 0 0; + font-size: 60px; +} /* Navigation bar */ -#nav { display: block; width: auto; margin: 10px auto; text-align: center; white-space: nowrap; line-height: 3em; } -#nav a { text-align: center; background: black; color: white; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding: 10px; text-decoration: none; font-size: 14px; } -#nav a.git { background: #006; } -#nav a.play { background: #060; } -#nav a.issue { background: #600; } -#nav a:hover, #nav a.current { background: #666; } +.main-nav { + display: block; + text-align: center; + border-bottom: 2px solid #a71700; + margin: 0 0 20px 0; + padding: 0 0 10px 0; +} + +.main-nav a { + text-decoration: none; + color: #3e63ec; + font-size: 18px; + margin: 0 8px; +} +.main-nav a:hover { + color: black; + border-bottom: 2px solid black; +} /* Moving Boxes title image wrapper */ -#title { text-align: center; } -#title img { border: 0; } +#title { + text-align: center; +} +#title img { + border: 0; +} -/* panel images */ +/* Panel images */ .mb-inside img { width: 100%; } /* height of the placeholder until image completely loads - needed for @@ -24,13 +56,18 @@ body { font: 11px Helvetica, Arial, sans-serif; } */ #slider-two .current img { /* height: 326px; */ } -/* panel links */ +/* Panel links */ .mb-inside a { color: #333; text-decoration: none; border-bottom: 1px dotted #ccc; } .mb-inside a:hover { border-bottom: 1px solid #999; } /* Add/remove panels buttons */ .buttons { padding: 5px 10px; text-align: center; } -/* direct link styling */ -.dlinks { text-align: center; font-size: 20px; } - +/* Direct link styling */ +.dlinks { + text-align: center; + margin: 0 0 20px 0; +} +.dlinks * { + vertical-align: middle; +} \ No newline at end of file diff --git a/demo/demo.js b/demo/demo.js index 7004879..87b25fd 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -84,9 +84,9 @@ $(function(){ return false; }); - // Report events to firebug console + // Report events to console $('.mb-slider').bind('initialized.movingBoxes initChange.movingBoxes beforeAnimation.movingBoxes completed.movingBoxes',function(e, slider, tar){ - // show object ID + event in the firebug console + // show object ID + event in the console // namespaced events: e.g. e.type = "completed", e.namespace = "movingBoxes" if (window.console && window.console.log){ var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.curPanel + ', targeted panel is ' + tar; diff --git a/demo/movingboxes.png b/demo/movingboxes.png deleted file mode 100644 index bb9ce48..0000000 Binary files a/demo/movingboxes.png and /dev/null differ diff --git a/design/mockup.psd b/design/mockup.psd deleted file mode 100755 index 82afa8a..0000000 Binary files a/design/mockup.psd and /dev/null differ diff --git a/index.html b/index.html index 134099f..e1faca9 100755 --- a/index.html +++ b/index.html @@ -1,146 +1,140 @@  - + + Moving Boxes - + - + - + + -
-
- moving boxes -
- - - -
-
- Go to Panel: -
-
- -
- - -
-
- - - - -

- - -
- -
- picture -

News Heading - Lisa

-

Add a short exerpt here... more

-
+
-
- picture -

News Heading - Monica

-

Add a short exerpt here... more

-
+

Moving Boxes

-
- picture -

News Heading - Lin

-

Add a short exerpt here... more

-
+ -
- picture -

News Heading - Shiela

-

Add a short exerpt here... more

-
+
+ Go to Panel: -
- picture -

News Heading - Joanne

-

Add a short exerpt here... more

+ +
-
+ +
    + +
  • + picture +

    News Heading

    +

    Add a short exerpt here... more

    +
    • + +
  • + picture +

    News Heading

    +

    Add a short exerpt here... more and a whole lot more text goes here, so we can see the height adjust.

    +
    • + +
  • + picture +

    News Heading

    +

    Add a short exerpt here... more

    +
    • + +
  • + picture +

    News Heading

    +

    Add a short exerpt here... more

    +
    • + +
  • + picture +

    News Heading

    +

    Add a short exerpt here... more

    +
    • + +
  • + picture +

    News Heading

    +

    Add a short exerpt here... more

    +
    • + +
  • + picture +

    News Heading

    +

    Add a short exerpt here... more

    +
    • + +
+ + +
+ +
+ picture +

News Heading - Lisa

+

Add a short exerpt here... more

+
+ +
+ picture +

News Heading - Monica

+

Add a short exerpt here... more

+
+ +
+ picture +

News Heading - Lin

+

Add a short exerpt here... more

+
+ +
+ picture +

News Heading - Shiela

+

Add a short exerpt here... more

+
+ +
+ picture +

News Heading - Joanne

+

Add a short exerpt here... more

+
-

+
-
+
- + + \ No newline at end of file