Mid
/
bartindustries
1
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

mobile update

Browse Source
pull/2/head
Midnight 3 years ago
parent bf36621b69
commit 7d5c0c3dc2
9 changed files with 56 additions and 104 deletions
Show Stats Download Patch File Download Diff File

10
src/app.css
Unescape View File

@ -27,13 +27,15 @@
} }
.dark hr { .dark hr {
border-color: white; border: unset;
border-width: 2px; background-color: white;
height: 2px;
} }
hr { hr {
border-color: black; border: unset;
border-width: 2px; background-color: black;
height: 2px;
} }
#svelte { #svelte {

8
src/lib/footer/Social.svelte
Unescape View File

@ -11,10 +11,10 @@
href={url} href={url}
{title} {title}
target="_blank" target="_blank"
class="rounded-xl bg-opacity-10 bg-slate-400 hover:bg-blue-300 dark:hover:bg-blue-600 hover:scale-110 duration-150 shadow" class="rounded-xl bg-opacity-50 hover:bg-opacity-100 bg-slate-300 dark:bg-slate-800 hover:bg-blue-400 dark:hover:bg-blue-600 hover:scale-110 duration-150 shadow"
> >
<div class="aspect-square flex flex-col items-center justify-center p-5"> <div class="flex flex-col gap-1 items-center justify-center p-3 lg:p-5">
<span class="text-5xl ">{icon}</span> <span class="text-xl lg:text-5xl">{icon}</span>
<span class="text-gray-600 dark:text-gray-300 font-light text-base text-center">{text}</span> <span class="text-gray-700 dark:text-gray-300 font-light text-xs lg:text-base text-center">{text}</span>
</div> </div>
</a> </a>

53
src/lib/header/Button.svelte
Unescape View File

@ -1,53 +0,0 @@
<script>
import { page } from '$app/stores';
export let text;
export let url;
export let type;
export let disabled;
let classes;
initButton($page.url.pathname);
function initButton(givenUrl) {
let current;
classes = "h-full py-2 px-10 flex justify-center items-center uppercase group";
switch (type) {
case "title":
classes +=
" text-xl font-bold bg-amber-500 duration-300";
break;
default:
classes +=
" hover:bg-white hover:bg-opacity-20 font-bold text-lg duration-300";
break;
}
if (disabled) {
url = null;
classes += " cursor-not-allowed opacity-50 select-none";
}
if(url == "/") current = givenUrl == "/";
if(url != "/") current = givenUrl.includes(url);
if(current == true) {
classes += " text-white bg-white bg-opacity-10";
} else {
classes += " text-gray-200";
}
}
page.subscribe(value => {
initButton(value.url.pathname);
});
</script>
<a href={url} class={classes}>
<p class="transform duration-300 {!disabled ? "group-hover:scale-110" : ''}">
{text}
</p>
</a>

30
src/lib/header/Nav.svelte
Unescape View File

@ -2,14 +2,13 @@
// @ts-nocheck // @ts-nocheck
import ThemeSwitcher from '$lib/ThemeSwitcher.svelte'; import ThemeSwitcher from '$lib/ThemeSwitcher.svelte';
import Button from './Button.svelte'; import NavButton from './NavButton.svelte';
import Dropdown from './Dropdown.svelte'; import NavDropdown from './NavDropdown.svelte';
</script> </script>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="flex items-center"> <div class="flex items-center">
<a class="flex h-16 hover:bg-white hover:bg-opacity-20 duration-300" href="/"> <a class="flex h-16 hover:bg-white hover:bg-opacity-20 duration-300" href="/">
<!-- <Button url="/" text="<img src='/bart.png' />" type="title" /> -->
<img <img
src="/bart.png" src="/bart.png"
alt="Logo" alt="Logo"
@ -17,24 +16,25 @@
/> />
</a> </a>
<div class="hidden lg:flex h-16"> <div class="hidden lg:flex h-16">
<Button url="/" text="Home" /> <NavButton url="/" text="Home" />
<Button disabled="true" url="/blog" text="Blog" /> <NavButton disabled="true" url="/blog" text="Blog" />
<Button disabled="true" url="/portfolio" text="Portfolio" /> <NavButton disabled="true" url="/portfolio" text="Portfolio" />
<Button disabled="true" url="/esu" text="ESU" /> <NavButton disabled="true" url="/esu" text="ESU" />
<Button disabled="true" url="/furry" text="Furry" /> <NavButton disabled="true" url="/furry" text="Furry" />
</div> </div>
</div> </div>
<div class="hidden lg:flex h-16"> <div class="hidden lg:flex h-16">
<ThemeSwitcher /> <ThemeSwitcher />
</div> </div>
<div class="flex lg:hidden h-16"> <div class="flex lg:hidden h-16">
<Dropdown text="🍔"> <NavDropdown text="🍔">
<Button url="/" text="Home" /> <NavButton url="/" text="Home" />
<Button disabled="true" url="/blog" text="Blog" /> <NavButton disabled="true" url="/blog" text="Blog" />
<Button disabled="true" url="/portfolio" text="Portfolio" /> <NavButton disabled="true" url="/portfolio" text="Portfolio" />
<Button disabled="true" url="/esu" text="ESU" /> <NavButton disabled="true" url="/esu" text="ESU" />
<Button disabled="true" url="/furry" text="Furry" /> <NavButton disabled="true" url="/furry" text="Furry" />
<hr class="bg-white" />
<ThemeSwitcher /> <ThemeSwitcher />
</Dropdown> </NavDropdown>
</div> </div>
</div> </div>

