talk-to-resume / template.html
jerpint's picture
Add app
774ed1c
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
/* Reset and base styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "JetBrains Mono", "SF Mono", "Fira Code", Consolas, monospace;
line-height: 1.6;
max-width: 850px;
margin: 0 auto;
padding: 2rem;
color: #2d3748;
font-size: 14px;
background-color: #ffffff;
}
/* Header section */
.header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e2e8f0;
}
.name {
font-size: 2.2em;
margin: 0 0 0.5rem 0;
color: #2b3e5a;
letter-spacing: -0.5px;
}
.title {
font-size: 1.1em;
color: #4a5568;
margin-bottom: 0.5rem;
}
.contact-info {
font-size: 0.9em;
color: #718096;
margin-bottom: 1rem;
}
.contact-info span:not(:last-child)::after {
content: "•";
margin: 0 0.5rem;
color: #cbd5e0;
}
/* Social links section - Fixed grid layout */
.social-links {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 0.5rem 1rem;
margin-top: 0.75rem;
width: 100%;
}
.social-link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: #4a5568;
gap: 0.5rem;
white-space: nowrap;
padding: 0.1rem 0;
}
/* Icon styling */
.social-link i,
.social-link .emoji {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.6rem;
min-width: 2.6rem;
font-size: 1.1em;
margin-right: 0.2rem;
}
.social-link span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Brand colors */
.social-link .fa-github { color: #333; }
.social-link .fa-linkedin-in { color: #0077b5; }
.social-link .fa-hacker-news { color: #ff6600; }
.social-link .fa-youtube { color: #ff0000; }
/* Section headings */
h2 {
color: #4299e1;
font-size: 1.3em;
margin: 2rem 0 1rem;
padding-bottom: 0.4rem;
border-bottom: 2px solid #4299e1;
text-transform: uppercase;
letter-spacing: 0.05em;
}
h3 {
color: #2d3748;
font-size: 1.1em;
margin: 1.5rem 0 0.5rem;
font-weight: 600;
}
h4 {
color: #718096; /* A lighter gray for subtle contrast */
font-size: 0.95em; /* Slightly smaller than h3 */
margin: 0.5rem 0 0.75rem; /* Tighter margins */
font-weight: 500; /* Medium weight for balance */
letter-spacing: 0.02em; /* Slight spacing for readability */
}
/* Content formatting */
p {
margin-bottom: 1rem;
}
ul {
margin: 0.7rem 0 1rem;
padding-left: 1.5rem;
list-style-type: none;
}
li {
margin-bottom: 0.5rem;
position: relative;
padding-left: 0.5rem;
}
li::before {
content: "•";
color: #4299e1;
position: absolute;
left: -1rem;
}
/* Strong and emphasis */
strong {
color: #2d3748;
font-weight: 600;
}
em {
font-style: italic;
color: #4a5568;
}
/* Print styles */
@media print {
@page {
margin: 0.5in;
size: letter;
}
body {
margin: 0;
padding: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.header {
margin-bottom: 1.5rem;
}
.social-links {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
break-inside: avoid;
page-break-inside: avoid;
}
.social-link {
break-inside: avoid;
page-break-inside: avoid;
}
h2, h3 {
break-after: avoid;
page-break-after: avoid;
}
li {
break-inside: avoid;
page-break-inside: avoid;
}
}
/* Responsive design */
@media (max-width: 640px) {
body {
padding: 1rem;
font-size: 13px;
}
.social-links {
gap: 0.5rem;
}
.social-link {
min-width: 100%;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.2em;
}
h3 {
font-size: 1.05em;
}
}
</style>
</head>
<body>
<div class="header">
<h1 class="name">{{name}}</h1>
<div class="title">{{header_title}}</div>
<div class="contact-info">
<span>{{header_email}}</span>
<span>{{header_phone}}</span>
<span>{{header_location}}</span>
</div>
<div class="social-links">
<!-- SOCIAL_LINKS -->
</div>
</div>
{{content}}
</body>
</html>