@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: 0.5rem; left: 1rem; z-index: 100; a { margin-right: 1rem; } } main, footer { margin: 0 4em; padding: 1em; max-width: 70em; } main { position: relative; background: #fafaff; 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; } } p { line-height: 160%; } code, pre.screen { background: #111; color: white; padding: 2px; } 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%; } } } .older.post-list { margin: 5em 0 2em 0; padding: 1em 0; border-top: 0.1em dotted $link-color; border-bottom: 0.1em dotted $link-color; line-height: 200%; li { display: inline; a { padding-top: 0; display: inline; font-size: 120%; } } } footer { p { text-align: right; font-size: 100%; } } .style-popup { background: white; input { display: none; padding: 3px; border: 1px inset #ccc; background: white; width: 0px; transition: width ease 2s; &.shown { display: inline-block; width: 400px; } } button { padding: 0; height: 2em; text-align: center; background: #eee; border: 1px outset #ccc; margin-right: 1px; &:hover { background: #ccc; } &[data-action=createLink] { color: blue; text-decoration: underline; } } &.short button { width: 2em; } }