21
src/lib/header/Dropdown.svelte → src/lib/header/NavDropdown.svelte
Unescape View File

@ -1,7 +1,10 @@
<script> <script>
import NavButton from "./NavButton.svelte";
export let text; export let text;
export let type; export let type;
let dropdown;
let classes = "h-full px-5 flex justify-center items-center"; let classes = "h-full px-5 flex justify-center items-center";
switch (type) { switch (type) {
@ -16,24 +19,24 @@
break; break;
} }
function openMenu() { function toggle() {
let dropdown = document.querySelector("#dropdown"); dropdown.classList.toggle("flex");
console.log(dropdown);
dropdown.classList.toggle("block");
dropdown.classList.toggle("hidden"); dropdown.classList.toggle("hidden");
console.log(dropdown);
} }
</script> </script>
<main class="relative"> <main>
<!-- <MenuIcon /> --> <button on:click={toggle} type="none" class={classes} id="trigger">
<button on:click={openMenu} type="none" class={classes} id="trigger">
{text} {text}
</button> </button>
<div <div
class="absolute w-screen right-0 bg-white dark:bg-black hidden z-50" class="fixed flex-col w-screen h-screen inset-0 bg-blue-600 hidden z-50"
id="dropdown" bind:this={dropdown}
> >
<NavButton text="Close Menu" on:click={toggle} />
<hr class="bg-white" />
<slot /> <slot />
</div> </div>
</main> </main>

0
src/lib/header/DropdownButton.svelte → src/lib/header/NavDropdownButton.svelte
Unescape View File

15
src/lib/home/Banner.svelte
Unescape View File

