admin commited on
Commit
09d63fd
·
1 Parent(s): 80179d6

update styles

Browse files
Files changed (2) hide show
  1. src/modules/link.py +6 -8
  2. 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">{html_txt}<img src="data:image/png;base64,{encoded_string}" alt="Card"></div>'
267
  card_htmls.append(card_html)
268
 
269
  except Exception as e:
270
  raise Exception(f"Error combining images: {e}")
271
 
272
- index_html += '</body></html>'
 
 
 
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
- font-family: 'YuMincho';
5
- src: url("./fonts/yumin.ttf") format('truetype');
6
- font-weight: regular;
 
 
 
 
 
 
 
 
 
7
  }
8
 
9
  body {
10
- font-size: 10pt;
11
- font-family: Alegreya, "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", "MS PMincho", "Crimson Text", serif;
 
 
 
 
12
  }
13
 
14
  h1 {
15
- font-weight: bold;
16
  }
17
 
18
  p {
19
- font-family: 'MS Mincho', serif;
20
  }
21
 
22
  img {
23
- opacity: 1;
24
- }
25
-
26
- .qr {
27
- position: absolute;
28
- bottom: 10px;
29
- right: 10px;
30
  }
31
 
32
  .card {
33
- width: 91mm;
34
- height: 55mm;
35
  display: grid;
36
  grid-template-columns: 1fr;
37
- grid-template-rows: 2fr 1fr 1fr 1fr 3fr;
38
  align-items: center;
39
  justify-items: center;
40
  border: 0px solid black;
@@ -42,80 +49,70 @@ img {
42
  }
43
 
44
  .card > * {
45
- margin: 0;
 
 
46
  }
47
 
48
  .card h1 {
49
- font-size: 1.4rem;
50
- font-weight: bold;
51
- grid-column: 1;
52
- grid-row: 2;
53
  }
54
 
55
  .card h2 {
56
- font-size: 1rem;
57
- grid-column: 1;
58
- grid-row: 3;
59
  }
60
 
61
  .card h3 {
62
- font-size: 1rem;
63
- grid-column: 1;
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
- justify-self: start;
 
 
 
82
  grid-column: 1;
83
- grid-row: 5;
84
  }
85
 
86
  .card ol {
87
- list-style: none;
88
- padding: 0;
89
  }
90
 
91
  .card li {
92
- font-size: 0.6rem;
 
93
  }
94
 
95
  .card img {
96
- max-width: 100%;
97
- max-height: 100%;
98
- grid-row: 4;
99
- justify-self: end;
100
- align-self: end;
101
- position: fixed;
 
102
  }
103
 
104
  @media print {
105
- .a4 {
106
- page-break-after: always;
107
- width: 210mm;
108
- height: 297mm;
109
- display: grid;
110
- grid-template-columns: repeat(2, 1fr);
111
- grid-template-rows: repeat(5, 1fr);
112
- gap: 0;
113
- }
114
-
115
- .card {
116
- margin: 0;
117
- border: none;
118
- width: 100%;
119
- height: 100%;
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
+ }