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

feat: full layout & refactoring

Browse source
This commit is contained in:
EETagent 2022-11-17 22:54:22 +01:00
parent 9dd34d810f
commit af38e3cb1d
4 changed files with 62 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
frontend/src/lib/components/layout/FullLayout.svelte Normal file
View file

@ -0,0 +1,52 @@
<script lang="ts">
import backgroundImage from '$lib/assets/background.jpg';
import logo from '$lib/assets/logo/ssps.svg';
import DarkModeToggle from '../DarkModeToggle.svelte';
</script>
<div class="bg">
<div class="bgOverlay">
<img class="logo" src={logo} alt="SSPŠ logo" />
<div class="darkModeToggle">
<DarkModeToggle backgroundColor="dark" />
</div>
</div>
<div style={`background-image: url(${backgroundImage});`} class="bgImage" />
</div>
<div class="view">
<div class="content">
<slot />
</div>
</div>
<style>
.bgImage {
@apply -z-20;
@apply absolute min-w-screen min-w-full min-h-screen;
@apply bg-no-repeat;
background-position: 55%;
}
.bgOverlay {
@apply -z-10 absolute min-w-screen min-h-screen;
background: linear-gradient(45deg, rgba(18, 48, 75, 1), rgba(119, 173, 224, 0.443));
@apply bg-cover;
}
.bgOverlay .logo {
@apply absolute top-0 left-0;
@apply hidden md:inline-block;
@apply h-auto max-w-56;
@apply p-7;
}
.bgOverlay .darkModeToggle {
@apply absolute top-0 right-0;
@apply hidden md:inline-block;
@apply p-7;
}
.view {
@apply z-10 overflow-scroll;
@apply w-screen h-screen top-0 right-0 bottom-0 left-0 m-auto;
}
.content {
@apply w-full h-full;
}
</style>

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

@ -32,8 +32,10 @@
@apply bg-cover; @apply bg-cover;
} }
.bgOverlay .logo { .bgOverlay .logo {
@apply hidden md:block; @apply absolute top-0 left-0;
@apply h-auto max-w-56 p-7; @apply hidden md:inline-block;
@apply h-auto max-w-56;
@apply p-7;
} }
.darkModeToggle { .darkModeToggle {
@apply absolute right-0; @apply absolute right-0;

15
frontend/src/routes/login/+page.svelte
View file

@ -10,22 +10,17 @@
> >
<img class="object-cover" src={lev} alt="" /> <img class="object-cover" src={lev} alt="" />
</div> </div>
<h1 class="mt-6 text-4xl text-[#406280] font-semibold">Přihlášení</h1> <h1 class="mt-8 text-4xl text-sspsBlue font-semibold">Přihlášení</h1>
<p class="mt-6 font-light text-[#e6e6e6] text-center"> <p class="mt-8 font-light text-sspsGray text-center">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.<br /> Fusce suscipit libero eget elit.
</p> </p>
<input <input
class="mt-6 w-3/5 shadow-lg p-3 rounded-lg text-xl" class="bg-[#f8fafb] mt-8 w-3/5 shadow-lg p-3 rounded-lg text-xl outline-none border transition-colors duration-300 hover:border-sspsBlue border-2"
type="text"
placeholder="Evidenční číslo přihlášky"
/>
<input
class="mt-6 w-3/5 shadow-lg p-3 rounded-lg text-xl border border-[#406280] border-2"
type="password" type="password"
value="............" placeholder="Ev. číslo"
/> />
<input <input
class="mt-6 w-3/5 p-3 rounded-lg font-semibold text-xl bg-[#406280] text-white" class="mt-8 w-3/5 p-3 rounded-lg font-semibold text-xl transition-colors duration-300 bg-sspsBlue hover:bg-sspsBlueDark text-white"
type="submit" type="submit"
value="Odeslat" value="Odeslat"
/> />

1
frontend/windi.config.ts
View file

@ -5,6 +5,7 @@ export default defineConfig({
extend: { extend: {
colors: { colors: {
"sspsBlue": '#406280', "sspsBlue": '#406280',
"sspsBlueDark": '#243a55',
"sspsGray": "#e6e6e6", "sspsGray": "#e6e6e6",
} }
} }