.links-dark-green a { color: $accent-color; } .no-underline-hover:hover, .no-underline-hover:focus { text-decoration: none; } // Header #header { transition: transform 100ms ease-in-out; } .header-inactive { transform: translateY(-100%); } // Sticky helper .sticky { position: sticky; } // Fonts helper .anthony { font-family: "Anthony", sans-serif; } .violet-sans { font-family: "Violet Sans", sans-serif; } .work-sans-light { font-family: "Work Sans Light", sans-serif; } // Shadow helper .shadow-solid-accent { box-shadow: 2px 2px 10px rgba( #137752, 0.2 ); } // Width helper .w6 { width: 20rem; } // Extended cursors .grab:hover { cursor: grab; } .grabbing:active { cursor: grabbing; } // Notes Graph .links path { stroke: $accent-color; fill: transparent; &.active { stroke-dasharray: 5; animation: dash 40s linear; } } @keyframes dash { to { stroke-dashoffset: 1000; } } .nodes circle { cursor: pointer; stroke: $accent-color; fill: #e8fdf5; transition: all 0.15s ease-out; &:hover { fill: $accent-color; } } .text text { cursor: pointer; fill: $accent-color; &:hover { text-decoration: underline; } } .nodes [active], .text [active] { cursor: pointer; fill: #ff6300; stroke: transparent; } .inactive { opacity: 0.45; transition: opacity 0.15s ease-out; } // Notes inline styles .internal-link { padding: 0 0.1em; text-decoration: none; background: rgba($highlight-color, 0.25); border: 1px solid rgba($highlight-color, 0.45); border-radius: 4px; } .invalid-link { padding: 0 0.1em; text-decoration: none; background: rgba($highlight-color, 0.1); border: 1px solid rgba($highlight-color, 0.25); border-radius: 4px; } // Link previews #tooltip-content { max-height: 250px; } #tooltip-content:after { content: ""; display: block; position: absolute; z-index: 1; bottom: .5rem; right: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(#fff, 0), rgba(#fff, 1) 50%); width: 150px; height: 1rem; }