| html, body, #root { |
| margin: 0; |
| height: 100%; |
| font-family: 'Open Sans', sans-serif; |
| } |
| |
| body, h1, h2, h3 { |
| font-weight: 300 |
| } |
| |
| a { |
| color: white; |
| text-decoration: none; |
| |
| &:hover { |
| color: #5aadbb; |
| } |
| } |
| |
| .main-container { |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| } |
| .main { |
| flex: 1; |
| display: flex; |
| flex-direction: row; |
| |
| .content { |
| display: flex; |
| flex: 1; |
| flex-direction: column; |
| flex-basis: 85%; |
| background: darken(grey, 25); |
| padding: 20px; |
| color: #eee; |
| overflow-y: scroll; |
| } |
| } |
| |
| .header { |
| display: flex; |
| align-items: center; |
| background-color: #1f1f1f; |
| } |
| .header-title { |
| flex: 1; |
| font-size: 1.5rem; |
| margin: 1rem; |
| } |
| |
| .header-date { |
| flex: 1; |
| text-align: right; |
| margin: 1rem; |
| color: white; |
| } |
| |
| .footer { |
| padding: 0.5rem; |
| font-size: 1rem; |
| background-color: #1f1f1f; |
| text-align: center; |
| color: white; |
| } |
| |
| h1 { |
| color: #fff; |
| } |
| |
| .panel { |
| color: #4d4d4d; |
| } |