diff --git a/Shared/Article Rendering/stylesheet.css b/Shared/Article Rendering/stylesheet.css index 31b81be37..8bcf7ad3a 100644 --- a/Shared/Article Rendering/stylesheet.css +++ b/Shared/Article Rendering/stylesheet.css @@ -36,24 +36,26 @@ a:hover { :root { --header-table-border-color: rgba(0, 0, 0, 0.1); - --header-color: rgba(0, 0, 0, 0.3); - --body-code-color: #666; + --header-color: rgba(0, 0, 0, 0.66); + --body-code-color: #111; + --code-background-color: #eee; --system-message-color: #cbcbcb; --feedlink-color: rgba(255, 0, 0, 0.6); --article-title-color: #333; - --article-date-color: rgba(0, 0, 0, 0.3); + --article-date-color: rgba(0, 0, 0, 0.5); --table-cell-border-color: lightgray; } @media(prefers-color-scheme: dark) { :root { --header-color: rgba(94, 158, 244, 1); - --body-code-color: #b2b2b2; + --body-code-color: #dcdcdc; --system-message-color: #5f5f5f; --feedlink-color: rgba(94, 158, 244, 1); --article-title-color: #e0e0e0; --article-date-color: rgba(255, 255, 255, 0.5); --table-cell-border-color: dimgray; + --code-background-color: #333; } } @@ -106,6 +108,8 @@ body > .systemMessage { .articleDateline { margin-bottom: 5px; font-weight: bold; + font-variant-caps: all-small-caps; + letter-spacing: 0.025em; } .articleDateline a:link, .articleDateline a:visited { @@ -115,6 +119,7 @@ body > .systemMessage { .articleDatelineTitle { margin-bottom: 5px; font-weight: bold; + font-variant-caps: all-small-caps; } .articleDatelineTitle a:link, .articleDatelineTitle a:visited { @@ -122,19 +127,33 @@ body > .systemMessage { } .externalLink { - margin-bottom: 5px; + margin-top: 15px; + margin-bottom: 15px; + font-size: 0.875em; font-style: italic; + color: var(--article-date-color); width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } +.externalLink a { + font-family: "SF Mono", Menlo, Courier, monospace; + font-size: 0.85em; + font-variant-caps: normal; + letter-spacing: 0em; +} + .articleBody { margin-top: 20px; line-height: 1.6em; } +.articleBody a { + padding: 0px 1px; +} + h1 { line-height: 1.15em; font-weight: bold; @@ -149,6 +168,7 @@ pre { overflow-y: hidden; word-wrap: normal; word-break: normal; + border-radius: 3px; } pre { @@ -156,9 +176,15 @@ pre { } code, pre { - font-family: "SF Mono", Menlo, "Courier New", Courier, monospace; - font-size: 1em; - -webkit-hyphens: none; + font-family: "SF Mono", Menlo, Courier, monospace; +/* font-size: 1em;*/ +/* -webkit-hyphens: none;*/ + background: var(--code-background-color); +} + +code { + padding: 1px 2px; + border-radius: 2px; } pre code { @@ -365,7 +391,8 @@ a.footnote:hover, font-size: [[font-size]]px; --primary-accent-color: #086AEE; --secondary-accent-color: #086AEE; - --block-quote-border-color: rgba(8, 106, 238, 0.75); + --block-quote-border-color: rgba(0, 0, 0, 0.25); + --ios-hover-color: lightgray; /* placeholder */ } @media(prefers-color-scheme: dark) { @@ -374,6 +401,7 @@ a.footnote:hover, --secondary-accent-color: #5E9EF4; --block-quote-border-color: rgba(94, 158, 244, 0.75); --header-table-border-color: rgba(255, 255, 255, 0.2); + --ios-hover-color: #444444; /* placeholder */ } } @@ -381,17 +409,30 @@ a.footnote:hover, color: var(--secondary-accent-color); } + .externalLink a { + font-size: inherit; + } + + .articleBody a:link, .articleBody a:visited { + text-decoration: none; + border-bottom: 1px solid var(--primary-accent-color); + color: var(--secondary-accent-color); + } + body .header { font: -apple-system-body; font-size: [[font-size]]px; } body .header a:link, body .header a:visited { - color: var(--primary-accent-color); + color: var(--secondary-accent-color); + } + + .articleBody a:hover { + background: var(--ios-hover-color); } pre { - border: 1px solid var(--secondary-accent-color); padding: 5px; } @@ -434,15 +475,19 @@ a.footnote:hover, :root { color-scheme: light dark; - --accent-color: rgba(8, 106, 238, 1); - --block-quote-border-color: rgba(8, 106, 238, .50); + --accent-color: rgba( 8, 106, 238, 1); + --block-quote-border-color: rgba( 0, 0, 0, 0.25); + --hover-gradient-color-start: rgba(60, 146, 251, 1); + --hover-gradient-color-end: rgba(67, 149, 251, 1); } @media(prefers-color-scheme: dark) { :root { - --accent-color: rgba(94, 158, 244, 1); - --block-quote-border-color: rgba(94, 158, 244, .50); + --accent-color: rgba( 94, 158, 244, 1); + --block-quote-border-color: rgba( 94, 158, 244, 0.50); --header-table-border-color: rgba(255, 255, 255, 0.1); + --hover-gradient-color-start: rgba( 41, 121, 213, 1); + --hover-gradient-color-end: rgba( 42, 120, 212, 1); } } @@ -450,13 +495,22 @@ a.footnote:hover, color: var(--accent-color); } + .articleBody a:link, .articleBody a:visited { + border-bottom: 1px solid var(--accent-color); + } + .articleBody a:hover { + border-radius: 2px; + background: linear-gradient(0deg, var(--hover-gradient-color-start) 0%, var(--hover-gradient-color-end) 100%); + border-bottom: 1px solid var(--hover-gradient-color-end); + color: white; + text-decoration: none; + } + pre { - border: 1px solid var(--accent-color); padding: 10px; } .nnw-overflow table { border: 1px solid var(--accent-color); } - }