feat: new logo, fixed layout, misc
This commit is contained in:
Luka Dekanozishvili
parent
5f2984824d
commit
5c78528f4c
15 changed files with 52 additions and 111 deletions
|
|
@ -1,8 +1,9 @@
|
|||
<script lang="ts">
|
||||
import './layout.css';
|
||||
import { onMount } from 'svelte';
|
||||
import favicon from '$lib/assets/favicon.svg';
|
||||
// import homeOg from '$lib/assets/home-og.png';
|
||||
import favicon from '$lib/assets/favicon.webp';
|
||||
|
||||
import homeOg from '$lib/assets/home-og.png';
|
||||
import MainNavbar from '$lib/MainNavbar.svelte';
|
||||
import SideMenu from '$lib/SideMenu.svelte';
|
||||
import { auth, initUserAuthStatus } from '$lib/auth.svelte';
|
||||
|
|
@ -33,49 +34,27 @@
|
|||
afterNavigate(() => {
|
||||
sideMenuOpen = isDashboard && window.matchMedia('(min-width: 1024px)').matches;
|
||||
})
|
||||
|
||||
let innerWidth: number | null | undefined = $state();
|
||||
let isMobile: boolean = $derived.by(() =>{
|
||||
if (!innerWidth) return false;
|
||||
return innerWidth < 768;
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth/>
|
||||
|
||||
<svelte:head>
|
||||
<link rel="icon" href={favicon}/>
|
||||
<link rel="apple-touch-icon" href={favicon}>
|
||||
<!-- <meta name="twitter:image" content={homeOg}>
|
||||
<meta property="og:image" content={homeOg}> -->
|
||||
<meta name="twitter:image" content={homeOg}>
|
||||
<meta property="og:image" content={homeOg}>
|
||||
<meta property="og:url" content="{page.url.toString()}">
|
||||
<meta name="twitter:url" content="{page.url.toString()}">
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<main class="bg-base-300">
|
||||
<MainNavbar bind:sideMenuOpen {isMobile}/>
|
||||
<MainNavbar bind:sideMenuOpen/>
|
||||
<div class="flex flex-row min-h-0 flex-grow">
|
||||
<!-- {#if auth.isAuthenticated} -->
|
||||
<div class={sideMenuOpen && isDashboard ? "w-0 lg:w-60" : "w-0"}>
|
||||
<SideMenu bind:sideMenuOpen={sideMenuOpen} {isDashboard}/>
|
||||
</div>
|
||||
<!-- {/if} -->
|
||||
<div class={sideMenuOpen && isDashboard ? "w-0 lg:w-60" : "w-0"}>
|
||||
<SideMenu bind:sideMenuOpen={sideMenuOpen} {isDashboard}/>
|
||||
</div>
|
||||
<div class="flex-grow mt-16 bg-base-300 not-sm:overflow-auto">
|
||||
{@render children()}
|
||||
<Footer/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- <div class="flex flex-col h-screen">
|
||||
<MainNavbar/>
|
||||
<div class="flex flex-row min-h-0 flex-grow">
|
||||
{#if auth.isAuthenticated}
|
||||
<SideMenu/>
|
||||
{/if}
|
||||
<div class="flex-grow overflow-auto sm:p-12 bg-base-300">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-[1fr_auto_1fr] overflow-none -mt-4 lg:my-8 justify-items-center items-center not-lg:max-w-120 max-w-full justify-items-stretch">
|
||||
<div use:slideIn class="flex flex-col stats w-50 max-w-72 h-100 not-lg:-mt-14 lg:pt-10 opacity-0 -translate-x-30 lg:-translate-x-60 ease-out transition-[transform, opacity] will-change-transform duration-1300 not-lg:order-1">
|
||||
<div use:slideIn class="flex flex-col stats w-50 max-w-72 h-100 not-lg:-mt-14 lg:pt-10 opacity-0 -translate-x-25 lg:-translate-x-60 ease-out transition-[transform, opacity] will-change-transform duration-1300 not-lg:order-1">
|
||||
<div class="stat place-items-center border-none">
|
||||
<div class="stat-title">Our domains</div>
|
||||
<div class="stat-value">3</div>
|
||||
|
|
@ -153,7 +153,7 @@
|
|||
</div>
|
||||
</figure>
|
||||
|
||||
<div use:slideIn class="flex flex-col stats w-50 max-w-72 h-100 not-lg:-mt-14 lg:pt-10 opacity-0 translate-x-30 lg:translate-x-60 ease-out transition-[transform, opacity] will-change-transform duration-1300 not-lg:order-1">
|
||||
<div use:slideIn class="flex flex-col stats w-50 max-w-72 h-100 not-lg:-mt-14 lg:pt-10 opacity-0 translate-x-25 lg:translate-x-60 ease-out transition-[transform, opacity] will-change-transform duration-1300 not-lg:order-1">
|
||||
<div class="stat place-items-center border-none">
|
||||
<div class="stat-title">Cost</div>
|
||||
<div class="stat-value">0$</div>
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@
|
|||
|
||||
<div class="hero bg-base-200 mb-16">
|
||||
<div class="hero-content flex-col sm:flex-row-reverse">
|
||||
<div class="skeleton h-32 w-32"></div>
|
||||
<img
|
||||
class="max-w-sm rounded-lg shadow-2xl"
|
||||
alt="man in suit"
|
||||
|
|
|
|||
|
|
@ -57,13 +57,6 @@
|
|||
<div class="divider"></div>
|
||||
<h2 class="legend text-2xl font-bold p-4 m-4">Questions about our services</h2>
|
||||
|
||||
<!-- <div class="flex justify-center p-4 m-4">
|
||||
<h2 class="text-4xl font-semibold max-w-2xl">
|
||||
<span class="bg-gradient-to-t from-primary to-base-300">Questions</span> about our services
|
||||
</h2>
|
||||
</div> -->
|
||||
|
||||
|
||||
<div class="collapse collapse-arrow bg-base-200 border border-base-300">
|
||||
<input type="radio"/>
|
||||
<div class="collapse-title font-semibold">What is HexName?</div>
|
||||
|
|
@ -100,7 +93,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="collapse collapse-arrow bg-base-200 border border-base-300">
|
||||
<input type="radio"/>
|
||||
<div class="collapse-title font-semibold">How do I use my DDNS token to update my A/AAAA record?</div>
|
||||
|
|
@ -129,9 +121,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="collapse collapse-arrow bg-base-200 border border-base-300">
|
||||
<input type="radio"/>
|
||||
<div class="collapse-title font-semibold">Is this service really free?</div>
|
||||
|
|
@ -216,7 +205,7 @@
|
|||
<div class="collapse-title font-semibold">How does HexName make money?</div>
|
||||
<div class="collapse-content text-sm">
|
||||
<div class="p-2">
|
||||
I don't make a cent lol
|
||||
I don't lol
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -38,44 +38,8 @@
|
|||
--noise: 0;
|
||||
}
|
||||
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "light";
|
||||
default: false;
|
||||
prefersdark: false;
|
||||
color-scheme: "light";
|
||||
--color-font: oklch(14% 0.005 285.823);
|
||||
--color-base-100: oklch(100% 0 0);
|
||||
--color-base-200: oklch(98% 0 0);
|
||||
--color-base-300: oklch(95% 0 0);
|
||||
--color-base-content: oklch(92% 0.013 255.508);
|
||||
--color-primary: oklch(48% 0.243 264.376);
|
||||
--color-primary-content: oklch(93% 0.032 255.585);
|
||||
--color-secondary: #ff0076;
|
||||
--color-secondary-content: oklch(94% 0.028 342.258);
|
||||
--color-accent: oklch(77% 0.152 181.912);
|
||||
--color-accent-content: oklch(38% 0.063 188.416); --color-neutral: oklch(14% 0.005 285.823);
|
||||
--color-neutral-content: oklch(92% 0.004 286.32);
|
||||
--color-info: oklch(74% 0.16 232.661);
|
||||
--color-info-content: oklch(29% 0.066 243.157);
|
||||
--color-success: oklch(79% 0.209 151.711);
|
||||
--color-success-content: oklch(39% 0.095 152.535);
|
||||
--color-warning: oklch(90% 0.182 98.111);
|
||||
--color-warning-content: oklch(42% 0.095 57.708);
|
||||
--color-error: oklch(64% 0.246 16.439);
|
||||
--color-error-content: oklch(27% 0.105 12.094);
|
||||
--radius-selector: 0.5rem;
|
||||
--radius-field: 0.25rem;
|
||||
--radius-box: 0.5rem;
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
--border: 1px;
|
||||
--depth: 0;
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--breakpoint-xs: 410px;
|
||||
--breakpoint-xs: 390px;
|
||||
|
||||
--animate-fadeInDown: fadeInDown 1s ease-in;
|
||||
@keyframes fadeInDown {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue