/** * Subsite styles * (hosted demos, ...) */ /** * Split view * (sidebar + content) */ .split { display: flex; } .split aside { width: 350px; flex-shrink: 4; padding: 8px 16px; color: white; background: #F44336; } .split aside header { margin: -8px -16px 0 -16px; background: #D32F2F; } .split aside header a { padding: 8px 16px; display: block; text-decoration: none; } .split aside header:hover { background: #C62828; } .split aside header img { width: 2.5em; float: left; margin-right: 0.5em; border-radius: 100%; border: 2px solid white; } .split aside header span { font-weight: bold; } .split aside header:after { content: ''; display: table; clear: both; } .split aside h1 + h3 { margin-top: -1.3em; } .split #content { width: calc(100% - 350px); flex-shrink: 1; }