portfolio/src/scss/portfolio.scss

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


body{
  margin:0;overflow: hidden;
  font-family: sans-serif;
/*    background: #fceabb;
background: -moz-linear-gradient(-45deg, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%);
background: -webkit-linear-gradient(-45deg, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
background: linear-gradient(135deg, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 ); */
/*background: #f7fbfc;
background: -moz-linear-gradient(45deg, #f7fbfc 0%, #d9edf2 40%, #add9e4 100%);
background: -webkit-linear-gradient(45deg, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%);
background: linear-gradient(45deg, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7fbfc', endColorstr='#add9e4',GradientType=1 );*/
/*background: #e2e2e2;
background: -moz-linear-gradient(45deg, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
background: -webkit-linear-gradient(45deg, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
background: linear-gradient(45deg, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );*/
/*background: #d2dfed;
background: -moz-linear-gradient(45deg, #d2dfed 0%, #c8d7eb 26%, #bed0ea 51%, #a6c0e3 51%, #afc7e8 62%, #bad0ef 75%, #99b5db 88%, #799bc8 100%);
background: -webkit-linear-gradient(45deg, #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%);
background: linear-gradient(45deg, #d2dfed 0%,#c8d7eb 26%,#bed0ea 51%,#a6c0e3 51%,#afc7e8 62%,#bad0ef 75%,#99b5db 88%,#799bc8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 );*/
background: #d2dfed;
background: -moz-linear-gradient(45deg, #d2dfed 0%, #afc1d8 13%, #d5e0ef 28%, #bed0ea 51%, #a8c0dd 51%, #c0d0e5 63%, #bad0ef 75%, #a2bad8 88%, #799bc8 100%);
background: -webkit-linear-gradient(45deg, #d2dfed 0%,#afc1d8 13%,#d5e0ef 28%,#bed0ea 51%,#a8c0dd 51%,#c0d0e5 63%,#bad0ef 75%,#a2bad8 88%,#799bc8 100%);
background: linear-gradient(45deg, #d2dfed 0%,#afc1d8 13%,#d5e0ef 28%,#bed0ea 51%,#a8c0dd 51%,#c0d0e5 63%,#bad0ef 75%,#a2bad8 88%,#799bc8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2dfed', endColorstr='#799bc8',GradientType=1 );
height: 100vh;
/*-moz-animation: bgShift 5s infinite;
background-size: 400% 400%;*/
// font-size:18px;
}

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: 0;
  pointer-events: none;
  transition: opacity 1s;
}
g.node.visibleNode/* , g.node.ImageObject */
{
  opacity: 1;
  pointer-events: auto;
}
g.node circle.highlightCircle{
  fill: none;
  stroke-width:0px;
  stroke-dasharray: 3 2;
}
g.node:hover circle.highlightCircle{
  stroke-width: 1px;
  stroke: blue;
}
g.node:active circle.highlightCircle{
  stroke-width:1px;
  stroke: red;
}
g.node.centeredNode circle.highlightCircle{
  stroke-width:1px;
  stroke: red;
}
/* g.node.selectedNode circle.highlightCircle{
  stroke-width:1px;
  stroke: red;
} */
g.node.drag{
  cursor:grabbing;
}
.node text{
  text-anchor: start;
}
.relationship{
  display:none;
}
.relationship.visibleLink{
  display:block;
}
.relationship line{
  fill:none;
  stroke: #999;
  stroke-width: 2px;
}
.relationship text{
  fill:black;
  /* text-transform: lowercase; */
  font-size: 75%;
  display:none;
}
.relationship.activeLink text{
  fill:white;
  display:block;
}
.relationship.activeLink line{
  stroke: white;
}
circle.nodeBg{
  fill: white;
  /*stroke-width:.2em;*/
  fill:url(#blueGrad);

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

  .PublicationEvent & {
    fill:url(#limeGrad);
  }
}
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;
    }
  }
}