| /* |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you 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. |
| */ |
| |
| $font: Helvetica, Arial, sans-serif; |
| $main_background_color: #fff; |
| $body_background_color: #f8f8f8; |
| $color_text: #444; |
| $color_link: #4643aa; |
| $color_dropdown: #eee; |
| $color_nav_item: #2f3036; |
| $color_nav_hover: #1989c5; |
| $color_header_text: #eee; |
| |
| |
| html, body { |
| width: 100%; |
| height: 100%; |
| margin: 0 auto; |
| background: $body_background_color; |
| } |
| |
| body { |
| min-height: 100%; |
| display: grid; |
| grid-template-rows: auto 1fr auto; |
| grid-template-columns: 100%; |
| } |
| |
| header { |
| display: grid; |
| grid-template-columns: 30% auto; |
| background: $color_nav_item; |
| padding: 0; |
| |
| .header-logo { |
| display: flex; |
| } |
| |
| .header-logo img { |
| max-height: 48px; |
| } |
| |
| .header-text { |
| display: flex; |
| align-items: center; |
| font-size: 24px; |
| font-family: $font; |
| color: $color_header_text; |
| padding-left: 20px; |
| } |
| |
| @media screen and (max-width : 810px){ |
| grid-template-columns: auto; |
| .header-logo { |
| width: 100%; |
| display: block; |
| } |
| .header-text { |
| display: block; |
| } |
| .header-logo img { |
| display: none; |
| } |
| } |
| |
| nav { |
| ul { |
| list-style-type:none; |
| margin:0; |
| padding:0; |
| position: absolute; |
| } |
| li { |
| display:inline-block; |
| float: left; |
| margin-right: 1px; |
| } |
| li a { |
| display:block; |
| min-width:140px; |
| height: 48px; |
| text-align: center; |
| line-height: 48px; |
| font-family: $font; |
| color: #fff; |
| background: $color_nav_item; |
| text-decoration: none; |
| } |
| |
| li:hover a { |
| background: $color_nav_hover; |
| } |
| |
| li:hover ul a { |
| background: $color_dropdown; |
| color: $color_text; |
| height: 40px; |
| line-height: 40px; |
| } |
| li:hover ul a:hover { |
| background: $color_nav_hover; |
| color: #fff; |
| } |
| li ul { |
| display: none; |
| } |
| li ul li { |
| display: block; |
| float: none; |
| } |
| li ul li a { |
| width: auto; |
| min-width: 100px; |
| padding: 0 20px; |
| } |
| ul li a:hover + .hidden, .hidden:hover { |
| display: block; |
| } |
| |
| .show-menu { |
| font-family: $font; |
| text-decoration: none; |
| color: #fff; |
| background: $color_nav_hover; |
| text-align: center; |
| padding: 10px 0; |
| display: none; |
| } |
| input[type=checkbox]{ |
| display: none; |
| -webkit-appearance: none; |
| } |
| input[type=checkbox]:checked ~ #menu{ |
| display: block; |
| } |
| |
| @media screen and (max-width : 810px){ |
| ul { |
| position: static; |
| display: none; |
| } |
| li { |
| margin-bottom: 1px; |
| } |
| ul li, li a { |
| width: 100%; |
| } |
| .show-menu { |
| display:block; |
| } |
| } |
| } |
| } |
| |
| footer { |
| background-color: $color_nav_item; |
| color: white; |
| min-height: 100px; |
| font-family: $font; |
| padding: 1em; |
| } |
| |
| main { |
| padding: 0.5em; |
| margin: 0 auto; |
| max-width: 85%; |
| min-width: 85%; |
| color: $color_text; |
| background: $main_background_color; |
| font-family: $font; |
| } |