@ -61,6 +61,7 @@
const word = words[Math.floor(Math.random() * words.length)]; const word = words[Math.floor(Math.random() * words.length)];
let element = document.createElement('span'); let element = document.createElement('span');
element.innerHTML = word; element.innerHTML = word;
element.classList.add("text-9xl", "p-10");
list.appendChild(element); list.appendChild(element);
} }
@ -73,8 +74,9 @@
randomBannerPic = "/homepage/banner.png"; randomBannerPic = "/homepage/banner.png";
</script> </script>
<main class="flex gap-5 items-center pt-5 pb-60 justify-between px-6 lg:px-20 relative z-0 overflow-hidden"> <main class="flex flex-col lg:flex-row gap-5 items-center pt-5 pb-60 justify-between px-6 lg:px-20 relative z-0 overflow-hidden">
<div class="absolute inset-0 w-full h-full flex flex-col items-center gap-1 justify-center font-bold anim text-xs" id="lists"></div> <div class="absolute inset-0 w-full h-screen flex flex-col items-center gap-1 justify-center font-bold anim" id="lists">
</div>
<div class="container flex gap-5 items-center pt-5 pb-20 justify-between px-6 lg:px-20"> <div class="container flex gap-5 items-center pt-5 pb-20 justify-between px-6 lg:px-20">
<div class="hidden lg:block h-full w-1/2 z-10"> <div class="hidden lg:block h-full w-1/2 z-10">
@ -84,7 +86,7 @@
/> />
</div> </div>
<div class="flex flex-col gap-5 justify-center w-3/5 z-10"> <div class="flex flex-col gap-5 justify-center lg:w-3/5 z-10">
<span> <span>
<img src="/helloblue.png" alt="Hello!" class="h-20 popout" /> <img src="/helloblue.png" alt="Hello!" class="h-20 popout" />
</span> </span>
@ -121,19 +123,18 @@
.anim { .anim {
user-select: none; user-select: none;
opacity: 2%; opacity: 2%;
overflow: hidden;
animation: anim; animation: anim;
animation-duration: 120s; animation-duration: 200s;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
} }
@keyframes anim { @keyframes anim {
0% { 0% {
transform: scale(10) translate(100px, -100px) rotate(-45deg); transform: translate(100%, -100%) rotate(-30deg);
} }
100% { 100% {
transform: scale(10) translate(-100px, 100px) rotate(-45deg); transform: translate(-100%, 100%) rotate(-30deg);
} }
} }
.popout { .popout {

10
src/lib/home/Card.svelte
Unescape View File

@ -1,10 +1,10 @@
<script> <script>
export let buttonText; export let buttonText = "";
export let buttonRedirect = ""; export let buttonRedirect = "";
export let buttonHref; export let buttonHref = "";
export let disabled; export let disabled = false;
let classes = "z-10 flex flex-col group relative"; let classes = "z-10 flex flex-col group relative overflow-hidden";
if(disabled) { if(disabled) {
classes += " opacity-50"; classes += " opacity-50";
@ -31,6 +31,6 @@
{/if} {/if}
{#if disabled} {#if disabled}
<span class="absolute inset-0 flex justify-center text-center items-center text-white -rotate-45 font-bold text-6xl group-hover:-translate-y-1 duration-300 select-none">UNFINISHED PROJECT</span> <span class="absolute top-0 bottom-0 flex justify-center text-center items-center text-black dark:text-white -rotate-45 font-bold text-6xl group-hover:-translate-y-1 duration-300 select-none">UNFINISHED PROJECT</span>
{/if} {/if}
</div> </div>

13
src/routes/index.svelte
Unescape View File

@ -11,7 +11,7 @@
<main> <main>
<Banner /> <Banner />
<div class="relative h-80 -mt-80 overflow-hidden"> <div class="relative h-56 lg:h-80 -mt-80 overflow-hidden">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="absolute inset-0 h-96 w-full scale-x-150"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" class="absolute inset-0 h-96 w-full scale-x-150">
<path <path
class="block dark:hidden" class="block dark:hidden"
@ -43,7 +43,7 @@
<Card <Card
buttonHref="https://puppypride.social" buttonHref="https://puppypride.social"
buttonText="🌐 Visit Puppy Pride" buttonText="🌐 Visit Puppy Pride"
disabled="true" disabled={true}
> >
<h3 <h3
class="text-xl font-bold inline-flex items-center gap-3" class="text-xl font-bold inline-flex items-center gap-3"
@ -258,17 +258,16 @@
</svg> </svg>
<section <section
class="relative container px-5 lg:px-0 mb-20 flex flex-col lg:flex-row gap-10 h-full justify-center items-center" class="relative container overflow-hidden px-5 lg:px-0 mb-20 flex flex-col lg:flex-row gap-10 h-full justify-center items-center"
id="contact" id="contact"
> >
<div class="lg:w-1/3 z-10"> <div class="lg:w-1/3 z-10">
<Form /> <Form />
</div> </div>
<img src="/homepage/fullbody.png" class="lg:w-1/3 h-full z-10" alt="contact" /> <img src="/homepage/fullbody.png" class="lg:block hidden lg:w-1/3 h-full z-10" alt="contact" />
<div class="absolute inset-0 w-full h-full opacity-80 bg-contain bg-no-repeat bg-center block dark:hidden" style="background-image: url('homepage/blob2-light.svg')"></div> <div class="absolute inset-0 w-full h-full opacity-80 bg-contain bg-no-repeat bg-center dark:hidden lg:block hidden" style="background-image: url('homepage/blob2-light.svg')"></div>
<div class="absolute inset-0 w-full h-full opacity-20 bg-contain bg-no-repeat bg-center hidden dark:block" style="background-image: url('homepage/blob2-dark.svg')"></div> <div class="absolute inset-0 w-full h-full opacity-20 bg-contain bg-no-repeat bg-center hidden dark:block lg:block" style="background-image: url('homepage/blob2-dark.svg')"></div>
<!-- <div class="absolute right-0 top-0 bottom-0 w-1/2 h-full opacity-5 bg-contain bg-no-repeat" style="background-image: url('homepage/fullbody.png')"></div> -->
</section> </section>
</main> </main>

Write Preview
Loading…
Cancel
Save