Spaces:
Running
Running
| /* Copyright 2020 Google LLC. All Rights Reserved. | |
| Licensed under the Apache License, Version 2.0 (the "License"); | |
| you may not use this file except in compliance with the License. | |
| You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and | |
| limitations under the License. | |
| ==============================================================================*/ | |
| html{ | |
| background-color: #fff; | |
| font-weight: normal; | |
| } | |
| body{ | |
| max-width: 850px; | |
| margin: 0px auto; | |
| font-family: 'Roboto Slab', serif; | |
| font-family: 'Roboto', Helvetica, sans-serif; | |
| font-weight: 300; | |
| line-height: 1.55em; | |
| font-size: 16px; | |
| margin-top: 5px; | |
| margin-bottom: 80px; | |
| color: #3C4043; | |
| font-smoothing: antialiased; | |
| } | |
| @media (max-width: 760px){ | |
| body{ | |
| padding: 5px; | |
| } | |
| } | |
| p{ | |
| line-height: 1.55em; | |
| font-size: 16px; | |
| /*line-height: 28px;*/ | |
| color: #3C4043; | |
| letter-spacing: 0.1px; | |
| } | |
| a{ | |
| color: black; | |
| } | |
| .header{ | |
| position: relative; | |
| color: black; | |
| font-size: 16px; | |
| height: 24px; | |
| overflow: visible; | |
| font-family: 'Google Sans', sans-serif; | |
| font-weight: 100; | |
| font-size: 20px; | |
| margin: 0px auto; | |
| margin-top: 15px; | |
| padding-left: 20px; | |
| } | |
| .header-left{ | |
| vertical-align: middle; | |
| font-size: 20px; | |
| margin: 0px auto; | |
| width: 300px; | |
| } | |
| .header-left img{ | |
| width: 100px; | |
| opacity: 1; | |
| top: 0px; | |
| position: relative; | |
| } | |
| .header-left a:first-child{ | |
| float: left; | |
| } | |
| .header-left a:last-child{ | |
| position: relative; | |
| top: 8px; | |
| margin-left: 20px; | |
| float: left; | |
| } | |
| .header-left a{ | |
| line-height: 20px; | |
| -webkit-font-smoothing: antialiased; | |
| letter-spacing: 0.1px; | |
| font-size: 20px; | |
| text-transform: uppercase; | |
| font-family: "Google Sans"; | |
| text-align: right; | |
| -webkit-tap-highlight-color: rgba(255,255,255,0); | |
| font-weight: 300; | |
| text-decoration: none; | |
| /*margin: 50px 0 0 50px;*/ | |
| display: inline-block; | |
| color: #00695C ; | |
| } | |
| .header-left a:hover{ | |
| color: #ff4081 ; | |
| } | |
| @media (max-width: 750px){ | |
| .header-right span{ | |
| opacity: 0; | |
| } | |
| } | |
| .header a{ | |
| /*opacity: .5;*/ | |
| text-decoration: none; | |
| } | |
| .header a:hover{ | |
| opacity: 1 | |
| } | |
| p{ | |
| max-width: 750px; | |
| margin: 0px auto; | |
| margin-block-start: 1em; | |
| margin-block-end: 1em; | |
| } | |
| /*TODO mobile padding?*/ | |
| h3{ | |
| max-width: 750px; | |
| margin: 0px auto; | |
| font-weight: 100; | |
| line-height: 1.3em; | |
| } | |
| h1,h2,h3,h4,h5{ | |
| font-family: 'Google Sans', sans-serif; | |
| font-weight: 100; | |
| margin-top: 1.5em; | |
| margin-bottom: .5em; | |
| } | |
| h1{ | |
| font-weight: 100; | |
| font-size: 34px; | |
| margin-bottom: .5em; | |
| line-height: 1.3em; | |
| margin-top: 1.4em; | |
| text-align: center; | |
| font-family: "Google Sans"; | |
| /*color: #00695C;*/ | |
| } | |
| h2,h3,h4,h5{ | |
| font-size: 22px; | |
| } | |
| /*wp classes*/ | |
| img.aligncenter { | |
| display: block; | |
| margin: auto; | |
| max-width: 750px; | |
| } | |
| html{ | |
| overflow-x: hidden; | |
| } | |
| .full-width{ | |
| width: 100vw; | |
| position: relative; | |
| left: 50%; | |
| right: 50%; | |
| margin-left: -50vw; | |
| margin-right: -50vw; | |
| overflow: hidden; | |
| } | |
| .full-width img{ | |
| max-width: 100%; | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .full-width.px980 img, .full-width.px980 div{ | |
| max-width: 980px; | |
| } | |
| .full-width > div, .full-width > div > div{ | |
| margin: 0px auto; | |
| } | |
| .full-width.px750 img, .full-width.px750 div{ | |
| max-width: 750px; | |
| } | |
| draft{ | |
| display: none; | |
| /*visibility: collapse;*/ | |
| } | |
| h1, .post-summary{ | |
| max-width: 750px; | |
| margin: 0px auto; | |
| } | |
| .post-summary{ | |
| font-size: 19px; | |
| margin-bottom: 65px; | |
| line-height: 1.5em; | |
| } | |
| h1{ | |
| margin-bottom: 40px; | |
| margin-top: 50px; | |
| } | |
| .post-tags{ | |
| line-height: 1.55em; | |
| font-style: italic; | |
| } | |
| .thumbnail-caption{ | |
| font-style: italic; | |
| } | |
| /*graph scroll stuff*/ | |
| #container{ | |
| position: relative; | |
| width: 900px; | |
| margin-left: -25px; | |
| } | |
| #container h3{ | |
| line-height: 1.3em; | |
| } | |
| .tooltip { | |
| top: -1000px; | |
| position: fixed; | |
| padding: 10px; | |
| background: rgba(255, 255, 255, .90); | |
| border: 1px solid lightgray; | |
| pointer-events: none; | |
| width: 300px; | |
| } | |
| .tooltip-hidden{ | |
| opacity: 0; | |
| transition: all .3s; | |
| transition-delay: .1s; | |
| } | |
| @media (max-width: 590px){ | |
| div.tooltip{ | |
| bottom: -1px; | |
| width: calc(100%); | |
| left: -1px ; | |
| right: -1px ; | |
| top: auto ; | |
| width: auto ; | |
| } | |
| } | |
| .footend{ | |
| margin-left: -9px; | |
| width: 10px; | |
| } | |
| .footstart, .footend{ | |
| text-decoration: none; | |
| } | |
| .footstart:hover, .footend:hover{ | |
| text-decoration: underline; | |
| } | |
| #recirc{ | |
| } | |
| #recirc .img{ | |
| outline: 1px solid #ccc; | |
| } | |
| #recirc .post:hover .img{ | |
| outline: 1px solid #333; | |
| } | |
| #recirc .title{ | |
| /*color: #00695C;*/ | |
| font-size: 18px; | |
| font-weight: 500; | |
| margin-bottom: -10px; | |
| /*height: 10px !important;*/ | |
| /*opacity: 0;*/ | |
| } | |
| #recirc .post:hover .title{ | |
| text-decoration: underline ; | |
| } | |
| #recirc .post{ | |
| margin-bottom: 30px; | |
| } | |
| /*Nav Style*/ | |
| #nav-container{ | |
| width: 100vw; | |
| margin-left: calc(50% - 50vw); | |
| display: inline-block; | |
| /*display: none;*/ | |
| } | |
| #navigation { | |
| margin: 0 auto; | |
| max-width: 1260px; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: 'Open Sans', Helvetica, sans-serif; | |
| font-weight: 300; | |
| letter-spacing: 0.1px; | |
| color: rgba(0,0,0,.87); | |
| font-size: 14px; | |
| line-height: 20px; | |
| -webkit-font-smoothing: antialiased; | |
| font-family: 'Open Sans', Helvetica, sans-serif; | |
| font-weight: 300; | |
| letter-spacing: 0.1px; | |
| display: flex; | |
| flex-flow: row wrap; | |
| align-items: stretch; | |
| padding: 8px; | |
| margin: 0 auto; | |
| max-width: 1260px; | |
| } | |
| .mdl-grid { | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-flex-flow: row wrap; | |
| -ms-flex-flow: row wrap; | |
| flex-flow: row wrap; | |
| margin: 0 auto; | |
| -webkit-align-items: stretch; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; | |
| } | |
| .mdl-cell { | |
| box-sizing: border-box; | |
| } | |
| .nav-links { | |
| font-size: 20px; | |
| text-transform: uppercase; | |
| font-family: "Google Sans"; | |
| color: #4a4a4a; | |
| text-align: right; | |
| } | |
| .nav-logo-small { | |
| width: 110px; | |
| margin: 42px 0 0 0; | |
| } | |
| .nav-links .selected { | |
| color: #00695C ; | |
| } | |
| /*.nav-links a:visited { | |
| color: #4a4a4a; | |
| } | |
| a:visited { | |
| color: #7B1FA2; | |
| } | |
| */ | |
| .nav-links a { | |
| color: inherit; | |
| text-decoration: none; | |
| margin: 50px 0 0 50px; | |
| display: inline-block; | |
| } | |
| @media screen and (max-width: 1035px){ | |
| .nav-links { | |
| font-size: 16px; | |
| } | |
| } | |
| .nav-links{ | |
| line-height: 20px; | |
| -webkit-font-smoothing: antialiased; | |
| font-weight: 300; | |
| letter-spacing: 0.1px; | |
| box-sizing: border-box; | |
| margin: 8px; | |
| width: calc(66.6666666667% - 16px); | |
| font-size: 20px; | |
| text-transform: uppercase; | |
| font-family: "Google Sans"; | |
| color: #4a4a4a; | |
| text-align: right; | |
| } | |