Spaces:
Running
Running
| /** { border: 1px solid #f00; }*/ | |
| #container{ | |
| position: relative; | |
| width: auto; | |
| margin-left: -25px; | |
| /*margin-bottom: 100px;*/ | |
| } | |
| #sections{ | |
| width: 330px; | |
| pointer-events: none; | |
| } | |
| #sections > div{ | |
| background: white; | |
| opacity: .2; | |
| margin-bottom: 400px; | |
| line-height: 1.4em; | |
| transition: opacity .2s; | |
| pointer-events: all; | |
| } | |
| #sections > div:last-child{ | |
| height: 480px; | |
| margin-bottom: 0px; | |
| } | |
| #sections > div.graph-scroll-active{ | |
| opacity: 1; | |
| } | |
| #graph{ | |
| margin-left: 40px; | |
| width: 500px; | |
| position: -webkit-sticky; | |
| position: sticky; | |
| top: 0px; | |
| float: right; | |
| height: 580px; | |
| } | |
| .slider-outer { | |
| display: block; | |
| max-width: 300px; | |
| } | |
| @media (max-width: 925px) { | |
| #container{ | |
| margin-left: 0px; | |
| } | |
| #graph{ | |
| width: 100%; | |
| float: none; | |
| max-width: 500px; | |
| margin: 0px auto; | |
| } | |
| #graph > div{ | |
| position: relative; | |
| left:12px; | |
| } | |
| #sections{ | |
| width: auto; | |
| position: relative; | |
| margin: 0px auto; | |
| } | |
| #sections > div{ | |
| background: rgba(255,255,255,.8); | |
| padding: 10px; | |
| border-top: 1px solid; | |
| border-bottom: 1px solid; | |
| margin-bottom: 80vh; | |
| width: calc(100vw - 20px); | |
| margin-left: -5px; | |
| } | |
| #sections > div > *{ | |
| max-width: 750px; | |
| } | |
| #sections > div:first-child{ | |
| opacity: 1; | |
| margin-top: -260px; | |
| } | |
| #sections > div:last-child{ | |
| height: auto; | |
| } | |
| #sections h3{ | |
| margin-top: .5em; | |
| } | |
| /* Adjust buttons for mobile. */ | |
| .button-container{ | |
| text-align: center; | |
| left:0px; | |
| } | |
| /* Adjust sliders for mobile. */ | |
| input[type="range" i] { | |
| width: 280px; | |
| } | |
| .slider-label-container{ | |
| width: 145px; | |
| /* display: inline-block; */ | |
| } | |
| .slide-container-heads-prob, .slide-container-population { | |
| text-align: center; | |
| } | |
| .slider-container { | |
| margin-bottom: 5px; | |
| text-align: center; | |
| width: 300px; | |
| /* display:inline-block; */ | |
| } | |
| .slider-outer { | |
| text-align: center; | |
| display: flex; | |
| max-width: 300px; | |
| } | |
| .headsProb, .population { | |
| margin-left: 15px; | |
| } | |
| .slide-container-population { | |
| margin-bottom: -10px; | |
| } | |
| .pointer div { | |
| left: 10px; | |
| top: 37px; | |
| } | |
| /* Adjust post summary test for mobile. */ | |
| .post-summary{ | |
| margin-left: 8px; | |
| margin-bottom: 60px; | |
| margin-top: 40px; | |
| } | |
| } | |
| #graph > div{ | |
| margin: 20 35px; | |
| } | |
| #end{ | |
| height: 15vh; | |
| } | |