Skip to content

Commit 6de8b46

Browse files
committed
fix img html, improve img css, change colours, rename vars, add list css
1 parent d8656a5 commit 6de8b46

File tree

6 files changed

+91
-49
lines changed

6 files changed

+91
-49
lines changed
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div>
2-
<h4>%1</h4>
3-
<div>%2</div>
2+
<h4><span>Error: </span>%1</h4>
3+
<div role="alert">%2</div>
44
</div>
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
&#32;&#47;&nbsp;<a class="rssguard-menc" href="%1"><div style="display:none"><!-- cannot be removed -->%2</div><span style="text-transform: uppercase;">%3</span></a>
1+
&#32;&#47;&nbsp;<a class="rssguard-menc" href="%1"><span style="display:none"><!-- Cannot be removed -->%2</span><span style="text-transform: uppercase;">%3</span></a>
Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1-
<a href="%1"><img src="%1" alt="%2" style="height: %3px;" /></a>
1+
<a href="%1">
2+
<img alt="%2"
3+
src="%1"
4+
style="max-height: %3px;">
5+
</a>
Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
1-
<div dir="auto">
2-
<div class="rssguard-mwrapper">
3-
<section class="rssguard-mhead">
4-
<div style="float: right; margin: 10px;"><!-- where should I put it??? -->%7</div>
5-
<span class="rssguard-msmall">%2</span>
6-
<h1>%1<span class="rssguard-mlinks">%6<span class="rssguard-murl">&nbsp;&#47;&nbsp;<a href="%3">URL</a></span></span></h1>
7-
<span class="rssguard-msmall">%5</span>
8-
</section>
9-
<hr />
10-
<div class="rssguard-mbody">
11-
%4
12-
</div>
1+
<div class="rssguard-mwrapper" dir="auto">
2+
<section class="rssguard-mhead">
3+
<div style="float: right; margin: 10px;"><!-- Should it remain here??? -->%7</div>
4+
<span class="rssguard-msmall">%2</span>
5+
<h1>%1<span class="rssguard-mlinks">%6<span class="rssguard-murl">&nbsp;&#47;&nbsp;<a href="%3">URL</a></span></span></h1>
6+
<span class="rssguard-msmall">%5</span>
7+
</section>
8+
<hr>
9+
<div class="rssguard-mbody">
10+
%4
1311
</div>
1412
</div>

resources/skins/nudus/html_wrapper.html

