563 lines
14 KiB
CSS
563 lines
14 KiB
CSS
html {scroll-behavior: smooth;}
|
|
*:focus-visible{
|
|
outline: 2px solid crimson !important;
|
|
scroll-margin-top: 85vh !important;
|
|
}
|
|
|
|
.hidden {
|
|
visibility: hidden;
|
|
|
|
|
|
}
|
|
|
|
.hidden2 {
|
|
visibility: hidden;
|
|
|
|
|
|
}
|
|
|
|
.displayed{
|
|
width: 100%;
|
|
justify-content: center;
|
|
height:100vh;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 34px;
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 26px;
|
|
width: 26px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: white;
|
|
-webkit-transition: .4s;
|
|
transition: .4s;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: #010056;
|
|
}
|
|
|
|
input:focus + .slider {
|
|
box-shadow: 0 0 1px #010056;
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
-webkit-transform: translateX(26px);
|
|
-ms-transform: translateX(26px);
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
/* Rounded sliders */
|
|
.slider.round {
|
|
border-radius: 34px;
|
|
}
|
|
|
|
.slider.round:before {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Table of contents */
|
|
.toc {
|
|
background: #010056;
|
|
color: white;
|
|
padding: 3vh;
|
|
border-radius: 10px;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
|
|
.toc ul {
|
|
list-style-type: disc;
|
|
padding-left: 25px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.toc li {
|
|
margin-bottom: 6px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.toc a {
|
|
color: white;
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.toc a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.toc h1 {
|
|
margin-top: 25px;
|
|
margin-bottom: 25px;
|
|
font-size: 2.2em;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding-bottom: 10px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.toc h3 {
|
|
display: inline;
|
|
margin: 0;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
/* Expandable text button */
|
|
.detail-toggle-btn {
|
|
display: inline-block !important;
|
|
|
|
/* allow wrapping */
|
|
max-width: 100% !important;
|
|
white-space: normal !important;
|
|
overflow-wrap: break-word; /* ensures long text wraps */
|
|
|
|
/* reset sizing constraints that prevent wrapping */
|
|
width: auto;
|
|
flex: 0 1 auto !important;
|
|
|
|
box-sizing: border-box;
|
|
|
|
/* styling */
|
|
color: white;
|
|
border: 1px solid white;
|
|
background-color: transparent;
|
|
font-weight: 500;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 1em;
|
|
text-align: left;
|
|
padding: 0.25rem 0.5rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.detail-toggle-btn:hover,
|
|
.detail-toggle-btn:focus,
|
|
.detail-toggle-btn:active {
|
|
color: white !important;
|
|
border-color: white !important;
|
|
background-color: transparent !important;
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
|
|
.detail-toggle-btn-black {
|
|
color: black !important;
|
|
border-color: black !important;
|
|
background-color: transparent !important;
|
|
}
|
|
.detail-toggle-btn-black:hover,
|
|
.detail-toggle-btn-black:focus,
|
|
.detail-toggle-btn-black:active {
|
|
color: black !important;
|
|
border-color: black !important;
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
|
|
|
|
|
|
/* GLOBALS */
|
|
|
|
html, body {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
@media screen and (min-width: 768px){
|
|
|
|
|
|
body {
|
|
color: #222;
|
|
background-color: #fff;
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 18px;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 767px){
|
|
|
|
|
|
body {
|
|
color: #222;
|
|
background-color: #fff;
|
|
margin: 0;
|
|
padding: 0;
|
|
-webkit-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
font-size: 15px;
|
|
line-height: 1.5;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
}
|
|
|
|
header, section, nav, footer, figure, caption { /* This places text in center of various elements */
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
footer {
|
|
margin: 60px 0 0 0;
|
|
}
|
|
|
|
/* These are the default heading styles */
|
|
@media screen and (max-width: 767px){
|
|
|
|
|
|
.text-big {
|
|
font-size: 15px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.text-article{
|
|
font-size: 15px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (min-width: 768px){
|
|
|
|
|
|
.text-big {
|
|
font-size: 18px;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.text-article{
|
|
font-size: 18px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
/* These are the default paragraph, image and blockquote styles */
|
|
|
|
|
|
p {
|
|
margin: 0 0 0 0;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 30px 0 6px 0;
|
|
font-size: 30px;
|
|
color: #777;
|
|
}
|
|
|
|
small {
|
|
font-size: 14px;
|
|
}
|
|
|
|
|
|
/* CLASSES */
|
|
.header {
|
|
background-color: #f4f4f4;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between; /* space between jump-link and logo */
|
|
z-index: 10;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
/* Jump link on the left */
|
|
.jump-link {
|
|
font-size: 16px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 767px) {
|
|
.header {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.jump-link {
|
|
font-size: 10px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.logo-img {
|
|
height: 5vh;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* This is for fixed background images sometimes visible between content */
|
|
|
|
|
|
@media screen and (min-width: 768px){
|
|
|
|
.bigfixedimage{
|
|
height: 93vh;
|
|
width:100%;
|
|
background-attachment: fixed;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size:cover;cover;
|
|
|
|
border-radius: 25px;}
|
|
|
|
.bigfixedimage2{
|
|
height: 93vh;
|
|
width:100%;
|
|
background-attachment: relative;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size:cover;cover;
|
|
|
|
border-radius: 25px;}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 767px){
|
|
|
|
.bigfixedimage{
|
|
height: 30vh;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size:cover;auto;
|
|
border-radius: 25px;}
|
|
|
|
.bigfixedimage2{
|
|
height: 30vh;
|
|
width:100%;
|
|
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size:cover;auto;
|
|
border-radius: 25px;}
|
|
|
|
}
|
|
|
|
|
|
|
|
@media screen and (min-width: 768px){
|
|
|
|
|
|
/* This is a colour panel */
|
|
.colourheader{
|
|
color: #fff;
|
|
background-color: #010056;
|
|
background-image: none;
|
|
background-attachment: fixed;
|
|
/*min-height: 93vh;*/
|
|
border-radius: 5vh;
|
|
}
|
|
|
|
.colourheader2{
|
|
color: black !important;
|
|
background-color: #F36617 !important;
|
|
background-image: none;
|
|
background-attachment: fixed;
|
|
/*min-height: 93vh;*/
|
|
border-radius: 5vh;
|
|
}
|
|
|
|
.colourheader3{
|
|
color: black;
|
|
background-color: #F4F4F4;
|
|
background-image: none;
|
|
background-attachment: fixed;
|
|
/*min-height: 93vh;*/
|
|
border-radius: 5vh;
|
|
}
|
|
|
|
/* This pads element so it is a smaller block within containing element, eg to make text start closer to center */
|
|
|
|
.paddeddiv{
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 0 24px 24px 24px;
|
|
/*min-height: 85vh;*/
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 100%;
|
|
margin: 0 0;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 767px){
|
|
|
|
|
|
/* This is a colour panel */
|
|
.colourheader{
|
|
color: #fff;
|
|
background-color: #010056;
|
|
background-image: none;
|
|
background-attachment: fixed;
|
|
/*min-height: 30vh!important;*/
|
|
border-radius: 5vh;
|
|
}
|
|
|
|
.colourheader2{
|
|
color: black !important;
|
|
background-color: #F36617 !important;
|
|
background-image: none;
|
|
background-attachment: fixed;
|
|
/*min-height: 30vh!important;*/
|
|
border-radius: 5vh;
|
|
}
|
|
|
|
.colourheader3{
|
|
color: black;
|
|
background-color: #F4F4F4;
|
|
background-image: none;
|
|
background-attachment: fixed;
|
|
/*min-height: 93vh;*/
|
|
border-radius: 5vh;
|
|
}
|
|
|
|
|
|
.paddeddiv{
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
padding: 0 12px 15px 12px;
|
|
min-height: 25vh;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 100%;
|
|
margin: 0 0;
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
.col-medium {
|
|
width: 100%;
|
|
max-width: 680px;
|
|
margin: 0 0;
|
|
}
|
|
|
|
|
|
.text-indent {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.plotly .hoverlayer .hovertext { fill-opacity: 1 !important; stroke-opacity: 1 !important; }
|
|
|
|
/* Allow scrolling on mobile over graphs */
|
|
.scrolly {
|
|
touch-action: pan-y !important;
|
|
-ms-touch-action: pan-y !important;
|
|
}
|
|
|
|
.scrolly figure.sticky {
|
|
touch-action: pan-y !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
.plotly-scrolling-over {
|
|
touch-action: pan-y !important;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.scrolly .maindrag,
|
|
.scrolly .angulardrag,
|
|
.scrolly .radialdrag,
|
|
.scrolly .radialdrag-inner {
|
|
pointer-events: none !important;
|
|
}
|
|
|
|
/* Make plots longer on mobile screen*/
|
|
@media screen and (max-width: 767px){
|
|
.scrolly figure.sticky {
|
|
height: 60vh !important;
|
|
top: 10vh !important;
|
|
}
|
|
|
|
.scrolly figure.sticky .plotly {
|
|
height: 100% !important;
|
|
}
|
|
|
|
.scrolly article .clustering_plot {
|
|
min-height: 100vh;
|
|
padding-bottom: 80vh;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
}
|
|
|
|
/* Make plots not wider than screen length*/
|
|
.plotly,
|
|
.plot-container,
|
|
.svg-container {
|
|
max-width: 100% !important;
|
|
}
|