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
parent
d8b3724c8c
commit
80754fd617
|
|
@ -40,6 +40,7 @@ address>ul {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
address> :last-child {
|
address> :last-child {
|
||||||
|
|
@ -60,16 +61,29 @@ article+article {
|
||||||
margin-top: 1em;
|
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 {
|
article>article {
|
||||||
margin-block-start: 0.5em;
|
margin-block-start: 0.5em;
|
||||||
margin-top: 0.5em;
|
margin-top: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
article header {
|
article header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 0.5em;
|
gap: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
article header p {
|
article header p {
|
||||||
|
|
@ -95,8 +109,8 @@ dd {
|
||||||
}
|
}
|
||||||
|
|
||||||
#skills h3 {
|
#skills h3 {
|
||||||
margin-block-start: 0.25em;
|
margin-block-start: 0.25em;
|
||||||
margin-top: 0.25em;
|
margin-top: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#skills ul {
|
#skills ul {
|
||||||
|
|
@ -118,5 +132,23 @@ margin-top: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,5 @@
|
||||||
body {
|
body {
|
||||||
|
margin: 0 auto;
|
||||||
padding: 1em;
|
padding: 1em;
|
||||||
}
|
max-width: 50em;
|
||||||
|
|
||||||
main {
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 50em;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.8 KiB |
|
|
@ -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>
|
||||||
Loading…
Reference in New Issue