2018-08-26 13:15:02 +02:00
|
|
|
$detailsPadding: 20px;
|
2018-09-29 12:54:28 +02:00
|
|
|
$detailsWidth: 740px;
|
|
|
|
$detailSlide: -1 * ($detailsWidth);
|
2018-08-26 13:15:02 +02:00
|
|
|
$detailSlideMobile: -30vh;
|
|
|
|
|
2018-10-25 23:08:53 +02:00
|
|
|
// @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');
|
2018-08-26 13:15:02 +02:00
|
|
|
|
2018-08-22 14:18:46 +02:00
|
|
|
body{
|
|
|
|
margin:0;overflow: hidden;
|
2018-10-25 23:08:53 +02:00
|
|
|
font-family: "DDINRegular", helvetica, sans-serif;
|
|
|
|
// order of pref:
|
|
|
|
// - DDINRegular
|
|
|
|
// - HankenGroteskRegular
|
|
|
|
// - Cantarell
|
|
|
|
// - Noto Sans Light
|
|
|
|
// - CooperHewittBook
|
|
|
|
// - NunitoSansRegular
|
|
|
|
font-weight: light;
|
2018-09-22 19:22:05 +02:00
|
|
|
height: 100vh;
|
2020-03-24 21:27:14 +01:00
|
|
|
background:#222;
|
|
|
|
// background: radial-gradient(purple, darken(purple, 10%));
|
2018-10-12 14:47:58 +02:00
|
|
|
font-size: 12pt;
|
2018-08-26 13:15:02 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
a, a:link, a:visited{
|
|
|
|
color:blue;
|
|
|
|
text-decoration: none;
|
|
|
|
cursor:pointer; /* Not all links have a href, so force pointer for those too */
|
2018-08-22 14:18:46 +02:00
|
|
|
}
|
2018-08-26 13:15:02 +02:00
|
|
|
a:hover{
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
a:active{
|
|
|
|
color:red;
|
|
|
|
}
|
|
|
|
|
2018-08-22 14:18:46 +02:00
|
|
|
|
|
|
|
svg{
|
2018-10-12 14:47:58 +02:00
|
|
|
width:100%;
|
|
|
|
height: 100%;
|
2018-08-26 13:15:02 +02:00
|
|
|
cursor: grab;
|
2018-08-22 14:18:46 +02:00
|
|
|
}
|
|
|
|
svg.dragging{
|
|
|
|
cursor: grabbing;
|
|
|
|
}
|
|
|
|
g.node{
|
|
|
|
cursor: pointer;
|
|
|
|
stroke: blue;
|
|
|
|
stroke-width: 0;
|
2018-10-12 14:47:58 +02:00
|
|
|
transition: stroke-width .5s, opacity 0s;
|
|
|
|
transition-delay: 0s, 1s;
|
|
|
|
opacity:0;
|
2018-09-22 19:22:05 +02:00
|
|
|
|
2018-10-12 14:47:58 +02:00
|
|
|
.graphInitialised &{
|
2018-09-22 19:22:05 +02:00
|
|
|
opacity: 1;
|
2018-10-12 14:47:58 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
&.centeredNode{
|
|
|
|
opacity: 1;
|
|
|
|
transition: stroke-width .5s, opacity 0s;
|
|
|
|
transition-delay: 0s, 0s;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.visibleNode{
|
|
|
|
// opacity: 1;
|
2018-09-22 19:22:05 +02:00
|
|
|
pointer-events: auto;
|
2018-10-12 14:47:58 +02:00
|
|
|
transition-delay: 0s, 0s;
|
2018-09-22 19:22:05 +02:00
|
|
|
*{
|
|
|
|
// transform: scale(1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
*{
|
|
|
|
// transform: scale(.4);
|
|
|
|
}
|
|
|
|
|
|
|
|
.highlightCircle{
|
|
|
|
fill: none;
|
|
|
|
stroke-width:0px;
|
|
|
|
stroke-dasharray: 3 2;
|
|
|
|
}
|
|
|
|
|
2018-09-29 12:54:28 +02:00
|
|
|
&.typeHighlight {
|
|
|
|
.highlightCircle{
|
|
|
|
stroke-width: 1px;
|
|
|
|
stroke: yellow;
|
|
|
|
}
|
2018-10-12 14:47:58 +02:00
|
|
|
|
2018-09-29 12:54:28 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
&:hover{
|
|
|
|
.highlightCircle{
|
|
|
|
stroke-width: 1px;
|
|
|
|
stroke: yellow;
|
|
|
|
}
|
|
|
|
.nodeBg{
|
|
|
|
fill: yellow;
|
2018-10-12 14:47:58 +02:00
|
|
|
stroke: yellow;
|
2018-09-29 12:54:28 +02:00
|
|
|
}
|
2018-09-22 19:22:05 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
&.drag{
|
|
|
|
cursor: grabbing;
|
|
|
|
}
|
|
|
|
|
2018-09-29 12:54:28 +02:00
|
|
|
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;
|
2018-10-12 14:47:58 +02:00
|
|
|
// font-family: "CMU Bright", sans-serif;
|
2018-09-22 19:22:05 +02:00
|
|
|
font-size: 10pt;
|
2018-10-12 14:47:58 +02:00
|
|
|
|
|
|
|
tspan{
|
|
|
|
text-anchor:middle;
|
|
|
|
}
|
2018-09-22 19:22:05 +02:00
|
|
|
}
|
2022-02-18 14:06:41 +01:00
|
|
|
.play{
|
|
|
|
fill:white;
|
|
|
|
}
|
|
|
|
&.ImageObject, &.VideoObject, &.BroadcastEvent{
|
2019-02-18 12:04:25 +01:00
|
|
|
text.nodeTitle {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
}
|
2018-08-22 14:18:46 +02:00
|
|
|
}
|
2018-09-22 19:22:05 +02:00
|
|
|
|
2018-08-22 14:18:46 +02:00
|
|
|
.relationship{
|
|
|
|
display:none;
|
2018-10-12 14:47:58 +02:00
|
|
|
opacity: 0;
|
|
|
|
transition: opacity .5s;
|
|
|
|
|
|
|
|
body.graphInitialised &{
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2018-09-22 19:22:05 +02:00
|
|
|
|
2018-10-16 09:55:27 +02:00
|
|
|
// &.visibleLink{
|
2018-10-25 23:08:53 +02:00
|
|
|
&.activeLink, &.hoverLink{
|
2018-09-22 19:22:05 +02:00
|
|
|
display:block;
|
|
|
|
// opacity: 1;
|
2018-10-25 23:08:53 +02:00
|
|
|
text{
|
|
|
|
display:block;
|
|
|
|
fill: #999;
|
|
|
|
}
|
2018-09-22 19:22:05 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
line{
|
|
|
|
fill:none;
|
|
|
|
stroke: #999;
|
|
|
|
stroke-width: 2px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
text{
|
|
|
|
fill:black;
|
2018-10-12 14:47:58 +02:00
|
|
|
// font-family: "Noto Mono", monospace;
|
2018-09-22 19:22:05 +02:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|
2018-08-22 14:18:46 +02:00
|
|
|
}
|
2018-09-22 19:22:05 +02:00
|
|
|
|
2018-08-22 14:18:46 +02:00
|
|
|
circle.nodeBg{
|
|
|
|
fill: white;
|
2018-10-12 14:47:58 +02:00
|
|
|
// fill: url(#shade1);
|
2018-09-22 19:22:05 +02:00
|
|
|
// fill:url(#blueGrad);
|
|
|
|
stroke-width: 3px;
|
2018-10-12 14:47:58 +02:00
|
|
|
stroke: white;
|
|
|
|
// stroke: black;
|
2018-09-22 19:22:05 +02:00
|
|
|
|
|
|
|
.visibleNode & {
|
|
|
|
stroke: yellow;
|
|
|
|
}
|
2018-08-26 13:15:02 +02:00
|
|
|
|
|
|
|
.MediaObject & {
|
2018-09-22 19:22:05 +02:00
|
|
|
// fill:url(#orangeGrad);
|
2018-08-26 13:15:02 +02:00
|
|
|
}
|
|
|
|
.Person & {
|
2018-09-22 19:22:05 +02:00
|
|
|
// fill:url(#redGrad);
|
2018-08-26 13:15:02 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
.PublicationEvent & {
|
2018-09-22 19:22:05 +02:00
|
|
|
// fill:url(#limeGrad);
|
|
|
|
}
|
|
|
|
|
|
|
|
.centeredNode &{
|
|
|
|
fill: yellow;
|
|
|
|
stroke: yellow;
|
2018-08-26 13:15:02 +02:00
|
|
|
}
|
2018-08-22 14:18:46 +02:00
|
|
|
}
|
|
|
|
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;
|
2018-08-26 13:15:02 +02:00
|
|
|
right: $detailSlide;
|
|
|
|
width: $detailsWidth;
|
2018-08-22 14:18:46 +02:00
|
|
|
background: white;
|
2018-08-26 13:15:02 +02:00
|
|
|
padding: $detailsPadding;
|
2018-08-22 14:18:46 +02:00
|
|
|
/* opacity: 0; */
|
|
|
|
transition: opacity 1s, right 1s;
|
2018-08-26 13:15:02 +02:00
|
|
|
height: 100%;
|
2018-08-22 14:18:46 +02:00
|
|
|
overflow-y: auto;
|
2018-09-29 12:54:28 +02:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|
2018-08-26 13:15:02 +02:00
|
|
|
|
|
|
|
.nodeTitle{
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.nodeType{
|
|
|
|
font-size:80%;
|
2020-03-24 21:27:14 +01:00
|
|
|
// text-transform: uppercase;
|
|
|
|
font-variant-caps: small-caps;
|
2018-08-26 13:15:02 +02:00
|
|
|
color: #999;
|
|
|
|
margin-left:10px;
|
|
|
|
|
|
|
|
&:hover{
|
|
|
|
cursor:pointer;
|
|
|
|
color:blue;
|
|
|
|
}
|
|
|
|
}
|
2018-09-29 12:54:28 +02:00
|
|
|
|
|
|
|
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%;
|
|
|
|
}
|
2018-10-12 14:47:58 +02:00
|
|
|
dl:last-child{
|
|
|
|
margin-bottom: 250px;
|
|
|
|
}
|
2018-08-26 13:15:02 +02:00
|
|
|
dt{
|
|
|
|
float:left;
|
2018-10-16 09:55:27 +02:00
|
|
|
width: 170px;
|
2018-08-26 13:15:02 +02:00
|
|
|
font-weight:bold;
|
2018-09-29 12:54:28 +02:00
|
|
|
min-height:25px;
|
2018-10-12 14:47:58 +02:00
|
|
|
clear:both;
|
2020-03-24 21:27:14 +01:00
|
|
|
word-wrap: anywhere; // relations like "educationalCredentialAward" are crazily long..
|
2018-09-29 12:54:28 +02:00
|
|
|
}
|
|
|
|
dd{
|
2018-10-12 14:47:58 +02:00
|
|
|
min-height:30px;
|
2018-10-16 09:55:27 +02:00
|
|
|
margin-top:5px;
|
2018-08-26 13:15:02 +02:00
|
|
|
}
|
|
|
|
dd:not(.nodeTitleNr1) {
|
2018-10-16 09:55:27 +02:00
|
|
|
margin-left: 170px;
|
2018-08-26 13:15:02 +02:00
|
|
|
}
|
|
|
|
dt.dt-description{
|
|
|
|
float:none;
|
|
|
|
}
|
|
|
|
dd.dd-description{
|
|
|
|
margin-left:0;
|
|
|
|
}
|
2018-10-25 23:08:53 +02:00
|
|
|
dd.dd-contentobject, dd.dd-embed{
|
2018-08-26 13:15:02 +02:00
|
|
|
margin-left:0;
|
|
|
|
}
|
2018-10-25 23:08:53 +02:00
|
|
|
dd.dd-contentobject{
|
|
|
|
object{
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
video{
|
|
|
|
width: 100%;
|
|
|
|
// min-height: 600px;
|
|
|
|
}
|
2018-08-26 13:15:02 +02:00
|
|
|
}
|
2018-10-25 23:08:53 +02:00
|
|
|
dd.dd-embed embed{
|
|
|
|
width: 100%;
|
|
|
|
min-height: 500px;
|
|
|
|
}
|
2018-08-22 14:18:46 +02:00
|
|
|
}
|
2018-08-26 13:15:02 +02:00
|
|
|
|
|
|
|
body.detailsOpen{
|
|
|
|
#nodeDetails{
|
|
|
|
/* opacity:1; */
|
|
|
|
right: 0px;
|
|
|
|
}
|
|
|
|
svg#portfolioGraph{
|
|
|
|
right: -1 * $detailSlide / 2;
|
|
|
|
}
|
2018-08-22 14:18:46 +02:00
|
|
|
}
|
2018-08-26 13:15:02 +02:00
|
|
|
|
2018-08-22 14:18:46 +02:00
|
|
|
svg#portfolioGraph {
|
|
|
|
position: relative;
|
|
|
|
right: 0;
|
2018-08-26 13:15:02 +02:00
|
|
|
top: 0;
|
|
|
|
transition: right 1s, top 1s;
|
2018-08-22 14:18:46 +02:00
|
|
|
}
|
|
|
|
#graphControls{
|
2018-08-26 13:15:02 +02:00
|
|
|
position: fixed;
|
|
|
|
left: 10px;
|
|
|
|
top: 10px;
|
|
|
|
height: auto;
|
|
|
|
background: white;
|
|
|
|
padding: 10px;
|
2018-09-29 12:54:28 +02:00
|
|
|
|
|
|
|
.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{
|
2018-10-12 14:47:58 +02:00
|
|
|
content:"≡";
|
|
|
|
font-size:150%;
|
|
|
|
position: relative;
|
|
|
|
top: 4px;
|
2018-09-29 12:54:28 +02:00
|
|
|
}
|
|
|
|
&:hover{
|
2018-10-12 14:47:58 +02:00
|
|
|
color: red;
|
|
|
|
text-decoration: none;
|
2018-09-29 12:54:28 +02:00
|
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
2018-08-26 13:15:02 +02:00
|
|
|
}
|
2018-09-29 12:54:28 +02:00
|
|
|
|
2018-08-26 13:15:02 +02:00
|
|
|
|
2018-10-16 09:55:27 +02:00
|
|
|
@media (max-width: 1496px) {
|
2018-08-26 13:15:02 +02:00
|
|
|
body{
|
2018-10-16 09:55:27 +02:00
|
|
|
overflow-y: hidden;
|
2018-10-12 14:47:58 +02:00
|
|
|
overflow-x: hidden;
|
|
|
|
font-size: 16pt;
|
2018-10-16 09:55:27 +02:00
|
|
|
&.detailsOpen{
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
2018-10-12 14:47:58 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
svg#portfolioGraph{
|
|
|
|
position: fixed;
|
|
|
|
top:0;
|
|
|
|
left: -35vw;
|
|
|
|
width:160vw;
|
|
|
|
height: 100vh;
|
|
|
|
z-index: -5;
|
|
|
|
// margin-left:-35vw;
|
2018-08-26 13:15:02 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
#nodeDetails{
|
|
|
|
/* display:none; */
|
|
|
|
position: static;
|
|
|
|
width: 100%;
|
|
|
|
box-sizing: border-box;
|
|
|
|
background: white;
|
|
|
|
padding: $detailsPadding;
|
|
|
|
/* opacity: 0; */
|
|
|
|
height:auto;
|
2018-10-12 14:47:58 +02:00
|
|
|
min-height: 100vh;
|
|
|
|
margin-top:100vh;
|
2018-08-26 13:15:02 +02:00
|
|
|
transition: margin 1s;
|
|
|
|
}
|
|
|
|
body.detailsOpen{
|
|
|
|
#nodeDetails{
|
|
|
|
displaY:block;
|
2018-10-16 09:55:27 +02:00
|
|
|
margin-top: calc( 100vh + #{$detailSlideMobile} );
|
2018-08-26 13:15:02 +02:00
|
|
|
position: relative;
|
|
|
|
z-index: 1000;
|
2018-10-12 14:47:58 +02:00
|
|
|
// min-height:$detailSlideMobile * -1;
|
2018-08-26 13:15:02 +02:00
|
|
|
}
|
|
|
|
svg#portfolioGraph{
|
|
|
|
right: 0;
|
|
|
|
top: $detailSlideMobile / 2;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|