Mercurial > addons > firefox-addons > feed-preview

comparison web_resources/style/feed-preview.css @ 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 1c31f4102408
children fcd65cf3f634
comparison
equal deleted inserted replaced
7:2bbb7617dd13 8:c271192aac9d
1 /*
2 * Copyright (C) 2018 Guido Berhoerster <guido+feed-preview@berhoerster.name>
3 *
4 * This Source Code Form is subject to the terms of the Mozilla Public
5 * License, v. 2.0. If a copy of the MPL was not distributed with this
6 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
7 */
8
1 @import url("common.css"); 9 @import url("common.css");
2 10
3 html, 11 :root {
12 --default-background: var(--grey-10);
13 --entry-background: var(--white-100);
14 --secondary-color: var(--grey-50);
15 --entry-content-border: 1px solid var(--grey-90-a10);
16 --font-family-default: "Segoe UI", "San Fancisco", "Ubuntu", sans-serif;
17 --font-display-20: 300 36px var(--font-family-default);
18 --font-title-40: 300 28px var(--font-family-default);
19 --font-title-30: 300 22px var(--font-family-default);
20 --font-title-20: 500 17px var(--font-family-default);
21 --font-title-10: 500 13px var(--font-family-default);
22 --font-body-20: 400 15px var(--font-family-default);
23 --font-body-10: 400 13px var(--font-family-default);
24 --entry-shadow: 0 1px 4px var(--grey-90-a10);
25 --entry-outline: var(--entry-shadow), 0 0 0 5px var(--grey-30);
26 }
27
4 body { 28 body {
5 padding: 16px 32px; 29 padding: 16px;
6 background: var(--grey-10); 30 background-color: var(--default-background);
31 background-image: none;
32 background-repeat: no-repeat;
33 background-origin: padding-box;
34 background-position: bottom 0 left 0;
35 background-attachment: fixed;
36 height: 100%;
37 font: var(--font-body-20);
38 }
39
40 @media (width > calc(80ch + 2 * 200px)) and (height > calc(200px * 3)) {
41 /* minimum background image size is 200px */
42 body {
43 background-image: url('../images/feed.svg');
44 background-size: calc((100vw - 80ch) / 2);
45 }
46 }
47
48 @media (width > calc(80ch + 2 * 200px)) and (height > calc(200px * 3)) and
49 (width > calc(80ch + 33vh)) {
50 /*
51 * the background image should not be higher than three times the viewport
52 * height
53 */
54 body {
55 background-image: url('../images/feed.svg');
56 background-size: 33vh 33vh;
57 }
7 } 58 }
8 59
9 #feed-header { 60 #feed-header {
61 width: 100%;
10 max-width: 80ch; 62 max-width: 80ch;
63 min-width: 40ch;
64 padding: 16px;
11 margin: 0 auto; 65 margin: 0 auto;
12 } 66 }
13 67
14 #feed-logo { 68 #feed-logo {
15 float: right; 69 float: right;
17 max-height: 48px; 71 max-height: 48px;
18 margin: 0 0 8px 8px; 72 margin: 0 0 8px 8px;
19 } 73 }
20 74
21 #feed-title { 75 #feed-title {
22 font-size: 1.777em; 76 font: var(--font-title-40);
23 margin: 0 0 4px 0; 77 margin: 0;
24 } 78 }
25 79
26 #feed-subtitle { 80 #feed-subtitle {
27 color: var(--grey-50); 81 font: var(--font-body-20);
28 margin: 0 0 16px 0; 82 color: var(--secondary-color);
83 margin: 6px 0 0 0;
29 } 84 }
30 85
31 #no-entries-hint { 86 #no-entries-hint {
32 color: var(--grey-50); 87 color: var(--secondary-color);
88 font: var(--font-display-20);
33 } 89 }
34 90
35 #no-entries-hint, 91 #no-entries-hint,
36 .entry { 92 .entry {
37 clear: both; 93 clear: both;
38 margin: 16px auto; 94 margin: 16px auto 0 auto;
39 padding: 16px; 95 padding: 16px;
96 }
97
98 .entry {
99 overflow: auto;
40 max-width: 80ch; 100 max-width: 80ch;
41 background: var(--white-100); 101 background: var(--entry-background);
42 border-radius: 4px; 102 border-radius: 4px;
43 box-shadow: 0 1px 2px var(--grey-90-a40); 103 box-shadow: var(--entry-shadow);
104 }
105
106 #feed-header + article .entry {
107 margin-top: 16px;
108 }
109
110 .entry + .entry {
111 margin-top: 8px;
112 }
113
114 .entry:hover {
115 box-shadow: var(--entry-outline);
44 } 116 }
45 117
46 details.entry > summary { 118 details.entry > summary {
47 display: flex; 119 display: flex;
48 align-items: center; 120 align-items: center;
57 details.entry > summary::before { 129 details.entry > summary::before {
58 content: url('../images/arrow.svg'); 130 content: url('../images/arrow.svg');
59 width: 16px; 131 width: 16px;
60 height: 16px; 132 height: 16px;
61 flex: 0 0 16px; 133 flex: 0 0 16px;
134 transition: 100ms;
62 } 135 }
63 136
64 details.entry[open] > summary { 137 details.entry[open] > summary {
65 margin: 0 0 8px 0; 138 margin: 0 0 8px 0;
66 } 139 }
67 140
68 details.entry[open] > summary::before { 141 details.entry[open] > summary::before {
69 transform: rotate(90deg); 142 transform: rotate(90deg);
143 transition: 100ms;
70 } 144 }
71 145
72 .entry-header { 146 .entry-header {
73 margin: 0 0 0 8px; 147 margin: 0 0 0 8px;
74 } 148 }
75 149
76 .entry-title { 150 .entry-title {
77 font-size: 1.333em; 151 font: var(--font-title-20);
78 margin: 0 0 4px 0; 152 margin: 0 0 4px 0;
79 } 153 }
80 154
81 .entry-date { 155 .entry-date {
82 color: var(--grey-50); 156 color: var(--secondary-color);
157 font: var(--font-body-10);
83 margin: 0; 158 margin: 0;
84 } 159 }
85 160
86 .entry-content { 161 .entry-content {
87 width: 100%; 162 width: 100%;
88 height: 24em; 163 height: 24em;
89 border: 1px solid var(--grey-90-a10); 164 border: var(--entry-content-border);
90 } 165 }
91 166
92 .entry-files { 167 .entry-files {
168 font: var(--font-body-10);
169 color: var(--secondary-color);
93 padding: 0 8px; 170 padding: 0 8px;
94 } 171 }
95 172
96 .entry-files-title { 173 .entry-files-title {
97 font-size: 1em; 174 font: var(--font-title-10);
98 margin: 0 0 4px 0; 175 margin: 0 0 4px 0;
99 } 176 }
100 177
101 .entry-files-list { 178 .entry-files-list {
102 margin: 0; 179 margin: 0;
103 padding: 0 0 0 32px; 180 padding: 0 0 0 32px;
104 color: var(--grey-50);
105 } 181 }