/* TODO flexbox for bottom alignment, old browsers without media queries is mobile view after all */ /* TODO easier 'see all': a[rel="index"] { float: right; line-height: 64px } @media (max-width: 640px) { a[rel="index"] { display: block } } TODO permalink chain icon on hover? */ h1 a[rel="index"], h2 a[rel="index"] { font-size: 32px; line-height: 112px; /* TODO magic?!? */ float: right } a { color: $secondary-color; font-weight: bold; text-decoration: none } a p { font-weight: normal } /* home link */ nav a[href="/"] { font-size: large } article p a { font-weight: bold; text-decoration: underline } /* flat list e.g. for search results */ a > p { color: $text-color } article p a:hover, article p a:focus { text-decoration: none } article p a:visited:not(.button) { color: $tertiary-color; text-decoration: none } a[rel="prev"] strong, a[rel="next"] strong, h1 a[rel="index"], h2 a[rel="index"] { color: $text-color; font-weight: bold } h1 a[rel="index"], h2 a[rel="index"] { color: $secondary-color; font-size: 24px } a[rel="prev"] strong::before { color: $primary-color; content: "◀ " } h1 a[rel="index"]::after, h2 a[rel="index"]::after, a[rel="next"] strong::after { color: $primary-color; content: " ►" } /* TODO test with gallery */ .stretch { bottom: 0; content: ""; position: absolute; left: 0; pointer-events: auto; right: 0; top: 0; z-index: 1 } @media not print { article p a[href^="http"] { padding-right: 1rem; &::after { color: gray; content: '↗'; position: absolute /* no text-decoration, magic! */ } } }