sverchok site design4

_.md

[ Launch: sverchok site design3 ] b174ec8ccdceaaf91810 by zeffii
[ Launch: sverchok site design2 ] 57c755695d758d910252 by zeffii
[ Launch: sverchok site design ] cbc2d2feba7d65d8c256 by zeffii
[ Launch: zeffii's geom dailies grid html BW ] 8cc363a1bc13f6b85419 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":"sverchok site design4","endpoint":"","display":"div","public":true,"require":[{"name":"crossfilter2","url":"http://square.github.io/crossfilter/crossfilter.v1.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}},"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,"ajax-caching":false,"thumbnail":"http://i.imgur.com/38VSTHI.png"}

inlet.js

/*
Prelim redesign of Sverchok landing page
-- been too long since I wrote .js and d3, 

page theme is purely accidental for shape visualization
*/


d3.select("body").style("background-color", "#ECECEC")


var content_display = d3.select("#display")
  .style({background: '#545354'})

var cmain = content_display.append("div")
  .classed("content_main", true)
  .attr({width: '289px', height: '500px'});

/*
probably wont use link for most menu items, but change content of 
the sv_content div on the fly, instead.

*/

var context = {
  header: "Sverchok",
  menu_items: [
    {name:"About", link: ""},
    {name:"Gallery", link: ""},
    {name:"Download", link: ""},
    {name:"Help", link: "...url to manual..."},
    {name:"Support", link: ""}
  ],
  about: "\
droll trickatreat streaky bacon chance jeopardy dimanche fravaol ti\
chinchan chipchop chumchim chobchab blert braaap rabble rabble rablerable. RaBel!"
}

function draw_content(){
  
  var maindiv = cmain.append('div').classed('sv_maindiv', true);
   
  var div1 = maindiv.append("div").classed("sv_header", true);
  var div2 = maindiv.append("div").classed("sv_menu", true);
  var div3 = maindiv.append("div").classed("sv_content", true);
  
  div1.append('text').text(function(){ return context.header })
  
  // this can be transitioned to other images using a timer.
  div1.style({
    "background-image": "url(https://cloud.githubusercontent.com/assets/619340/5299224/1c085d8e-7bc5-11e4-8246-6951c48014ef.png)"
  })
      
  var menu = div2.selectAll("div")
      .data(context.menu_items)
      .classed("menu_item", true);
    
  var menu_divs = menu.enter().append("div").classed('item', true)
  menu_divs.append("text")
      .text(function(d, i) { return d.name });
  
  div3.append('text')
    .append('h3').text('About')
    .append('p').append('text').text(context.about)
  
  //div2.append('text').text(function(){ return context.about })
  
  menu.each(function(d){
    var obj = d3.select(this);
    
    obj.on("mouseover", function(d){
      console.log('over', d.name);
    })
    obj.on("mouseout", function(d){
      console.log('out', d.name);
    })    
    obj.on("click", function(d){
      console.log('clicked', d.name);
    })    

    
  })
}


draw_content()

// fontage

  WebFontConfig = {
    google: { families: [ 'PT+Sans:400,700,400italic:latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

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 { 
  font-size: 0.7em;
  line-height: 0.95em;
  overflow: scroll;
  width: 100%
}

text {
  color: #edfbed;
  font-family: 'PT Sans', sans-serif;
}

.sv_maindiv {
  margin: 40px 40px 40px 40px;
  width: 800px;
  
}

.sv_header {
  background: #fffaf9;
  width: 100%;
  height: 300px;
  padding-top: 50px;
  margin-top: 20px;
}

.sv_header text {
  color: #e8e9e6;
  font-size: 7em
}

.sv_menu {
  display: inline-block;
  float: left;
  //background: #eceeeb;
  width: 12%;
  height: auto;
  padding-top: 20px;
}

.sv_content {
  float: left;
  display: inline-block;
  background: #7ee1f0;
  height: 300px;
  width: 88%;
  padding: 16px 16px 16px 22px;
  vertical-align: top;
}

.item {
  text-align: right;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  background: #fdfafe;
  //border: 1px solid;
}

.item:hover {
  background: #fefefe;
}

.item text {
  color: #000000;
  font-size: 1.2em;
}

.sv_content h3{
  color: #ffffff;
  font-size: 1.2em;
}

.sv_content p text{
  color: #ffffff;
  font-size: 1.0em;
  font-weight: normal; 
  
}