body { font-family: sans-serif; margin: 0; } h1, h2, h3, h4, h5, h6 { font-weight: 200; } a.simple { text-decoration: none; } .vertical-buttons { display: flex; flex-direction: column; } .vertical-buttons a.button { flex: 1; color: #a66; background: white; border: thin #a66 solid; border-bottom: none; padding: 5px; text-align: center; transition: 0.2s all; } .vertical-buttons a.button:hover { background: #a66; color: white; } .vertical-buttons a.button:first-child { border-radius: 5px 5px 0 0; } .vertical-buttons a.button:last-child { border-bottom: thin #a66 solid; border-radius: 0 0 5px 5px; } nav { padding: 20px 15px; background: #a00; color: white; display: flex; justify-content: space-between; } #nav-links { font-size: 1.4em; } #nav-links, #nav-search { margin: auto 0; } main { padding: 20px; } .documents { display: flex; flex-direction: column; } .document { display: flex; flex: 1; flex-direction: row; margin: 10px; } .document-column { width: 10%; } .document-column.left { background-size: contain; background-repeat: no-repeat; background-position: center; } .document-column.centre { width: 80%; } .document-column.right ul { list-style: none; padding: 0; } .document-column.centre div { margin: 3px 0; } .document-column .title { font-size: 1.2em; text-align: center; } .document-column .authors { text-align: center; } .document-column .tags { font-size: 0.8em; } .document-column .tags .list-empty::before { display: inline-block; content: "No tags"; } .document-column .metadata { font-size: 0.8em; color: #888; }