| /* |
| 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; |
| font-size: 15px; |
| margin: 0; |
| padding: 0; |
| } |
| |
| a { |
| color: #1f78b4; |
| } |
| |
| |
| main { |
| padding: 1em; |
| padding-left: 2em; |
| overflow-y: auto; |
| max-width: 90em; |
| } |
| |
| pre { |
| margin-left: 1em; |
| padding: 1em; |
| background: #fafafa; |
| 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; |
| } |
| |
| #drawer { |
| min-width: 250px; |
| background: #fafafa; |
| padding: 10px; |
| overflow-y: scroll; |
| } |
| |
| img { |
| margin: 1em; |
| } |
| |
| #drawer ul { |
| padding-left: 1em; |
| } |
| |
| #drawer li { |
| list-style-type: none; |
| margin-top: 8px; |
| font-size: 13px; |
| padding-top: 0.5em; |
| } |
| |
| #drawer li a.selected { |
| color: black; |
| font-weight: bold; |
| text-decoration: none; |
| } |
| |
| #drawer li a { |
| text-decoration: none; |
| } |
| |
| #drawer ul.depth0>li, |
| #drawer ul.depth1>li { |
| font-weight: bold; |
| font-size: 110%; |
| font-variant: small-caps; |
| } |
| |
| #drawer ul.depth0>li { |
| font-size: 120%; |
| } |
| |
| #drawer 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 { |
| grid-area: header; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| border-bottom: solid 24px #4285F4; |
| background: #f8f8f8; |
| position: sticky; |
| top: 0; |
| } |
| |
| header img { |
| width: auto; |
| height: 32px; |
| margin: 0; |
| } |
| |
| main { |
| grid-area: main; |
| margin: 0 auto; |
| padding-bottom: 2em; |
| } |
| |
| aside { |
| grid-area: aside; |
| } |
| |
| footer { |
| grid-area: footer; |
| background: #f8f8f8; |
| } |
| |
| body { |
| height: 100vh; |
| width: 100vw; |
| display: grid; |
| grid-template-columns: 250px 1fr; |
| grid-template-rows: 92px 1fr 24px; |
| grid-template-areas: |
| "header header" |
| "aside main" |
| "footer footer"; |
| } |
| |
| @media (max-width: 900px) { |
| |
| body { |
| display: grid; |
| grid-template-columns: 1fr; |
| grid-template-rows: 92px 1fr 24px; |
| grid-template-areas: |
| "header" |
| "main" |
| "footer"; |
| } |
| |
| #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; |
| } |
| } |
| |