| /* |
| Only edit main.css. |
| Do not edit docs.css, it is generaed from main.css. |
| */ |
| |
| @import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,700,700i&subset=greek,greek-ext,latin-ext'); |
| |
| body { |
| font-family: 'Roboto', Arial, sans-serif; |
| line-height: 1.6; |
| font-size: 14px; |
| margin: 0; |
| padding: 0; |
| } |
| |
| a { |
| color: #1f78b4; |
| } |
| |
| main { |
| width: calc(100% - 30em); |
| padding: 1em 2em 2em 1em; |
| /* https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/ */ |
| -webkit-overflow-scrolling: touch; |
| margin: 0 0 0 2em; |
| display: inline-block; |
| clear: both; |
| } |
| |
| pre { |
| margin-left: 1em; |
| padding: 1em; |
| background: #fafafa; |
| -webkit-overflow-scrolling: touch; |
| overflow-x: auto; |
| } |
| |
| pre code { |
| color: #000; |
| } |
| |
| code { |
| color: darkgreen; |
| } |
| |
| h2, |
| h3, |
| h4 { |
| font-weight: normal; |
| } |
| |
| h1 { |
| font-size: 3rem; |
| font-weight: 300; |
| } |
| |
| h2 { |
| margin-top: 1em; |
| margin-bottom: 0.2em; |
| } |
| |
| img { |
| margin: 1em; |
| } |
| |
| aside { |
| overflow-y: auto; |
| height: calc(100vh - 105px); |
| z-index: 10; |
| -webkit-overflow-scrolling: touch; |
| float: left; |
| width: 20em; |
| background: #fafafa; |
| padding: 10px; |
| } |
| |
| aside ul { |
| padding-left: 1em; |
| } |
| |
| aside li { |
| list-style-type: none; |
| margin-top: 8px; |
| font-size: 13px; |
| padding-top: 0.5em; |
| } |
| |
| aside li a.selected { |
| color: black; |
| font-weight: bold; |
| text-decoration: none; |
| } |
| |
| aside li a { |
| text-decoration: none; |
| } |
| |
| aside ul.depth0 > li, |
| aside ul.depth1 > li { |
| font-weight: bold; |
| font-size: 110%; |
| font-variant: small-caps; |
| } |
| |
| aside ul.depth0 > li { |
| font-size: 120%; |
| } |
| |
| aside ul.depth2 > li { |
| font-weight: bold; |
| } |
| |
| #menu { |
| display: none; |
| } |
| |
| #___gcse_0 { |
| width: 260px; |
| display: inline-block; |
| margin: 0.4em; |
| } |
| |
| #___gcse_0 button { |
| height: 25px; |
| } |
| |
| .float { |
| position: fixed; |
| top: 0; |
| right: 0; |
| border: 2px solid; |
| padding: 1em; |
| } |
| |
| .float li { |
| list-style-type: none; |
| } |
| |
| .float ul { |
| padding: 0; |
| } |
| |
| #rhs, |
| #lhs { |
| display: flex; |
| align-items: center; |
| font-size: 18px; |
| font-weight: 300; |
| } |
| |
| #rhs > *, |
| #lhs > * { |
| margin-left: 0.6em; |
| } |
| |
| header { |
| z-index: 20; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| border-bottom: solid 24px #4285f4; |
| background: #f8f8f8; |
| position: sticky; |
| top: 0; |
| width: 100%; |
| height: 60px; |
| } |
| |
| header img { |
| width: auto; |
| height: 32px; |
| margin: 0; |
| } |
| |
| footer { |
| background: #f8f8f8; |
| } |
| |
| @media (max-width: 900px) { |
| #rhs { |
| display: none; |
| } |
| |
| #menu { |
| width: 30px; |
| height: 30px; |
| border: 0; |
| padding: 0; |
| margin: 0; |
| background: #f8f8f8; |
| display: inline-block; |
| } |
| |
| aside { |
| display: block; |
| left: -350px; |
| position: absolute; |
| transition: left 0.5s; |
| width: 300px; |
| } |
| |
| #menu:hover { |
| background: lightgray; |
| } |
| |
| aside.opened { |
| left: 0%; |
| } |
| |
| main { |
| margin-left: 10px; |
| width: 100%; |
| } |
| } |