zeffii's neocities

_.md

[ Launch: zeffii's geom dailies grid html BW ] 8825330 by zeffii
[ Launch: zeffii's geom dailies grid html ] 5818369 by zeffii
[ Launch: zeffii's geom dailies grid ] 5756514 by zeffii
[ Launch: zeffii's geom dailies ] 5280281 by zeffii
[ Launch: zeffii's geom dailies ] 5279252 by enjalot
[ Launch: just mine p5 ] 5020279 by zeffii
[ Launch: just mine p5 ] 4966869 by zeffii
[ Launch: just mine p3 ] 4960296 by zeffii
[ Launch: just mine p2 ] 4959904 by zeffii
[ Launch: just mine ] 4959669 by zeffii
[ Launch: crossfilter racetrack ] 4956157 by zeffii
[ Launch: crossfilter racetrack ] 4624910 by zeffii
[ Launch: Another Inlet ] 4618198 by enjalot

config.json

{"description":"zeffii's neocities","endpoint":"","display":"div","public":true,"require":[{"name":"crossfilter","url":"https://raw.github.com/square/crossfilter/master/crossfilter.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"cars.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"conf.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"recodes.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"projects.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"tab":"edit","display_percent":0.46399999999999975,"thumbnail":"http://i.imgur.com/zGdecyN.png"}

inlet.js

/*global d3, tributary*/


// 'use strict'
d3.select("body").style("background-color", "#ECECEC");

var projects = tributary.projects,
    content_display = d3.select("#display"),
    content = content_display.append("div").classed("content_main", true);


function draw_content() {

  
    console.log(projects)

    var tmeta = content.selectAll("div").data(projects.elements);
    
    var divs = tmeta.enter()
    .append("div").classed("indiv", true)
    
    divs.append("a").attr({
        href: function (d, i) {
            return d.image;
        },
        target: "_blank"
    })
    .append("img").attr("src", function (d) {
            var img = d.image,
                len = img.length,
                ext = img.substr(len-4),
                prefixed = img.substr(0, len-4),
                thumb = prefixed + "l" + ext;
          
            //onsole.log([prefixed, ext, thumb])
            return thumb;
        })
        .attr("title", function (d) {
            return "http://www.womp2.com";
        })
        .classed("indiv bw", true);

    divs.append("span")
        .text(function (d, i) {
            var descr = "cool story bro";
            return descr;
        });
}


draw_content();

projects.json

{
    
"elements": 
    [
        {
            "image": "http://i.imgur.com/Cy8U1a1.jpg",
            "bold_text": ["Image one","line2"],
            "small_text": ["line3","line4"],
            "align": "right"
        },
        {
            "image": "http://i.imgur.com/SEGue.png",
            "bold_text": ["Image one","line2"],
            "small_text": ["line3","line4"],
            "align": "right"
        },
        {
            "image": "http://i.imgur.com/RsocLUK.jpg",
            "bold_text": ["Image one","line2"],
            "small_text": ["synthetic cortex","line4"],
            "align": "right"
        },
        {
            "image": "http://i.imgur.com/bSm6KEC.jpg",
            "bold_text": ["Image one","line2"],
            "small_text": ["synthetic cortex","line4"],
            "align": "right"
        },       
        {
            "image": "http://i.imgur.com/UaQQuUl.png",
            "bold_text": ["Image one","line2"],
            "small_text": ["synthetic cortex","line4"],
            "align": "right"
        } 
      
    ]

  
  
  
}

style.css

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark .CodeMirror-gutters {background: #505050;}
.cm-s-lesser-dark .CodeMirror-linenumber {color: #D3D3D3;}


#display {
  overflow:scroll;
  padding-bottom: 5px;
}

div.content_main { 
  //background: #DADADA; 
  float: left;
  font-size: 0.7em;
  line-height: 0.95em;
  overflow: scroll;
  width: 800px;
}

div.indiv { 
  position: relative;
  display:inline-block;
  width: 159px;
  height: 185px;
  border: 1px solid white;
  margin: 2px;
  padding: 2px;
  overflow: hidden;

}

img.indiv {
  height: 135px;
  overflow: hidden;
}

img.indiv {
  transition-duration: 300ms;
  height: 126px;
  -webkit-filter: grayscale(0%);  
}

.bw:hover {
  transition-duration: 500ms;
  -webkit-filter: grayscale(90%);
}