sverchok site design3

_.md

[ 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 design3","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 messing
*/


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'});

var context = {
  header: "Sverchok",
  menu_items: [
    {name:"About", link: ""},
    {name:"Gallery", link: ""},
    {name:"Download", link: ""},
    {name:"Help", link: ""},
    {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 div1 = cmain.append("div").classed("sv_header", true);
  var div2 = cmain.append("div").classed("sv_menu", true);
  var div3 = cmain.append("div").classed("sv_content", true);
  
  div1.append('text').text(function(){ return context.header })
 
  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 })
  
}


draw_content()

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;
}

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

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

.sv_menu {
  display: inline-block;
  background: #bbc5b8;
  width: 176px;
  height: 399px;
  padding-top: 16px;
}

.sv_content {
  display: inline-block;
  background: #0e707f;
  width: 600px;
  height: 700px;
  padding-top: 16px;
  padding-left: 22px;
  vertical-align: top;
}

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

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

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

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