From 183d703fd3f8c885ae04f64cc27fd34d77bdeae6 Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Fri, 17 Apr 2020 07:06:55 -0500 Subject: [PATCH 1/2] Use classList instead of string manipulation --- Shared/Article Rendering/main.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/Shared/Article Rendering/main.js b/Shared/Article Rendering/main.js index 6104a5a5a..25c96d1b0 100644 --- a/Shared/Article Rendering/main.js +++ b/Shared/Article Rendering/main.js @@ -117,12 +117,7 @@ function isLocalFootnote(target) { function styleLocalFootnotes() { for (elem of document.querySelectorAll("sup > a[href*='#fn'], sup > div > a[href*='#fn']")) { if (isLocalFootnote(elem)) { - if (elem.className.indexOf("footnote") === -1) { - if (elem.className.length === 0) - elem.className = "footnote"; - else - elem.className = elem.className + " " + "footnote"; - } + elem.classList.add("footnote"); } } } From 2a6d9994eaef485c29d5ffbe03654adb64d5cc46 Mon Sep 17 00:00:00 2001 From: Nate Weaver Date: Sun, 19 Apr 2020 18:38:33 -0500 Subject: [PATCH 2/2] Move shared CSS into its own file --- Mac/MainWindow/Detail/styleSheet.css | 356 --------------------- NetNewsWire.xcodeproj/project.pbxproj | 26 +- Shared/Article Rendering/shared.css | 390 ++++++++++++++++++++++++ Shared/ArticleStyles/ArticleStyle.swift | 12 +- iOS/Resources/styleSheet.css | 383 +---------------------- 5 files changed, 427 insertions(+), 740 deletions(-) create mode 100644 Shared/Article Rendering/shared.css diff --git a/Mac/MainWindow/Detail/styleSheet.css b/Mac/MainWindow/Detail/styleSheet.css index ea9723bb9..6afb59b67 100644 --- a/Mac/MainWindow/Detail/styleSheet.css +++ b/Mac/MainWindow/Detail/styleSheet.css @@ -1,35 +1,10 @@ body { margin-top: 20px; margin-bottom: 64px; - margin-left: auto; - margin-right: auto; padding-left: 32px; padding-right: 32px; font-family: -apple-system; font-size: 18px; - word-wrap: break-word; /* break long words or URLs */ - max-width: 44em; -} - -a { - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -.feedlink { - font-weight: bold; -} -.headerTable { - width: 100%; - height: 68px; -} - -.systemMessage { - position: absolute; - top: 45%; - left: 50%; - transform: translateX(-55%) translateY(-50%); } :root { @@ -37,13 +12,6 @@ a:hover { --body-background-color: -apple-system-text-background; --accent-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .75); --block-quote-border-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .50); - --header-table-border-color: rgba(0, 0, 0, 0.1); - --header-color: rgba(0, 0, 0, 0.3); - --body-code-color: #666; - --system-message-color: #cbcbcb; - --feedlink-color: rgba(0, 0, 0, 0.6); - --article-title-color: #333; - --table-cell-border-color: lightgray; } @media(prefers-color-scheme: dark) { @@ -53,349 +21,25 @@ a:hover { --accent-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .75); --block-quote-border-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .50); --header-table-border-color: rgba(255, 255, 255, 0.1); - --header-color: #d2d2d2; - --body-code-color: #b2b2b2; - --system-message-color: #5f5f5f; - --article-title-color: #e0e0e0; - --table-cell-border-color: dimgray; } } -body { - color: var(--body-color); - background-color: var(--body-background-color); -} - body a, body a:link, body a:visited { color: var(--accent-color); } -body .headerTable { - border-bottom: 1px solid var(--header-table-border-color); -} -body .header { - color: var(--header-color); -} body .header a:link, body .header a:visited { color: var(--accent-color); } -body .articleDateline, body .articleDateLine.a:link, body .articleDateline a:visited { - color: var(--header-color); -} -body code, body pre { - color: var(--body-code-color); -} - -body > .systemMessage { - color: var(--system-message-color); -} - -.feedlink a:link, .feedlink a:visited { - color: var(--feed-link-color); -} -.avatar img { - border-radius: 4px; -} -.feedIcon { - border-radius: 4px; -} -.rightAlign { - text-align: right; -} -.leftAlign { - text-align: left; -} - -.articleTitle a:link, .articleTitle a:visited { - color: var(--article-title-color); - margin-top: 26px; -} - -.articleDateline { - margin-bottom: 25px; - font-weight: bold; -} - -.articleBody { - line-height: 1.6em; -} -h1 { - line-height: 1.15em; - font-weight: bold; -} pre { - max-width: 100%; - margin: 0; - overflow: auto; - overflow-y: hidden; line-height: 20px; border: 1px solid var(--accent-color); - word-wrap: normal; - word-break: normal; padding: 10px; } code, pre { - font-family: "SF Mono", Menlo, "Courier New", Courier, monospace; font-size: 14px; - -webkit-hyphens: none; } -.nnw-overflow { - overflow-x: auto; -} -/* - Instead of the last-child bits, border-collapse: collapse - could have been used. However, then the inter-cell borders - overlap the table border, which looks bad. - */ .nnw-overflow table { - margin-bottom: 1px; - border-spacing: 0; border: 1px solid var(--accent-color); - font-size: inherit; -} -.nnw-overflow table table { - margin-bottom: 0; - border: none; -} -.nnw-overflow td, .nnw-overflow th { - -webkit-hyphens: none; - word-break: normal; - border: 1px solid var(--table-cell-border-color); - border-top: none; - border-left: none; - padding: 5px; -} -.nnw-overflow tr td:last-child, .nnw-overflow tr th:last-child { - border-right: none; -} -.nnw-overflow tr:last-child td, .nnw-overflow tr:last-child th { - border-bottom: none; -} -.nnw-overflow td pre { - border: none; - padding: 0; -} - -img, figure, iframe, div { - max-width: 100%; - height: auto !important; - margin: 0 auto; -} - -figure { - margin-bottom: 1em; - margin-top: 1em; -} - -video { - width: 100% !important; - height: auto !important; - margin: 0 auto; -} - -figcaption { - font-size: 14px; - line-height: 1.3em; -} - -sup { - vertical-align: top; - position: relative; - bottom: 0.2rem; -} - -sub { - vertical-align: bottom; - position: relative; - top: 0.2rem; -} - -.iframeWrap { - position: relative; - display: block; - padding-top: 56.25%; -} - -.iframeWrap iframe { - position: absolute; - top: 0; - left: 0; - height: 100% !important; - width: 100% !important; -} - -blockquote { - margin-inline-start: 0; - margin-inline-end: 0; - padding-left: 15px; - border-left: 3px solid var(--block-quote-border-color); -} - -/* Feed Specific */ - -.feedbin--article-wrap { - border-top: 1px solid var(--header-table-border-color); -} - -.wp-smiley { - height: 1em; - max-height: 1em; -} - -/*Block ads and junk*/ - -iframe[src*="feedads"], -iframe[src*="doubleclick"], -iframe[src*="plusone.google"] { - display: none !important; -} - -a[href*=".ads."], -a[href*="feedads"], -a[href*="doubleclick"], -a[href*="//ads."], -a[href*="api.tweetmeme"], -a[href*="delicious.com/post?"], -a[href*="digg.com/submit?"], -a[href*="google.com/bookmarks/mark?"], -a[href*="posterous.com/share?"], -a[href*="tumblr.com/share?"], -a[href*="linkedin.com/shareArticle?"], -a[href*="facebook.com/share.php?"], -a[href*="http://twitter.com/home?"], -a[href*="addtoany.com/share_save"] { - display: none !important; -} - -img[src*=".ads."], -img[src*="//ads."], -img[src*="doubleclick"], -img[src*="feedads"], -img[src*="feedburner"], -img[src*="feedblitz"], -img[src*="share-buttons"] { - display: none !important; -} - -/* Newsfoot specific styles. Structural styles come first, theme styles second */ -.newsfoot-footnote-container { - position: relative; - display: inline-block; - z-index: 9999; -} -.newsfoot-footnote-popover { - position: absolute; - display: block; - padding: 0em 1em; - margin: 1em; - left: -11em; - right: -11em; - top: 0.75em; - max-width: none; - border-radius: 0.3em; - box-sizing: border-box; -} -.newsfoot-footnote-popover-arrow { - content: ''; - display: block; - width: 1em; - position: absolute; - top: -0.5em; - left: calc(50% - 0.5em); - height: 1em !important; - transform: rotate(45deg); - z-index:0; -} -.newsfoot-footnote-popover-inner { - border-radius: calc(0.3em - 1px); - padding: 1em; - position: relative; - z-index: 1; -} - -.newsfoot-footnote-popover-inner :first-child { - margin-top: 0; -} -.newsfoot-footnote-popover-inner :last-child { - margin-bottom: 0; -} - -.newsfoot-footnote-popover .reversefootnote, -.newsfoot-footnote-popover .footnoteBackLink, -.newsfoot-footnote-popover .footnote-return { - display: none; -} - -sup[id^='fn'] { - vertical-align: baseline; -} - -a.footnote { - display: inline-block; - text-decoration: none; - padding: 0.05em 0.75em; - border-radius: 1em; - min-width: 1em; - text-align: center; - font-size: 0.8em; - line-height: 1em; - position:relative; - top: -0.1em; -} - -/* light / default */ -.newsfoot-footnote-popover { - background: #ccc; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.25); - color: black; - padding: 1px; -} -.newsfoot-footnote-popover-arrow { - background: #fafafa; - border: 1px solid #ccc; -} -.newsfoot-footnote-popover-inner { - background: #fafafa; -} -body a.footnote, -body a.footnote:visited, -.newsfoot-footnote-popover + a.footnote:hover { - background: #aaa; - color: white; - transition: background-color 200ms ease-out; -} -a.footnote:hover, -.newsfoot-footnote-popover + a.footnote { - background: #666; - transition: background-color 200ms ease-out; -} - - -/* dark */ -@media screen and (prefers-color-scheme: dark) { - .newsfoot-footnote-popover { - background: #444; - color: rgb(224, 224, 224); - } - .newsfoot-footnote-popover-arrow { - background: #242424; - border: 1px solid #444; - } - .newsfoot-footnote-popover-inner { - background: #242424; - } - body a.footnote, - body a.footnote:visited, - .newsfoot-footnote-popover + a.footnote:hover { - background: #aaa; - color: white; - transition: background-color 200ms ease-out; - } - a.footnote:hover, - .newsfoot-footnote-popover + a.footnote { - background: #666; - transition: background-color 200ms ease-out; - } - } diff --git a/NetNewsWire.xcodeproj/project.pbxproj b/NetNewsWire.xcodeproj/project.pbxproj index 1ffab33cd..271a8efdc 100644 --- a/NetNewsWire.xcodeproj/project.pbxproj +++ b/NetNewsWire.xcodeproj/project.pbxproj @@ -665,6 +665,9 @@ 84F9EAF4213660A100CF2DE4 /* testGenericScript.applescript in Sources */ = {isa = PBXBuildFile; fileRef = 84F9EAE1213660A100CF2DE4 /* testGenericScript.applescript */; }; 84F9EAF5213660A100CF2DE4 /* establishMainWindowStartingState.applescript in Sources */ = {isa = PBXBuildFile; fileRef = 84F9EAE2213660A100CF2DE4 /* establishMainWindowStartingState.applescript */; }; 84FF69B11FC3793300DC198E /* FaviconURLFinder.swift in Sources */ = {isa = PBXBuildFile; fileRef = 84FF69B01FC3793300DC198E /* FaviconURLFinder.swift */; }; + B27EEBF9244D15F3000932E6 /* shared.css in Resources */ = {isa = PBXBuildFile; fileRef = B27EEBDF244D15F2000932E6 /* shared.css */; }; + B27EEBFA244D15F3000932E6 /* shared.css in Resources */ = {isa = PBXBuildFile; fileRef = B27EEBDF244D15F2000932E6 /* shared.css */; }; + B27EEBFB244D15F3000932E6 /* shared.css in Resources */ = {isa = PBXBuildFile; fileRef = B27EEBDF244D15F2000932E6 /* shared.css */; }; B2B8075E239C49D300F191E0 /* RSImage-AppIcons.swift in Sources */ = {isa = PBXBuildFile; fileRef = B2B8075D239C49D300F191E0 /* RSImage-AppIcons.swift */; }; B2B80778239C4C7000F191E0 /* RSImage-AppIcons.swift in Sources */ = {isa = PBXBuildFile; fileRef = B2B8075D239C49D300F191E0 /* RSImage-AppIcons.swift */; }; B2B80779239C4C7300F191E0 /* RSImage-AppIcons.swift in Sources */ = {isa = PBXBuildFile; fileRef = B2B8075D239C49D300F191E0 /* RSImage-AppIcons.swift */; }; @@ -1633,6 +1636,7 @@ 84FF69B01FC3793300DC198E /* FaviconURLFinder.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FaviconURLFinder.swift; sourceTree = ""; }; B24EFD482330FF99006C6242 /* NetNewsWire-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "NetNewsWire-Bridging-Header.h"; sourceTree = ""; }; B24EFD5923310109006C6242 /* WKPreferencesPrivate.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = WKPreferencesPrivate.h; sourceTree = ""; }; + B27EEBDF244D15F2000932E6 /* shared.css */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.css; path = shared.css; sourceTree = ""; }; B2B8075D239C49D300F191E0 /* RSImage-AppIcons.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "RSImage-AppIcons.swift"; sourceTree = ""; }; B528F81D23333C7E00E735DD /* page.html */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.html; path = page.html; sourceTree = ""; }; BDCB514D24282C8A00102A80 /* AccountsNewsBlur.xib */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.xib; path = AccountsNewsBlur.xib; sourceTree = ""; }; @@ -2082,6 +2086,7 @@ 517630032336215100E15FFF /* main.js */, 49F40DEF2335B71000552BF4 /* newsfoot.js */, 848362FE2262A30E00DA1D35 /* template.html */, + B27EEBDF244D15F2000932E6 /* shared.css */, ); path = "Article Rendering"; sourceTree = ""; @@ -3068,36 +3073,36 @@ TargetAttributes = { 51314636235A7BBE00387FDC = { CreatedOnToolsVersion = 11.2; - DevelopmentTeam = SHJK2V3AJG; + DevelopmentTeam = M72QZ9W58G; LastSwiftMigration = 1120; ProvisioningStyle = Automatic; }; 513C5CE5232571C2003D4054 = { CreatedOnToolsVersion = 11.0; - DevelopmentTeam = SHJK2V3AJG; + DevelopmentTeam = M72QZ9W58G; ProvisioningStyle = Automatic; }; 518B2ED12351B3DD00400001 = { CreatedOnToolsVersion = 11.2; - DevelopmentTeam = SHJK2V3AJG; + DevelopmentTeam = M72QZ9W58G; ProvisioningStyle = Automatic; TestTargetID = 840D617B2029031C009BC708; }; 6581C73220CED60000F4AD34 = { - DevelopmentTeam = SHJK2V3AJG; + DevelopmentTeam = M72QZ9W58G; ProvisioningStyle = Automatic; }; 65ED3FA2235DEF6C0081F399 = { - DevelopmentTeam = SHJK2V3AJG; + DevelopmentTeam = M72QZ9W58G; ProvisioningStyle = Automatic; }; 65ED4090235DEF770081F399 = { - DevelopmentTeam = SHJK2V3AJG; + DevelopmentTeam = M72QZ9W58G; ProvisioningStyle = Automatic; }; 840D617B2029031C009BC708 = { CreatedOnToolsVersion = 9.3; - DevelopmentTeam = SHJK2V3AJG; + DevelopmentTeam = M72QZ9W58G; ProvisioningStyle = Automatic; SystemCapabilities = { com.apple.BackgroundModes = { @@ -3107,7 +3112,7 @@ }; 849C645F1ED37A5D003D8FC0 = { CreatedOnToolsVersion = 8.2.1; - DevelopmentTeam = SHJK2V3AJG; + DevelopmentTeam = M72QZ9W58G; ProvisioningStyle = Automatic; SystemCapabilities = { com.apple.HardenedRuntime = { @@ -3117,7 +3122,7 @@ }; 849C64701ED37A5D003D8FC0 = { CreatedOnToolsVersion = 8.2.1; - DevelopmentTeam = SHJK2V3AJG; + DevelopmentTeam = M72QZ9W58G; ProvisioningStyle = Automatic; TestTargetID = 849C645F1ED37A5D003D8FC0; }; @@ -3524,6 +3529,7 @@ 65ED406C235DEF6C0081F399 /* Credits.rtf in Resources */, 65ED406D235DEF6C0081F399 /* Inspector.storyboard in Resources */, 65ED406E235DEF6C0081F399 /* AddFeedSheet.xib in Resources */, + B27EEBFA244D15F3000932E6 /* shared.css in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -3561,6 +3567,7 @@ 51C452AB22650DC600C03939 /* template.html in Resources */, 51F85BF12272524100C787DC /* Credits.rtf in Resources */, 84A3EE61223B667F00557320 /* DefaultFeeds.opml in Resources */, + B27EEBFB244D15F3000932E6 /* shared.css in Resources */, 511D43CF231FA62200FB1562 /* DetailKeyboardShortcuts.plist in Resources */, 51A1699A235E10D700EB091F /* Settings.storyboard in Resources */, 49F40DF92335B71000552BF4 /* newsfoot.js in Resources */, @@ -3591,6 +3598,7 @@ 5144EA362279FC3D00D19003 /* AccountsAddLocal.xib in Resources */, 5142194B2353C1CF00E07E2C /* main_mac.js in Resources */, 84C9FC8C22629E8F00D921D6 /* KeyboardShortcuts.html in Resources */, + B27EEBF9244D15F3000932E6 /* shared.css in Resources */, 5144EA3B227A379E00D19003 /* ImportOPMLSheet.xib in Resources */, 844B5B691FEA20DF00C7C76A /* SidebarKeyboardShortcuts.plist in Resources */, 5103A9F4242258C600410853 /* AccountsAddCloudKit.xib in Resources */, diff --git a/Shared/Article Rendering/shared.css b/Shared/Article Rendering/shared.css new file mode 100644 index 000000000..f44c0a4c4 --- /dev/null +++ b/Shared/Article Rendering/shared.css @@ -0,0 +1,390 @@ +body { + margin-left: auto; + margin-right: auto; + + word-wrap: break-word; + max-width: 44em; +} + +a { + text-decoration: none; +} +a:hover { + text-decoration: underline; +} +.feedlink { + font-weight: bold; +} +.headerTable { + width: 100%; + height: 68px; +} + +.systemMessage { + position: absolute; + top: 45%; + left: 50%; + transform: translateX(-55%) translateY(-50%); +} + +:root { + --header-table-border-color: rgba(0, 0, 0, 0.1); + --header-color: rgba(0, 0, 0, 0.3); + --body-code-color: #666; + --system-message-color: #cbcbcb; + --feedlink-color: rgba(0, 0, 0, 0.6); + --article-title-color: #333; + --table-cell-border-color: lightgray; +} + +@media(prefers-color-scheme: dark) { + :root { + --header-color: #d2d2d2; + --body-code-color: #b2b2b2; + --system-message-color: #5f5f5f; + --article-title-color: #e0e0e0; + --table-cell-border-color: dimgray; + } +} + +body { + color: var(--body-color); + background-color: var(--body-background-color); +} + +body .headerTable { + border-bottom: 1px solid var(--header-table-border-color); +} +body .header { + color: var(--header-color); +} + +body .articleDateline, body .articleDateLine.a:link, body .articleDateline a:visited { + color: var(--header-color); +} + +body code, body pre { + color: var(--body-code-color); +} + +body > .systemMessage { + color: var(--system-message-color); +} + +.feedlink a:link, .feedlink a:visited { + color: var(--feed-link-color); +} + +.avatar img { + border-radius: 4px; +} + +.feedIcon { + border-radius: 4px; +} +.rightAlign { + text-align: right; +} +.leftAlign { + text-align: left; +} + +.articleTitle a:link, .articleTitle a:visited { + color: var(--article-title-color); + margin-top: 26px; +} + +.articleDateline { + margin-bottom: 25px; + font-weight: bold; +} + +.articleDateline a:link, .articleDateline a:visited { + color: var(--article-title-color); +} + +.articleBody { + line-height: 1.6em; +} +h1 { + line-height: 1.15em; + font-weight: bold; +} + +pre { + max-width: 100%; + margin: 0; + overflow: auto; + overflow-y: hidden; + + word-wrap: normal; + word-break: normal; +} + +code, pre { + font-family: "SF Mono", Menlo, "Courier New", Courier, monospace; + font-size: .8235rem; + -webkit-hyphens: none; +} + +.nnw-overflow { + overflow-x: auto; +} +/* + Instead of the last-child bits, border-collapse: collapse + could have been used. However, then the inter-cell borders + overlap the table border, which looks bad. + */ +.nnw-overflow table { + margin-bottom: 1px; + border-spacing: 0; + border: 1px solid var(--secondary-accent-color); + font-size: inherit; +} +.nnw-overflow table table { + margin-bottom: 0; + border: none; +} +.nnw-overflow td, .nnw-overflow th { + -webkit-hyphens: none; + word-break: normal; + border: 1px solid var(--table-cell-border-color); + border-top: none; + border-left: none; + padding: 5px; +} +.nnw-overflow tr td:last-child, .nnw-overflow tr th:last-child { + border-right: none; +} +.nnw-overflow tr:last-child td, .nnw-overflow tr:last-child th { + border-bottom: none; +} +.nnw-overflow td pre { + border: none; + padding: 0; +} + +img, figure, iframe, div { + max-width: 100%; + height: auto !important; + margin: 0 auto; +} + +figure { + margin-bottom: 1em; + margin-top: 1em; +} + +video { + width: 100% !important; + height: auto !important; + margin: 0 auto; +} + +figcaption { + font-size: 14px; + line-height: 1.3em; +} + +sup { + vertical-align: top; + position: relative; + bottom: 0.2rem; +} + +sub { + vertical-align: bottom; + position: relative; + top: 0.2rem; +} + +.iframeWrap { + position: relative; + display: block; + padding-top: 56.25%; +} + +.iframeWrap iframe { + position: absolute; + top: 0; + left: 0; + height: 100% !important; + width: 100% !important; +} + +blockquote { + margin-inline-start: 0; + margin-inline-end: 0; + padding-left: 15px; + border-left: 3px solid var(--block-quote-border-color); +} + +/* Feed Specific */ + +.feedbin--article-wrap { + border-top: 1px solid var(--header-table-border-color); +} + +.wp-smiley { + height: 1em; + max-height: 1em; +} + +/*Block ads and junk*/ + +iframe[src*="feedads"], +iframe[src*="doubleclick"], +iframe[src*="plusone.google"] { + display: none !important; +} + +a[href*=".ads."], +a[href*="feedads"], +a[href*="doubleclick"], +a[href*="//ads."], +a[href*="api.tweetmeme"], +a[href*="delicious.com/post?"], +a[href*="digg.com/submit?"], +a[href*="google.com/bookmarks/mark?"], +a[href*="posterous.com/share?"], +a[href*="tumblr.com/share?"], +a[href*="linkedin.com/shareArticle?"], +a[href*="facebook.com/share.php?"], +a[href*="http://twitter.com/home?"], +a[href*="addtoany.com/share_save"] { + display: none !important; +} + +img[src*=".ads."], +img[src*="//ads."], +img[src*="doubleclick"], +img[src*="feedads"], +img[src*="feedburner"], +img[src*="feedblitz"], +img[src*="share-buttons"] { + display: none !important; +} + +/* Newsfoot specific styles. Structural styles come first, theme styles second */ +.newsfoot-footnote-container { + position: relative; + display: inline-block; + z-index: 9999; +} + +.newsfoot-footnote-popover { + position: absolute; + display: block; + padding: 0em 1em; + margin: 1em; + top: 0.75em; + max-width: none; + border-radius: 0.3em; + box-sizing: border-box; +} + +.newsfoot-footnote-popover { + left: calc(-1 * (50vw - 1em)); + right: calc(-1 * (50vw - 1em)); +} +.newsfoot-footnote-popover-arrow { + content: ''; + display: block; + width: 1em; + position: absolute; + top: -0.5em; + left: calc(50% - 0.5em); + height: 1em !important; + transform: rotate(45deg); + z-index:0; +} +.newsfoot-footnote-popover-inner { + border-radius: calc(0.3em - 1px); + padding: 1em; + position: relative; + z-index: 1; +} + +.newsfoot-footnote-popover-inner :first-child { + margin-top: 0; +} +.newsfoot-footnote-popover-inner :last-child { + margin-bottom: 0; +} + +.newsfoot-footnote-popover .reversefootnote, +.newsfoot-footnote-popover .footnoteBackLink, +.newsfoot-footnote-popover .footnote-return { + display: none; +} + +sup[id^='fn'] { + vertical-align: baseline; +} + +a.footnote { + display: inline-block; + text-decoration: none; + padding: 0.05em 0.75em; + border-radius: 1em; + min-width: 1em; + text-align: center; + font-size: 0.8em; + line-height: 1em; + position:relative; + top: -0.1em; +} + +/* light / default */ +.newsfoot-footnote-popover { + background: #ccc; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.25); + color: black; + padding: 1px; +} +.newsfoot-footnote-popover-arrow { + background: #fafafa; + border: 1px solid #ccc; +} +.newsfoot-footnote-popover-inner { + background: #fafafa; +} +body a.footnote, +body a.footnote:visited, +.newsfoot-footnote-popover + a.footnote:hover { + background: #aaa; + color: white; + transition: background-color 200ms ease-out; +} +a.footnote:hover, +.newsfoot-footnote-popover + a.footnote { + background: #666; + transition: background-color 200ms ease-out; +} + +/* dark */ +@media screen and (prefers-color-scheme: dark) { + .newsfoot-footnote-popover { + background: #444; + color: rgb(224, 224, 224); + } + .newsfoot-footnote-popover-arrow { + background: #242424; + border: 1px solid #444; + } + .newsfoot-footnote-popover-inner { + background: #242424; + } + body a.footnote, + body a.footnote:visited, + .newsfoot-footnote-popover + a.footnote:hover { + background: #aaa; + color: white; + transition: background-color 200ms ease-out; + } + a.footnote:hover, + .newsfoot-footnote-popover + a.footnote { + background: #666; + transition: background-color 200ms ease-out; + } +} diff --git a/Shared/ArticleStyles/ArticleStyle.swift b/Shared/ArticleStyles/ArticleStyle.swift index 868745c9b..01f5d86fb 100644 --- a/Shared/ArticleStyles/ArticleStyle.swift +++ b/Shared/ArticleStyles/ArticleStyle.swift @@ -24,10 +24,16 @@ struct ArticleStyle: Equatable { self.path = nil; self.emptyCSS = nil - self.info = ["CreatorHomePage": "http://ranchero.com/", "CreatorName": "Ranchero Software, LLC", "Version": "1.0"] + self.info = ["CreatorHomePage": "https://ranchero.com/", "CreatorName": "Ranchero Software, LLC", "Version": "1.0"] - let cssPath = Bundle.main.path(forResource: "styleSheet", ofType: "css")! - css = stringAtPath(cssPath) + let sharedCSSPath = Bundle.main.path(forResource: "shared", ofType: "css")! + let platformCSSPath = Bundle.main.path(forResource: "styleSheet", ofType: "css")! + + if let sharedCSS = stringAtPath(sharedCSSPath), let platformCSS = stringAtPath(platformCSSPath) { + css = sharedCSS + "\n" + platformCSS + } else { + css = nil + } let templatePath = Bundle.main.path(forResource: "template", ofType: "html")! template = stringAtPath(templatePath) diff --git a/iOS/Resources/styleSheet.css b/iOS/Resources/styleSheet.css index 5f403c4de..ff1d160f6 100644 --- a/iOS/Resources/styleSheet.css +++ b/iOS/Resources/styleSheet.css @@ -1,58 +1,21 @@ +body { + margin-top: 3px; + margin-bottom: 20px; + padding-left: 20px; + padding-right: 20px; + + word-break: break-word; + -webkit-hyphens: auto; + -webkit-text-size-adjust: none; +} + :root { color-scheme: light dark; font: -apple-system-body; font-size: [[font-size]]px; -} - -body { - margin-top: 3px; - margin-bottom: 20px; - margin-left: auto; - margin-right: auto; - padding-left: 20px; - padding-right: 20px; - - word-wrap: break-word; - word-break: break-word; - -webkit-hyphens: auto; - -webkit-text-size-adjust: none; - - max-width: 44em; -} - -a { - text-decoration: none; -} -a:hover { - text-decoration: underline; -} -.feedlink { - font-weight: bold; -} -.headerTable { - width: 100%; - height: 68px; -} - -.systemMessage { - position: absolute; - top: 45%; - left: 50%; - transform: translateX(-55%) translateY(-50%); -} - -:root { - color-scheme: light dark; --primary-accent-color: #086AEE; --secondary-accent-color: #086AEE; --block-quote-border-color: rgba(8, 106, 238, 0.75); - --header-table-border-color: rgba(0, 0, 0, 0.1); - --header-color: rgba(0, 0, 0, 0.3); - --body-code-color: #666; - --system-message-color: #cbcbcb; - --feedlink-color: rgba(0, 0, 0, 0.6); - --article-title-color: #333; - --table-cell-border-color: lightgray; } @media(prefers-color-scheme: dark) { @@ -61,175 +24,35 @@ a: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); - --header-color: #d2d2d2; - --body-code-color: #b2b2b2; - --system-message-color: #5f5f5f; - --article-title-color: #e0e0e0; - --table-cell-border-color: dimgray; } } -body { - color: var(--body-color); - background-color: var(--body-background-color); -} - body a, body a:link, body a:visited { color: var(--secondary-accent-color); } -body .headerTable { - border-bottom: 1px solid var(--header-table-border-color); -} body .header { font: -apple-system-body; font-size: [[font-size]]px; - color: var(--header-color); } body .header a:link, body .header a:visited { color: var(--primary-accent-color); } -body .articleDateline, body .articleDateLine.a:link, body .articleDateline a:visited { - color: var(--header-color); -} -body code, body pre { - color: var(--body-code-color); -} - -body > .systemMessage { - color: var(--system-message-color); -} - -.feedlink a:link, .feedlink a:visited { - color: var(--feed-link-color); -} .avatar img { border-radius: 4px; - max-width: none; -} -.feedIcon { - border-radius: 4px; -} -.rightAlign { - text-align: right; -} -.leftAlign { - text-align: left; } -.articleTitle a:link, .articleTitle a:visited { - color: var(--article-title-color); - margin-top: 26px; -} - -.articleDateline { - margin-bottom: 25px; - font-weight: bold; -} - -.articleDateline a:link, .articleDateline a:visited { - color: var(--article-title-color); -} - -.articleBody { - line-height: 1.6em; -} -h1 { - line-height: 1.15em; - font-weight: bold; -} pre { - max-width: 100%; - margin: 0; - overflow: auto; - overflow-y: hidden; line-height: 1.4286em; border: 1px solid var(--secondary-accent-color); padding: 5px; - word-wrap: normal; - word-break: normal; } code, pre { - font-family: "SF Mono", Menlo, "Courier New", Courier, monospace; font-size: .8235rem; - -webkit-hyphens: none; } -.nnw-overflow { - overflow-x: auto; -} -/* - Instead of the last-child bits, border-collapse: collapse - could have been used. However, then the inter-cell borders - overlap the table border, which looks bad. - */ .nnw-overflow table { - margin-bottom: 1px; - border-spacing: 0; border: 1px solid var(--secondary-accent-color); - font-size: inherit; -} -.nnw-overflow table table { - margin-bottom: 0; - border: none; -} -.nnw-overflow td, .nnw-overflow th { - -webkit-hyphens: none; - word-break: normal; - border: 1px solid var(--table-cell-border-color); - border-top: none; - border-left: none; - padding: 5px; -} -.nnw-overflow tr td:last-child, .nnw-overflow tr th:last-child { - border-right: none; -} -.nnw-overflow tr:last-child td, .nnw-overflow tr:last-child th { - border-bottom: none; -} -.nnw-overflow td pre { - border: none; - padding: 0; -} - -img, figure, iframe, div { - max-width: 100%; - height: auto !important; - margin: 0 auto; -} - -figure { - margin-bottom: 1em; - margin-top: 1em; -} - -video { - width: 100% !important; - height: auto !important; - margin: 0 auto; -} - -figcaption { - font-size: 14px; - line-height: 1.3em; -} - -sup { - vertical-align: top; - position: relative; - bottom: 0.2rem; -} - -sub { - vertical-align: bottom; - position: relative; - top: 0.2rem; -} - -.iframeWrap { - position: relative; - display: block; - padding-top: 56.25%; } .activityIndicatorWrap { @@ -245,187 +68,3 @@ sub { left: 50%; transform: translate(-50%, -50%); } - -.iframeWrap iframe { - position: absolute; - top: 0; - left: 0; - height: 100% !important; - width: 100% !important; -} - -blockquote { - margin-inline-start: 0; - margin-inline-end: 0; - padding-left: 15px; - border-left: 3px solid var(--block-quote-border-color); -} - -/* Feed Specific */ - -.feedbin--article-wrap { - border-top: 1px solid var(--header-table-border-color); -} - -.wp-smiley { - height: 1em; - max-height: 1em; -} - -/*Block ads and junk*/ - -iframe[src*="feedads"], -iframe[src*="doubleclick"], -iframe[src*="plusone.google"] { - display: none !important; -} - -a[href*=".ads."], -a[href*="feedads"], -a[href*="doubleclick"], -a[href*="//ads."], -a[href*="api.tweetmeme"], -a[href*="delicious.com/post?"], -a[href*="digg.com/submit?"], -a[href*="google.com/bookmarks/mark?"], -a[href*="posterous.com/share?"], -a[href*="tumblr.com/share?"], -a[href*="linkedin.com/shareArticle?"], -a[href*="facebook.com/share.php?"], -a[href*="http://twitter.com/home?"], -a[href*="addtoany.com/share_save"] { - display: none !important; -} - -img[src*=".ads."], -img[src*="//ads."], -img[src*="doubleclick"], -img[src*="feedads"], -img[src*="feedburner"], -img[src*="feedblitz"], -img[src*="share-buttons"] { - display: none !important; -} - -/* Newsfoot specific styles. Structural styles come first, theme styles second */ -.newsfoot-footnote-container { - position: relative; - display: inline-block; - z-index: 9999; -} -.newsfoot-footnote-popover { - position: absolute; - display: block; - padding: 0em 1em; - margin: 1em; - left: calc(-1 * (50vw - 1em)); - right: calc(-1 * (50vw - 1em)); - top: 0.75em; - max-width: none; - border-radius: 0.3em; - box-sizing: border-box; -} - -.newsfoot-footnote-popover-arrow { - content: ''; - display: block; - width: 1em; - position: absolute; - top: -0.5em; - left: calc(50% - 0.5em); - height: 1em !important; - transform: rotate(45deg); - z-index:0; -} -.newsfoot-footnote-popover-inner { - border-radius: calc(0.3em - 1px); - padding: 1em; - position: relative; - z-index: 1; -} - -.newsfoot-footnote-popover-inner :first-child { - margin-top: 0; -} -.newsfoot-footnote-popover-inner :last-child { - margin-bottom: 0; -} - -.newsfoot-footnote-popover .reversefootnote, -.newsfoot-footnote-popover .footnoteBackLink, -.newsfoot-footnote-popover .footnote-return { - display: none; -} - -sup[id^='fn'] { - vertical-align: baseline; -} - -a.footnote { - display: inline-block; - text-decoration: none; - padding: 0.05em 0.75em; - border-radius: 1em; - min-width: 1em; - text-align: center; - font-size: 0.8em; - line-height: 1em; - position:relative; - top: -0.1em; -} - -/* light / default */ -.newsfoot-footnote-popover { - background: #ccc; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.25); - color: black; - padding: 1px; -} -.newsfoot-footnote-popover-arrow { - background: #fafafa; - border: 1px solid #ccc; -} -.newsfoot-footnote-popover-inner { - background: #fafafa; -} -body a.footnote, -body a.footnote:visited, -.newsfoot-footnote-popover + a.footnote:hover { - background: #aaa; - color: white; - transition: background-color 200ms ease-out; -} -a.footnote:hover, -.newsfoot-footnote-popover + a.footnote { - background: #666; - transition: background-color 200ms ease-out; -} - - -/* dark */ -@media screen and (prefers-color-scheme: dark) { - .newsfoot-footnote-popover { - background: #444; - color: rgb(224, 224, 224); - } - .newsfoot-footnote-popover-arrow { - background: #242424; - border: 1px solid #444; - } - .newsfoot-footnote-popover-inner { - background: #242424; - } - body a.footnote, - body a.footnote:visited, - .newsfoot-footnote-popover + a.footnote:hover { - background: #aaa; - color: white; - transition: background-color 200ms ease-out; - } - a.footnote:hover, - .newsfoot-footnote-popover + a.footnote { - background: #666; - transition: background-color 200ms ease-out; - } - -}