dan/Portfolio
1
0
Fork 0
mirror of https://github.com/danbulant/Portfolio synced 2026-06-07 16:50:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: enable configuration for split layout

Browse source
This commit is contained in:
EETagent 2022-11-25 14:45:51 +01:00
parent c399dd210b
commit bbf1804161
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/lib/components/layout/SplitLayout.svelte
View file

@ -1,14 +1,17 @@
<script lang="ts"> <script lang="ts">
import backgroundImage from '$lib/assets/background.jpg'; import defaultBg from '$lib/assets/background.jpg';
import logo from '$lib/assets/logo/ssps.svg'; import logo from '$lib/assets/logo/ssps.svg';
import DarkModeToggle from '../DarkModeToggle.svelte'; import DarkModeToggle from '../DarkModeToggle.svelte';
export let backgroundImage: string = defaultBg;
export let backgroundPosition: string = "55%";
</script> </script>
<div class="bg"> <div class="bg">
<div class="bgOverlay"> <div class="bgOverlay">
<img class="logo" src={logo} alt="SSPŠ logo" /> <img class="logo" src={logo} alt="SSPŠ logo" />
</div> </div>
<div style={`background-image: url(${backgroundImage});`} class="bgImage" /> <div style={`background-image: url(${backgroundImage}); background-position: ${backgroundPosition}`} class="bgImage" />
</div> </div>
<div class="view"> <div class="view">
<div class="darkModeToggle"> <div class="darkModeToggle">
@ -24,7 +27,6 @@
@apply -z-20; @apply -z-20;
@apply absolute min-w-screen md:min-w-[50vw] min-h-screen; @apply absolute min-w-screen md:min-w-[50vw] min-h-screen;
@apply bg-no-repeat; @apply bg-no-repeat;
background-position: 55%;
} }
.bgOverlay { .bgOverlay {
@apply -z-10 absolute min-w-screen md:min-w-[50vw] min-h-screen; @apply -z-10 absolute min-w-screen md:min-w-[50vw] min-h-screen;