From d07f0191afdaf7d62186b849238a30fdf43969a2 Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Thu, 25 Oct 2018 23:08:53 +0200 Subject: [PATCH] Update before putting live New font Content updates Show connections on hover See also now links fix links of 'url' to self --- gulpfile.js | 2 +- index.html | 6 +- rubenvandeven.jsonld | 156 ++++++++++++++++++++++++++-------------- src/js/portfolio.js | 111 +++++++++++++++++++++------- src/scss/portfolio.scss | 43 +++++++---- 5 files changed, 225 insertions(+), 93 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 2b14bb5..5b10d8f 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -81,7 +81,7 @@ gulp.task('serve', function() { } }); - gulp.watch(['index.html','rubenvandeven.jsonld'], browserSync.reload); + gulp.watch(['index.html','rubenvandeven.jsonld'], browserSync.reload({stream: true})); watchStylesAndScripts(); }); diff --git a/index.html b/index.html index ca06f3a..727b32c 100644 --- a/index.html +++ b/index.html @@ -39,9 +39,9 @@ - - - + + + diff --git a/rubenvandeven.jsonld b/rubenvandeven.jsonld index e5684c5..aa0fc33 100644 --- a/rubenvandeven.jsonld +++ b/rubenvandeven.jsonld @@ -5,6 +5,7 @@ }, "@type": "WebSite", "url": "https://rubenvandeven.com", + "s:seeAlso": [ "https://rubenvandeven.com/rubenvandeven.jsonld", "https://rubenvandeven.com/foaf.rdf#me"], "author": { "@id": "https://rubenvandeven.com/ruben", @@ -13,11 +14,10 @@ "jobTitle": "digital artist / researcher of software culture", "email": "info@rubenvandeven.com", "nationality": "The Netherlands", - "s:seeAlso": "https://rubenvandeven.com/foaf.rdf#me", "@reverse": { "member": [ { - "@id": "http://plottingd.at/a", + "@id": "http://plottingd.at/a#id", "@type": "PerformingGroup", "name": "Plotting Data: dramatisation as tactic", "url": "http://plottingd.at/a", @@ -43,7 +43,7 @@ ], "attendee": [ { - "@id": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero", + "@id": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero#id", "@type": "VisualArtsEvent", "name": "Residency: Summer Sessions 2016", "url": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero", @@ -59,8 +59,10 @@ "name": "Residency: Q21", "startDate": "2017-01", "endDate": "2017-02", - "isPartOf": { - "@id": "https://rubenvandeven.com/exhibition/mood_swings" + "@reverse": { + "subEvent": { + "@id": "https://rubenvandeven.com/exhibition/mood_swings" + } }, "location": { "@id": "https://rubenvandeven.com/place/q21" @@ -93,11 +95,13 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/sustaining-gazes-2.jpg" + "contentUrl": "assets\/image\/sustaining-gazes-2.jpg", + "thumbnailUrl": "assets\/thumb\/sustaining-gazes-2.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/sustaining-gazes-1.jpg" + "contentUrl": "assets\/image\/sustaining-gazes-1.jpg", + "thumbnailUrl": "assets\/thumb\/sustaining-gazes-1.jpg" } ] }, @@ -116,7 +120,7 @@ "height": "55cm + 8cm", "artworkSurface": "Oilpaint on wood + WiFi-connected RaspberryPi in ABS enclosure", "contributor": { - "@id": "http://www.donaldschenkel.nl/", + "@id": "http://www.donaldschenkel.nl/#person", "@type": "Person", "name": "Donald Schenkel", "url": "http://www.donaldschenkel.nl/" @@ -151,15 +155,18 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/mvp1-1.jpg" + "contentUrl": "assets\/image\/mvp1-1.jpg", + "thumbnailUrl": "assets\/thumb\/mvp1-1.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/mvp1-2.jpg" + "contentUrl": "assets\/image\/mvp1-2.jpg", + "thumbnailUrl": "assets\/thumb\/mvp1-2.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/mvp1-4.jpg" + "contentUrl": "assets\/image\/mvp1-4.jpg", + "thumbnailUrl": "assets\/thumb\/mvp1-4.jpg" } ] }, @@ -172,7 +179,7 @@ "height":"50cm", "artworkSurface": "Pencil drawing in metal LCD enclosure", "contributor": { - "@id": "http://www.joseph-huot.com/", + "@id": "http://www.joseph-huot.com/#person", "@type": "Person", "name": "Joseph Huot", "url": "http://www.joseph-huot.com/" @@ -186,15 +193,18 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/mvp2-01.jpg" + "contentUrl": "assets\/image\/mvp2-01.jpg", + "thumbnailUrl": "assets\/thumb\/mvp2-01.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/mvp2-02.jpg" + "contentUrl": "assets\/image\/mvp2-02.jpg", + "thumbnailUrl": "assets\/thumb\/mvp2-02.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/mvp2-5.jpg" + "contentUrl": "assets\/image\/mvp2-5.jpg", + "thumbnailUrl": "assets\/thumb\/mvp2-5.jpg" } ] }, @@ -220,7 +230,8 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/mvp3-1.jpg" + "contentUrl": "assets\/image\/mvp3-1.jpg", + "thumbnailUrl": "assets\/thumb\/mvp3-1.jpg" } ] } @@ -251,19 +262,23 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/moodmeter1-1.jpg" + "contentUrl": "assets\/image\/moodmeter1-1.jpg", + "thumbnailUrl": "assets\/thumb\/moodmeter1-1.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/moodmeter2.jpg" + "contentUrl": "assets\/image\/moodmeter2.jpg", + "thumbnailUrl": "assets\/thumb\/moodmeter2.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/moodmeter3.jpg" + "contentUrl": "assets\/image\/moodmeter3.jpg", + "thumbnailUrl": "assets\/thumb\/moodmeter3.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/moodmeter4.jpg" + "contentUrl": "assets\/image\/moodmeter4.jpg", + "thumbnailUrl": "assets\/thumb\/moodmeter4.jpg" } ] }, @@ -375,11 +390,13 @@ "@id": "https://rubenvandeven.com/#stateofemotion", "@type": "ExhibitionEvent", "name": "STATE of Emotion", - "isPartOf": { - "@id": "https://www.statefestival.org/", - "@type": "Event", - "name": "STATE Festival", - "address": "Berlin" + "@reverse": { + "subEvent": { + "@id": "https://www.statefestival.org/", + "@type": "Festival", + "name": "STATE Festival", + "address": "Berlin" + } }, "startDate": "2016-11-04", "endDate": "2016-11-05", @@ -397,8 +414,10 @@ "startDate": "2016-09", "endDate": "2016-09", "workFeatured": [], - "isPartOf": { - "@id": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero" + "@reverse": { + "subEvent": { + "@id": "http://summersessions.net/17-projects/projects-2016/55-emotion-hero" + } } } ] @@ -406,11 +425,13 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/emotionhero1-2.jpg" + "contentUrl": "assets\/image\/emotionhero1-2.jpg", + "thumbnailUrl": "assets\/thumb\/emotionhero1-2.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/emotionhero2.jpg" + "contentUrl": "assets\/image\/emotionhero2.jpg", + "thumbnailUrl": "assets\/thumb\/emotionhero2.jpg" } ] }, @@ -467,11 +488,13 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/choosehowyoufeel2-2.jpg" + "contentUrl": "assets\/image\/choosehowyoufeel2-2.jpg", + "thumbnailUrl": "assets\/thumb\/choosehowyoufeel2-2.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/choosehowyoufeel.jpg" + "contentUrl": "assets\/image\/choosehowyoufeel.jpg", + "thumbnailUrl": "assets\/thumb\/choosehowyoufeel.jpg" } ] }, @@ -482,7 +505,7 @@ "duration": "11:32 (∞ loop)", "description": "Whether the video frames are ordered by time or by emotion will not make a difference to a computer. For it, both orderings are just as logical. However, for the human spectator the reordered display of frames becomes a disruptive process. The human is positioned as a required agent for meaning making in an algorithmic procedure.\n\nIn collaboration with Cristina Cochior I went manually through the Eye's public collection, and catalogued faces by surrendering them to an emotion detection algorithm. Cutting from one face to another,its uncritical selection produced a new portrait of emotional gradients moving in-between anger and happiness.", "author": { - "@id": "http://randomizer.info", + "@id": "http://randomizer.info#person", "@type": "Person", "name": "Cristina Cochior", "url": "http://randomizer.info" @@ -490,15 +513,18 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/eye_0-2.jpg" + "contentUrl": "assets\/image\/eye_0-2.jpg", + "thumbnailUrl": "assets\/thumb\/eye_0-2.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/eye_3-2.jpg" + "contentUrl": "assets\/image\/eye_3-2.jpg", + "thumbnailUrl": "assets\/thumb\/eye_3-2.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/eye_6-2.jpg" + "contentUrl": "assets\/image\/eye_6-2.jpg", + "thumbnailUrl": "assets\/thumb\/eye_6-2.jpg" } ], "@reverse": { @@ -552,7 +578,7 @@ "datePublished": "2017-01-27" }, { - "@id": "http://networkcultures.org/longform/2017/01/25/choose-how-you-feel-you-have-seven-options/", + "@id": "http://networkcultures.org/longform/2017/01/25/choose-how-you-feel-you-have-seven-options/#article", "@type": "Report", "name": "Longform - Choose How You Feel; You Have Seven Options", "description": "What does it mean to feel 82% surprised or 93% joy? As part of their Longform series, the Institute of Network Cultures published my research into software that derives emotional scores from facial expressions.", @@ -568,7 +594,6 @@ { "@type": "Event", "name": "Presentation @ Media Lab UFRJ", - "url": "https://www.ied.edu/ied-locations/sao-paulo", "startDate": "2018-05-25", "endDate": "2018-05-25", "organizer": "Media Lab UFRJ & Dutch Consulate", @@ -663,12 +688,16 @@ "url": "https://state-studio.com/participant/2016/ruben-van-de-ven", "startDate": "2018-11-04", "endDate": "2018-11-04", - "isPartOf": { - "@id": "https://www.statefestival.org/" + "@reverse": { + "subEvent": { + "@id": "https://www.statefestival.org/" + } }, "recordedIn": { - "@id": "https://www.youtube.com/watch?v=L2O6ecO-8PM&t=2042s", - "@type": "VideoObject" + "@id": "https://www.youtube.com/watch?v=L2O6ecO-8PM&feature=youtu.be&t=2062", + "@type": "VideoObject", + "embedUrl": "https://www.youtube.com/embed/L2O6ecO-8PM?start=2062", + "thumbnailUrl": "https://i.ytimg.com/vi/L2O6ecO-8PM/maxresdefault.jpg" } }, { @@ -718,11 +747,13 @@ { "@type": "ImageObject", "contentUrl": "assets\/image\/we_know_how_you_feel.jpg", + "thumbnailUrl": "assets\/thumb\/we_know_how_you_feel.jpg", "caption": "We know how you feel" }, { "@type": "ImageObject", "contentUrl": "assets\/image\/we_know_how_you_feel-3.jpg", + "thumbnailUrl": "assets\/thumb\/we_know_how_you_feel-3.jpg", "caption": "Mind Reading Emotions Library" } ], @@ -758,16 +789,19 @@ { "@type": "ImageObject", "contentUrl": "assets\/image\/fragments-6-2.jpg", + "thumbnailUrl": "assets\/thumb\/fragments-6-2.jpg", "caption": "Fragments of reality" }, { "@type": "ImageObject", "contentUrl": "assets\/image\/fragments-9-2.jpg", + "thumbnailUrl": "assets\/thumb\/fragments-9-2.jpg", "caption": "Fragments of reality" }, { "@type": "ImageObject", "contentUrl": "assets\/image\/fragments-7-2.jpg", + "thumbnailUrl": "assets\/thumb\/fragments-7-2.jpg", "caption": "Fragments of reality" } ] @@ -780,11 +814,13 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/waterdagen-teaser.jpg" + "contentUrl": "assets\/image\/waterdagen-teaser.jpg", + "thumbnailUrl": "assets\/thumb\/waterdagen-teaser.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/waterdagen1.jpg" + "contentUrl": "assets\/image\/waterdagen1.jpg", + "thumbnailUrl": "assets\/thumb\/waterdagen1.jpg" } ], "@reverse": { @@ -814,7 +850,8 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/copoet1.jpg" + "contentUrl": "assets\/image\/copoet1.jpg", + "thumbnailUrl": "assets\/thumb\/copoet1.jpg" } ], "@reverse": { @@ -842,16 +879,22 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/samawati-prev2.jpg" + "contentUrl": "assets\/image\/samawati-prev2.jpg", + "thumbnailUrl": "assets\/thumb\/samawati-prev2.jpg" }, { "@type": "ImageObject", - "contentUrl": "assets\/image\/samawati-prev1.jpg" + "contentUrl": "assets\/image\/samawati-prev1.jpg", + "thumbnailUrl": "assets\/thumb\/samawati-prev1.jpg" } ], "video": { - "@id": "http://www.youtube.com/watch?v=D8pMy7xOZnI", - "@type": "VideoObject" + "@id": "https://rubenvandeven.com/assets/video/samawati.mp4#videoobject", + "@type": "VideoObject", + "thumbnailUrl": "assets/thumb/samawati.mp4.jpg", + "contentUrl": "assets/video/samawati.mp4" , + "encodingFormat": "video/mp4", + "videoFrameSize": "1280x1024" } }, { @@ -862,22 +905,27 @@ "image": [ { "@type": "ImageObject", - "contentUrl": "assets\/image\/guerilla2.jpg" + "contentUrl": "assets/image/guerilla2.jpg", + "thumbnailUrl": "assets/thumb/guerilla2.jpg" } ], "video": { - "@id": "http://www.youtube.com/watch?v=7Nk24Mh6uMc", - "@type": "VideoObject" + "@id": "https://rubenvandeven.com/assets/video/guerilla_project.mp4#videoobject", + "@type": "VideoObject", + "contentUrl": "assets/video/guerilla_project.mp4", + "thumbnailUrl": "assets/thumb/guerilla_project.mp4.jpg", + "encodingFormat": "video/mp4", + "videoFrameSize": "1280x1024" } } ], "contributor": [ { "@type": "MediaObject", - "name": "The Spectacular Times", + "name": "The Specta­cular Times", "dateCreated": "2013-12-04", "author": { - "@id": "http://www.wardgoes.nl", + "@id": "http://www.wardgoes.nl/#person", "@type": "Person", "name": "Ward Goes", "url": "http://www.wardgoes.nl" @@ -888,11 +936,13 @@ { "@type": "ImageObject", "contentUrl": "assets\/image\/times1.jpg", + "thumbnailUrl": "assets\/thumb\/times1.jpg", "caption": "The Spectacular Times" }, { "@type": "ImageObject", "contentUrl": "assets\/image\/times2.jpg", + "thumbnailUrl": "assets\/thumb\/times2.jpg", "caption": "The Spectacular Times" } ] diff --git a/src/js/portfolio.js b/src/js/portfolio.js index 5d3eca3..163c2a9 100644 --- a/src/js/portfolio.js +++ b/src/js/portfolio.js @@ -528,12 +528,20 @@ var setDetails = function(nodeDatum, nodeIdx) { } else if(typeof nodeAttr[i]['@id'] !== 'undefined') { continue; } - if(attr == 'https://schema.org/url') { + if(attr == 'https://schema.org/url' || attr == 'http://www.w3.org/2000/01/rdf-schema#seeAlso') { listEl.innerHTML += `
${getDisplayAttr(attr)}
${nodeAttr[i]}
`; + } else if(attr == 'https://schema.org/embedUrl') { + listEl.innerHTML += `
${getDisplayAttr(attr)}
${nodeAttr[i]}
`; + listEl.innerHTML += `
`; } else if(attr == 'https://schema.org/contentUrl') { - // console.log('test', attr); listEl.innerHTML += `
${getDisplayAttr(attr)}
${nodeAttr[i]}
`; - listEl.innerHTML += `
`; + if(nodeDatum['@type'] == 'https://schema.org/VideoObject') { + let videoType = nodeAttr['https://schema.org/encodingFormat'] ? `type='${nodeAttr['https://schema.org/encodingFormat']}'`: ""; + let poster = nodeAttr['https://schema.org/thumbnailUrl'] ? `poster='${nodeAttr['https://schema.org/thumbnailUrl']}'`: ""; + listEl.innerHTML += `
`; + } else{ + listEl.innerHTML += `
`; + } } else { let valueHtml = nodeAttr[i].replace(/\n/g,"
"); listEl.innerHTML += `
${getDisplayAttr(attr)}
${valueHtml}
`; @@ -576,7 +584,13 @@ var setDetails = function(nodeDatum, nodeIdx) { if(typeof rel['https://schema.org/contentUrl'] != 'undefined') { let ddEl = document.createElement('dd') ddEl.classList.add('dd-contentobject'); - ddEl.innerHTML = `` + if(rel['@type'] == 'https://schema.org/VideoObject') { + let videoType = rel['https://schema.org/encodingFormat'] ? `type='${rel['https://schema.org/encodingFormat']}'`: ""; + let poster = rel['https://schema.org/thumbnailUrl'] ? `poster='${rel['https://schema.org/thumbnailUrl']}'`: ""; + ddEl.innerHTML += ``; + } else{ + ddEl.innerHTML = `` + } relsEl.appendChild(ddEl); } } @@ -790,12 +804,22 @@ node.call(d3.drag() .on("end", dragended)) .on("click", function(d, idx, nodes){ let node = nodes[idx]; - // if(typeof nodePositions[idx] == 'undefined') { selectNode(idx, node, d); - // } else { - // node.parentNode.classList.toggle('detail'); - // } + }) + .on('mouseover', function(n, nIdx){ + link.each(function(l,idx,linkEls,q){ + // set nodes 'visible'/highlighted when linked to active node + if(l.source == n || l.target == n) { + linkEls[idx].classList.add('hoverLink'); + } }); + }) + .on('mouseout', function(){ + let hoverLinkEls = document.getElementsByClassName('hoverLink'); + while(hoverLinkEls.length > 0){ + hoverLinkEls[0].classList.remove('hoverLink'); + } + }); // svg.call(d3.drag() // .on("start", function(d){ @@ -848,6 +872,46 @@ node.append('text') return getNodeYear(n); }) ; +let splitText = function(text){ + let characters = [" ","-","\u00AD"]; + let charSplitPos = {}; + let mid = Math.floor(text.length / 2); + let splitPos = false; + let splitPosChar = false; + // split sentences + for(let char of characters) { + if(text.indexOf(char) < 0) { + continue; + } + let tmid = text.substr(0,mid).lastIndexOf(char); + if(tmid === -1) { + tmid = text.indexOf(char); + } + tmid += 1; // we want to cut _after_ the character + console.log("Char", char, tmid); + if(splitPos === false || Math.abs(tmid-mid) < Math.abs(splitPos - mid)){ + console.log("least!"); + splitPos = tmid; + splitPosChar = char; + } + } + console.log("pos",splitPos) + + + if(splitPos === false) { + return false; + } + + let text1 = text.substr(0, splitPos).trim(); + let text2 = text.substr(splitPos).trim(); + + if(splitPosChar == "\u00AD") { + text1 += "-"; + } + + // find most equal split + return [text1, text2]; +} let nodeTitle = node.append('text') .attr("class", "nodeTitle") .attr("y", "5") @@ -860,25 +924,24 @@ nodeTitle let textLength; let self = d3.select(this); let titleText = getNodeLabel(node); - if(titleText.length > 20 && titleText.indexOf(" ") > -1) { - let mid = Math.floor(titleText.length / 2); - mid = titleText.substr(0,mid).lastIndexOf(" "); - if(mid === -1) { - mid = titleText.indexOf(" "); - } - let titleText1 = titleText.substr(0, mid).trim(); - let titleText2 = titleText.substr(mid).trim(); - self.append("tspan") - .text(titleText1) + let titleTexts = false; + if(titleText.length > 20) { + titleTexts = splitText(titleText); + } + if(titleTexts !== false) { + let tspan1 = self.append("tspan") + .text(titleTexts[0]) .attr("y", "-10") .attr("x", "0") ; let tspan = self.append("tspan") - .text(titleText2) + .text(titleTexts[1]) .attr("y", "10") .attr("x", "0") ; - textLength = tspan.node().getComputedTextLength(); + let textLength1 = tspan.node().getComputedTextLength(); + let textLength2 = tspan.node().getComputedTextLength(); + textLength = Math.max(textLength1, textLength2); } else { self.text(titleText); textLength = self.node().getComputedTextLength(); @@ -892,11 +955,11 @@ nodeTitle ; node.each(function(d) { - if(!d['https://schema.org/contentUrl']) { + if(!d['https://schema.org/thumbnailUrl']) { return; } d3.select(this).append('svg:image') - .attr("xlink:href", d['https://schema.org/contentUrl'].replace('image', 'thumb')) + .attr("xlink:href", d['https://schema.org/thumbnailUrl']) .attr("width", nodeSize*2) .attr("height", nodeSize*2) .attr("transform","translate(-"+nodeSize+" -"+nodeSize+")") @@ -974,8 +1037,8 @@ function ticked() { srcSize = (typeof nodePositions[d.source.index] != 'undefined') ? selectedNodeSize : nodeSize; tgtSize = (typeof nodePositions[d.target.index] != 'undefined') ? selectedNodeSize : nodeSize; */ - let srcSize = nodeSize; - let tgtSize = nodeSize; + let srcSize = nodeSize+3.2; + let tgtSize = nodeSize+3.2; // Compute the line endpoint such that the arrow // is touching the edge of the node rectangle perfectly. diff --git a/src/scss/portfolio.scss b/src/scss/portfolio.scss index 53064b9..28f8baf 100644 --- a/src/scss/portfolio.scss +++ b/src/scss/portfolio.scss @@ -3,11 +3,22 @@ $detailsWidth: 740px; $detailSlide: -1 * ($detailsWidth); $detailSlideMobile: -30vh; -@import url('/assets/fonts/FluxischElse/webfonts/fluxischelse.css'); +// @import url('/assets/fonts/FluxischElse/webfonts/fluxischelse.css'); +// @import url('https://fontlibrary.org/face/nunito-sans'); +// @import url('https://fontlibrary.org/face/hk-grotesk'); +@import url('https://fontlibrary.org/face/d-din'); body{ margin:0;overflow: hidden; - font-family: "Fluxisch Else", helvetica, sans-serif; + font-family: "DDINRegular", helvetica, sans-serif; + // order of pref: + // - DDINRegular + // - HankenGroteskRegular + // - Cantarell + // - Noto Sans Light + // - CooperHewittBook + // - NunitoSansRegular + font-weight: light; height: 100vh; background: black; font-size: 12pt; @@ -26,11 +37,6 @@ a:active{ } -/*@-moz-keyframes bgShift{ - 0%{background-position:0% 50%} - 50%{background-position:100% 50%} - 100%{background-position:0% 50%} -}*/ svg{ width:100%; height: 100%; @@ -132,10 +138,13 @@ g.node{ } // &.visibleLink{ - &.activeLink{ + &.activeLink, &.hoverLink{ display:block; // opacity: 1; - + text{ + display:block; + fill: #999; + } } line{ @@ -329,12 +338,22 @@ text{ dd.dd-description{ margin-left:0; } - dd.dd-contentobject{ + dd.dd-contentobject, dd.dd-embed{ margin-left:0; } - dd.dd-contentobject object{ - width: 100%; + dd.dd-contentobject{ + object{ + width: 100%; + } + video{ + width: 100%; + // min-height: 600px; + } } + dd.dd-embed embed{ + width: 100%; + min-height: 500px; + } } body.detailsOpen{