heyainsleymae
/
curriculum-vitae
1
0
Fork 0
Code

Add cover letter template and relevant styles 

- Moved auto margins to `<body>`
- Added indentation for multi-paragraph blocks
- Removed list bullets in page header

I've got to make a digital version of my new signature soon; I'm not a
big fan of the one included here.
main
Ainsley Ellis 2025-06-01 22:59:30 -04:00
parent d8b3724c8c
commit 80754fd617
4 changed files with 79 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
assets/css/all.css
View File

@ -40,6 +40,7 @@ address>ul {
margin: 0;
padding: 0;
display: inline-block;
list-style: none;
}
address> :last-child {
@ -60,16 +61,29 @@ article+article {
margin-top: 1em;
}
.letter main header {
margin-block-end: 1.5em;
margin-bottom: 1.5em;
}
header ~ p:first-of-type {
text-indent: 0;
}
header ~ p {
text-indent: 2em;
}
article>article {
margin-block-start: 0.5em;
margin-top: 0.5em;
}
article header {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5em;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5em;
}
article header p {
@ -95,8 +109,8 @@ dd {
}
#skills h3 {
margin-block-start: 0.25em;
margin-top: 0.25em;
margin-block-start: 0.25em;
margin-top: 0.25em;
}
#skills ul {
@ -118,5 +132,23 @@ margin-top: 0.25em;
}
footer {
text-align: center;
text-align: center;
}
footer:has(#signature) {
margin-block-start: 1.5em;
margin-top: 1.5em;
text-align: end;
}
#signature {
margin-block-end: -1.5rem;
margin-bottom: -1.5rem;
max-width: 15em;
}
@media (prefers-color-scheme: dark) {
#signature {
filter: invert();
}
}

7
assets/css/screen.css
View File

@ -1,8 +1,5 @@
body {
margin: 0 auto;
padding: 1em;
}
main {
margin: 0 auto;
max-width: 50em;
max-width: 50em;
}

1
assets/signature.svg Executable file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 5.8 KiB

37
templates/letter.xsl Normal file
View File

@ -0,0 +1,37 @@
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes" standalone="yes" doctype-system="about:legacy-compat" />
<xsl:param name="company" select="'ACME Corporation'"/>
<xsl:param name="date" select="'01 January 1970'"/>
<xsl:param name="title">Ainsley Ellis: <xsl:value-of select="$company"/> Letter</xsl:param>
<xsl:template match="/text" data-xmlns="http://www.w3.org/1999/xhtml">
<html lang="en" dir="ltr">
<!-- The Yesterweb is dead, long live the Yesterweb! -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<title><xsl:value-of select="$title"/></title>
<link rel="stylesheet" href="../assets/css/all.css" />
<link rel="stylesheet" href="../assets/css/screen.css" media="screen" />
<link rel="stylesheet" href="../assets/css/print.css" media="print" />
</head>
<body class="letter">
<xsl:copy-of select="document('./fragments/header.xml')"/>
<hr />
<main id="main">
<header>
<p><time><xsl:value-of select="$date"/></time></p>
<p>Dear <xsl:value-of select="$company"/> Hiring Team,</p>
</header>
<xsl:copy-of select="./node()" />
<footer>
<p>Sincerely,</p>
<img id="signature" src="data:image/svg+xml;charset=utf-8;base64,{$signature}" alt="Ainsley Ellis signature" />
<p>Ainsley Ellis</p>
</footer>
</main>
</body>
</html>
</xsl:template>
</xsl:stylesheet>