Mercurial > addons > firefox-addons > feed-preview

changeset 8:c271192aac9d

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Improve visual appearance Make use of the built-in browser extension stylesheet. Use semantic CSS variables.
author Guido Berhoerster <guido+feed-preview@berhoerster.name>
date Tue, 27 Nov 2018 11:11:15 +0100
parents 2bbb7617dd13
children fcd65cf3f634
files Makefile manifest.json.in web_resources/images/feed.svg web_resources/style/common.css web_resources/style/entry-content.css web_resources/style/feed-preview.css
diffstat 6 files changed, 141 insertions(+), 48 deletions(-) [+]
line wrap: on
line diff
--- 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
 
--- 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": {
--- /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 @@
+<!--
+Copyright (C) 2018 Guido Berhoerster <guido+feed-preview@berhoerster.name>
+
+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/.
+-->
+<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <g opacity=".04">
+    <circle cx="4" cy="12" r="2" fill="#000"/>
+    <g fill="none" stroke="#000" stroke-width="2" stroke-linecap="round">
+      <path d="m3 7c4 0 6 2 6 6"/>
+      <path d="m3 3c6 0 10 4 10 10"/>
+    </g>
+  </g>
+</svg>
--- 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 <guido+feed-preview@berhoerster.name>
+ *
+ * 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);
-}
--- 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 <guido+feed-preview@berhoerster.name>
+ *
+ * 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;
 }
--- 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 <guido+feed-preview@berhoerster.name>
+ *
+ * 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);
 }