$background : dimgray; $transition : .35s; $bounce : cubic-bezier(.3,1.1,.9,1); html { box-sizing: border-box; } *, *:before, *:after { margin: 0; padding: 0; box-sizing: inherit; } html, body { height: 100%; } body { font: 100%/1.4 Alegreya Sans; background: linear-gradient( mediumseagreen, transparent ), linear-gradient( -90deg, skyblue, transparent ), linear-gradient( 90deg, coral, transparent ); background-blend-mode: screen; padding: 1rem; } main { display: flex; width: 100%; max-width: 60rem; height: 100%; overflow: hidden; background: rgba(black, .1); margin: 0 auto; box-shadow: 0 1px rgba(black, .2); } nav { display: flex; font-size: 115%; flex-direction: column; width: 10rem; overflow: hidden; a { position: relative; align-items: center; user-select: none; cursor: pointer; width: 100%; line-height: 3rem; max-height: 3rem; padding: 0 1em; overflow: hidden; background: linear-gradient( 90deg, rgba(white, .7) 90%, rgba(white, .6) 100% ); box-shadow: inset 0 -1px rgba(black, .1); transform-origin: 0 0; transition: background $transition, color $transition, max-height $transition $transition $bounce; &:before { display: inline-block; font: 130% lineicon; vertical-align: middle; padding-right: 1rem; } &:hover { background: white; box-shadow: inset 0 -1px transparent; color: shade($background, 20%); transition: 0; } &:active { color: $background; } } &.single-tab a { &.selected { background: white; color: black; } &:not(.selected) { color: transparent; max-height: 0; } } } section { font-size: 150%; line-height: 1.75; color: tint($background, 70%); box-shadow: 0 1px rgba(black, .2); background: white; flex: 1; padding: 1rem; } @font-face { font-family: lineicon; } .heart:before { content: "\e601"; } .star:before { content: "\e602"; } .tv:before { content: "\e603"; } .search:before { content: "\e604"; } .settings:before { content: "\e60a"; } .camera:before { content: "\e60b"; } .tag:before { content: "\e60c"; } .lock:before { content: "\e60d"; } .bulb:before { content: "\e60e"; } .pen:before { content: "\e60f"; } .diamond:before { content: "\e610"; } .display:before { content: "\e611"; } .location:before { content: "\e612"; } .stack:before { content: "\e613"; } .cup:before { content: "\e614"; } .phone:before { content: "\e615"; } .news:before { content: "\e616"; } .mail:before { content: "\e617"; } .like:before { content: "\e618"; } .photo:before { content: "\e619"; } .note:before { content: "\e61a"; } .clock:before { content: "\e61b"; } .paperplane:before { content: "\e61c"; } .params:before { content: "\e61d"; } .banknote:before { content: "\e61e"; } .data:before { content: "\e61f"; } .music:before { content: "\e620"; } .megaphone:before { content: "\e621"; } .study:before { content: "\e622"; } .food:before { content: "\e623"; } .t-shirt:before { content: "\e624"; } .clip:before { content: "\e625"; } .shop:before { content: "\e626"; } .vynil:before { content: "\e627"; } .truck:before { content: "\e628"; } .world:before { content: "\e629"; }