fix ADDR bug

2026-05-01 17:16:22 +02:00
parent 1e1d862688
commit 5d529cd035
6 changed files with 160 additions and 11 deletions
@@ -0,0 +1,146 @@
+<div class="body">
+  <style>
+    * {
+      box-sizing: border-box;
+      --padding: 2mm;
+      --paperwidth: 98mm;
+      --paperheight: 62mm;
+      --contentwidth: 90mm;
+      --contentheight: 54mm;
+      --fontsize: 8pt;
+      --logoheight: 2cm;
+    }
+
+    div {
+      border: 1px solid red;
+    }
+
+    .body {
+      padding: 1cm;
+      width: 100%;
+      font-size: var(--fontsize);
+      display: flex;
+      justify-content: center;
+      border: none;
+    }
+
+    .paper {
+      width: var(--paperwidth);
+      height: var(--paperheight);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .content {
+      width: var(--contentwidth);
+      height: var(--contentheight);
+      display: grid;
+      grid-template-rows: auto 1fr;
+    }
+
+    header {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-rows: 1fr 1fr;
+      grid-template-areas: "logo name" "logo company";
+      gap: var(--padding);
+      align-items: center;
+      align-content: center;
+      padding-bottom: var(--padding);
+      border-bottom: 1mm solid black;
+      margin-bottom: var(--padding);
+    }
+
+    header .logo {
+      grid-area: logo;
+      height: var(--logoheight);
+      width: auto;
+    }
+
+    header .name {
+      grid-area: name;
+      text-align: right;
+      align-self: end;
+      font-size: larger;
+    }
+
+    header .company {
+      grid-area: company;
+      text-align: right;
+      align-self: start;
+      font-size: larger;
+    }
+
+    main {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-rows: 1fr auto;
+      grid-template-areas: "qrcode text" "pgpkey pgpkey";
+      column-gap: var(--padding);
+      row-gap: var(--padding);
+    }
+
+    main .qrcode {
+      grid-area: qrcode;
+      aspect-ratio: 1 / 1;
+      height: 100%;
+    }
+
+    main .text {
+      grid-area: text;
+      display: grid;
+      grid-template-columns: auto 1fr;
+      grid-template-rows: auto 1fr;
+      grid-template-areas: "address-prefix address" "info-prefix info";
+      gap: var(--padding);
+      align-items: center;
+    }
+
+    main .text .address-prefix {
+      grid-area: address-prefix;
+      text-align: left;
+    }
+
+    main .text .address {
+      grid-area: address;
+      text-align: right;
+    }
+
+    main .text .info-prefix {
+      grid-area: info-prefix;
+      text-align: left;
+    }
+
+    main .text .info {
+      grid-area: info;
+      text-align: right;
+    }
+
+    main .pgpkey {
+      grid-area: pgpkey;
+      text-align: center;
+    }
+  </style>
+  <div class="paper">
+    <div class="content">
+      <header>
+        <div class="logo">
+          <img src="marc.png" alt="Marc" />
+        </div>
+        <div class="name">Name</div>
+        <div class="company">Company</div>
+      </header>
+      <main>
+        <div class="qrcode">QR</div>
+        <div class="text">
+          <div class="address-prefix">📍</div>
+          <div class="address">address line 1<br />address line 2</div>
+          <div class="info-prefix">🖁 tel:<br />✉ mailto:<br />⌂ https://</div>
+          <div class="info">+41 76 123 45 67<br />email@example.com<br />website.com</div>
+        </div>
+        <div class="pgpkey">pgp</div>
+      </main>
+    </div>
+  </div>
+</div>