Skip to content

Commit fe6d76e

Browse files
gabriel-logangabriel-logan
committed
feat: improve layout styles in CV example template for better presentation
1 parent 4288068 commit fe6d76e

1 file changed

Lines changed: 123 additions & 136 deletions

File tree

‎backend/src/templates/examples/example1.ts‎

Lines changed: 123 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -22,163 +22,150 @@ export function cvExample1Template(
2222
<title>${dto.cVName}</title>
2323
2424
<style>
25-
@page {
26-
size: A4;
27-
margin: 0;
28-
}
29-
30-
:root {
31-
--primary: #111827;
32-
--secondary: #374151;
33-
--muted: #6b7280;
34-
--accent: #2563eb;
35-
--bg-soft: #f9fafb;
36-
}
37-
38-
* {
39-
box-sizing: border-box;
40-
font-family: "Inter", Arial, sans-serif;
41-
}
42-
43-
html,
44-
body {
45-
margin: 0;
46-
padding: 0;
47-
width: 210mm;
48-
height: 297mm;
49-
background: white;
50-
font-size: 13px;
51-
line-height: 1.4;
52-
}
25+
@page {
26+
size: A4;
27+
margin: 0;
28+
}
5329
54-
body {
55-
overflow: hidden;
56-
}
30+
:root {
31+
--primary: #111827;
32+
--secondary: #374151;
33+
--muted: #6b7280;
34+
--accent: #2563eb;
35+
--bg-soft: #f9fafb;
36+
}
5737
58-
.cv {
59-
display: flex;
60-
width: 100%;
61-
height: 100%;
62-
min-height: 297mm;
63-
page-break-inside: avoid;
64-
}
38+
* {
39+
box-sizing: border-box;
40+
font-family: "Inter", Arial, sans-serif;
41+
}
6542
66-
.sidebar {
67-
width: 300px;
68-
background: var(--primary);
69-
color: #e5e7eb;
70-
padding: 20px 18px;
71-
height: 100%;
72-
}
43+
html,
44+
body {
45+
margin: 0;
46+
padding: 0;
47+
width: 210mm;
48+
font-size: 13px;
49+
line-height: 1.4;
50+
background: white;
51+
}
7352
74-
.sidebar * {
75-
break-inside: avoid;
76-
}
53+
.sidebar {
54+
position: fixed;
55+
top: 0;
56+
left: 0;
57+
width: 300px;
58+
height: 100%;
59+
background: var(--primary);
60+
color: #e5e7eb;
61+
padding: 20px 18px;
62+
}
7763
78-
.avatar {
79-
width: 100px;
80-
height: 100px;
81-
border-radius: 50%;
82-
object-fit: cover;
83-
margin-bottom: 12px;
84-
}
64+
.sidebar * {
65+
break-inside: avoid;
66+
}
8567
86-
.name {
87-
font-size: 22px;
88-
font-weight: 700;
89-
}
68+
.avatar {
69+
width: 100px;
70+
height: 100px;
71+
border-radius: 50%;
72+
object-fit: cover;
73+
margin-bottom: 12px;
74+
}
9075
91-
.nickname {
92-
font-size: 12px;
93-
color: #9ca3af;
94-
}
76+
.name {
77+
font-size: 22px;
78+
font-weight: 700;
79+
}
9580
96-
.side-section {
97-
margin-top: 16px;
98-
}
81+
.nickname {
82+
font-size: 12px;
83+
color: #9ca3af;
84+
}
9985
100-
.side-section h3 {
101-
font-size: 11px;
102-
letter-spacing: 1px;
103-
text-transform: uppercase;
104-
color: #93c5fd;
105-
margin-bottom: 6px;
106-
}
86+
.side-section {
87+
margin-top: 16px;
88+
}
10789
108-
.side-section p,
109-
.side-section li,
110-
.side-section a {
111-
font-size: 12px;
112-
color: #e5e7eb;
113-
margin: 2px 0;
114-
text-decoration: none;
115-
}
90+
.side-section h3 {
91+
font-size: 11px;
92+
letter-spacing: 1px;
93+
text-transform: uppercase;
94+
color: #93c5fd;
95+
margin-bottom: 6px;
96+
}
11697
117-
.content {
118-
flex: 1;
119-
padding: 24px 28px;
120-
color: var(--primary);
121-
background: white;
122-
height: 100%;
123-
}
98+
.side-section p,
99+
.side-section li,
100+
.side-section a {
101+
font-size: 12px;
102+
color: #e5e7eb;
103+
margin: 2px 0;
104+
text-decoration: none;
105+
}
124106
125-
section,
126-
.item {
127-
break-inside: avoid;
128-
}
107+
.content {
108+
margin-left: 300px;
109+
padding: 24px 28px;
110+
color: var(--primary);
111+
background: white;
112+
}
129113
130-
section {
131-
margin-bottom: 20px;
132-
}
114+
section {
115+
margin-bottom: 20px;
116+
break-inside: avoid;
117+
}
133118
134-
h2 {
135-
font-size: 18px;
136-
margin-bottom: 10px;
137-
border-bottom: 2px solid #e5e7eb;
138-
padding-bottom: 4px;
139-
break-after: avoid;
140-
}
119+
h2 {
120+
font-size: 18px;
121+
margin-bottom: 10px;
122+
border-bottom: 2px solid #e5e7eb;
123+
padding-bottom: 4px;
124+
break-after: avoid;
125+
}
141126
142-
.item {
143-
margin-bottom: 10px;
144-
}
127+
.item {
128+
margin-bottom: 10px;
129+
break-inside: avoid;
130+
}
145131
146-
.item-title {
147-
font-weight: 600;
148-
font-size: 14px;
149-
}
132+
.item-title {
133+
font-weight: 600;
134+
font-size: 14px;
135+
}
150136
151-
.item-subtitle {
152-
font-size: 12px;
153-
color: var(--secondary);
154-
}
137+
.item-subtitle {
138+
font-size: 12px;
139+
color: var(--secondary);
140+
}
155141
156-
.dates {
157-
font-size: 11px;
158-
color: var(--muted);
159-
}
142+
.dates {
143+
font-size: 11px;
144+
color: var(--muted);
145+
}
160146
161-
.tags span {
162-
display: inline-block;
163-
padding: 4px 8px;
164-
background: var(--bg-soft);
165-
border-radius: 999px;
166-
font-size: 11px;
167-
margin: 2px 4px 0 0;
168-
}
147+
.tags span {
148+
display: inline-block;
149+
padding: 4px 8px;
150+
background: var(--bg-soft);
151+
border-radius: 999px;
152+
font-size: 11px;
153+
margin: 2px 4px 0 0;
154+
}
169155
170-
a {
171-
color: var(--accent);
172-
}
156+
a {
157+
color: var(--accent);
158+
word-break: break-word;
159+
}
173160
174-
footer {
175-
font-size: 10px;
176-
color: var(--muted);
177-
margin-top: auto;
178-
border-top: 1px solid #e5e7eb;
179-
padding-top: 8px;
180-
break-inside: avoid;
181-
}
161+
footer {
162+
font-size: 10px;
163+
color: var(--muted);
164+
margin-top: 24px;
165+
border-top: 1px solid #e5e7eb;
166+
padding-top: 8px;
167+
break-inside: avoid;
168+
}
182169
</style>
183170
</head>
184171

0 commit comments

Comments
 (0)