diff --git a/css/style.css b/css/style.css index 6a8b07b..d53060e 100644 --- a/css/style.css +++ b/css/style.css @@ -47,101 +47,14 @@ header { color: #F1F1F1; } -footer { - text-align: right; -} - -/*** ***/ -/*** GRID DISPLAY ***/ - #content { - width: 1000px; + width: 800px; margin: 0 auto; } -#entries { - -moz-column-count: 4; - -moz-column-gap: 20px; - -webkit-column-count: 4; - -webkit-column-gap: 20px; - column-count: 4; - column-gap: 20px; - width: 1000px; -} -#entries span.content { - display: inline-block; - margin-bottom: 0px; - width: 100%; -} - -@media only screen and (max-width : 1199px), -only screen and (max-device-width : 1199px){ - #entries { - -moz-column-count: 5; - -moz-column-gap: 20px; - -webkit-column-count: 5; - -webkit-column-gap: 20px; - column-count: 5; - column-gap: 20px; - width: 1000px; - } - - #content { - width: 1000px; - } -} - - -@media only screen and (max-width : 999px), -only screen and (max-device-width : 999px){ - #entries { - -moz-column-count: 4; - -moz-column-gap: 15px; - -webkit-column-count: 4; - -webkit-column-gap: 15px; - column-count: 4; - column-gap: 15px; - width: 800px; - } - - #content { - width: 800px; - } -} - -@media only screen and (max-width : 799px), -only screen and (max-device-width : 799px){ - #entries { - -moz-column-count: 3; - -moz-column-gap: 10px; - -webkit-column-count: 3; - -webkit-column-gap: 10px; - column-count: 3; - column-gap: 10px; - width: 600px; - } - - #content { - width: 600px; - } -} - -@media only screen and (max-width : 599px), -only screen and (max-device-width : 599px){ - #entries { - -moz-column-count: 2; - -moz-column-gap: 10px; - -webkit-column-count: 2; - -webkit-column-gap: 10px; - column-count: 2; - column-gap: 10px; - width: 400px; - } - - #content { - width: 400px; - } +footer { + text-align: right; } /*** ***/ @@ -152,32 +65,34 @@ only screen and (max-device-width : 599px){ cursor: pointer; } -#main #entries { +#main #content { margin-top: 20px; } -#main #entries .entrie { +#main .entrie { color: rgb(46, 46, 46); position:relative; background-color: #ffffff; padding: 15px; - min-height: 6em; + min-height: 8em; -webkit-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 0px 2px -1px #000; box-shadow: 0px 0px 2px -1px #000; - list-style-type: none; + width: 30%; + margin: 10px; + float: left; } -#main #entries .entrie h2 a { +#main .entrie h2 a { text-decoration: none; } -#main #entries .entrie h2 a:hover { +#main .entrie h2 a:hover { color: #F5BE00; } -#main #entries .entrie .tools { +#main .entrie .tools { position:absolute; bottom: 0; width: 100%; @@ -185,7 +100,7 @@ only screen and (max-device-width : 599px){ margin-left: -20px; } -#main #entries .entrie .tools a.tool span { +#main .entrie .tools a.tool span { display: inline-block; width: 16px; height: 16px; @@ -238,4 +153,45 @@ body.article { text-decoration: none; } -/*** ***/ \ No newline at end of file +/*** ***/ +#main +{ + max-width: 60em; /* 960 px */ + margin: 0 auto; +} + #content + { + width: 103.125%; /* 990px */ + overflow: hidden; + margin-left: -1.562%; /* 15px */ + margin-bottom: -1.875em; /* 30px */ + } + .entrie + { + width: 30.303%; /* 300px */ + float: left; + margin: 0 1.515% 1.875em; /* 15px 30px */ + } + +@media only screen and ( max-width: 40em ) /* 640px */ +{ + .entrie + { + width: 46.876%; /* 305px */ + margin-bottom: 0.938em; /* 15px */ + } +} +@media only screen and ( max-width: 20em ) /* 640px */ +{ + #content + { + width: 100%; + margin-left: 0; + } + .entrie + { + width: 100%; + margin-left: 0; + margin-right: 0; + } +} \ No newline at end of file diff --git a/index.php b/index.php index abf658a..27144de 100755 --- a/index.php +++ b/index.php @@ -129,12 +129,11 @@ catch (Exception $e)
  • poche it !
    • -
    - + + diff --git a/js/jquery.masonry.min.js b/js/jquery.masonry.min.js new file mode 100644 index 0000000..57c081c --- /dev/null +++ b/js/jquery.masonry.min.js @@ -0,0 +1,10 @@ +/** + * jQuery Masonry v2.1.08 + * A dynamic layout plugin for jQuery + * The flip-side of CSS Floats + * http://masonry.desandro.com + * + * Licensed under the MIT license. + * Copyright 2012 David DeSandro + */ +(function(e,t,n){"use strict";var r=t.event,i;r.special.smartresize={setup:function(){t(this).bind("resize",r.special.smartresize.handler)},teardown:function(){t(this).unbind("resize",r.special.smartresize.handler)},handler:function(e,t){var n=this,s=arguments;e.type="smartresize",i&&clearTimeout(i),i=setTimeout(function(){r.dispatch.apply(n,s)},t==="execAsap"?0:100)}},t.fn.smartresize=function(e){return e?this.bind("smartresize",e):this.trigger("smartresize",["execAsap"])},t.Mason=function(e,n){this.element=t(n),this._create(e),this._init()},t.Mason.settings={isResizable:!0,isAnimated:!1,animationOptions:{queue:!1,duration:500},gutterWidth:0,isRTL:!1,isFitWidth:!1,containerStyle:{position:"relative"}},t.Mason.prototype={_filterFindBricks:function(e){var t=this.options.itemSelector;return t?e.filter(t).add(e.find(t)):e},_getBricks:function(e){var t=this._filterFindBricks(e).css({position:"absolute"}).addClass("masonry-brick");return t},_create:function(n){this.options=t.extend(!0,{},t.Mason.settings,n),this.styleQueue=[];var r=this.element[0].style;this.originalStyle={height:r.height||""};var i=this.options.containerStyle;for(var s in i)this.originalStyle[s]=r[s]||"";this.element.css(i),this.horizontalDirection=this.options.isRTL?"right":"left";var o=this.element.css("padding-"+this.horizontalDirection),u=this.element.css("padding-top");this.offset={x:o?parseInt(o,10):0,y:u?parseInt(u,10):0},this.isFluid=this.options.columnWidth&&typeof this.options.columnWidth=="function";var a=this;setTimeout(function(){a.element.addClass("masonry")},0),this.options.isResizable&&t(e).bind("smartresize.masonry",function(){a.resize()}),this.reloadItems()},_init:function(e){this._getColumns(),this._reLayout(e)},option:function(e,n){t.isPlainObject(e)&&(this.options=t.extend(!0,this.options,e))},layout:function(e,t){for(var n=0,r=e.length;n -

    Follow @getpoche on twitter

    +

    download poche on github
    follow us on twitter