update assets

assets/css/portfolio.css

@@ -0,0 +1,322 @@
+@charset "UTF-8";
+@import url("https://fontlibrary.org/face/d-din");
+body {
+  margin: 0;
+  overflow: hidden;
+  font-family: "DDINRegular", helvetica, sans-serif;
+  font-weight: light;
+  height: 100vh;
+  background: black;
+  font-size: 12pt; }
+
+a, a:link, a:visited {
+  color: blue;
+  text-decoration: none;
+  cursor: pointer;
+  /* Not all links have a href, so force pointer for those too */ }
+
+a:hover {
+  text-decoration: underline; }
+
+a:active {
+  color: red; }
+
+svg {
+  width: 100%;
+  height: 100%;
+  cursor: grab; }
+
+svg.dragging {
+  cursor: grabbing; }
+
+g.node {
+  cursor: pointer;
+  stroke: blue;
+  stroke-width: 0;
+  transition: stroke-width .5s, opacity 0s;
+  transition-delay: 0s, 1s;
+  opacity: 0; }
+  .graphInitialised g.node {
+    opacity: 1; }
+  g.node.centeredNode {
+    opacity: 1;
+    transition: stroke-width .5s, opacity 0s;
+    transition-delay: 0s, 0s; }
+  g.node.visibleNode {
+    pointer-events: auto;
+    transition-delay: 0s, 0s; }
+  g.node .highlightCircle {
+    fill: none;
+    stroke-width: 0px;
+    stroke-dasharray: 3 2; }
+  g.node.typeHighlight .highlightCircle {
+    stroke-width: 1px;
+    stroke: yellow; }
+  g.node:hover .highlightCircle {
+    stroke-width: 1px;
+    stroke: yellow; }
+  g.node:hover .nodeBg {
+    fill: yellow;
+    stroke: yellow; }
+  g.node.drag {
+    cursor: grabbing; }
+  g.node text.nodeType {
+    text-anchor: middle;
+    font-size: 10pt;
+    display: none; }
+  g.node text.nodeYear {
+    transition: transform .5s;
+    text-anchor: middle;
+    font-size: 8pt; }
+  g.node text.nodeTitle {
+    text-anchor: middle;
+    font-size: 10pt; }
+    g.node text.nodeTitle tspan {
+      text-anchor: middle; }
+  g.node.ImageObject text.nodeTitle {
+    display: none; }
+
+.relationship {
+  display: none;
+  opacity: 0;
+  transition: opacity .5s; }
+  body.graphInitialised .relationship {
+    opacity: 1; }
+  .relationship.activeLink, .relationship.hoverLink {
+    display: block; }
+    .relationship.activeLink text, .relationship.hoverLink text {
+      display: block;
+      fill: #999; }
+  .relationship line {
+    fill: none;
+    stroke: #999;
+    stroke-width: 2px; }
+  .relationship text {
+    fill: black;
+    font-size: 9pt;
+    display: none; }
+  .relationship.activeLink line {
+    stroke: white; }
+  .relationship.activeLink text {
+    fill: white;
+    display: block; }
+  .relationship.breadcrumbLink {
+    display: block; }
+    .relationship.breadcrumbLink line {
+      stroke: yellow !important;
+      display: block; }
+    .relationship.breadcrumbLink text {
+      fill: yellow !important;
+      display: block; }
+
+circle.nodeBg {
+  fill: white;
+  stroke-width: 3px;
+  stroke: white; }
+  .visibleNode circle.nodeBg {
+    stroke: yellow; }
+  .centeredNode circle.nodeBg {
+    fill: yellow;
+    stroke: yellow; }
+
+text {
+  text-anchor: middle; }
+
+.drag {
+  fill: #00f; }
+
+.relationship.address line {
+  /* stroke:#90F7FE; */ }
+
+.relationship.location line {
+  /* stroke:darkgreen; */ }
+
+.relationship.contributor line {
+  /* stroke:orange; */
+  /* stroke-width:.4em; */ }
+
+#nodeDetails {
+  position: absolute;
+  top: 0;
+  right: -740px;
+  width: 740px;
+  background: white;
+  padding: 20px;
+  /* opacity: 0; */
+  transition: opacity 1s, right 1s;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box; }
+  #nodeDetails #nodeDetailsScaler {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 20px;
+    cursor: col-resize;
+    padding: 5px; }
+    #nodeDetails #nodeDetailsScaler #scalarbar {
+      height: 100%;
+      border-right: solid 1px black;
+      border-left: solid 1px #333;
+      width: 0; }
+  #nodeDetails .nodeType {
+    font-size: 80%;
+    text-transform: uppercase;
+    color: #999;
+    margin-left: 10px; }
+    #nodeDetails .nodeType:hover {
+      cursor: pointer;
+      color: blue; }
+  #nodeDetails ul.breadcrumbs {
+    list-style: none;
+    margin: 0;
+    padding: 0; }
+    #nodeDetails ul.breadcrumbs li {
+      display: inline-block; }
+      #nodeDetails ul.breadcrumbs li:not(:first-child)::before {
+        content: "::";
+        color: black;
+        text-decoration: none;
+        margin: 0 10px; }
+    #nodeDetails ul.breadcrumbs .crumb {
+      cursor: pointer;
+      color: blue; }
+      #nodeDetails ul.breadcrumbs .crumb:hover {
+        text-decoration: underline; }
+  #nodeDetails span.nodeYear {
+    margin-left: 15px; }
+    #nodeDetails span.nodeYear::before {
+      content: '('; }
+    #nodeDetails span.nodeYear::after {
+      content: ')'; }
+  #nodeDetails h4 {
+    border-top: solid 1px black;
+    padding-top: 40px;
+    font-size: 120%; }
+  #nodeDetails dl:last-child {
+    margin-bottom: 250px; }
+  #nodeDetails dt {
+    float: left;
+    width: 170px;
+    font-weight: bold;
+    min-height: 25px;
+    clear: both; }
+  #nodeDetails dd {
+    min-height: 30px;
+    margin-top: 5px; }
+  #nodeDetails dd:not(.nodeTitleNr1) {
+    margin-left: 170px; }
+  #nodeDetails dt.dt-description {
+    float: none; }
+  #nodeDetails dd.dd-description {
+    margin-left: 0; }
+  #nodeDetails dd.dd-contentobject, #nodeDetails dd.dd-embed {
+    margin-left: 0; }
+  #nodeDetails dd.dd-contentobject object {
+    width: 100%; }
+  #nodeDetails dd.dd-contentobject video {
+    width: 100%; }
+  #nodeDetails dd.dd-embed embed {
+    width: 100%;
+    min-height: 500px; }
+
+body.detailsOpen #nodeDetails {
+  /* opacity:1; */
+  right: 0px; }
+
+body.detailsOpen svg#portfolioGraph {
+  right: 370px; }
+
+svg#portfolioGraph {
+  position: relative;
+  right: 0;
+  top: 0;
+  transition: right 1s, top 1s; }
+
+#graphControls {
+  position: fixed;
+  left: 10px;
+  top: 10px;
+  height: auto;
+  background: white;
+  padding: 10px; }
+  #graphControls .typeCount::before {
+    content: "(";
+    padding-left: 5px; }
+  #graphControls .typeCount::after {
+    content: ")"; }
+  #graphControls ul#typeLinks {
+    margin: 0;
+    padding: 0;
+    display: inline-block; }
+    #graphControls ul#typeLinks li {
+      list-style: none;
+      display: inline-block;
+      margin: 10px 10px;
+      cursor: pointer; }
+  #graphControls #showMoreTypeLinks {
+    display: inline-block;
+    width: 20px;
+    text-align: right;
+    cursor: pointer; }
+    #graphControls #showMoreTypeLinks::before {
+      content: "≡";
+      font-size: 150%;
+      position: relative;
+      top: 4px; }
+    #graphControls #showMoreTypeLinks:hover {
+      color: red;
+      text-decoration: none; }
+    .showMoreLinks #graphControls #showMoreTypeLinks {
+      pointer-events: none; }
+      .showMoreLinks #graphControls #showMoreTypeLinks::before {
+        content: "x"; }
+  #graphControls #moreTypeLinks {
+    position: absolute;
+    right: 0;
+    background: white;
+    list-style: none;
+    padding: 20px 30px;
+    text-align: left;
+    margin: 0;
+    display: none; }
+    .showMoreLinks #graphControls #moreTypeLinks {
+      display: block; }
+  #graphControls .typeJump {
+    font-weight: bold; }
+
+@media (max-width: 1496px) {
+  body {
+    overflow-y: hidden;
+    overflow-x: hidden;
+    font-size: 16pt; }
+    body.detailsOpen {
+      overflow-y: auto; }
+  svg#portfolioGraph {
+    position: fixed;
+    top: 0;
+    left: -35vw;
+    width: 160vw;
+    height: 100vh;
+    z-index: -5; }
+  #nodeDetails {
+    /* display:none; */
+    position: static;
+    width: 100%;
+    box-sizing: border-box;
+    background: white;
+    padding: 20px;
+    /* opacity: 0; */
+    height: auto;
+    min-height: 100vh;
+    margin-top: 100vh;
+    transition: margin 1s; }
+  body.detailsOpen #nodeDetails {
+    displaY: block;
+    margin-top: calc( 100vh + -30vh);
+    position: relative;
+    z-index: 1000; }
+  body.detailsOpen svg#portfolioGraph {
+    right: 0;
+    top: -15vh; } }

