diff --git a/assets/css/main.css b/assets/css/main.css index 0fce7c9..72c3ec8 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -77,7 +77,6 @@ /* Layout. */ --deus-body-padding: 6rem 2rem; --deus-content-max-width: 92ch; - --deus-box-border-width: 1px; --deus-post-padding: 1.5rem; --deus-post-heading-spacing: 5px; --deus-post-spacing: 3rem; @@ -97,7 +96,7 @@ --deus-post-padding: 1rem; } } -@media only screen and (max-resolution: 191dpi) { +@media only screen and (max-resolution: 1dppx) { :root { --deus-body-text-shadow: 0 0 0 var(--deus-body-text-shadow-color); } @@ -173,7 +172,7 @@ main nav { background-color: var(--deus-box-background-color); width: 100%; padding: 0.75em 1.25em; - border-bottom: var(--deus-box-border-width) solid var(--deus-box-border-color); + border-bottom: 1px solid var(--deus-box-border-color); box-shadow: 0 1px 0 0 var(--deus-box-shadow-color); z-index: 1001; transition: @@ -181,7 +180,7 @@ main nav { opacity 0.15s ease, filter 0.15s ease; } -@media only screen and (min-resolution: 192dpi) { +@media only screen and (min-resolution: 2dppx) { main nav { border-bottom: none; box-shadow: @@ -328,21 +327,25 @@ article { position: relative; padding: var(--deus-post-padding); background-color: var(--deus-box-background-color); - border: var(--deus-box-border-width) solid var(--deus-box-border-color); box-shadow: + 0 0 0 1px var(--deus-box-border-color) inset, 0 0 0 1px var(--deus-box-shadow-color), 0 0 0 2px var(--deus-body-background-color); z-index: 1; } -@media only screen and (min-resolution: 192dpi) { +@media only screen and (min-resolution: 2dppx) { article { - border: none; box-shadow: - 0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina) inset, - 0 0 0 0.5px var(--deus-box-border-color), - 0 0 0 1px var(--deus-box-shadow-color-intermediate-retina), - 0 0 0 1.5px var(--deus-box-shadow-color); - 0 0 0 2.5px var(--deus-body-background-color); + 0 0 0 0.5px var(--deus-box-border-color) inset, + 0 0 0 1.0px var(--deus-box-shadow-color-intermediate-retina) inset, + 0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina), + 0 0 0 1.0px var(--deus-box-shadow-color), + 0 0 0 2.0px var(--deus-body-background-color); + } +} +@media only screen and (max-width: 960px) { + article { + margin-top: 2rem; } } @supports (-webkit-hyphens:auto) or (-ms-hyphens:auto) or (hyphens:auto) { @@ -353,6 +356,7 @@ article { hyphens: auto; } } + article + article { margin-top: var(--deus-post-spacing); } @@ -362,31 +366,26 @@ article + article { /*=--------------=*/ article h1 { + position: relative; float: right; margin: - calc(-1 * var(--deus-post-padding) - var(--deus-box-border-width)) - calc(-1 * var(--deus-post-padding) - var(--deus-box-border-width)) + calc(-1 * var(--deus-post-padding)) + calc(-1 * var(--deus-post-padding)) var(--deus-post-padding) calc(1.5 * var(--deus-post-padding)); padding: calc(0.5 * var(--deus-post-padding)) var(--deus-post-padding); + + /* Workaround for baseline bug in “Spectral” font. + */ + padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em); + background-color: var(--deus-box-background-color); - border: var(--deus-box-border-width) solid var(--deus-box-border-color); box-shadow: - 0 0 0 1px var(--deus-box-shadow-color), + 0 0 0 1px var(--deus-box-border-color) inset, + 0 0 0 1px var(--deus-box-shadow-color); - calc(-1 * var(--deus-post-heading-spacing)) calc(var(--deus-post-heading-spacing)) 0 1px var(--deus-body-background-color), - calc(-1 * var(--deus-post-heading-spacing)) 0 0 1px var(--deus-body-background-color), - 0 calc(var(--deus-post-heading-spacing)) 0 1px var(--deus-body-background-color), - - calc(-1 * calc(var(--deus-post-heading-spacing) + 1px)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-shadow-color), - calc(-1 * var(--deus-box-border-width)) calc(var(--deus-post-heading-spacing) + 1px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color), - calc(-1 * calc(var(--deus-post-heading-spacing) + 1px)) calc(var(--deus-post-heading-spacing) + 1px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color), - - calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) var(--deus-box-border-width) 0 var(--deus-box-border-width) var(--deus-box-border-color), - calc(-1 * var(--deus-box-border-width)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-border-color), - calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-border-color); font-family: var(--deus-heading-font); font-size: var(--deus-heading-font-size); font-weight: var(--deus-heading-font-weight); @@ -394,39 +393,70 @@ article h1 { font-feature-settings: var(--deus-heading-font-opentype-features); font-variant: var(--deus-heading-font-variant); letter-spacing: var(--deus-heading-letter-spacing); - - /* Workaround for baseline bug in “Spectral” font. - */ - padding-top: calc(0.5 * var(--deus-post-padding) + 0.125em); + -webkit-hyphens: none; + -ms-hyphens: none; + hyphens: none; } -@media only screen and (min-resolution: 192dpi) { +article h1::after { + content: ""; + position: absolute; + z-index: -1; + left: calc(-1 * (var(--deus-post-heading-spacing) + 2px)); + right: -1px; + top: -1px; + bottom: calc(-1 * (var(--deus-post-heading-spacing) + 2px)); + background-color: var(--deus-body-background-color); + box-shadow: + -1px 1px 0 0 var(--deus-box-shadow-color), + -2px 2px 0 0 var(--deus-box-border-color); +} +@media only screen and (min-resolution: 2dppx) { article h1 { - border: none; box-shadow: - 0 0 0 0.5px var(--deus-box-shadow-color), - 0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina) inset, - 0 0 0 1px var(--deus-box-border-color) inset, - 0 0 0 1.5px var(--deus-box-shadow-color-intermediate-retina) inset, - - calc(-1 * (var(--deus-post-heading-spacing) + 1px)) calc(var(--deus-post-heading-spacing) + 1px) 0 1px var(--deus-body-background-color), - calc(-1 * (var(--deus-post-heading-spacing) + 1px)) 0 0 1px var(--deus-body-background-color), - 0 calc(var(--deus-post-heading-spacing) + 1px) 0 1px var(--deus-body-background-color), - - calc(-1 * calc(var(--deus-post-heading-spacing) + 1.5px)) calc(var(--deus-box-border-width) + 0.0px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color), - calc(-1 * (var(--deus-box-border-width) + 0.0px)) calc(var(--deus-post-heading-spacing) + 1.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color), - calc(-1 * calc(var(--deus-post-heading-spacing) + 1.5px)) calc(var(--deus-post-heading-spacing) + 1.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color), - - calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) calc(var(--deus-box-border-width) + 0.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina), - calc(-1 * (var(--deus-box-border-width) + 0.5px)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina), - calc(-1 * calc(var(--deus-post-heading-spacing) + 2px)) calc(var(--deus-post-heading-spacing) + 2px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina), - - calc(-1 * calc(var(--deus-post-heading-spacing) + 2.5px)) calc(var(--deus-box-border-width) + 1px) 0 var(--deus-box-border-width) var(--deus-box-border-color), - calc(-1 * (var(--deus-box-border-width) + 1px)) calc(var(--deus-post-heading-spacing) + 2.5px) 0 var(--deus-box-border-width) var(--deus-box-border-color), - calc(-1 * calc(var(--deus-post-heading-spacing) + 2.5px)) calc(var(--deus-post-heading-spacing) + 2.5px) 0 var(--deus-box-border-width) var(--deus-box-border-color), - - calc(-1 * calc(var(--deus-post-heading-spacing) + 3px)) calc(var(--deus-box-border-width) + 1.5px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina), - calc(-1 * (var(--deus-box-border-width) + 1.5px)) calc(var(--deus-post-heading-spacing) + 3px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina), - calc(-1 * calc(var(--deus-post-heading-spacing) + 3px)) calc(var(--deus-post-heading-spacing) + 3px) 0 var(--deus-box-border-width) var(--deus-box-shadow-color-intermediate-retina); + 0 0 0 0.5px var(--deus-box-border-color) inset, + 0 0 0 1.0px var(--deus-box-shadow-color-intermediate-retina) inset, + 0 0 0 0.5px var(--deus-box-shadow-color-intermediate-retina), + 0 0 0 1.0px var(--deus-box-shadow-color); + } + article h1::after { + box-shadow: + -0.5px 0.5px 0 0 var(--deus-box-shadow-color), + -1.0px 1.0px 0 0 var(--deus-box-shadow-color-intermediate-retina), + -1.5px 1.5px 0 0 var(--deus-box-border-color), + -2.0px 2.0px 0 0 var(--deus-box-shadow-color-intermediate-retina); + } +} +@media only screen and (max-width: 960px) { + article h1 { + float: none; + margin: + calc(-1 * (var(--deus-post-padding) + 1.125em)) + calc(var(--deus-post-heading-spacing) + 4px) + 2rem + calc(var(--deus-post-heading-spacing) + 4px); + text-align: center; + } + article h1::after { + top: calc(1.25em - 4px); + right: calc(-1 * (var(--deus-post-heading-spacing) + 2px)); + box-shadow: + 0 1px 0 0 var(--deus-body-background-color), + 0 1px 0 1px var(--deus-box-shadow-color), + -1px 2px 0 1px var(--deus-box-border-color), + 1px 2px 0 1px var(--deus-box-border-color); + } + @media only screen and (min-resolution: 2dppx) { + article h1::after { + box-shadow: + 0 1px 0 0 var(--deus-body-background-color), + 0 1px 0 0.5px var(--deus-box-shadow-color), + -0.5px 1.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina), + 0.5px 1.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina), + -1px 2px 0 0.5px var(--deus-box-border-color), + 1px 2px 0 0.5px var(--deus-box-border-color), + -1.5px 2.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina), + 1.5px 2.5px 0 0.5px var(--deus-box-shadow-color-intermediate-retina); + } } }