Lines changed: 70 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,20 @@
1313
<head>
1414
<style>
1515
:root {
16-
--base-unit: 10px;
17-
--brad-unit: .3em;
16+
--rssguard-base-unit: 10px;
17+
--rssguard-em-unit: .3em;
1818
/* Qt5 fusion border grey */
19-
--grey1: #B8B8B8;
19+
--rssguard-grey01: #B8B8B8;
2020

2121
/* Some other grey */
22-
--grey2: #CFCFCF;
23-
--grey10: #343434;
24-
--grey20: #F1F1F1;
22+
--rssguard-grey02: #CFCFCF;
23+
--rssguard-grey10: #343434;
24+
--rssguard-grey20: #F1F1F1;
25+
}
26+
article, aside, details, div, dt,
27+
figcaption, footer, form, header,
28+
hgroup, html, main, nav, section, summary {
29+
display: block;
2530
}
2631
body, h1, h2, h3, h4, h5, h6,
2732
p, blockquote, pre, hr,
@@ -32,9 +37,10 @@
3237
h1, h2, h3, h4, h5, h6,
3338
p, blockquote, pre,
3439
ul, ol, dl, figure {
35-
margin-bottom: var(--base-unit);
40+
margin-bottom: var(--rssguard-base-unit);
3641
}
3742
body {
43+
box-sizing: border-box;
3844
cursor: default;
3945
font-kerning: normal;
4046
-webkit-text-size-adjust: 100%;
@@ -65,7 +71,7 @@
6571
font-style: oblique !important;
6672
}
6773
mark {
68-
background: #FFECCC;
74+
background-color: #FFECCC;
6975
}
7076
sub,
7177
sup {
@@ -100,28 +106,28 @@
100106
font-size: .8em !important;
101107
}
102108
blockquote {
103-
color: var(--grey10);
104-
border-left: 4px solid var(--grey2);
109+
color: var(--rssguard-grey10);
110+
border-left: var(--rssguard-em-unit) solid var(--rssguard-grey02);
105111
margin-left: 0;
106-
padding: 0 var(--base-unit);
112+
padding: 0 var(--rssguard-base-unit);
107113
}
108114
pre,
109115
code {
110-
background: var(--grey20);
116+
background-color: var(--rssguard-grey20);
111117
}
112118
pre {
113119
--horiz: 13px;
114120

115-
border-radius: var(--brad-unit);
121+
border-radius: var(--rssguard-em-unit);
116122
margin 0;
117123
overflow-x: auto;
118124
padding: 7px var(--horiz);
119125
white-space: pre !important;
120126
width: calc(100wv - calc(var(--horiz) * 2)) !important;
121127
}
122128
code {
123-
border-radius: var(--brad-unit);
124-
color: var(--grey10);
129+
border-radius: var(--rssguard-em-unit);
130+
color: var(--rssguard-grey10);
125131
padding: 0 .25em;
126132
word-break: break-word;
127133
}
@@ -137,43 +143,65 @@
137143
table,
138144
th,
139145
td {
140-
border: 1px solid var(--grey1);
146+
border: 1px solid var(--rssguard-grey01);
147+
}
148+
li {
149+
display: list-item;
150+
}
151+
ul {
152+
display: block;
153+
list-style-type: circle;
154+
padding-left: 1em;
155+
}
156+
ul li ul {
157+
list-style-type: square;
158+
}
159+
ol {
160+
display: block;
161+
list-style-type: decimal;
162+
padding-left: 1em;
163+
}
164+
ol li ol {
165+
list-style-type: lower-roman;
141166
}
142167
img {
143-
max-height: 100%;
144-
/*
145-
* There are few cases in horizontal layout when
146-
* max-width: 500px; looks better with hi-res images
147-
*/
148-
max-width: 100%;
168+
/* redundant? */
169+
display: inline-block;
170+
171+
height: auto;
172+
width: auto;
149173
}
150174
details > summary {
151-
border-radius: var(--brad-unit);
175+
border-radius: var(--rssguard-em-unit);
152176
cursor: pointer;
153177
}
154178
details > summary:hover {
155-
background: var(--grey20);
179+
background-color: var(--rssguard-grey20);
156180
}
157181
details[open] > summary {
158-
background: var(--grey20);
182+
background-color: var(--rssguard-grey20);
159183
}
160184
details > summary:focus {
161185
box-shadow: none;
162186
outline: none;
163187
}
164188
hr {
165-
background: var(--grey2);
189+
background-color: var(--rssguard-grey02);
166190
border: none;
167191
display: block;
168192
height: 2px;
169-
margin: var(--base-unit) 0;
193+
margin: var(--rssguard-base-unit) 0;
170194
}
171195
iframe {
172196
max-width: 100%;
173-
max-height: auto;
197+
height: auto;
198+
width: auto;
199+
}
200+
select {
201+
max-width: 100%;
174202
}
175203
.rssguard-mwrapper {
176-
padding: var(--base-unit) !important;
204+
padding: var(--rssguard-base-unit) !important;
177205
}
178206
.rssguard-mhead .rssguard-msmall,
179207
.rssguard-mhead .rssguard-mlinks {
@@ -194,14 +222,26 @@
194222
body:hover .rssguard-mwrapper .rssguard-murl {
195223
visibility: visible;
196224
}
225+
@media only screen and (max-width: 800px) {
226+
.rssguard-mbody img {
227+
max-width: 100% !important;
228+
}
229+
}
230+
.rssguard-mbody img {
231+
max-width: 450px;
232+
}
197233
.rssguard-mbody {
198234
/*
199235
* For articles without html elements;
200236
* Not sure if I want to apply this to *all*;
201-
* otherwise apply only to links
237+
* otherwise *must* be applied to links in mbody
202238
*/
203239
word-break: break-word;
204240
}
241+
/* fix at least some mess made by above */
242+
table {
243+
word-break: normal;
244+
}
205245
</style>
206246
<style>
207247
html, body, div, span, applet, object, iframe,

resources/skins/nudus/metadata.xml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
<name>Maki Blackwell</name>
55
</author>
66
<palette>
7-
<color key="1">#4861F0</color>
8-
<color key="2">#F04861</color>
9-
<color key="3">#61F048</color>
7+
<color key="1">#3A4EE4</color>
8+
<color key="2">#E43A4E</color>
9+
<color key="3">#4EE43A</color>
1010
</palette>
1111
</skin>

0 commit comments

Comments
 (0)