/* ### MOBILE/TOUCH ### */ @media screen { header { flex-direction: row-reverse; transition: all 0.1s; } .menu-toggled header { border-bottom-width: 0px; border-radius: 0px; } header > nav { display: flex; flex-direction: column-reverse; position: absolute; z-index: -100; top: -100vh; left: 0px; width: 100vw; height: calc( 100vh - var(--header-height) ); background-color: var(--bg-color); overflow: auto; overscroll-behavior: contain; opacity: 0; transition: all 0.2s ease-out; border-bottom: 2px solid var(--silverish-color); border-radius: 0 0 0.75rem 0.75rem; padding: 0px; /* remove padding, makes scroll overflow funky if not */ gap: 1em; } .menu-toggled header > nav { top: var(--header-height); opacity: 1; } body.menu-toggled { overflow: hidden; /* remove scrolling from to favor scrolling on

*/ } /* tiered menus and sub menus */ header nav menu { padding: 0em 1em; } header nav menu menu { padding: 0em 0em 0em 1em; } /* nice big links to easily press */ header a { font-size: 120%; padding: 0.25em; } header a:active { border-radius: 0.25em; background-color: var(--highlighter-color); } /* line of demarcation between menus */ menu#primary::before { content: ''; display: block; background-color: var(--silverish-color); height: 1px; margin-bottom: 1rem; } /* login button */ #user button { width: calc( 100% - 2em ); margin: 0em 1em; } /* pad the user badge to align w/menu items */ #badge { margin: 0em 1em; } #badge img:last-child { display: none; } /** * The burger stack menu. */ #menuburger { display: flex; flex-direction: column; gap: 0.5em; cursor: pointer; padding: 1rem; } #menuburger div { transition-property: transform; transition-timing-function: cubic-bezier(.4,0,.2,1); transition-duration: .15s; transform-origin: left; height: 0.125rem; width: 1.75rem; background-color: var(--fg-color); border-radius: 0.1rem; /* smooths out the ends when in x form */ } #menuburger div:nth-child(2) { transition-property: opacity; transform-origin: unset; } .menu-toggled #menuburger div:nth-child(1) { transform: rotate(45deg); } .menu-toggled #menuburger div:nth-child(2) { opacity: 0; } .menu-toggled #menuburger div:nth-child(3) { transform: rotate(-45deg); } /* center the logo */ #logo { flex: auto; text-align: center; } }