From f791ff22d8c40b0fe9ab3f7680dcda7c8d3d9370 Mon Sep 17 00:00:00 2001 From: dumpfmprod Date: Sun, 13 Feb 2011 20:09:02 -0500 Subject: sostler prod commit, add isotope --- static/css/isostyle.css | 644 ++++++++++++++++++++++++++++++++++++++++ static/js/jquery.isotope.min.js | 39 +++ template/log_dump.st | 2 +- template/simplerlog.st | 29 +- 4 files changed, 703 insertions(+), 11 deletions(-) create mode 100644 static/css/isostyle.css create mode 100644 static/js/jquery.isotope.min.js diff --git a/static/css/isostyle.css b/static/css/isostyle.css new file mode 100644 index 0000000..f24322e --- /dev/null +++ b/static/css/isostyle.css @@ -0,0 +1,644 @@ +/**** Base styles ****/ + +* { + margin: 0; + padding: 0; +} + +body { + padding: 20px; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; + font-size: 13px; + line-height: 1.7em; + background: #1F1E1D; + color: #FFF; +} + +section, nav, header, footer { + display: block; +} + + +h1, h2, h3, p, ul, ol, pre, dl { + margin-bottom: 1.0em; +} + +h1, h2, #super-list, .element, .tagline { + font-family: 'Helvetica Neue', Arial, sans-serif; +} + +h1 { + font-size: 32px; + line-height: 1.1em; +} + +h2 { + font-size: 24px; + line-height: 1.1em; +} + +ul, ol { + margin-left: 1.5em; +} + + +a, +a code { + color: #FB4; + text-decoration: none; +} + +a:hover, +a:hover code { + color: #4BF; +} + +a:active, +a:active code { + color: #1FB; + background: black; +} + +a img { border: none; } + +/**** Isotope styles ****/ + +/* required for containers to inherit vertical size from window */ +html, +body { + height: 100%; +} + +#container { + border: 1px solid #666; + padding: 5px; + margin-bottom: 20px; +} + +.element { + width: 110px; + height: 110px; + margin: 5px; + float: left; + overflow: hidden; + position: relative; + background: #888; + color: #222; + -webkit-border-top-right-radius: 1.2em; + -moz-border-radius-topright: 1.2em; + border-top-right-radius: 1.2em; +} + +.element.alkali { background: #F00; background: hsl( 0, 100%, 50%); } +.element.alkaline-earth { background: #F80; background: hsl( 36, 100%, 50%); } +.element.lanthanoid { background: #FF0; background: hsl( 72, 100%, 50%); } +.element.actinoid { background: #0F0; background: hsl( 108, 100%, 50%); } +.element.transition { background: #0F8; background: hsl( 144, 100%, 50%); } +.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); } +.element.metalloid { background: #08F; background: hsl( 216, 100%, 50%); } +.element.other.nonmetal { background: #00F; background: hsl( 252, 100%, 50%); } +.element.halogen { background: #F0F; background: hsl( 288, 100%, 50%); } +.element.noble-gas { background: #F08; background: hsl( 324, 100%, 50%); } + + +.element * { + position: absolute; + margin: 0; +} + +.element .symbol { + left: 0.2em; + top: 0.4em; + font-size: 3.8em; + line-height: 1.0em; + color: #FFF; +} +.element.large .symbol { + font-size: 4.5em; +} + +.element.fake .symbol { + color: #000; +} + +.element .name { + left: 0.5em; + bottom: 1.6em; + font-size: 1.05em; +} + +.element .weight { + font-size: 0.9em; + left: 0.5em; + bottom: 0.5em; +} + +.element .number { + font-size: 1.25em; + font-weight: bold; + color: hsla(0,0%,0%,.5); + right: 0.5em; + top: 0.5em; +} + +.variable-sizes .element.width2 { width: 230px; } + +.variable-sizes .element.height2 { height: 230px; } + +.variable-sizes .element.width2.height2 { + font-size: 2.0em; +} + +.element.large, +.variable-sizes .element.large, +.variable-sizes .element.large.width2.height2 { + font-size: 3.0em; + width: 350px; + height: 350px; + z-index: 100; +} + +.clickable .element:hover { + cursor: pointer; +} + +.clickable .element:hover h3 { + text-shadow: + 0 0 10px white, + 0 0 10px white + ; +} + +.clickable .element:hover h2 { + color: white; +} + +/**** Isotope Filtering ****/ + +.isotope-item { + z-index: 2; +} + +.isotope-hidden.isotope-item { + pointer-events: none; + z-index: 1; +} + +/**** Isotope CSS3 transitions ****/ + +.isotope, +.isotope .isotope-item { + -webkit-transition-duration: 0.8s; + -moz-transition-duration: 0.8s; +/* -o-transition-duration: 0.8s;*/ + transition-duration: 0.8s; + +} + +.isotope { + -webkit-transition-property: height, width; + -moz-transition-property: height, width; +/* -o-transition-property: height, width;*/ + transition-property: height, width; +} + +/* disable CSS transitions for containers with infinite scrolling*/ +.isotope.infinite-scrolling { + -webkit-transition: none; + -moz-transition: none; + -o-transition: none; + transition: none; +} + +.isotope .isotope-item { + -webkit-transition-property: -webkit-transform, opacity; + -moz-transition-property: -moz-transform, opacity; +/* -o-transition-property: -o-transform, opacity;*/ + transition-property: transform, opacity; +} + +.isotope.no-transition, +.isotope.no-transition .isotope-item { + -webkit-transition-duration: 0s; + -moz-transition-duration: 0s; +/* -o-transition-duration: 0s;*/ + transition-duration: 0s; +} + +/**** Example Options ****/ + +#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; +} + + + +#options li { +} + +#options li a { + display: inline-block; + padding: 0.4em 0.5em; + background-color: #DDD; + 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.5 ) , + hsla( 0, 0%, 100%, 0.0 ) + ); + background-image: -webkit-gradient(linear, 0 top, 0 bottom, + from( hsla( 0, 0%, 100%, 0.5 ) ), + to( hsla( 0, 0%, 100%, 0.0 ) ) + ); + margin-bottom: 0.2em; +} + +#options li a:hover { + background-color: #5BF; +} + +#options li a:active { + background-color: #39D; + -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.3 ); + border-right: 1px solid hsla( 0, 0%, 0%, 0.2 ); +} + +#options .floated li:first-child a { + border-radius: 7px 0 0 7px; + border-left: none; +} + +#options .floated li:last-child a { + border-radius: 0 7px 7px 0; +} + +#options .option-set li a.selected { + background-color: #13F; + text-shadow: none; + color: white; +} + +/**** Horizontal ****/ + +.horizontal #container { + height: 80%; +} + +#copy { + max-width: 640px; +} + +/**** Photo demo ****/ + +.photos .photo { + width: 320px; + margin: 5px; + float: left; +} + +.photos .photo img { + display: block; + width: 100%; +} + +/**** Docs ****/ + +body.doc { + max-width: 640px; +} + +.doc #content { +/* font-size: 14px; + line-height: 1.7em;*/ + margin-bottom: 20px; +} + +.doc a:hover { + border-bottom: 1px dotted; +} + + +body.doc { + margin-left: 220px; +} + +.doc nav { + width: 210px; + position: fixed; + left: 10px; + top: 0px; + padding-top: 20px; + height: 100%; + overflow: auto; +} + +.doc nav h1 { + margin-top: 0; +} + +@media screen and (max-width: 768px) { + + body.doc { + margin-left: 0px; + } + + .doc nav { + width: auto; + position: relative; + left: auto; + top: auto; + padding-top: 0px; + height: auto; + margin-bottom: 20px; + } + +} + +/**** Doc page nav ****/ + +#docs-nav h1 { + font-size: 19px; + margin-bottom: 0.5em; +} + +#docs-nav h1 a, +#demo-nav a { color: #4FB; } +#docs-nav h1 a:hover, +#demo-nav a:hover { color: #4BF; } + +#demo-nav { + font-size: 16px; + font-weight: bold; + padding-bottom: 0.5em; + margin-bottom: 0.5em; + border-bottom: 1px solid #333; +} + +#docs-nav ul { + list-style: none; + margin: 0; + font-weight: bold; +} + +#docs-nav ul a { + display: block; + border: none; + padding: 1px 5px; +} + +#docs-nav ul .current a { + background: hsla( 0, 0%, 0%, 0.3 ); + color: #1BF; +} +#docs-nav ul a:hover, +#docs-nav ul .current a:hover { color: white; } + +#docs-nav ul .current .toc a { + font-size: 12px; + padding-left: 1.2em; + font-weight: normal; +} + +/**** Doc content ****/ + +.doc h2, +.doc footer { + border-top: 1px solid #333; + padding-top: 0.8em; +} + +.doc h2:target { + padding: 10px; + background: white; + color: #222; +} + +.doc h3 { + color: #FEC; + background: hsla( 0, 0%, 75%, 0.05 ); + padding: 2px 0.5em; + margin-bottom: 0.5em; +} + +.doc h4 { + margin-bottom: 0.5em; + font-size: 14px; +} + + +footer { + font-size: 12px; + border-top: 1px solid #333; + padding-top: 0.8em; +} + +pre { + padding: 10px; +} + +pre, code { + background: black; + color: white; + font-family: 'Monaco', monospace, sans-serif; +} + +.doc #content code { + font-size: 12px; +} + +.doc #content pre { + line-height: 1.6em; +} + +h3#options { + padding-bottom: 0; +} + +.option-def dl { +/* margin-top: 1.8em;*/ +/* padding-top: 0.5em;*/ +/* border-top: 1px solid #333;*/ +} + + +.option-def dl dt, +.option-def dl dd { + float: left; + padding: 0 1.2em;; + background: #161616; +/* height: 2.0em;*/ + line-height: 36px; + height: 36px; +} + +.option-def dl.header dt, +.option-def dl.header dd { + background: #444; +} + +.option-def dl dt { +/* font-size: 14px;*/ +} + +.option-def dl .option-type { +/* width: 60px;*/ + font-size: 13px; + color: #AAA; + font-style: italic; +} + +.option-def dl dd { + border-left: 1px solid #222; +} + +/* Tagline */ + +.doc .tagline { + font-size: 22px; + font-weight: 300; +} + +/* as-is from MIT */ + +.doc .as-is { + font-size: 95%; +} + +/* Commercial license blurb */ + +.doc #commercial { + background: white; + padding: 10px; + font-size: 14px; + color: #1F1F1D; +} + +.doc #commercial a { font-weight: bold;} + +/**** Pygments ****/ + +code .s1, +code .s { color: #78BD55; } /* string */ +code .mi, /* integer */ +code .cp, /* doctype */ +code .kc { color: #5298D4; } /*boolean*/ +code .k { color: #E39B79; } /* keyword */ +code .kd, /* storage */ +code .na { color: #A9D866; } /* markup attribute */ +code .p { color: #EDB; } /* punctuation */ +code .o { color: #F63; } /* operator */ +code .nb { color: #AA97AC;} /* support */ + +/* comment */ +code .c, +code .c1 { color: #666; font-style: italic; } + +code .nt { color: #A0C8FC; } /* Markup open tag */ + +code .nf { color: #9EA8B8; } /* css id */ +code .nc { color: #A78352; } /* CSS class */ +code .m { color: #DE8E50; } /* CSS value */ +code .nd { color: #9FAD7E; } /* CSS pseudo selector */ + + + +/**** Super list ****/ + +#super-list { + list-style: none; + margin: 0; + padding: 0; + margin-bottom: 40px; +} + +#super-list li { + display: inline-block; + float: left; + font-size: 28px; + line-height: 1.2em; + margin: 2px; + font-weight: 300; +} + +#super-list li.feature { background: #111; } +#super-list li span, +#super-list li a { + display: block; + padding: 0.2em 0.5em; +} +#super-list li a { + color: #222; +} +#super-list li.doc a { background: #3CF; } +#super-list li.demo a { background: #FC3; } +#super-list li.link a { background: #E58; color: white; } + +#super-list li a:hover { + background: white; +} + +#super-list li.link a:hover { color: #222; } + +#super-list.masonry li { + width: 216px; +} +#super-list.masonry li.feature, +#super-list.masonry li.link { + width: 436px; +} + +/************************** +** Infinite Scroll +**************************/ + + +#infscr-loading { + position: fixed; + bottom: 30px; + left: 42%; + z-index: 100; + background: white; + background: hsla( 0, 0%, 100%, 0.9 ); + padding: 20px; + color: #222; + font-size: 15px; + font-weight: bold; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; +} + + + +/* >> 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; } + + diff --git a/static/js/jquery.isotope.min.js b/static/js/jquery.isotope.min.js new file mode 100644 index 0000000..16ba2ef --- /dev/null +++ b/static/js/jquery.isotope.min.js @@ -0,0 +1,39 @@ +/** + * Isotope v1.0.110211 + * An exquisite jQuery plugin for magical layouts + * http://isotope.metafizzy.co + * + * Commercial use requires one-time license fee + * http://metafizzy.co/#licenses + * + * Copyright 2011 David DeSandro / Metafizzy + */ +(function(n,f,t){var o=function(){var a=["Moz","Webkit","Khtml","O","Ms"],b={};return function(c,d){d=d||document.documentElement;var e=d.style,g,h,i,j;if(arguments.length===1&&typeof b[c]==="string")return b[c];if(typeof e[c]==="string")return b[c]=c;h=c.charAt(0).toUpperCase()+c.slice(1);i=0;for(j=a.length;ih?1:gb.width){b.fitRows.x=0;b.fitRows.y=b.fitRows.height}b._pushPosition(c,b.fitRows.x+b.posLeft,b.fitRows.y+b.posTop);b.fitRows.height=Math.max(b.fitRows.y+e,b.fitRows.height);b.fitRows.x+= +d})},_fitRowsReset:function(){this.fitRows={x:0,y:0,height:0};return this},_fitRowsGetContainerSize:function(){return{height:this.fitRows.height}},_fitRowsResize:function(){return this.reLayout()},_cellsByRowReset:function(){this.cellsByRow={};this._getSegments("cellsByRow");this.cellsByRow.rowHeight=this.options.cellsByRow.rowHeight||this.$allAtoms.outerHeight(true);return this},_cellsByRowLayout:function(a){var b=this,c=this.cellsByRow.cols;this.cellsByRow.atomsLen=a.length;a.each(function(d){var e= +f(this),g=(d%c+0.5)*b.cellsByRow.columnWidth-e.outerWidth(true)/2+b.posLeft;d=(~~(d/c)+0.5)*b.cellsByRow.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByRowGetContainerSize:function(){return{height:Math.ceil(this.cellsByRow.atomsLen/this.cellsByRow.cols)*this.cellsByRow.rowHeight+this.posTop}},_cellsByRowResize:function(){var a=this.cellsByRow.cols;this._getSegments("cellsByRow");this.cellsByRow.cols!==a&&this.reLayout();return this},_straightDownReset:function(){this.straightDown= +{y:0};return this},_straightDownLayout:function(a){var b=this;a.each(function(){var c=f(this);b._pushPosition(c,b.posLeft,b.straightDown.y+b.posTop);b.straightDown.y+=c.outerHeight(true)});return this},_straightDownGetContainerSize:function(){return{height:this.straightDown.y+this.posTop}},_straightDownResize:function(){this.reLayout();return this},_masonryHorizontalPlaceBrick:function(a,b,c){b=Math.min.apply(Math,c);for(var d=b+a.outerWidth(true),e=c.length,g=e,h=this.masonryHorizontal.rows+1-e;e--;)if(c[e]=== +b)g=e;this._pushPosition(a,b,this.masonryHorizontal.rowHeight*g+this.posTop);for(e=0;eb.height){b.fitColumns.x=b.fitColumns.width;b.fitColumns.y=0}b._pushPosition(c,b.fitColumns.x+b.posLeft,b.fitColumns.y+b.posTop);b.fitColumns.width=Math.max(b.fitColumns.x+d,b.fitColumns.width); +b.fitColumns.y+=e})},_fitColumnsGetContainerSize:function(){return{width:this.fitColumns.width}},_fitColumnsResize:function(){return this.reLayout()},_cellsByColumnReset:function(){this.cellsByColumn={};this._getSegments("cellsByColumn",true);this.cellsByColumn.columnWidth=this.options.cellsByColumn.columnWidth||this.$allAtoms.outerHeight(true);return this},_cellsByColumnLayout:function(a){var b=this,c=this.cellsByColumn.rows;this.cellsByColumn.atomsLen=a.length;a.each(function(d){var e=f(this),g= +(~~(d/c)+0.5)*b.cellsByColumn.columnWidth-e.outerWidth(true)/2+b.posLeft;d=(d%c+0.5)*b.cellsByColumn.rowHeight-e.outerHeight(true)/2+b.posTop;b._pushPosition(e,g,d)});return this},_cellsByColumnGetContainerSize:function(){return{width:Math.ceil(this.cellsByColumn.atomsLen/this.cellsByColumn.rows)*this.cellsByColumn.columnWidth+this.posLeft}},_cellsByColumnResize:function(){var a=this.cellsByColumn.rows;this._getSegments("cellsByColumn",true);this.cellsByColumn.rows!==a&&this.reLayout();return this}}; +f.fn.imagesLoaded=function(a){var b=this.find("img"),c=b.length,d=this;b.bind("load",function(){--c<=0&&a.call(d)}).each(function(){if(this.complete||this.complete===t){var e=this.src;this.src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";this.src=e}});return this};f.widget=f.widget||{};f.widget.bridge=f.widget.bridge||function(a,b){f.fn[a]=function(c){var d=typeof c==="string",e=Array.prototype.slice.call(arguments,1),g=this;c=!d&&e.length?f.extend.apply(null,[true,c].concat(e)): +c;if(d&&c.charAt(0)==="_")return g;d?this.each(function(){var h=f.data(this,a);if(!h)return f.error("cannot call methods on "+a+" prior to initialization; attempted to call method '"+c+"'");if(!f.isFunction(h[c]))return f.error("no such method '"+c+"' for "+a+" widget instance");var i=h[c].apply(h,e);if(i!==h&&i!==t){g=i;return false}}):this.each(function(){var h=f.data(this,a);h?h.option(c||{})._init():f.data(this,a,new b(c,this))});return g}};f.widget.bridge("isotope",f.Isotope)})(window,jQuery); diff --git a/template/log_dump.st b/template/log_dump.st index 1b90d6b..d1fce95 100644 --- a/template/log_dump.st +++ b/template/log_dump.st @@ -6,7 +6,7 @@ $endif$ $dump.created_on$ -- by $dump.nick$ -
$dump.content$
+
$dump.content$
$share_buttons()$ diff --git a/template/simplerlog.st b/template/simplerlog.st index 92b2abf..c5851f5 100644 --- a/template/simplerlog.st +++ b/template/simplerlog.st @@ -15,6 +15,8 @@ + + $if(!user_nick)$ @@ -43,16 +45,17 @@ $endif$ body{margin:0px; background-image:url(http://dump.fm/static/img/bg.dither.gif); background-color:f1f1f1;/*background:#f0f9ff url(/static/img/fade-blue.png) top center repeat-x; background-repeat:repeat-x; - background-position:top;*/background-attachment:fixed;min-width:900px;} + background-position:top;*/background-attachment:fixed;min-width:900px; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif; + font-size: 13px; line-height: 1.5em;} img{border:0px;} -#banner{z-index:2;top:0;margin:1px;min-width:900px;width:75%;position:fixed;border-bottom:1px ridge #333;display:inline-block;height:35px;clear: both;} +#banner{z-index:2;top:0;margin:2px;margin-left:9px;min-width:900px;width:77%;max-width:970px;position:fixed;border-bottom:1px ridge #333;display:inline-block;height:35px;clear: both;} #banner a{font-size:69%;text-decoration:none;font-family: Monaco, "Courier New", Courier, monospace;letter-spacing:3.5px;color:#333;} #banner a:hover{background-color:#eee;color:black;text-decoration:none;} #fblike{margin-top:7px;margin-left:5px;} #logo{float:left;margin:1px;} #logobig{float:left;margin-top:-9px;margin-left:-5px;} #toplinks{float:left;margin-top:7px;margin-left:5px;} -#logout{position:fixed;right:0px;font-size:12px;top:4px;} +#logout{position:fixed;right:0px;font-size:12px;top:0px;padding:3px;line-height: 1em;} #searchbox{float:left;margin-top:7px;margin-left:5px;} #search-query{background-color:lightyellow;} #posts{font-family: Monaco, "Courier New", Courier, monospace;color:#333;font-size:8px;height:auto;padding:1px;margin-top:45px;} @@ -265,13 +268,14 @@ a#disregister { border-left-color: #FFF057; -webkit-box-shadow:#a0a0a0 3px 4px 4px; -moz-box-shadow: #a0a0a0 3px 4px 4px; /* FF 3.5+ */ - text-shadow: 1px 1px 3px #AAA; position:absolute; + text-shadow: 1px 1px 3px #AAA; margin-right:35px; } a#disregister:hover { - text-shadow: 1px 1px 1px gold;color:#000; - font-family: cursive;font-weight:100;font-size:18px;font-style: oblique;color: #fe1409; - background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(#E9E74A), to(#E9E74A)); - background-image: -moz-linear-gradient(#FFFAAE 0%, #E9E74A 90%); + + text-shadow: 1px 1px 1px gold; + font-family: cursive;font-weight:100;font-size:18px;font-style: oblique;color:black; + -webkit-box-shadow:#333 3px 4px 4px; + -moz-box-shadow: #333 3px 4px 4px; /* FF 3.5+ */ } @@ -448,16 +452,20 @@ jQuery(window).load(function(){ -
+
$roomkey$ log

dump.fm lets you talk with pictures! Paste an image url, upload, or snap a pic right from your webcam. Talk to friends, fav images, and keep track of the pix you love.

If you already have an account If not register! + + +
$if(dumps)$ - + + $dumps: { d | $log_dump(dump=d)$ }$ @@ -512,6 +520,7 @@ $debug_log()$
+ Loading... -- cgit v1.2.3-70-g09d2