@charset "UTF-8"; $text-color: #222; $link-color: #0000ee; $visited-link-color: #551a8b; @import "opensans"; body { font-family: "Open Sans", sans-serif; background: white; color: $text-color; font-size: 100%; } a { color: $link-color; text-decoration: none; border-bottom: 0.1em dotted $link-color; &:visited { color: $visited-link-color; border-color: $visited-link-color; } &:hover { border-bottom-style: solid; } } header { display: inline-block; h1 { font-weight: normal; text-transform: uppercase; margin: 1em 0 0 1em; padding: 0 0.5em; color: lighten($text-color, 20%); background: #fafaff; display: inline-block; a { border: none; } } transform: rotate(-2deg); position: relative; z-index: 2; } div.actions { position: absolute; top: 1rem; right: 1rem; a { margin-left: 1rem; } } main { margin: 0 4em; padding: 1em; background: #fafaff; max-width: 70em; min-height: 70vh; clip-path: polygon(0px 0px, 96.35% -24px, 101.99% 7.86%, 100.61% 103.56%, 10% 100%, 0% 100%, 0px 0px); } .home { nav a { text-transform: uppercase; display: inline-block; text-decoration: none; font-size: 500%; font-weight: bold; padding-top: 0.5em; line-height: 50%; width: 100%; span { font-size: 30%; } margin-bottom: 1rem; &.divers { width: 49%; } &.vrac { width: 49%; text-align: right; float: right; } } .latest { margin-top: 2em; h2 { margin: 0; font-size: 400%; font-weight: bold; text-transform: uppercase; } .meta { padding-top: 0.5rem; padding-left: 0.5rem; color: lighten($text-color, 40%); } } } .post { max-width: 50em; div.figure { text-align: center; margin: 1em 0; img { border: 1px solid gray; padding: 3px; } .caption { margin-top: 0; font-style: italic; } } div.meta { margin-top: 3em; color: lighten($text-color, 40%); } } .post-list { ul, li { margin: 0; padding: 0; list-style: none; display: inline-block; } li.unpublished { opacity: 0.5; } a { text-transform: uppercase; display: inline-block; text-decoration: none; font-size: 200%; font-weight: bold; padding-top: 0.5em; margin-right: 1em; span { font-size: 60%; } } }