Make all assets work

RTFM.

lib/mse25_web.ex

@@ -17,7 +17,8 @@ defmodule Mse25Web do
   those modules here.
   """
 
-  def static_paths, do: ~w(assets fonts images favicon.ico robots.txt)
+  def static_paths,
+    do: ~w(assets fonts images bl favicon.ico robots.txt aey.vcf app.css cv)
 
   def router do
     quote do

lib/mse25_web/controllers/page_html/home.html.heex

@@ -107,7 +107,7 @@
     </li>
     <li class="">
       <span></span>
-      <a clasS="feed-link" href={~p"/andersy.vcf"}>
+      <a clasS="feed-link" href={~p"/aey.vcf"}>
         Kontakt
       </a>
       <small>.vcf</small>
@@ -118,7 +118,7 @@
     <button>Sök</button>
   </form>
   <ul class="profiles">
-    <li><a href={~p"/andersy.vcf"}>CV</a></li>
+    <li><a href="/cv/anders-englof-ytterstrom.html">CV</a></li>
     <li><a href="https://github.com/madr">Github</a></li>
     <li>
       <a href="https://www.discogs.com/user/madrse/collection?limit=250&sort=artist&sort_order=asc&layout=big">

priv/static/aey.vcf

@@ -1,12 +1,12 @@
 BEGIN:VCARD
 VERSION:4.0
-N:Ytterström;Anders;;Mr.;
+N:Englöf Ytterström;Anders;;Mr.;
-FN:Anders Ytterström
+FN:Anders Englöf Ytterström
-ORG:Kundo
+ORG:PlaymakerAI
 TITLE:Webbutvecklare/hårdrockare
 PHOTO;MEDIATYPE=image/gif:https://madr.se/mugshot.jpg
 TEL;TYPE=home,voice;VALUE=uri:tel:+46-70-216-9645
 EMAIL:yttan@fastmail.se
 REV:20191006T195243Z
 x-qq:21588891
-END:VCARD
+END:VCARD

priv/static/cv/cv.css

@@ -0,0 +1,266 @@
+html {
+    font:
+        normal small/1.5 apple-system,
+        system-ui,
+        BlinkMacSystemFont,
+        Segoe UI,
+        Roboto,
+        Helvetica Neue,
+        Arial,
+        sans-serif;
+    background-color: var(--bg-color, #fff);
+    color: var(--bg-color, #444);
+}
+body {
+    font-size: clamp(0.9em, 1.5vw, 1.4em);
+}
+ul {
+    margin: 0;
+    padding-left: 1em;
+}
+h1 {
+    margin-bottom: 0;
+    font-size: 3em;
+    line-height: 1;
+}
+h2 {
+    border-bottom: 0.3em solid #e3e3e3;
+    padding-bottom: 0.25em;
+    margin-bottom: 1em;
+}
+img {
+    display: block;
+    border-radius: 50%;
+    margin: 0 auto;
+}
+figure {
+    margin: 0;
+}
+a {
+    color: var(--bg-color, #444);
+    transition:
+        background-color 0.3s ease-out,
+        border-bottom-color 0.3s ease-out;
+}
+p:first-child {
+    margin-top: 0;
+}
+a:link,
+a:visited {
+    display: inline-block;
+    text-decoration: none;
+    border-bottom: 1px solid #bbb;
+}
+a:hover,
+a:focus {
+    background: rgba(0, 0, 0, 0.05);
+    border-bottom-color: #000;
+    color: #000;
+}
+a:active {
+    transform: translate(3px, 3px);
+}
+[href^="tel"]::before {
+    content: "📞 ";
+}
+[href^="mailto"]::before {
+    content: "✉️ ";
+}
+[href^="https://github.com"]::before
+{
+    content: "🐙 ";
+}
+[href^="https://madr"]::before
+{
+    content: "🏠 ";
+}
+[href$="pdf"] {
+    font-size: 1.1em;
+    padding: 0.3em;
+}
+[href$="pdf"]::before {
+    content: "📑 ";
+}
+[href$="pdf"]:hover::before,
+[href$="pdf"]:focus::before {
+    background-color: rgba(0, 255, 0, 0.2);
+}
+[role="doc-subtitle"] {
+    font-size: 1.25em;
+    color: #666;
+}
+@media (min-width: 40em) {
+    .h-aside {
+        border-bottom: 0;
+        font-size: 1.4em;
+        margin-bottom: 0;
+        margin-top: 1.95em;
+    }
+}
+.contact {
+    margin: 1em 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2em;
+}
+@media (min-width: 40em) {
+    .contact {
+        margin: 0.5em 0 0;
+        grid-template-columns: repeat(4, 1fr);
+        gap: 2em;
+    }
+}
+.contact > dd {
+    margin-left: 0;
+}
+.contact > dt {
+    position: absolute;
+    left: -9999em;
+}
+.skillset {
+    display: grid;
+    gap: 0.5em 1em;
+    grid-template-columns: auto 1fr;
+}
+.skillset > dt {
+    font-weight: bold;
+}
+.skillset > dd {
+    margin-left: 0;
+}
+/*
+Left for good measure, could have been gold if
+the upcoming Container queries was a thing.
+
+@media (min-width: 80em) {
+  .skillset {
+    grid-template-columns: 1fr;
+  }
+  .skillset > dt {
+    transform: translateY(0.2em);
+  }
+}
+*/
+.resume {
+    max-width: 70em;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-areas:
+        "name"
+        "about"
+        "skills"
+        "work"
+        "education"
+        "projects"
+        "courses"
+        "personal";
+    gap: 0;
+}
+@media (min-width: 40em) {
+    .resume {
+        grid-template-columns: 2fr 1fr;
+        grid-template-areas:
+            "name name"
+            "skills about"
+            "work work"
+            "education courses"
+            "projects personal";
+        gap: 2em;
+    }
+}
+.name {
+    grid-area: name;
+    display: flex;
+    gap: 1em;
+    place-items: center;
+    text-align: center;
+    flex-direction: column;
+}
+.photo {
+    grid-area: photo;
+}
+.work {
+    grid-area: work;
+}
+.courses {
+    grid-area: courses;
+}
+.personal {
+    grid-area: personal;
+}
+.about {
+    grid-area: about;
+    background: #f1f1f1;
+    border-radius: 0.2em;
+    padding: 1em;
+    color: #111;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    align-items: center;
+}
+.education {
+    grid-area: education;
+}
+.projects {
+    grid-area: projects;
+}
+.skills {
+    grid-area: skills;
+}
+
+.event {
+    display: grid;
+    gap: 0.5em 0.5em;
+    margin: 2em 0;
+    line-height: 1;
+}
+
+.event--aside {
+    margin: 1em 0;
+}
+
+.event__title {
+    margin: 0;
+}
+.event__position {
+    font-variant: small-caps;
+}
+.event__content {
+    line-height: 1.5;
+    padding-top: 0.5em;
+    grid-column: 1 / 3;
+}
+.event__aside {
+    text-align: right;
+    font-style: italic;
+}
+
+@page {
+    padding: 2cm 0;
+    margin: 0;
+    size: A4 portrait;
+}
+
+@media print {
+    body {
+        padding: 0;
+    }
+
+    [href$="pdf"] {
+        display: none;
+        visibility: hidden;
+    }
+
+    a {
+        border: none !important;
+        color: #000 !important;
+    }
+
+    .education,
+    .projects,
+    .work {
+        page-break-before: always;
+    }
+}