portfolio/src/scss/portfolio.scss

$detailsPadding: 20px;
$detailsWidth: 740px;
$detailSlide: -1 * ($detailsWidth);
$detailSlideMobile: -30vh;

// @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: "DDINRegular", helvetica, sans-serif;
  // order of pref:
  // - DDINRegular
  // - HankenGroteskRegular
  // - Cantarell
  // - Noto Sans Light
  // - CooperHewittBook
  // - NunitoSansRegular
  font-weight: light;
  height: 100vh;
  background:#222;
  // background: radial-gradient(purple, darken(purple, 10%));
  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 &{
    opacity: 1;
  }

  &.centeredNode{
    opacity: 1;
    transition: stroke-width .5s, opacity 0s;
    transition-delay: 0s, 0s;
  }

  &.visibleNode{
    // opacity: 1;
    pointer-events: auto;
    transition-delay: 0s, 0s;
    *{
      // transform: scale(1);
    }
  }

  *{
    // transform: scale(.4);
  }

  .highlightCircle{
    fill: none;
    stroke-width:0px;
    stroke-dasharray: 3 2;
  }

  &.typeHighlight {
    .highlightCircle{
      stroke-width: 1px;
      stroke: yellow;
    }

  }

  &:hover{
    .highlightCircle{
      stroke-width: 1px;
      stroke: yellow;
    }
    .nodeBg{
      fill: yellow;
      stroke: yellow;
    }
  }

  &.drag{
    cursor: grabbing;
  }

  text.nodeType{
    text-anchor: middle;
    font-size: 10pt;
    display:none;
  }

  text.nodeYear{
    transition: transform .5s;
    text-anchor: middle;
    font-size: 8pt;
  }
  text.nodeTitle{
    text-anchor: middle;
    // text-anchor: start;
    // font-family: "CMU Bright", sans-serif;
    font-size: 10pt;

    tspan{
      text-anchor:middle;
    }
  }
  &.ImageObject{
      text.nodeTitle {
          display: none;
      }
  }
}

.relationship{
  display:none;
  opacity: 0;
  transition: opacity .5s;

  body.graphInitialised &{
    opacity: 1;
  }

  // &.visibleLink{
  &.activeLink, &.hoverLink{
    display:block;
    // opacity: 1;
    text{
      display:block;
      fill: #999;
    }
  }

  line{
    fill:none;
    stroke: #999;
    stroke-width: 2px;

  }

  text{
    fill:black;
    // font-family: "Noto Mono", monospace;
    font-size: 9pt;
    // font-size: 75%;
    display:none;
  }
  &.activeLink{
    line{
      stroke: white;
    }
    text{
      fill:white;
      display:block;
    }
  }
  &.breadcrumbLink{
    display: block;

    line {
      stroke: yellow !important;
      display: block;
    }
    text{
      fill: yellow !important;
      display:block;
    }
  }
}

