/* ******** /css/tachyons.min.css --------- /css/tufte.min.css /css/btf.css ********* */ html { border: 4px solid #800020; border-width: 4px 0 0 0; position: relative; top: 0px; } @font-face { font-family: 'btf-font'; src: url('gilroy/Gilroy-Light.ttf') format('truetype'); } .btf-font { font-family: 'btf-font', sans-serif; } /* tachyons -> tufte -> btf: this css explicitly resets the tachyons margins for tufte display. */ body { margin-left: auto; margin-right: auto; width: 100%; } header ul.list a { color: #800020; } article { padding: 3rem 0 0 0; } /* ******** */ /* header */ .beyond-the-frame { } /* ******** */ /* 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; }