[HEAD]: initial commit
This commit is contained in:
John Gatward
Binary file not shown.
|
After Width: | Height: | Size: 484 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
+553
@@ -0,0 +1,553 @@
|
||||
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 */
|
||||
.colourheader, .toc {
|
||||
background: #010056;
|
||||
color: white;
|
||||
padding: 6vh;
|
||||
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%;
|
||||
}
|
||||
|
||||
|
||||
@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: 15px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.text-article{
|
||||
font-size: 15px;
|
||||
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: 25px;
|
||||
}
|
||||
|
||||
.colourheader2{
|
||||
color: black !important;
|
||||
background-color: #F36617 !important;
|
||||
background-image: none;
|
||||
background-attachment: fixed;
|
||||
/*min-height: 93vh;*/
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.colourheader3{
|
||||
color: black;
|
||||
background-color: #F4F4F4;
|
||||
background-image: none;
|
||||
background-attachment: fixed;
|
||||
/*min-height: 93vh;*/
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
/* This pads element so it is a smaller block within contaiing element, eg to make text start closer to center */
|
||||
|
||||
.paddeddiv{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 40px 0;
|
||||
/*min-height: 85vh;*/
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 980px;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@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: 25px;
|
||||
}
|
||||
|
||||
.colourheader2{
|
||||
color: black !important;
|
||||
background-color: #F36617 !important;
|
||||
background-image: none;
|
||||
background-attachment: fixed;
|
||||
/*min-height: 30vh!important;*/
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.colourheader3{
|
||||
color: black;
|
||||
background-color: #F4F4F4;
|
||||
background-image: none;
|
||||
background-attachment: fixed;
|
||||
/*min-height: 93vh;*/
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
|
||||
.paddeddiv{
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
padding: 10px 0;
|
||||
min-height: 25vh;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 980px;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.col-medium {
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
margin: 0 24px;
|
||||
}
|
||||
|
||||
|
||||
.text-indent {
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.selectize-input { font-size: 16px; line-height: 16px;}
|
||||
.selectize-dropdown { font-size: 16px; line-height: 16px; }
|
||||
|
||||
.sankey-link:hover { fill-opacity: 0.75 !important; }
|
||||
|
||||
.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 cut 1 over time larger 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;
|
||||
}
|
||||
}
|
||||
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 1.7 MiB |
Reference in New Issue
Block a user