portfolio/src/scss/portfolio.scss

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

@import url('/assets/fonts/Bright/cmun-bright.css');

body{
  margin:0;overflow: hidden;
  font-family: "CMU Bright", "Computer Modern 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;
  }

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

  &:hover{
    .highlightCircle{
      stroke-width: 1px;
      stroke: yellow;
    }
    .nodeBg{
      fill: 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;
  }
}

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

  dt{
     float:left;
     width: 120px;
     font-weight:bold;
     min-height:25px;
   }
   dd{
     min-height:25px;
   }
   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;

  .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:"...";
    }
    &:hover{
      text-decoration:unline;
    }
    .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: 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;
    }
  }
}