/* ******** /css/tachyons.min.css /css/tufte.min.css /css/btf.css ********* */ html { border: 4px solid #96ccff; border-width: 4px 0 0 0; position: relative; top: 0px; } /* tachyons -> tufte -> btf: this css explicitly resets the tachyons margins for tufte display. */ body { margin-left: auto; margin-right: auto; width: 100%; } article { padding: 3rem 0 0 0; } .beyond-the-frame { z-index: -1; position: relative; top: 12px; color: #fffff8; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #96ccff; } @media screen and (max-width: 30em) { .beyond-the-frame { top: 0px; color: #96ccff; -webkit-text-stroke-width: 0; /* -webkit-text-stroke-color: #96ccff; */ } } /* TIMELINE */ .timeline-item { padding: 3em 2em 2em; position: relative; border-left: 2px solid rgba(0, 0, 0, 0.3); width: 100%; } .embedded-timeline { clear:both; } .timeline-time > p { width: 10%; } .timeline-item:before { content: attr(data-date-is); position: absolute; left: 2em; top: 1em; display: block; } .timeline-item:after { width: 10px; height: 10px; display: block; top: 1em; position: absolute; left: -7px; border-radius: 10px; content: ''; border: 2px solid rgba(0, 0, 0, 0.3); background: white; } .timeline-item:last-child { border-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0)) 1 100%; } .timeline-item:first-child { border-image: linear-gradient( to top, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.05)) 1 100%; } @media (max-width: 760px) { /* match the media breakpoints of tufte.css */ .timeline-item { width: 100%; } } /* CV */ p.cv-item { margin-top: 0.4rem; margin-bottom: 0.5rem; line-height: 1.3em; }