5.1

README.md

@@ -162,12 +162,12 @@ Colors
 Troubleshooting
 ---------------
 
-> [!Caution]
+> [!CAUTION]
 > You need the dev script running before running the pdf build script
 
 ---
 
-> [!Warning]
+> [!WARNING]
 > `sh: line 1: chromium: command not found`
 >
 > [chromium](https://chromium.org) is used for pdf exports

package.json

@@ -12,6 +12,7 @@
     "dev": "vite dev",
     "build": "npm run build:private",
     "build:vite": "vite build",
+    "build:screenshot": "chromium --headless --disable-gpu --virtual-time-budget=2000 --screenshot --clip=0,0,780,790 http://localhost:5173",
     "build:sample": "chromium --headless --disable-gpu --no-pdf-header-footer --print-to-pdf=sample.pdf http://localhost:5173",
     "build:private": "chromium --headless --disable-gpu --no-pdf-header-footer --print-to-pdf=private.pdf http://localhost:5173/private",
     "deploy": "vite build --base=/jsonresume-theme-legacy",

src/components/basics.hbs

@@ -11,7 +11,7 @@
     <span>
       <img src="{{ image }}" width="200">
     </span>
-    <h2>{{ label }}</h2>
+    <h2>{{{ label }}}</h2>
   </div>
   {{> components/hr.hbs size="lg" }}
   <section class="section contacts">

src/components/interests.hbs

@@ -10,9 +10,7 @@
     <section id="interests">
       {{#each interests}}
         <div class="item">
-          {{#if name}}
-              <h4>{{ name }}</h4>
-          {{/if}}
+        <h3>{{ name }}</h3>
           {{#if keywords.length}}
             <ul class="keywords">
               {{#each keywords}}

src/components/skills.hbs

@@ -1,4 +1,4 @@
-{{> components/hr.hbs size="md" etc="do-break-after" }}
+{{> components/hr.hbs size="md" etc="auto-break-before auto-break-after" }}
 {{#if skills.length}}
   <section class="section">
     <header>

src/components/work.hbs

@@ -1,5 +1,5 @@
 {{#if work.length}}
-{{> components/hr.hbs size="md" etc="auto-break-before" }}
+{{> components/hr.hbs size="md" etc="do-break-before" }}
   <section class="section">
     <header class="">
       <h2 class="section-title">
@@ -45,6 +45,9 @@
               <a target="_blank" href="{{ url }}">{{ URL url }}</a>
             </span>
           {{/if}}
+          {{#if location}}
+            <em class="location">{{ location }}</em>
+          {{/if}}
           <div class="item">
             {{#if summary}}
               <div class="summary">{{ summary }}</div>

src/layouts/main.hbs

@@ -25,9 +25,9 @@
     <main>
       {{> components/dark.hbs }}
       {{> components/basics.hbs }}
+      {{> components/interests.hbs }}
       {{> components/skills.hbs }}
       {{> components/languages.hbs }}
-      {{> components/interests.hbs }}
       {{> components/work.hbs }}
       {{> components/projects.hbs }}
       {{> components/volunteer.hbs }}

src/styles/legacy.css

@@ -193,6 +193,13 @@ section.main-summary {
   }
 }
 
+section.work-item {
+  em.location {
+    position: absolute;
+    padding-top: 10px;
+    font-size: 12px;
+  }
+}
 section#skills {
   border-radius: var(--brm);
   display: grid;

src/styles/main.css

@@ -2,6 +2,39 @@
 @tailwind components;
 @tailwind utilities;
 
+@media print, (width: 780px) {
+  * { 
+    transition: none !important;
+    animation: none !important;
+  }
+  :root {
+    --bg: white !important;
+    --fg: var(--wk5) !important;
+    --f2: var(--wk6) !important;
+    --f3: var(--wk7) !important;
+    --f4: var(--wk8) !important;
+    --f5: var(--wk9) !important;
+    --ic: var(--c05) !important;
+    --ix: var(--c05) !important;
+    --iz: var(--c13) !important;
+  }
+  #scheme-toggle { display: none !important }
+  html { 
+    background: white !important;
+    color-scheme: light !important;
+    height: 100% !important;
+  }
+  body {
+    min-height: 100% !important;
+    margin: 0 !important;
+    background: white !important;
+  }
+  main {
+    min-height: 100% !important;
+    background: white !important;
+  }
+}
+
 :root {
   --brx: 18px;
   --brl: 14px;
@@ -268,13 +301,11 @@ section {
   }
 }
 
+#header h2 {
+  text-align: center;
+}
+
 @page {
   size: A4;
   margin: 0;
 }
-
-@media print {
-  #scheme-toggle {
-    display: none !important;
-  }
-}