portfolio/src/scss/portfolio.scss

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


body{
  margin:0;overflow: hidden;
  font-family: "CMU Bright", sans-serif;
  height: 100vh;
  background: black;
}

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


/*@-moz-keyframes bgShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}*/
svg{
  width:100vw;
  height: calc(100vh - 40px);
  cursor: grab;
}
svg.dragging{
  cursor: grabbing;
}
g.node{
  cursor: pointer;
  stroke: blue;
  stroke-width: 0;
  transition: stroke-width .5s;
  opacity: 1;
  // pointer-events: none;
  transition: opacity 1s;

  &.visibleNode{
    opacity: 1;
    pointer-events: auto;
    *{
      // transform: scale(1);
    }
  }

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

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

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

  &.drag{
    cursor: grabbing;
  }

  text{
    text-anchor: start;
    font-family: "CMU Bright", sans-serif;
    font-size: 10pt;
  }
}

.relationship{
  display:none;
  // opacity: .2;

  &.visibleLink{
    display:block;
    // opacity: 1;

  }

  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(#img1);
  // fill:url(#blueGrad);
  stroke-width: 3px;
  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;

  .nodeTitle{

  }

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

    &:hover{
      cursor:pointer;
      color:blue;
    }
  }
  dt{
     float:left;
     width: 120px;
     font-weight:bold;
   }
   dd:not(.nodeTitleNr1) {
     margin-left: 130px;
   }
   dt.dt-description{
     float:none;
   }
   dd.dd-description{
     margin-left:0;
   }
   dd.dd-contentobject{
     margin-left:0;
   }
   dd.dd-contentobject object{
     width: 100%;
   }
}

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;
}
#graphControls .typeJump{
  font-weight:bold;
}
#graphControls ul{
  margin:0;
  padding: 0;
  display:inline-block;
}
#graphControls li{
  list-style:none;
  display: inline-block;
  margin: 10px 10px;
  cursor: pointer;
}

@media (max-width: 1000px)  {
  body{
    overflow:auto;
  }

  #nodeDetails{
    /* display:none; */
    position: static;
    width: 100%;
    box-sizing: border-box;
    background: white;
    padding: $detailsPadding;
    /* opacity: 0; */
    height:auto;
    margin-top:0;
    transition: margin 1s;
  }
  body.detailsOpen{

    #nodeDetails{
      displaY:block;
      margin-top: $detailSlideMobile;
      position: relative;
      z-index: 1000;
      min-height:$detailSlideMobile * -1;
    }
    svg#portfolioGraph{
      right: 0;
      top: $detailSlideMobile / 2;
    }
  }
}