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 {
border-color: white;
border-width: 2px;
border: unset;
background-color: white;
height: 2px;
}
hr {
border-color: black;
border-width: 2px;
border: unset;
background-color: black;
height: 2px;
}
#svelte {

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

@ -11,10 +11,10 @@
href={url}
{title}
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">
<span class="text-5xl ">{icon}</span>
<span class="text-gray-600 dark:text-gray-300 font-light text-base text-center">{text}</span>
<div class="flex flex-col gap-1 items-center justify-center p-3 lg:p-5">
<span class="text-xl lg:text-5xl">{icon}</span>
<span class="text-gray-700 dark:text-gray-300 font-light text-xs lg:text-base text-center">{text}</span>
</div>
</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
import ThemeSwitcher from '$lib/ThemeSwitcher.svelte';
import Button from './Button.svelte';
import Dropdown from './Dropdown.svelte';
import NavButton from './NavButton.svelte';
import NavDropdown from './NavDropdown.svelte';
</script>
<div class="flex items-center justify-between">
<div class="flex items-center">
<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
src="/bart.png"
alt="Logo"
@ -17,24 +16,25 @@
/>
</a>
<div class="hidden lg:flex h-16">
<Button url="/" text="Home" />
<Button disabled="true" url="/blog" text="Blog" />
<Button disabled="true" url="/portfolio" text="Portfolio" />
<Button disabled="true" url="/esu" text="ESU" />
<Button disabled="true" url="/furry" text="Furry" />
<NavButton url="/" text="Home" />
<NavButton disabled="true" url="/blog" text="Blog" />
<NavButton disabled="true" url="/portfolio" text="Portfolio" />
<NavButton disabled="true" url="/esu" text="ESU" />
<NavButton disabled="true" url="/furry" text="Furry" />
</div>
</div>
<div class="hidden lg:flex h-16">
<ThemeSwitcher />
</div>
<div class="flex lg:hidden h-16">
<Dropdown text="🍔">
<Button url="/" text="Home" />
<Button disabled="true" url="/blog" text="Blog" />
<Button disabled="true" url="/portfolio" text="Portfolio" />
<Button disabled="true" url="/esu" text="ESU" />
<Button disabled="true" url="/furry" text="Furry" />
<NavDropdown text="🍔">
<NavButton url="/" text="Home" />
<NavButton disabled="true" url="/blog" text="Blog" />
<NavButton disabled="true" url="/portfolio" text="Portfolio" />
<NavButton disabled="true" url="/esu" text="ESU" />
<NavButton disabled="true" url="/furry" text="Furry" />
<hr class="bg-white" />
<ThemeSwitcher />
</Dropdown>
</NavDropdown>
</div>
</div>

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

@ -1,7 +1,10 @@
<script>
import NavButton from "./NavButton.svelte";
export let text;
export let type;
let dropdown;
let classes = "h-full px-5 flex justify-center items-center";
switch (type) {
@ -16,24 +19,24 @@
break;
}
function openMenu() {
let dropdown = document.querySelector("#dropdown");
console.log(dropdown);
dropdown.classList.toggle("block");
function toggle() {
dropdown.classList.toggle("flex");
dropdown.classList.toggle("hidden");
console.log(dropdown);
}
</script>
<main class="relative">
<!-- <MenuIcon /> -->
<button on:click={openMenu} type="none" class={classes} id="trigger">
<main>
<button on:click={toggle} type="none" class={classes} id="trigger">
{text}
</button>
<div
class="absolute w-screen right-0 bg-white dark:bg-black hidden z-50"
id="dropdown"
class="fixed flex-col w-screen h-screen inset-0 bg-blue-600 hidden z-50"
bind:this={dropdown}
>
<NavButton text="Close Menu" on:click={toggle} />
<hr class="bg-white" />
<slot />
</div>
</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)];
let element = document.createElement('span');
element.innerHTML = word;
element.classList.add("text-9xl", "p-10");
list.appendChild(element);
}
@ -73,8 +74,9 @@
randomBannerPic = "/homepage/banner.png";
</script>
<main class="flex 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>
<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-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="hidden lg:block h-full w-1/2 z-10">
@ -84,7 +86,7 @@
/>
</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>
<img src="/helloblue.png" alt="Hello!" class="h-20 popout" />
</span>
@ -121,19 +123,18 @@
.anim {
user-select: none;
opacity: 2%;
overflow: hidden;
animation: anim;
animation-duration: 120s;
animation-duration: 200s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes anim {
0% {
transform: scale(10) translate(100px, -100px) rotate(-45deg);
transform: translate(100%, -100%) rotate(-30deg);
}
100% {
transform: scale(10) translate(-100px, 100px) rotate(-45deg);
transform: translate(-100%, 100%) rotate(-30deg);
}
}
.popout {

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

@ -1,10 +1,10 @@
<script>
export let buttonText;
export let buttonText = "";
export let buttonRedirect = "";
export let buttonHref;
export let disabled;
export let buttonHref = "";
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) {
classes += " opacity-50";
@ -31,6 +31,6 @@
{/if}
{#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}
</div>

13
src/routes/index.svelte
Unescape View File

@ -11,7 +11,7 @@
<main>
<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">
<path
class="block dark:hidden"
@ -43,7 +43,7 @@
<Card
buttonHref="https://puppypride.social"
buttonText="🌐 Visit Puppy Pride"
disabled="true"
disabled={true}
>
<h3
class="text-xl font-bold inline-flex items-center gap-3"
@ -258,17 +258,16 @@
</svg>
<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"
>
<div class="lg:w-1/3 z-10">
<Form />
</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-20 bg-contain bg-no-repeat bg-center hidden dark: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> -->
<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 lg:block" style="background-image: url('homepage/blob2-dark.svg')"></div>
</section>
</main>

Write Preview
Loading…
Cancel
Save