QR container? idk
All checks were successful
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Successful in 20s

This commit is contained in:
MagicBOTAlex 2025-06-16 12:00:32 +08:00
parent 3cf07d87b5
commit 01cd45c1ae
3 changed files with 44 additions and 3 deletions

View file

@ -4,11 +4,10 @@
<div class="container">
<div>LinkedIn</div>
<span class="qrcode">{@html QRCode}</span>
<div class="qrcode corner-border-container p-4">{@html QRCode}</div>
</div>
<style lang="scss">
.qrcode {
transform: scale(0.9);
}
@ -21,4 +20,4 @@
font-size: 7.5mm;
}
}
</style>
</style>

View file

@ -1,4 +1,7 @@
<script lang="ts">
// Shared CSS
import "./shared.css";
// Left side
import NameAndImage from "../CompsRev3/NameAndImage.svelte";
import ShortProfile from "../CompsRev3/ShortProfile.svelte";
@ -134,6 +137,26 @@
--right-text-color: #333333;
}
.corner-border-container {
background-color: var(--left-grid-bg-color);
background-image:
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
background-size:
30px 4px, /* top-left horizontal */
4px 30px, /* top-left vertical */
30px 4px, /* bottom-right horizontal */
4px 30px; /* bottom-right vertical */
background-repeat: no-repeat;
background-position:
top left,
top left,
bottom right,
bottom right;
}
.bg-grid-cv {
background:
linear-gradient(-90deg, rgba(255, 255, 255, var(--left-grid-opacity)) 1px, transparent 1px),

View file

@ -0,0 +1,19 @@
.corner-border-container {
background-color: var(--left-grid-bg-color);
background-image:
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color)),
linear-gradient(var(--left-decor-line-color), var(--left-decor-line-color));
background-size:
30px 4px,
4px 30px,
30px 4px,
4px 30px;
background-repeat: no-repeat;
background-position:
top left,
top left,
bottom right,
bottom right;
}