Taeluf.com

header.css

header {
    width: 100%;
    height: var(--height_header);
    min-height: var(--height_header);
    margin: 0;
    background: var(--color_primary);
    display: flex;
    align-items: center;
    border-bottom: 1px solid black;
    box-shadow: inset 0px -6px 12px -4px #a000a0;
}


header #header {
    list-style: none;
    list-style-type: none;
    display: block;
    margin: 0;
    padding: 0;
    height: 2rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    flex: 1 1 auto;
}

header #header span {
    display: inline;
    padding: 0;
    margin-left: 0.3rem;
    text-overflow: ellipsis;
    vertical-align: middle;
}

header #header a {
    text-decoration: none;
    color: var(--color_primary_text);
    font-weight: bold;
    font-size: 1.5rem;
    cursor: pointer;
    vertical-align: middle;
    text-overflow: ellipsis;
}

header #menuWrapper {
    padding: 0;
    margin: 0;
    height: 100%;
}

header #menuButtonWrapper {
    width: 4rem;
    height: 100%;
    line-height: .65rem;
    text-align: center;
    vertical-align: middle;
    background: var(--color_primary);
    padding: 0;
    margin: 0;
    height: calc(100% - 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--color_contrast);
    cursor: pointer;
}

header #menuButton {
    display: inline-block;
    vertical-align: middle;
    color: var(--color_contrast);
    font-weight: bolder;
    font-size: 4rem;
    position: relative;
    top: -.4rem;
    left: -.25rem;
    letter-spacing: -0.5rem;
}

header #menuWrapper.hiddenMenu #menu {
    width: 0px;
    overflow: hidden;
    transition: width 0.8s, opacity 3.0s;
    opacity: 0.0;
}

header #menu {
    position: absolute;
    top: var(--height_header);
    right: 0;
    bottom: 0;
    background: var(--color_menu_background);
    margin: 0;
    width: 62%;
    box-shadow: -2px 5px 4px #00000077, inset 5px -5px 15px #49494950;
    border-left: 1px solid #444444aa;
    transition: width 1.1s, opacity 1.0s;
    overflow: auto;
}

header #menu ul {
    position: relative;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5rem;
    list-style: none;
    line-height: 2rem;
    text-align: left;
    padding: 0 0 0 .3rem;
    margin: 0;
    /*                 border-top: 1px solid var(--color_contrast); */
}

header #menu ul li {
    border-bottom: 1px solid var(--color_contrast);
    margin: 0;
}

header #menu ul li a:active, header #menu ul li a:hover {
    background: var(--color_primary);
    color: var(--color_contrast);
}

header #menuButtonWrapper:active {
    background: var(--color_contrast);
    border-left-color: black;
}

header #menuButtonWrapper:active #menuButton {
    color: var(--color_primary);
}

header #menu ul li a {
    text-decoration: none;
    color: var(--color_primary_dark);
    font-size: 1.2rem;
    cursor: pointer;
    text-overflow: ellipsis;
    display: block;
    padding: 0.4rem 2rem 0.4rem 1.0rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

header #menu li:active {
    background: var(--color_primary);
}

header #menu li:active a {
    color: var(--color_contrast_bright);
}