addons/firefox-addons/feed-preview

changeset 8:c271192aac9d

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 Nov 27 11:11:15 2018 +0100 (18 months ago)
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
line diff
     1.1 --- a/Makefile	Tue Nov 27 10:47:26 2018 +0100
     1.2 +++ b/Makefile	Tue Nov 27 11:11:15 2018 +0100
     1.3 @@ -51,7 +51,8 @@
     1.4  		web_resources/style/entry-content.css \
     1.5  		web_resources/feed-preview.xhtml \
     1.6  		web_resources/xhtml-to-html.xsl \
     1.7 -		web_resources/images/arrow.svg
     1.8 +		web_resources/images/arrow.svg \
     1.9 +		web_resources/images/feed.svg
    1.10  
    1.11  .DEFAULT_TARGET = all
    1.12  
     2.1 --- a/manifest.json.in	Tue Nov 27 10:47:26 2018 +0100
     2.2 +++ b/manifest.json.in	Tue Nov 27 11:11:15 2018 +0100
     2.3 @@ -34,7 +34,7 @@
     2.4      ],
     2.5      "web_accessible_resources": [
     2.6          "web_resources/xhtml-to-html.xsl",
     2.7 -        "web_resources/images/arrow.svg",
     2.8 +        "web_resources/images/*.svg",
     2.9          "web_resources/style/*.css"
    2.10      ],
    2.11      "page_action": {
     3.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     3.2 +++ b/web_resources/images/feed.svg	Tue Nov 27 11:11:15 2018 +0100
     3.3 @@ -0,0 +1,16 @@
     3.4 +<!--
     3.5 +Copyright (C) 2018 Guido Berhoerster <guido+feed-preview@berhoerster.name>
     3.6 +
     3.7 +This Source Code Form is subject to the terms of the Mozilla Public
     3.8 +License, v. 2.0. If a copy of the MPL was not distributed with this
     3.9 +file, You can obtain one at http://mozilla.org/MPL/2.0/.
    3.10 +-->
    3.11 +<svg version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
    3.12 +  <g opacity=".04">
    3.13 +    <circle cx="4" cy="12" r="2" fill="#000"/>
    3.14 +    <g fill="none" stroke="#000" stroke-width="2" stroke-linecap="round">
    3.15 +      <path d="m3 7c4 0 6 2 6 6"/>
    3.16 +      <path d="m3 3c6 0 10 4 10 10"/>
    3.17 +    </g>
    3.18 +  </g>
    3.19 +</svg>
     4.1 --- a/web_resources/style/common.css	Tue Nov 27 10:47:26 2018 +0100
     4.2 +++ b/web_resources/style/common.css	Tue Nov 27 11:11:15 2018 +0100
     4.3 @@ -1,48 +1,41 @@
     4.4 +/*
     4.5 + * Copyright (C) 2018 Guido Berhoerster <guido+feed-preview@berhoerster.name>
     4.6 + *
     4.7 + * This Source Code Form is subject to the terms of the Mozilla Public
     4.8 + * License, v. 2.0. If a copy of the MPL was not distributed with this
     4.9 + * file, You can obtain one at http://mozilla.org/MPL/2.0/.
    4.10 + */
    4.11 +
    4.12 +@import url("chrome://browser/content/extension.css");
    4.13  @import url("photon-colors.css");
    4.14  
    4.15 +:root {
    4.16 +  --link-color: var(--blue-50);
    4.17 +  --link-hover-color: var(--blue-60);
    4.18 +  --link-active-color: var(--blue-70);
    4.19 +}
    4.20 +
    4.21  html,
    4.22  body {
    4.23 -  box-sizing: border-box;
    4.24    margin: 0;
    4.25 -  font: -moz-desktop;
    4.26 -  font-size: 15px;
    4.27    line-height: 1.4em;
    4.28 -  color: var(--grey-90);
    4.29  }
    4.30  
    4.31  h1, h2, h3, h4, h5, h6 {
    4.32    line-height: 1.15em;
    4.33  }
    4.34  
    4.35 -:link {
    4.36 -  color: var(--blue-50);
    4.37 +:any-link {
    4.38 +  color: var(--link-color);
    4.39    text-decoration: none;
    4.40  }
    4.41  
    4.42 -:visited {
    4.43 -  color: var(--blue-50);
    4.44 -  text-decoration: none;
    4.45 -}
    4.46 -
    4.47 -:link:hover,
    4.48 -:link:active,
    4.49 -:visited:hover,
    4.50 -:visited:active {
    4.51 +:any-link:hover {
    4.52 +  color: var(--link-hover-color);
    4.53    text-decoration: underline;
    4.54  }
    4.55  
    4.56 -:link:hover {
    4.57 -  color: var(--blue-60);
    4.58 +:any-link:active {
    4.59 +  color: var(--link-active-color);
    4.60 +  text-decoration: underline;
    4.61  }
    4.62 -
    4.63 -:link:active {
    4.64 -  color: var(--blue-70);
    4.65 -}
    4.66 -
    4.67 -:visited:hover {
    4.68 -  color: var(--blue-60);
    4.69 -}
    4.70 -
    4.71 -:visited:active {
    4.72 -  color: var(--blue-70);
    4.73 -}
     5.1 --- a/web_resources/style/entry-content.css	Tue Nov 27 10:47:26 2018 +0100
     5.2 +++ b/web_resources/style/entry-content.css	Tue Nov 27 11:11:15 2018 +0100
     5.3 @@ -1,7 +1,14 @@
     5.4 +/*
     5.5 + * Copyright (C) 2018 Guido Berhoerster <guido+feed-preview@berhoerster.name>
     5.6 + *
     5.7 + * This Source Code Form is subject to the terms of the Mozilla Public
     5.8 + * License, v. 2.0. If a copy of the MPL was not distributed with this
     5.9 + * file, You can obtain one at http://mozilla.org/MPL/2.0/.
    5.10 + */
    5.11 +
    5.12  @import url("common.css");
    5.13  
    5.14  html,
    5.15  body {
    5.16 -  background: var(--white-100);
    5.17    padding: 4px;
    5.18  }
     6.1 --- a/web_resources/style/feed-preview.css	Tue Nov 27 10:47:26 2018 +0100
     6.2 +++ b/web_resources/style/feed-preview.css	Tue Nov 27 11:11:15 2018 +0100
     6.3 @@ -1,13 +1,67 @@
     6.4 +/*
     6.5 + * Copyright (C) 2018 Guido Berhoerster <guido+feed-preview@berhoerster.name>
     6.6 + *
     6.7 + * This Source Code Form is subject to the terms of the Mozilla Public
     6.8 + * License, v. 2.0. If a copy of the MPL was not distributed with this
     6.9 + * file, You can obtain one at http://mozilla.org/MPL/2.0/.
    6.10 + */
    6.11 +
    6.12  @import url("common.css");
    6.13  
    6.14 -html,
    6.15 +:root {
    6.16 +  --default-background: var(--grey-10);
    6.17 +  --entry-background: var(--white-100);
    6.18 +  --secondary-color: var(--grey-50);
    6.19 +  --entry-content-border: 1px solid var(--grey-90-a10);
    6.20 +  --font-family-default: "Segoe UI", "San Fancisco", "Ubuntu", sans-serif;
    6.21 +  --font-display-20: 300 36px var(--font-family-default);
    6.22 +  --font-title-40: 300 28px var(--font-family-default);
    6.23 +  --font-title-30: 300 22px var(--font-family-default);
    6.24 +  --font-title-20: 500 17px var(--font-family-default);
    6.25 +  --font-title-10: 500 13px var(--font-family-default);
    6.26 +  --font-body-20: 400 15px var(--font-family-default);
    6.27 +  --font-body-10: 400 13px var(--font-family-default);
    6.28 +  --entry-shadow: 0 1px 4px var(--grey-90-a10);
    6.29 +  --entry-outline: var(--entry-shadow), 0 0 0 5px var(--grey-30);
    6.30 +}
    6.31 +
    6.32  body {
    6.33 -  padding: 16px 32px;
    6.34 -  background: var(--grey-10);
    6.35 +  padding: 16px;
    6.36 +  background-color: var(--default-background);
    6.37 +  background-image: none;
    6.38 +  background-repeat: no-repeat;
    6.39 +  background-origin: padding-box;
    6.40 +  background-position: bottom 0 left 0;
    6.41 +  background-attachment: fixed;
    6.42 +  height: 100%;
    6.43 +  font: var(--font-body-20);
    6.44 +}
    6.45 +
    6.46 +@media (width > calc(80ch + 2 * 200px)) and (height > calc(200px * 3)) {
    6.47 +  /* minimum background image size is 200px */
    6.48 +  body {
    6.49 +    background-image: url('../images/feed.svg');
    6.50 +    background-size: calc((100vw - 80ch) / 2);
    6.51 +  }
    6.52 +}
    6.53 +
    6.54 +@media (width > calc(80ch + 2 * 200px)) and (height > calc(200px * 3)) and
    6.55 +    (width > calc(80ch + 33vh)) {
    6.56 +  /*
    6.57 +   * the background image should not be higher than three times the viewport
    6.58 +   * height
    6.59 +   */
    6.60 +  body {
    6.61 +    background-image: url('../images/feed.svg');
    6.62 +    background-size: 33vh 33vh;
    6.63 +  }
    6.64  }
    6.65  
    6.66  #feed-header {
    6.67 +  width: 100%;
    6.68    max-width: 80ch;
    6.69 +  min-width: 40ch;
    6.70 +  padding: 16px;
    6.71    margin: 0 auto;
    6.72  }
    6.73  
    6.74 @@ -19,28 +73,46 @@
    6.75  }
    6.76  
    6.77  #feed-title {
    6.78 -  font-size: 1.777em;
    6.79 -  margin: 0 0 4px 0;
    6.80 +  font: var(--font-title-40);
    6.81 +  margin: 0;
    6.82  }
    6.83  
    6.84  #feed-subtitle {
    6.85 -  color: var(--grey-50);
    6.86 -  margin: 0 0 16px 0;
    6.87 +  font: var(--font-body-20);
    6.88 +  color: var(--secondary-color);
    6.89 +  margin: 6px 0 0 0;
    6.90  }
    6.91  
    6.92  #no-entries-hint {
    6.93 -  color: var(--grey-50);
    6.94 +  color: var(--secondary-color);
    6.95 +  font: var(--font-display-20);
    6.96  }
    6.97  
    6.98  #no-entries-hint,
    6.99  .entry {
   6.100    clear: both;
   6.101 -  margin: 16px auto;
   6.102 +  margin: 16px auto 0 auto;
   6.103    padding: 16px;
   6.104 +}
   6.105 +
   6.106 +.entry {
   6.107 +  overflow: auto;
   6.108    max-width: 80ch;
   6.109 -  background: var(--white-100);
   6.110 +  background: var(--entry-background);
   6.111    border-radius: 4px;
   6.112 -  box-shadow: 0 1px 2px var(--grey-90-a40);
   6.113 +  box-shadow: var(--entry-shadow);
   6.114 +}
   6.115 +
   6.116 +#feed-header + article .entry {
   6.117 +  margin-top: 16px;
   6.118 +}
   6.119 +
   6.120 +.entry + .entry {
   6.121 +  margin-top: 8px;
   6.122 +}
   6.123 +
   6.124 +.entry:hover {
   6.125 +  box-shadow: var(--entry-outline);
   6.126  }
   6.127  
   6.128  details.entry > summary {
   6.129 @@ -59,6 +131,7 @@
   6.130    width: 16px;
   6.131    height: 16px;
   6.132    flex: 0 0 16px;
   6.133 +  transition: 100ms;
   6.134  }
   6.135  
   6.136  details.entry[open] > summary {
   6.137 @@ -67,6 +140,7 @@
   6.138  
   6.139  details.entry[open] > summary::before {
   6.140    transform: rotate(90deg);
   6.141 +  transition: 100ms;
   6.142  }
   6.143  
   6.144  .entry-header {
   6.145 @@ -74,32 +148,34 @@
   6.146  }
   6.147  
   6.148  .entry-title {
   6.149 -  font-size: 1.333em;
   6.150 +  font: var(--font-title-20);
   6.151    margin: 0 0 4px 0;
   6.152  }
   6.153  
   6.154  .entry-date {
   6.155 -  color: var(--grey-50);
   6.156 +  color: var(--secondary-color);
   6.157 +  font: var(--font-body-10);
   6.158    margin: 0;
   6.159  }
   6.160  
   6.161  .entry-content {
   6.162    width: 100%;
   6.163    height: 24em;
   6.164 -  border: 1px solid var(--grey-90-a10);
   6.165 +  border: var(--entry-content-border);
   6.166  }
   6.167  
   6.168  .entry-files {
   6.169 +  font: var(--font-body-10);
   6.170 +  color: var(--secondary-color);
   6.171    padding: 0 8px;
   6.172  }
   6.173  
   6.174  .entry-files-title {
   6.175 -  font-size: 1em;
   6.176 +  font: var(--font-title-10);
   6.177    margin: 0 0 4px 0;
   6.178  }
   6.179  
   6.180  .entry-files-list {
   6.181    margin: 0;
   6.182    padding: 0 0 0 32px;
   6.183 -  color: var(--grey-50);
   6.184  }