assets/og_image.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="210mm"
+   viewBox="0 0 210 210"
+   version="1.1"
+   id="svg8"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="og_image.svg">
+  <defs
+     id="defs2" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.4"
+     inkscape:cx="-41.753299"
+     inkscape:cy="586.15643"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="3840"
+     inkscape:window-height="2089"
+     inkscape:window-x="0"
+     inkscape:window-y="34"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-87)">
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot819"
+       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:condensed;font-size:160px;line-height:1.25;font-family:'D-DIN Condensed';-inkscape-font-specification:'D-DIN Condensed, Bold Condensed';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none"
+       transform="matrix(0.23382355,0,0,0.23382355,11.911374,95.654469)"><flowRegion
+         id="flowRegion821"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:condensed;font-size:160px;font-family:'D-DIN Condensed';-inkscape-font-specification:'D-DIN Condensed, Bold Condensed';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle"><rect
+           id="rect823"
+           width="790"
+           height="791.42859"
+           x="0.71428573"
+           y="0.84366196"
+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:condensed;font-size:160px;font-family:'D-DIN Condensed';-inkscape-font-specification:'D-DIN Condensed, Bold Condensed';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle" /></flowRegion><flowPara
+         id="flowPara825"
+         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:condensed;font-size:160px;font-family:'D-DIN Condensed';-inkscape-font-specification:'D-DIN Condensed, Bold Condensed';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:center;writing-mode:lr-tb;text-anchor:middle">I link to a website, and all I get is this lousy image</flowPara></flowRoot>  </g>
+</svg>