|
|
| Line 2: |
Line 2: |
| | | | |
| | <head> | | <head> |
| − | <style> | + | <link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/jgthms/bulma/master/css/bulma.css"> |
| − | #content {
| + | |
| − | width: 0 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | html,
| + | |
| − | body {
| + | |
| − | margin: 0;
| + | |
| − | min-width: 100vw;
| + | |
| − | width: 100vw;
| + | |
| − | min-height: 100vh;
| + | |
| − | height: 100vh;
| + | |
| − | }
| + | |
| − | | + | |
| − | .foo {
| + | |
| − | margin-left: -20px;
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | width: 100vw;
| + | |
| − | max-width: 100vw;
| + | |
| − | height: calc(100vh - 18px);
| + | |
| − | overflow: hidden;
| + | |
| − | background: beige;
| + | |
| − | }
| + | |
| − | | + | |
| − | header {
| + | |
| − | position: relative;
| + | |
| − | top: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: auto;
| + | |
| − | line-height: 80px;
| + | |
| − | font-size: 18px;
| + | |
| − | text-align: center;
| + | |
| − | background-color: rgb(255, 255, 255);
| + | |
| − | box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.19);
| + | |
| − | text-align: center;
| + | |
| − | z-index: 10;
| + | |
| − | transition: height 0.5s ease-in-out, line-height 0.5s ease-in-out, font-size 0.5s ease-in-out;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar {
| + | |
| − | min-height: 3.25rem;
| + | |
| − | position: relative;
| + | |
| − | z-index: 30;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-brand {
| + | |
| − | align-items: stretch;
| + | |
| − | display: flex;
| + | |
| − | flex-shrink: 0;
| + | |
| − | min-height: 3.25rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-item,
| + | |
| − | .navbar-link {
| + | |
| − | color: #4a4a4a;
| + | |
| − | display: block;
| + | |
| − | line-height: 1.5;
| + | |
| − | padding: 0.5rem 0.75rem;
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | | + | |
| − | a.navbar-item,
| + | |
| − | .navbar-link {
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-item.has-dropdown {
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-item.has-dropdown {
| + | |
| − | align-items: stretch;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-item.has-dropdown-up .navbar-link::after {
| + | |
| − | -webkit-transform: rotate(135deg) translate(0.25em, -0.25em);
| + | |
| − | transform: rotate(135deg) translate(0.25em, -0.25em);
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-item.has-dropdown-up .navbar-dropdown {
| + | |
| − | border-bottom: 2px solid #dbdbdb;
| + | |
| − | border-radius: 6px 6px 0 0;
| + | |
| − | border-top: none;
| + | |
| − | bottom: 100%;
| + | |
| − | box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1);
| + | |
| − | top: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | a.navbar-item:focus,
| + | |
| − | a.navbar-item:focus-within,
| + | |
| − | a.navbar-item:hover,
| + | |
| − | a.navbar-item.is-active,
| + | |
| − | .navbar-link:focus,
| + | |
| − | .navbar-link:focus-within,
| + | |
| − | .navbar-link:hover,
| + | |
| − | .navbar-link.is-active {
| + | |
| − | background-color: #fafafa;
| + | |
| − | color: #3273dc;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-item {
| + | |
| − | display: block;
| + | |
| − | flex-grow: 0;
| + | |
| − | flex-shrink: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-item.has-dropdown-up .navbar-dropdown {
| + | |
| − | border-bottom: 2px solid #dbdbdb;
| + | |
| − | border-radius: 6px 6px 0 0;
| + | |
| − | border-top: none;
| + | |
| − | bottom: 100%;
| + | |
| − | box-shadow: 0 -8px 8px rgba(10, 10, 10, 0.1);
| + | |
| − | top: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-item img {
| + | |
| − | max-height: 1.75rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-brand a.navbar-item:focus,
| + | |
| − | .navbar-brand a.navbar-item:hover {
| + | |
| − | background-color: transparent;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-item.is-active .navbar-dropdown,
| + | |
| − | .navbar-item.is-hoverable:focus .navbar-dropdown,
| + | |
| − | .navbar-item.is-hoverable:focus-within .navbar-dropdown,
| + | |
| − | .navbar-item.is-hoverable:hover .navbar-dropdown {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar.is-spaced .navbar-item.is-active .navbar-dropdown,
| + | |
| − | .navbar-item.is-active .navbar-dropdown.is-boxed,
| + | |
| − | .navbar.is-spaced .navbar-item.is-hoverable:focus .navbar-dropdown,
| + | |
| − | .navbar-item.is-hoverable:focus .navbar-dropdown.is-boxed,
| + | |
| − | .navbar.is-spaced .navbar-item.is-hoverable:focus-within .navbar-dropdown,
| + | |
| − | .navbar-item.is-hoverable:focus-within .navbar-dropdown.is-boxed,
| + | |
| − | .navbar.is-spaced .navbar-item.is-hoverable:hover .navbar-dropdown,
| + | |
| − | .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
| + | |
| − | opacity: 1;
| + | |
| − | pointer-events: auto;
| + | |
| − | -webkit-transform: translateY(0);
| + | |
| − | transform: translateY(0);
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-dropdown {
| + | |
| − | background-color: white;
| + | |
| − | border-bottom-left-radius: 6px;
| + | |
| − | border-bottom-right-radius: 6px;
| + | |
| − | border-top: 2px solid #dbdbdb;
| + | |
| − | box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
| + | |
| − | display: none;
| + | |
| − | font-size: 0.875rem;
| + | |
| − | left: 0;
| + | |
| − | min-width: 100%;
| + | |
| − | position: absolute;
| + | |
| − | top: 100%;
| + | |
| − | z-index: 20;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-dropdown .navbar-item {
| + | |
| − | padding: 0.375rem 1rem;
| + | |
| − | white-space: nowrap;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-dropdown a.navbar-item {
| + | |
| − | padding-right: 3rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-dropdown a.navbar-item:focus,
| + | |
| − | .navbar-dropdown a.navbar-item:hover {
| + | |
| − | background-color: whitesmoke;
| + | |
| − | color: #0a0a0a;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-dropdown a.navbar-item.is-active {
| + | |
| − | background-color: whitesmoke;
| + | |
| − | color: #3273dc;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar,
| + | |
| − | .navbar-menu,
| + | |
| − | .navbar-start,
| + | |
| − | .navbar-end {
| + | |
| − | align-items: stretch;
| + | |
| − | display: flex;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-end {
| + | |
| − | margin-left: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-menu {
| + | |
| − | flex-grow: 1;
| + | |
| − | flex-shrink: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-dropdown {
| + | |
| − | font-size: 0.875rem;
| + | |
| − | padding-bottom: 0.5rem;
| + | |
| − | padding-top: 0.5rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-dropdown .navbar-item {
| + | |
| − | padding-left: 1.5rem;
| + | |
| − | padding-right: 1.5rem;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar-item.has-dropdown:focus .navbar-link,
| + | |
| − | .navbar-item.has-dropdown:hover .navbar-link,
| + | |
| − | .navbar-item.has-dropdown.is-active .navbar-link {
| + | |
| − | background-color: #fafafa;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| | </head> | | </head> |
| | | | |
