28eea2d035
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
58 lines
1.7 KiB
Svelte
58 lines
1.7 KiB
Svelte
<script>
|
|
import QRCode from "$lib/zhen/cv-comps/LinkedInQrCode.svg?raw"
|
|
</script>
|
|
|
|
<div class="container">
|
|
<div>LinkedIn</div>
|
|
<div class="qrcode corner-border-container p-4">{@html QRCode}</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.corner-border-container {
|
|
--length: 20px;
|
|
--width: 4px;
|
|
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)),
|
|
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:
|
|
var(--length) var(--width),
|
|
var(--width) var(--length),
|
|
var(--length) var(--width),
|
|
var(--width) var(--length),
|
|
var(--length) var(--width),
|
|
var(--width) var(--length),
|
|
var(--length) var(--width),
|
|
var(--width) var(--length);
|
|
background-position:
|
|
top left,
|
|
top left,
|
|
top right,
|
|
top right,
|
|
bottom right,
|
|
bottom right,
|
|
bottom left,
|
|
bottom left;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
|
|
.qrcode {
|
|
transform: scale(0.9);
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
place-items: center;
|
|
|
|
& * {
|
|
font-size: 7.5mm;
|
|
}
|
|
}
|
|
</style>
|