circle.nodeBg{
  fill: white;
  // fill: url(#shade1);
  // fill:url(#blueGrad);
  stroke-width: 3px;
  stroke: white;
  // stroke: black;

  .visibleNode & {
      stroke: yellow;
  }

  .MediaObject & {
    // fill:url(#orangeGrad);
  }
  .Person & {
    // fill:url(#redGrad);
  }

  .PublicationEvent & {
    // fill:url(#limeGrad);
  }

  .centeredNode &{
    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: $detailSlide;
  width: $detailsWidth;
  background: white;
  padding: $detailsPadding;
  /* opacity: 0; */
  transition: opacity 1s, right 1s;
  height: 100%;
  overflow-y: auto;
  box-sizing: border-box; // Because of the scaler: we can just set width now

  #nodeDetailsScaler{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width: 20px;
    cursor: col-resize;
    // background: #ccc;
    padding: 5px;
    #scalarbar{
      height:100%;
      border-right:solid 1px black;
      border-left:solid 1px #333;
      width:0;
    }
  }

  .nodeTitle{

  }

  .nodeType{
    font-size:80%;
    // text-transform: uppercase;
    font-variant-caps: small-caps;
    color: #999;
    margin-left:10px;

    &:hover{
      cursor:pointer;
      color:blue;
    }
  }

  ul.breadcrumbs{
    list-style: none;
    margin:0;
    padding: 0;
    li{
      display:inline-block;
      &:not(:first-child)::before{
        content: "::";
        color: black;
        text-decoration: none;
        margin: 0 10px;
      }
    }

    .crumb{
      cursor: pointer;
      color: blue;
      &:hover{
        text-decoration: underline;
      }
    }
  }

  span.nodeYear{
    margin-left:15px;

    &::before{
      content:'(';
    }
    &::after{
      content:')';
    }
  }

  h4{
    border-top: solid 1px black;
    padding-top: 40px;
    font-size: 120%;
  }
  dl:last-child{
    margin-bottom: 250px;
  }
  dt{
     float:left;
     width: 170px;
     font-weight:bold;
     min-height:25px;
     clear:both;
     word-wrap: anywhere; // relations like "educationalCredentialAward" are crazily long..
   }
   dd{
     min-height:30px;
     margin-top:5px;
   }
   dd:not(.nodeTitleNr1) {
     margin-left: 170px;
   }
   dt.dt-description{
     float:none;
   }
   dd.dd-description{
     margin-left:0;
   }
   dd.dd-contentobject, dd.dd-embed{
     margin-left:0;
   }
   dd.dd-contentobject{
     object{
       width: 100%;
     }
     video{
       width: 100%;
       // min-height: 600px;
     }
   }
  dd.dd-embed embed{
    width: 100%;
    min-height: 500px;
  }
}

body.detailsOpen{
  #nodeDetails{
    /* opacity:1; */
    right: 0px;
  }
  svg#portfolioGraph{
    right: -1 * $detailSlide / 2;
  }
}

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;

  .typeCount::before{
    content: "(";
    padding-left: 5px;
  }
  .typeCount::after{
    content: ")";
  }

  ul#typeLinks{
    margin:0;
    padding: 0;
    display:inline-block;

    li{
      list-style:none;
      display: inline-block;
      margin: 10px 10px;
      cursor: pointer;
    }

  }

  #showMoreTypeLinks{
    display:inline-block;
    width:20px;
    text-align: right;
    cursor: pointer;
    &::before{
      content:"≡";
      font-size:150%;
      position: relative;
      top: 4px;
    }
    &:hover{
      color: red;
      text-decoration: none;
    }
    .showMoreLinks & {
      pointer-events:none;
      &::before{
        content:"x";
      }
    }
  }

  #moreTypeLinks {
      position: absolute;
      right: 0;
      background: white;
      list-style: none;
      padding: 20px 30px;
      text-align: left;
      margin: 0;
      display:none;
      .showMoreLinks & {
        display: block;
      }
  }

  .typeJump{
    font-weight:bold;
  }
}


@media (max-width: 1496px)  {
  body{
    overflow-y: hidden;
    overflow-x: hidden;
    font-size: 16pt;
    &.detailsOpen{
      overflow-y: auto;
    }
  }

  svg#portfolioGraph{
    position: fixed;
    top:0;
    left: -35vw;
    width:160vw;
    height: 100vh;
    z-index: -5;
    // margin-left:-35vw;
  }

  #nodeDetails{
    /* display:none; */
    position: static;
    width: 100%;
    box-sizing: border-box;
    background: white;
    padding: $detailsPadding;
    /* opacity: 0; */
    height:auto;
    min-height: 100vh;
    margin-top:100vh;
    transition: margin 1s;
  }
  body.detailsOpen{
    #nodeDetails{
      displaY:block;
      margin-top: calc( 100vh + #{$detailSlideMobile} );
      position: relative;
      z-index: 1000;
      // min-height:$detailSlideMobile * -1;
    }
    svg#portfolioGraph{
      right: 0;
      top: $detailSlideMobile / 2;
    }
  }
}