RezHackXYZ/classroomstuff
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added nav

Browse source
This commit is contained in:
RezHackXYZ 2025-05-31 08:38:04 +05:30
parent 8584aa665a
commit 0e75609668
3 changed files with 46 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/routes/+layout.svelte
View file

@ -1,4 +1,5 @@
<script>
import Nav from "./nav.svelte";
import "./tailwind.css";
import { Toaster } from "svelte-5-french-toast";
@ -6,4 +7,16 @@
</script>
<Toaster />
<div class="h-full font-[Sour_Gummy]">{@render children()}</div>
<div class="h-full">
<!--
will be used for the nav bar later as i asked my friend to
make a design for it and the whole app so ill make it
functional once he gives me the design
<div class="m-3 flex w-[calc(100%-1.5rem)] items-center justify-between rounded border-2 p-1">
<Nav />
</div>
-->
{@render children()}
</div>

13
src/routes/nav.svelte Normal file
View file

@ -0,0 +1,13 @@
<button class="btn compact dull text-4xl">
<img
src="https://hc-cdn.hel1.your-objectstorage.com/s/v3/4a82e0c815624c7786ca2a5addbcc74487da8940_group_8__2_.svg"
class="h-12"
alt=""
/>Go back
<i class="nf nf-md-keyboard_backspace"></i>
</button>
<div>
<button class="btn compact dull circular text-4xl" aria-label="Settings">
<i class="nf nf-seti-config"></i>
</button>
</div>

23
src/routes/tailwind.css
View file

@ -3,11 +3,26 @@
@import "tailwindcss";
:root {
@apply bg-gray-950 text-white;
@apply bg-gray-950 font-[Sour_Gummy] text-white;
}
.btn {
@apply cursor-pointer rounded border-2 border-white bg-gray-600 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:-rotate-5 hover:bg-gray-500 hover:shadow-lg;
@apply flex cursor-pointer items-center gap-1 rounded border-2 border-white bg-gray-600 px-4 py-2 font-bold text-white transition-all hover:scale-105 hover:bg-gray-500 hover:shadow-lg;
&.compact {
@apply px-1 py-0.5;
}
&.circular {
@apply rounded-full;
&.compact {
@apply px-0.75 py-0.75;
}
}
&.dull {
@apply border-gray-700 bg-transparent text-gray-700 hover:bg-gray-700 hover:text-white;
}
&.green {
@apply bg-green-600 hover:bg-green-500;
@ -15,5 +30,5 @@
}
.card {
@apply shadow-[4px_4px_0px_0px_white] hover:-translate-0.5 hover:shadow-[6px_6px_0px_0px_white] active:translate-0.5 active:shadow-[2px_2px_0px_0px_white] cursor-pointer border-2 border-gray-700 bg-gray-800 p-4 rounded transition-all;
}
@apply cursor-pointer rounded border-2 border-gray-700 bg-gray-800 p-4 shadow-[4px_4px_0px_0px_white] transition-all hover:-translate-0.5 hover:shadow-[6px_6px_0px_0px_white] active:translate-0.5 active:shadow-[2px_2px_0px_0px_white];
}