Add instruction to print and hr for separation

2 files changed, 34 insertions, 28 deletions

diff --git a/index.html b/index.html
index 1fceeca..e28a7e1 100644
--- a/index.html
+++ b/index.html
@@ -18,13 +18,13 @@
           <h2>Basic info</h2>
           <dl class="p-contact h-card">
             <dt>Position</dt><dd>Back-end developer</dd>
-            <dt>E-Mail</dt><dd><a class="email no-print" href="mailto:huyngo@disroot.org">huyngo@disroot.org</a></dd>
+            <dt>E-Mail</dt><dd><a class="email link-no-print" href="mailto:huyngo@disroot.org">huyngo@disroot.org</a></dd>
             <dt>Location</dt><dd>Hà Nội, Việt Nam<br>(prefer remote work)</dd>
             <dt>Forges</dt>
-              <dd><a class="no-print verbatim-print" rel="me" href="https://git.sr.ht/~huyngo">https://git.sr.ht/~huyngo</a></dd>
-              <dd><a class="no-print verbatim-print" rel="me" href="https://github.com/Huy-Ngo">https://github.com/Huy-Ngo</a></dd>
+              <dd><a class="link-no-print verbatim-print" rel="me" href="https://git.sr.ht/~huyngo">https://git.sr.ht/~huyngo</a></dd>
+              <dd><a class="link-no-print verbatim-print" rel="me" href="https://github.com/Huy-Ngo">https://github.com/Huy-Ngo</a></dd>
             <dt>Personal website</dt>
-              <dd><a class="no-print verbatim-print" rel="me" href="https://xrvs.net/">https://xrvs.net/</a></dd>
+              <dd><a class="link-no-print verbatim-print" rel="me" href="https://xrvs.net/">https://xrvs.net/</a></dd>
           </dl>
           <h2 id="certifications">Certifications</h2>
           <ul>
@@ -40,21 +40,21 @@
           <h2 id="tech">Technologies</h2>
           <dl class="skills">
             <dt>Programming Languages</dt>
-              <dd>Python</dd>
-              <dd>Bash</dd>
-              <dd>JavaScript</dd>
-              <dd>Go</dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://www.python.org/">Python</a></dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://www.gnu.org/software/bash/">Bash</a></dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://www.ecma-international.org/publications-and-standards/standards/ecma-262/">JavaScript</a></dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://go.dev/">Go</a></dd>
             <dt>Frameworks</dt>
-              <dd>Django</dd>
-              <dd>Flask</dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://www.djangoproject.com/">Django</a></dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://flask.palletsprojects.com/">Flask</a></dd>
             <dt>Systems</dt>
-              <dd>NixOS</dd>
-              <dd>Alpine Linux</dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://nixos.org/">NixOS</a></dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://alpinelinux.org/">Alpine Linux</a></dd>
             <dt>Databases</dt>
-              <dd>MariaDB</dd>
-              <dd>SQLite</dd>
-              <dd>RethinkDB</dd>
-              <dd>Redis</dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://mariadb.org/">MariaDB</a></dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://www.sqlite.org/">SQLite</a></dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://rethinkdb.com/">RethinkDB</a></dd>
+              <dd><a class="link-no-print" rel="external nofollow" href="https://redis.io/">Redis</a></dd>
           </dl>
         </div>
         <div id="right">
@@ -70,16 +70,16 @@
           <ul>
             <li class="h-event">
               <time class="dt-start">2021-04</time> – <time class="dt-end">2021-07</time>:
-              <span class="event-summary">Intern at <a class="no-print" rel="external nofollow" href="https://bizflycloud.vn/">Bizfly Cloud</a></span>
+              <span class="event-summary">Intern at <a class="link-no-print" rel="external nofollow" href="https://bizflycloud.vn/">Bizfly Cloud</a></span>
               <ul class="event-detail">
                 <li>Responsibilities: research and development</li>
-                <li>Domain: working on web mail service and related modules</li>
+                <li>Domain: web mail service and related modules</li>
                 <li>Technologies: Python, Flask framework, Elasticsearch</li>
               </ul>
             </li>
             <li class="h-event">
               <time class="dt-start">2021-11</time> – <time class="dt-end">present</time>:
-              <span class="event-summary">Software Engineer at <a class="no-print" rel="external nofollow" href="https://cmcglobal.com.vn/">CMC Global</a></span>
+              <span class="event-summary">Software Engineer at <a class="link-no-print" rel="external nofollow" href="https://cmcglobal.com.vn/">CMC Global</a></span>
               <ul class="event-detail">
                 <li>Responsibilities: requirements clarification, backend implementation, basic data retrieval, mentoring and training new members</li>
                 <li>Domain: data-driven software</li>
@@ -96,7 +96,7 @@
                 Singly-versioned Python built distributions backed by IPFS for security and reproducibility.
               </p>
               <ul class="event-detail">
-                <li>Responsibilities: packaging software</li>
+                <li>Responsibilities: packaging software and release</li>
                 <li>Technologies: Python, <abbr>IPFS</abbr>, shell scripts</li>
               </ul>
             </li>
@@ -107,8 +107,8 @@
                 An experimental kanban-based project management system in academic context
               </p>
               <ul class="event-detail">
-                <li>Responsibilities: system design, backend implementation, packaging</li>
-                <li>Technologies: Python, Quart framework, Hypercorn, nginx, systemd</li>
+                <li>Responsibilities: system design, backend implementation, testing, packaging</li>
+                <li>Technologies: Python, Quart framework, Hypercorn, systemd</li>
               </ul>
             </li>
             <li class="h-event">
@@ -128,10 +128,17 @@
         </div>
       </div>
     </main>
+    <hr class="no-print">
     <footer>
-      Copyright 2022 Ngô Ngọc Đức Huy, licensed <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA 4.0</a>;
-      inspired by <a href="https://lanodan.eu">Haelwenn (lanodan) Monnier</a>'s résumé;
-      This is also done to work well in paper/PDF export.
+      <p>
+        Copyright 2022 Ngô Ngọc Đức Huy, licensed <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA 4.0</a>.
+        Inspired by <a href="https://lanodan.eu">Haelwenn (lanodan) Monnier's résumé</a>.
+      </p>
+      <p>
+        This is also done to work well in paper/PDF export.
+        See <a rel="external" href="https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox">how to print or save this page as PDF on Firefox</a> and on
+        <a rel="external nofollow" href="https://support.google.com/chrome/answer/1069693">Chromium-based browsers</a>.
+      </p>
     </footer>
   </body>
 </html>
diff --git a/style.css b/style.css
index 0d5c6f8..dd14358 100644
--- a/style.css
+++ b/style.css
@@ -69,7 +69,6 @@ li p {
 
 .skills dd {
 	display: inline-block;
-	border-bottom: 1px dashed gray;
 }
 
 @media screen {
@@ -80,11 +79,11 @@ li p {
 }
 
 @media print {
-	nav, footer { display: none }
+	nav, footer, .no-print { display: none }
 	dl, p, li {
 		font-size: 0.9em;
 	}
-	a:not(.no-print)::after { content: " (" attr(href) ")"; }
+	a:not(.link-no-print)::after { content: " (" attr(href) ")"; }
 	.verbatim-print { font-family: monospace; }
 	a::after {
 		font-family: monospace;