/* VARIABLES */ :root { --main-bg-color: SeaShell; --main-txt-color: #444; --main-accent-color: AntiqueWhite; --main-a-color: CornflowerBlue; --main-a-visited-color: CornflowerBlue; --true-black: #111; --font-family-title: 'Dauphine'; --font-family-serif: Georgia; --font-family-sans: Arial; --font-size-demismall: 0.9rem; --font-size-small: 0.75rem; --font-size-smaller: 0.7rem; --font-size-bigger: 1.1rem; --font-size-biggest: 2.3rem; --font-size-biggest-mobile: 2rem; --font-line-height: 1.7; } /* FONTS */ @font-face { font-family: 'Dauphine'; font-style: normal; font-weight: normal; src: local('Dauphine Regular'), url('../fonts/dauphine/Dauphine-Regular.woff') format('woff'); } /* STANDARD STUFF */ html, body { font-size: 20px; line-height: var(--font-line-height); font-family: var(--font-family-serif); color:var(--main-txt-color); background-color: var(--main-bg-color); } em { font-style: italic; } a { color: var(--main-a-color); text-decoration-thickness: .07em; text-underline-offset: 5px; } a:visited { color: var(--main-a-visited-color); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-title); text-transform: uppercase; font-size: 1.5em; } p { margin: 2rem 0; } p.fauxcode { font-family: 'Consolas', 'Courier New', Courier, monospace; font-size: 0.8rem; color:var(--true-black); } input { font-family: var(--font-family-serif); } ul { margin-top: 2rem; margin-bottom: 2rem; padding-left: 2rem; list-style: square; } ul li { padding-left: 0.5rem; } hr { color: var(--main-txt-color); margin: 2rem 15rem 2rem 0; border: solid 1px var(--main-accent-color); } button { height: 40px; font-family: var(--font-family-sans); font-size: var(--font-size-small); cursor: pointer; line-height: initial; } /* SPECIFIC STUFF */ .content { margin: 100px auto; max-width: 1000px; } .main-title { font-size: var(--font-size-biggest); margin: 3rem 0; margin-bottom: 0; } .version { font-weight: bold; text-transform: uppercase; font-size: var(--font-size-smaller); font-family: var(--font-family-sans); float: right; margin-top: 6px; } .abstract::before { content: "abstract"; font-variant: small-caps; position: absolute; margin-top: -3.5rem; text-align: center; font-size: var(--font-size-smaller); font-weight: bold;; } .abstract { font-size: var(--font-size-bigger); font-family: var(--font-family-sans); border: 1px solid var(--main-txt-color); padding: 2rem; border-radius: 30px; margin: 5rem auto 7rem auto; } .abstract__txt { margin: 0rem; } .epigraph { text-align: right; } .epigraph__quote { font-style: italic; margin-bottom: 0; } .epigraph__author { margin-top: 0.5rem; font-size: var(--font-size-small); } figure { margin: 2rem auto; text-align: center; } figure img, .youtube { max-width: 100%; filter: grayscale(40%); } iframe { width: 100%; } .figure--medium { max-width: 350px; } figcaption { font-size: var(--font-size-small); font-family: var(--font-family-sans); font-weight: bold; text-align: left; } blockquote { padding-left: 2rem; font-family: var(--font-family-sans); font-size: var(--font-size-demismall); } .paths { position: relative; } .paths__action { font-family: var(--font-family-sans); position: absolute; width: 35%; height: 6%; border: 0; left: 13.5%; top: 55.5%; font-size: var(--font-size-small); text-align: center; } .paths__behavior { font-family: var(--font-family-sans); font-size: var(--font-size-small); position: absolute; width: 18.5%; height: 6%; border: 0; left: 73.5%; top: 66.5%; text-align: center; } .paths__figcaption { margin-top: -1.7rem; } sup { font-size: 1rem; } .spinner { margin: 4rem auto; } .person { font-family: var(--font-family-title); text-transform: uppercase; font-size: 1.1rem; line-height: 1rem; } /* TWEET */ .tweet { margin: 2rem auto; } .tweet .tweet__img { width: 50%; float: left; border-radius: 16px 0 0 16px; border: 2px solid var(--main-bg-color); background-repeat: no-repeat; background-size: 100%; cursor: pointer; background-color: var(--main-a-color); background-position-x: center; padding-top: 57%; /* this defines the height */ } .tweet .tweet__img:nth-child(2) { float: right; border-radius: 0 16px 16px 0; } .tweet .tweet__img:hover, .tweet .tweet__img:active { background-size: auto 100%; } .tweet figcaption { padding-top: 10px; clear: both; } /* TABLE */ .table { margin: auto; padding: auto; border: 1px solid var(--main-a-visited-color); border-collapse: collapse; padding:10px; font-family: var(--font-family-sans); font-size: 13px; margin-bottom: 1em; } .table * { margin: auto; padding: 1em; } .table thead { font-weight: bold; } .table caption { font-weight: bold; background-color: var(--main-a-visited-color); color: white; } td { border: 1px solid var(--main-a-visited-color); } .table th { border:1px solid var(--main-a-visited-color); padding:10px; } .table td { border: 1px solid var(--main-a-visited-color); padding:10px; vertical-align: text-top } /* FOOTNOTES */ .footnote-ref { text-decoration: none; cursor: auto; } .footnote-ref > sup { vertical-align: super; font-size: var(--font-size-smaller); } article.footnotes-processed { padding-right: 35%; position: relative; } .footnotes-side { position: absolute; right: 0; top: 0; width: 28%; font-family: var(--font-family-sans); font-size: var(--font-size-small); } .footnotes hr { display: none; } .footnotes ol { list-style: decimal; } .footnotes-side li { position: absolute; margin-top: 6px; } .footnote-back { display: none; } /* mobile footnotes */ @media only screen and (min-width : 320px) and (max-width : 959px) { article { padding: 0; } section.footnotes { display: none; } a.footnote-back, hr { display: none; } /* footnote display that slides out */ div.footnote-display { position: fixed; left: 0; bottom: 0; background-color: var(--main-a-color); color: white; width: 100vw; padding: 0 1rem; box-shadow: 0px -1px 4px 0px rgba(0,0,0,0.5); } div.footnote-display > p a { text-decoration: underline; color: white; } /* footnotes activated */ a.footnote-ref { position: relative; text-decoration: none; top: -8px; margin: 0 0 0 2px; cursor: pointer; } a.footnote-ref > sup { background-color: var(--main-txt-color); font-family: var(--font-family-sans); color: white; padding: 2px 4px; border-radius: 4px; transition: 0.3s; vertical-align: baseline; font-size: var(--font-size-smaller); } a.footnote-ref:focus { outline: none; text-shadow: 0 0 10px #FFFFFF; } a.footnote-ref.active > sup { background: var(--main-a-color); } } /* MOBILE */ @media only screen and (min-width : 320px) and (max-width : 959px) { html, body { font-size: 16px; } p { margin: 1.5rem 0; } .content { padding: 1rem; margin: 0; } .main-title { font-size: var(--font-size-biggest-mobile); } .abstract { margin: 5rem auto 4rem auto; } .annotator-frame { display: none; } } /* EFFECTS */ /* FREESNAKE CANVAS */ #canvas { width: 98vw; } /* MARCHING ANTS (source: https://codepen.io/danichk/pen/PPRxrR) */ @keyframes ants { to { background-position: 100% 100% } } .ants-box { border: 1px solid transparent; background: linear-gradient(var(--main-bg-color), var(--main-bg-color)) padding-box, repeating-linear-gradient(-45deg, black 0, black 25%, transparent 0, transparent 50%) 0 / .6em .6em; animation: ants 20s linear infinite; padding: 0 2rem; } /*! * Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/) * Copyright 2015 Daniel Cardoso * Licensed under MIT */ .la-ball-spin, .la-ball-spin > div { position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .la-ball-spin { display: block; font-size: 0; color: #fff; } .la-ball-spin.la-dark { color: #333; } .la-ball-spin > div { display: inline-block; float: none; background-color: currentColor; border: 0 solid currentColor; } .la-ball-spin { width: 32px; height: 32px; } .la-ball-spin > div { position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin-top: -4px; margin-left: -4px; border-radius: 100%; -webkit-animation: ball-spin 1s infinite ease-in-out; -moz-animation: ball-spin 1s infinite ease-in-out; -o-animation: ball-spin 1s infinite ease-in-out; animation: ball-spin 1s infinite ease-in-out; } .la-ball-spin > div:nth-child(1) { top: 5%; left: 50%; -webkit-animation-delay: -1.125s; -moz-animation-delay: -1.125s; -o-animation-delay: -1.125s; animation-delay: -1.125s; } .la-ball-spin > div:nth-child(2) { top: 18.1801948466%; left: 81.8198051534%; -webkit-animation-delay: -1.25s; -moz-animation-delay: -1.25s; -o-animation-delay: -1.25s; animation-delay: -1.25s; } .la-ball-spin > div:nth-child(3) { top: 50%; left: 95%; -webkit-animation-delay: -1.375s; -moz-animation-delay: -1.375s; -o-animation-delay: -1.375s; animation-delay: -1.375s; } .la-ball-spin > div:nth-child(4) { top: 81.8198051534%; left: 81.8198051534%; -webkit-animation-delay: -1.5s; -moz-animation-delay: -1.5s; -o-animation-delay: -1.5s; animation-delay: -1.5s; } .la-ball-spin > div:nth-child(5) { top: 94.9999999966%; left: 50.0000000005%; -webkit-animation-delay: -1.625s; -moz-animation-delay: -1.625s; -o-animation-delay: -1.625s; animation-delay: -1.625s; } .la-ball-spin > div:nth-child(6) { top: 81.8198046966%; left: 18.1801949248%; -webkit-animation-delay: -1.75s; -moz-animation-delay: -1.75s; -o-animation-delay: -1.75s; animation-delay: -1.75s; } .la-ball-spin > div:nth-child(7) { top: 49.9999750815%; left: 5.0000051215%; -webkit-animation-delay: -1.875s; -moz-animation-delay: -1.875s; -o-animation-delay: -1.875s; animation-delay: -1.875s; } .la-ball-spin > div:nth-child(8) { top: 18.179464974%; left: 18.1803700518%; -webkit-animation-delay: -2s; -moz-animation-delay: -2s; -o-animation-delay: -2s; animation-delay: -2s; } .la-ball-spin.la-sm { width: 16px; height: 16px; } .la-ball-spin.la-sm > div { width: 4px; height: 4px; margin-top: -2px; margin-left: -2px; } .la-ball-spin.la-2x { width: 64px; height: 64px; } .la-ball-spin.la-2x > div { width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; } .la-ball-spin.la-3x { width: 96px; height: 96px; } .la-ball-spin.la-3x > div { width: 24px; height: 24px; margin-top: -12px; margin-left: -12px; } /* * Animation */ @-webkit-keyframes ball-spin { 0%, 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } 20% { opacity: 1; } 80% { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } } @-moz-keyframes ball-spin { 0%, 100% { opacity: 1; -moz-transform: scale(1); transform: scale(1); } 20% { opacity: 1; } 80% { opacity: 0; -moz-transform: scale(0); transform: scale(0); } } @-o-keyframes ball-spin { 0%, 100% { opacity: 1; -o-transform: scale(1); transform: scale(1); } 20% { opacity: 1; } 80% { opacity: 0; -o-transform: scale(0); transform: scale(0); } } @keyframes ball-spin { 0%, 100% { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 20% { opacity: 1; } 80% { opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); transform: scale(0); } } /* .hypothesis-highlight */ .hypothesis-highlight { font-size: inherit; }