portfolio/assets/css/portfolio.css

@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: #222;
  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 .play {
    fill: white; }
  g.node.ImageObject text.nodeTitle, g.node.VideoObject text.nodeTitle, g.node.BroadcastEvent 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%;
    font-variant-caps: small-caps;
    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;
    word-wrap: anywhere; }
  #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; } }