diff --git a/style/main.css b/style/main.css index c229366..809b3b6 100644 --- a/style/main.css +++ b/style/main.css @@ -26,6 +26,16 @@ --ruler-border: #444; } } +:root { +--alpha: rgba(0, 0, 0, 0); +--anchor-gradient: linear-gradient(to top, var(--alpha), var(--anchor-background)); +--banner-gradient: linear-gradient(to top, var(--alpha), var(--banner-background)); +--body-gradient: linear-gradient(to top, var(--alpha), var(--body-background)); +--header-gradient: linear-gradient(to top, var(--alpha), var(--header-background)); +--item-even-gradient: linear-gradient(to top, var(--alpha), var(--item-even)); +--item-odd-gradient: linear-gradient(to top, var(--alpha), var(--item-odd)); +--org-gradient: linear-gradient(to top, var(--alpha), var(--org-background)); +} #vcf { background-color: var(--qrcode-background); @@ -56,10 +66,7 @@ a { text-underline-offset: .25em; } a:hover { - background: linear-gradient(to top, - rgba(0, 0, 0, 0) 0%, - var(--anchor-background) 100% - ); + background: var(--anchor-gradient); color: var(--anchor-text); } @@ -69,16 +76,10 @@ article.org, header { } header { padding-inline: .5em; - background: linear-gradient(to top, - rgba(0, 0, 0, 0) 0%, - var(--header-background) 100% - ); + background: var(--header-gradient); } header.org { - background: linear-gradient(to top, - rgba(0, 0, 0, 0) 0%, - var(--org-background) 100% - ); + background: var(--org-gradient); } article header { @@ -106,19 +107,13 @@ h1, h2, h3 { border-radius: .25em; } h2 { - background: linear-gradient(to top, - rgba(0, 0, 0, 0) 0%, - var(--banner-background) 100% - ); + background: var(--banner-gradient); margin-block: .25em; padding-block: .5em; text-align: center; } h3 { - background: linear-gradient(to top, - rgba(0, 0, 0, 0) 0%, - var(--header-background) 100% - ); + background: var(--header-gradient); padding: .125em .25em; } @@ -147,8 +142,12 @@ img.photo { border-radius: 1em; } -li:nth-of-type(even) { background-color: var(--item-even); } -li:nth-of-type(odd) { background-color: var(--item-odd); } +li:nth-of-type(even) { + background: var(--item-even-gradient); +} +li:nth-of-type(odd) { + background: var(--item-odd-gradient); +} table { margin-inline: auto;