john/resume
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

shtyles

Browse source
This commit is contained in:
john 2024-05-05 13:42:06 +02:00
parent d956d4e341
commit 99e8ef922a
2 changed files with 24 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

12
cv.html
View file

@ -7,7 +7,7 @@
</head> </head>
<body> <body>
<header> <header>
<!-- <img class="pfp" alt="an image of john" src="assets/pfp.jpeg"/>--> <img class="pfp" alt="an image of john" src="assets/pfp.jpeg"/>
<div> <div>
<h1>John Morris</h1> <h1>John Morris</h1>
<p>Software Developer</p> <p>Software Developer</p>
@ -166,7 +166,7 @@
</li> </li>
</menu> </menu>
<aside> <aside>
<dl id=details class="details"> <dl id=details class="icon-list">
<dt> <dt>
<img <img
class="icon" class="icon"
@ -189,7 +189,9 @@
<dt><img class="icon" alt="email" aria-description="email address" <dt><img class="icon" alt="email" aria-description="email address"
src="assets/icon-email.svg"/></dt> src="assets/icon-email.svg"/></dt>
<dd><a href="mailto:me@johnmorr.is">me@johnmorr.is</a></dd> <dd>
<a href="mailto:me@johnmorr.is?subject=Re:+Your+application&body=Hey+John,%0A%0ANice+resume+%E2%98%BA%EF%B8%8F.%0AWe'd+love+to+hire+you!">me@johnmorr.is</a>
</dd>
</dl> </dl>
<section id="skills"> <section id="skills">
@ -240,11 +242,11 @@
const year = now.getFullYear() const year = now.getFullYear()
const month = now.getMonth() + 1 const month = now.getMonth() + 1
const day = now.getDate() const day = now.getDate()
document.title=`John Morris CV ${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`; document.title = `John Morris CV ${year}-${month.toString().padStart(2, "0")}-${day.toString().padStart(2, "0")}`;
}); });
window.addEventListener("afterprint", (event) => { window.addEventListener("afterprint", (event) => {
document.title=originalTitle; document.title = originalTitle;
}); });
</script> </script>
</html> </html>

29
styles/style.css
View file

@ -1,6 +1,7 @@
:root { :root {
--primary: #000; --primary: #000;
--primary-light: #8a8a8a; --primary-light: #8a8a8a;
--primary-lightest: #eaeaea
} }
html { html {
@ -77,8 +78,21 @@ main > *:not(:last-child) {
.pfp { .pfp {
border-radius: 50%; border-radius: 50%;
width: 5rem; width: 8rem;
height: 5rem; height: 8rem;
}
div:has(> .pfp) {
border-radius: 50%;
width: 6rem;
height: 6rem;
display: flex;
justify-content: center;
align-items: center;
border: 4px solid var(--primary-light);
} }
menu.links { menu.links {
@ -107,16 +121,7 @@ aside {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
dl.details { dl {
display: grid;
grid-template-columns: auto auto;
justify-content: start;
column-gap: 1rem;
row-gap: 0.25rem;
}
#human-languages dl {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;