# HG changeset patch # User Guido Berhoerster # Date 1543313475 -3600 # Node ID c271192aac9d36980df301e8b7adb8575d1c39d2 # Parent 2bbb7617dd13c24e9eab60733caf538e3ef57aea Improve visual appearance Make use of the built-in browser extension stylesheet. Use semantic CSS variables. diff -r 2bbb7617dd13 -r c271192aac9d Makefile --- a/Makefile Tue Nov 27 10:47:26 2018 +0100 +++ b/Makefile Tue Nov 27 11:11:15 2018 +0100 @@ -51,7 +51,8 @@ web_resources/style/entry-content.css \ web_resources/feed-preview.xhtml \ web_resources/xhtml-to-html.xsl \ - web_resources/images/arrow.svg + web_resources/images/arrow.svg \ + web_resources/images/feed.svg .DEFAULT_TARGET = all diff -r 2bbb7617dd13 -r c271192aac9d manifest.json.in --- a/manifest.json.in Tue Nov 27 10:47:26 2018 +0100 +++ b/manifest.json.in Tue Nov 27 11:11:15 2018 +0100 @@ -34,7 +34,7 @@ ], "web_accessible_resources": [ "web_resources/xhtml-to-html.xsl", - "web_resources/images/arrow.svg", + "web_resources/images/*.svg", "web_resources/style/*.css" ], "page_action": { diff -r 2bbb7617dd13 -r c271192aac9d web_resources/images/feed.svg --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/web_resources/images/feed.svg Tue Nov 27 11:11:15 2018 +0100 @@ -0,0 +1,16 @@ + + + + + + + + + + diff -r 2bbb7617dd13 -r c271192aac9d web_resources/style/common.css --- a/web_resources/style/common.css Tue Nov 27 10:47:26 2018 +0100 +++ b/web_resources/style/common.css Tue Nov 27 11:11:15 2018 +0100 @@ -1,48 +1,41 @@ +/* + * Copyright (C) 2018 Guido Berhoerster + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + +@import url("chrome://browser/content/extension.css"); @import url("photon-colors.css"); +:root { + --link-color: var(--blue-50); + --link-hover-color: var(--blue-60); + --link-active-color: var(--blue-70); +} + html, body { - box-sizing: border-box; margin: 0; - font: -moz-desktop; - font-size: 15px; line-height: 1.4em; - color: var(--grey-90); } h1, h2, h3, h4, h5, h6 { line-height: 1.15em; } -:link { - color: var(--blue-50); - text-decoration: none; -} - -:visited { - color: var(--blue-50); +:any-link { + color: var(--link-color); text-decoration: none; } -:link:hover, -:link:active, -:visited:hover, -:visited:active { +:any-link:hover { + color: var(--link-hover-color); text-decoration: underline; } -:link:hover { - color: var(--blue-60); -} - -:link:active { - color: var(--blue-70); +:any-link:active { + color: var(--link-active-color); + text-decoration: underline; } - -:visited:hover { - color: var(--blue-60); -} - -:visited:active { - color: var(--blue-70); -} diff -r 2bbb7617dd13 -r c271192aac9d web_resources/style/entry-content.css --- a/web_resources/style/entry-content.css Tue Nov 27 10:47:26 2018 +0100 +++ b/web_resources/style/entry-content.css Tue Nov 27 11:11:15 2018 +0100 @@ -1,7 +1,14 @@ +/* + * Copyright (C) 2018 Guido Berhoerster + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + @import url("common.css"); html, body { - background: var(--white-100); padding: 4px; } diff -r 2bbb7617dd13 -r c271192aac9d web_resources/style/feed-preview.css --- a/web_resources/style/feed-preview.css Tue Nov 27 10:47:26 2018 +0100 +++ b/web_resources/style/feed-preview.css Tue Nov 27 11:11:15 2018 +0100 @@ -1,13 +1,67 @@ +/* + * Copyright (C) 2018 Guido Berhoerster + * + * This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. + */ + @import url("common.css"); -html, +:root { + --default-background: var(--grey-10); + --entry-background: var(--white-100); + --secondary-color: var(--grey-50); + --entry-content-border: 1px solid var(--grey-90-a10); + --font-family-default: "Segoe UI", "San Fancisco", "Ubuntu", sans-serif; + --font-display-20: 300 36px var(--font-family-default); + --font-title-40: 300 28px var(--font-family-default); + --font-title-30: 300 22px var(--font-family-default); + --font-title-20: 500 17px var(--font-family-default); + --font-title-10: 500 13px var(--font-family-default); + --font-body-20: 400 15px var(--font-family-default); + --font-body-10: 400 13px var(--font-family-default); + --entry-shadow: 0 1px 4px var(--grey-90-a10); + --entry-outline: var(--entry-shadow), 0 0 0 5px var(--grey-30); +} + body { - padding: 16px 32px; - background: var(--grey-10); + padding: 16px; + background-color: var(--default-background); + background-image: none; + background-repeat: no-repeat; + background-origin: padding-box; + background-position: bottom 0 left 0; + background-attachment: fixed; + height: 100%; + font: var(--font-body-20); +} + +@media (width > calc(80ch + 2 * 200px)) and (height > calc(200px * 3)) { + /* minimum background image size is 200px */ + body { + background-image: url('../images/feed.svg'); + background-size: calc((100vw - 80ch) / 2); + } +} + +@media (width > calc(80ch + 2 * 200px)) and (height > calc(200px * 3)) and + (width > calc(80ch + 33vh)) { + /* + * the background image should not be higher than three times the viewport + * height + */ + body { + background-image: url('../images/feed.svg'); + background-size: 33vh 33vh; + } } #feed-header { + width: 100%; max-width: 80ch; + min-width: 40ch; + padding: 16px; margin: 0 auto; } @@ -19,28 +73,46 @@ } #feed-title { - font-size: 1.777em; - margin: 0 0 4px 0; + font: var(--font-title-40); + margin: 0; } #feed-subtitle { - color: var(--grey-50); - margin: 0 0 16px 0; + font: var(--font-body-20); + color: var(--secondary-color); + margin: 6px 0 0 0; } #no-entries-hint { - color: var(--grey-50); + color: var(--secondary-color); + font: var(--font-display-20); } #no-entries-hint, .entry { clear: both; - margin: 16px auto; + margin: 16px auto 0 auto; padding: 16px; +} + +.entry { + overflow: auto; max-width: 80ch; - background: var(--white-100); + background: var(--entry-background); border-radius: 4px; - box-shadow: 0 1px 2px var(--grey-90-a40); + box-shadow: var(--entry-shadow); +} + +#feed-header + article .entry { + margin-top: 16px; +} + +.entry + .entry { + margin-top: 8px; +} + +.entry:hover { + box-shadow: var(--entry-outline); } details.entry > summary { @@ -59,6 +131,7 @@ width: 16px; height: 16px; flex: 0 0 16px; + transition: 100ms; } details.entry[open] > summary { @@ -67,6 +140,7 @@ details.entry[open] > summary::before { transform: rotate(90deg); + transition: 100ms; } .entry-header { @@ -74,32 +148,34 @@ } .entry-title { - font-size: 1.333em; + font: var(--font-title-20); margin: 0 0 4px 0; } .entry-date { - color: var(--grey-50); + color: var(--secondary-color); + font: var(--font-body-10); margin: 0; } .entry-content { width: 100%; height: 24em; - border: 1px solid var(--grey-90-a10); + border: var(--entry-content-border); } .entry-files { + font: var(--font-body-10); + color: var(--secondary-color); padding: 0 8px; } .entry-files-title { - font-size: 1em; + font: var(--font-title-10); margin: 0 0 4px 0; } .entry-files-list { margin: 0; padding: 0 0 0 32px; - color: var(--grey-50); }