Spaces:
Sleeping
Sleeping
admin
commited on
Commit
·
09d63fd
1
Parent(s):
80179d6
update styles
Browse files- src/modules/link.py +6 -8
- style.css +65 -68
src/modules/link.py
CHANGED
@@ -199,7 +199,7 @@ class UrlProcessor:
|
|
199 |
|
200 |
|
201 |
# -------------------content start --------------------------------
|
202 |
-
index_html = f'<html><head><link rel="stylesheet" type="text/css" href="{css_path}"></head><body
|
203 |
|
204 |
processed_text = ''
|
205 |
md = markdown.Markdown()
|
@@ -263,13 +263,16 @@ class UrlProcessor:
|
|
263 |
encoded_string = base64.b64encode(image_file.read()).decode()
|
264 |
|
265 |
html_txt = md.convert(processed_text)
|
266 |
-
card_html = f'<div class="card"
|
267 |
card_htmls.append(card_html)
|
268 |
|
269 |
except Exception as e:
|
270 |
raise Exception(f"Error combining images: {e}")
|
271 |
|
272 |
-
|
|
|
|
|
|
|
273 |
# -------------------content end --------------------------------
|
274 |
|
275 |
try:
|
@@ -305,11 +308,6 @@ class UrlProcessor:
|
|
305 |
for idx, png in enumerate(card_pngs):
|
306 |
card_png_output_paths.append(png)
|
307 |
|
308 |
-
|
309 |
-
for card_html in card_htmls:
|
310 |
-
index_html += card_html
|
311 |
-
|
312 |
-
|
313 |
index_output_path = os.path.join(tmpd, index_path)
|
314 |
with open(index_output_path, 'w') as index_file:
|
315 |
index_file.write(index_html)
|
|
|
199 |
|
200 |
|
201 |
# -------------------content start --------------------------------
|
202 |
+
index_html = f'<html><head><link rel="stylesheet" type="text/css" href="{css_path}"></head><body>\n'
|
203 |
|
204 |
processed_text = ''
|
205 |
md = markdown.Markdown()
|
|
|
263 |
encoded_string = base64.b64encode(image_file.read()).decode()
|
264 |
|
265 |
html_txt = md.convert(processed_text)
|
266 |
+
card_html = f'<div class="card">\n{html_txt}\n<img src="data:image/png;base64,{encoded_string}" alt="Card">\n</div>\n'
|
267 |
card_htmls.append(card_html)
|
268 |
|
269 |
except Exception as e:
|
270 |
raise Exception(f"Error combining images: {e}")
|
271 |
|
272 |
+
for card_html in card_htmls:
|
273 |
+
index_html += card_html
|
274 |
+
|
275 |
+
index_html += '</body></html>\n'
|
276 |
# -------------------content end --------------------------------
|
277 |
|
278 |
try:
|
|
|
308 |
for idx, png in enumerate(card_pngs):
|
309 |
card_png_output_paths.append(png)
|
310 |
|
|
|
|
|
|
|
|
|
|
|
311 |
index_output_path = os.path.join(tmpd, index_path)
|
312 |
with open(index_output_path, 'w') as index_file:
|
313 |
index_file.write(index_html)
|
style.css
CHANGED
@@ -1,40 +1,47 @@
|
|
1 |
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&display=swap');
|
2 |
|
3 |
@font-face {
|
4 |
-
|
5 |
-
|
6 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
7 |
}
|
8 |
|
9 |
body {
|
10 |
-
|
11 |
-
|
|
|
|
|
|
|
|
|
12 |
}
|
13 |
|
14 |
h1 {
|
15 |
-
|
16 |
}
|
17 |
|
18 |
p {
|
19 |
-
|
20 |
}
|
21 |
|
22 |
img {
|
23 |
-
|
24 |
-
}
|
25 |
-
|
26 |
-
.qr {
|
27 |
-
position: absolute;
|
28 |
-
bottom: 10px;
|
29 |
-
right: 10px;
|
30 |
}
|
31 |
|
32 |
.card {
|
33 |
-
width:
|
34 |
-
height:
|
35 |
display: grid;
|
36 |
grid-template-columns: 1fr;
|
37 |
-
grid-template-rows:
|
38 |
align-items: center;
|
39 |
justify-items: center;
|
40 |
border: 0px solid black;
|
@@ -42,80 +49,70 @@ img {
|
|
42 |
}
|
43 |
|
44 |
.card > * {
|
45 |
-
|
|
|
|
|
46 |
}
|
47 |
|
48 |
.card h1 {
|
49 |
-
|
50 |
-
|
51 |
-
|
52 |
-
|
53 |
}
|
54 |
|
55 |
.card h2 {
|
56 |
-
|
57 |
-
|
58 |
-
grid-row: 3;
|
59 |
}
|
60 |
|
61 |
.card h3 {
|
62 |
-
|
63 |
-
|
64 |
-
grid-row: 4;
|
65 |
-
}
|
66 |
-
|
67 |
-
.card h4 {
|
68 |
-
font-size: 1rem;
|
69 |
-
}
|
70 |
-
|
71 |
-
.card h5 {
|
72 |
-
font-size: 1rem;
|
73 |
-
}
|
74 |
-
|
75 |
-
.card h6 {
|
76 |
-
font-size: 1rem;
|
77 |
}
|
78 |
|
79 |
.card ul {
|
80 |
list-style: none;
|
81 |
-
|
|
|
|
|
|
|
82 |
grid-column: 1;
|
83 |
-
grid-row: 5;
|
84 |
}
|
85 |
|
86 |
.card ol {
|
87 |
-
|
88 |
-
|
89 |
}
|
90 |
|
91 |
.card li {
|
92 |
-
|
|
|
93 |
}
|
94 |
|
95 |
.card img {
|
96 |
-
|
97 |
-
|
98 |
-
|
99 |
-
|
100 |
-
|
101 |
-
|
|
|
102 |
}
|
103 |
|
104 |
@media print {
|
105 |
-
|
106 |
-
|
107 |
-
|
108 |
-
|
109 |
-
|
110 |
-
|
111 |
-
|
112 |
-
|
113 |
-
|
114 |
-
|
115 |
-
|
116 |
-
|
117 |
-
|
118 |
-
|
119 |
-
|
120 |
-
}
|
121 |
-
}
|
|
|
1 |
@import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,700;0,800;0,900;1,400;1,500;1,700;1,800;1,900&display=swap');
|
2 |
|
3 |
@font-face {
|
4 |
+
font-family: 'YuMincho';
|
5 |
+
src: url("./fonts/yumin.ttf") format('truetype');
|
6 |
+
font-weight: regular;
|
7 |
+
}
|
8 |
+
|
9 |
+
:root {
|
10 |
+
--page-margin-x: 14mm;
|
11 |
+
--page-margin-y: 11mm;
|
12 |
+
--card-width: 91mm;
|
13 |
+
--card-height: 55mm;
|
14 |
+
--page-width: calc((210mm - 2 * var(--page-margin-x)));
|
15 |
+
--page-height: calc((297mm -2 * var(--page-margin-y)));
|
16 |
}
|
17 |
|
18 |
body {
|
19 |
+
font-size: 10pt;
|
20 |
+
font-family: Alegreya, "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", "MS PMincho", "Crimson Text", serif;
|
21 |
+
display: grid;
|
22 |
+
grid-template-columns: repeat(auto-fit, minmax(var(--card-width), 1fr));
|
23 |
+
grid-auto-rows: var(--card-height);
|
24 |
+
gap: 0;
|
25 |
}
|
26 |
|
27 |
h1 {
|
28 |
+
font-weight: bold;
|
29 |
}
|
30 |
|
31 |
p {
|
32 |
+
font-family: 'MS Mincho', serif;
|
33 |
}
|
34 |
|
35 |
img {
|
36 |
+
opacity: 0.1;
|
|
|
|
|
|
|
|
|
|
|
|
|
37 |
}
|
38 |
|
39 |
.card {
|
40 |
+
width: var(--card-width);
|
41 |
+
height: var(--card-height);
|
42 |
display: grid;
|
43 |
grid-template-columns: 1fr;
|
44 |
+
grid-template-rows: repeat(4, auto);
|
45 |
align-items: center;
|
46 |
justify-items: center;
|
47 |
border: 0px solid black;
|
|
|
49 |
}
|
50 |
|
51 |
.card > * {
|
52 |
+
margin: 0;
|
53 |
+
top: 0;
|
54 |
+
left: 0;
|
55 |
}
|
56 |
|
57 |
.card h1 {
|
58 |
+
font-size: 1.4rem;
|
59 |
+
font-weight: bold;
|
60 |
+
grid-column: 1;
|
61 |
+
grid-row: 2; /* centering h1 */
|
62 |
}
|
63 |
|
64 |
.card h2 {
|
65 |
+
font-size: 1rem;
|
66 |
+
grid-column: 1;
|
|
|
67 |
}
|
68 |
|
69 |
.card h3 {
|
70 |
+
font-size: 1rem;
|
71 |
+
grid-column: 1;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
72 |
}
|
73 |
|
74 |
.card ul {
|
75 |
list-style: none;
|
76 |
+
display: flex;
|
77 |
+
flex-wrap: wrap;
|
78 |
+
justify-content: flex-start;
|
79 |
+
align-content: flex-start;
|
80 |
grid-column: 1;
|
|
|
81 |
}
|
82 |
|
83 |
.card ol {
|
84 |
+
list-style: none;
|
85 |
+
padding: 0;
|
86 |
}
|
87 |
|
88 |
.card li {
|
89 |
+
font-size: 0.6rem;
|
90 |
+
flex-basis: 50%;
|
91 |
}
|
92 |
|
93 |
.card img {
|
94 |
+
max-width: 100%;
|
95 |
+
max-height: 100%;
|
96 |
+
justify-self: end;
|
97 |
+
align-self: end;
|
98 |
+
position: absolute;
|
99 |
+
object-fit: cover;
|
100 |
+
z-index: -1;
|
101 |
}
|
102 |
|
103 |
@media print {
|
104 |
+
body {
|
105 |
+
display: grid;
|
106 |
+
grid-template-columns: repeat(2, 1fr);
|
107 |
+
grid-auto-rows: minmax(55mm, auto);
|
108 |
+
margin: var(--page-margin-y) var(--page-margin-x);
|
109 |
+
gap: 0;
|
110 |
+
}
|
111 |
+
|
112 |
+
.card {
|
113 |
+
margin: 0;
|
114 |
+
border: none;
|
115 |
+
width: auto;
|
116 |
+
height: auto;
|
117 |
+
}
|
118 |
+
}
|
|
|
|