change icons to md, change nav and footer

This commit is contained in:
Akis 2023-01-05 19:12:43 +02:00
parent 114ad04dd9
commit 42f32da4d6
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
14 changed files with 57 additions and 47 deletions

View File

@ -10,7 +10,7 @@
"format": "prettier -w --plugin-search-dir=. ." "format": "prettier -w --plugin-search-dir=. ."
}, },
"devDependencies": { "devDependencies": {
"@iconify-json/fa6-solid": "^1.1.10", "@iconify-json/ic": "^1.1.12",
"@iconify-json/simple-icons": "^1.1.40", "@iconify-json/simple-icons": "^1.1.40",
"@sveltejs/adapter-node": "1.0.0", "@sveltejs/adapter-node": "1.0.0",
"@sveltejs/kit": "1.0.1", "@sveltejs/kit": "1.0.1",

View File

@ -3,7 +3,7 @@ lockfileVersion: 5.4
specifiers: specifiers:
'@auth/core': ^0.2.4 '@auth/core': ^0.2.4
'@auth/sveltekit': ^0.1.11 '@auth/sveltekit': ^0.1.11
'@iconify-json/fa6-solid': ^1.1.10 '@iconify-json/ic': ^1.1.12
'@iconify-json/simple-icons': ^1.1.40 '@iconify-json/simple-icons': ^1.1.40
'@sveltejs/adapter-node': 1.0.0 '@sveltejs/adapter-node': 1.0.0
'@sveltejs/kit': 1.0.1 '@sveltejs/kit': 1.0.1
@ -39,7 +39,7 @@ dependencies:
sequelize: 6.28.0_pg-hstore@2.3.4+pg@8.8.0 sequelize: 6.28.0_pg-hstore@2.3.4+pg@8.8.0
devDependencies: devDependencies:
'@iconify-json/fa6-solid': 1.1.10 '@iconify-json/ic': 1.1.12
'@iconify-json/simple-icons': 1.1.40 '@iconify-json/simple-icons': 1.1.40
'@sveltejs/adapter-node': 1.0.0_@sveltejs+kit@1.0.1 '@sveltejs/adapter-node': 1.0.0_@sveltejs+kit@1.0.1
'@sveltejs/kit': 1.0.1_svelte@3.55.0+vite@4.0.3 '@sveltejs/kit': 1.0.1_svelte@3.55.0+vite@4.0.3
@ -318,8 +318,8 @@ packages:
'@hapi/hoek': 9.3.0 '@hapi/hoek': 9.3.0
dev: false dev: false
/@iconify-json/fa6-solid/1.1.10: /@iconify-json/ic/1.1.12:
resolution: {integrity: sha512-BJDDO8wiFQopALfmgUpTTINapfpYMw4aklJu96zolJSHYzLQTs05Db/bxvKeBeDArn9SMVIY4pA+ExinJqFT/g==} resolution: {integrity: sha512-J0rDxdAc9GjJ1iS95hPXseN76ioZr9olGmdu9H+NKrmYAHanaeMIfWZ6PlANA5kCc+lNOFcDySSvQQ7DLMMoRQ==}
dependencies: dependencies:
'@iconify/types': 2.0.0 '@iconify/types': 2.0.0
dev: true dev: true

View File

@ -8,18 +8,18 @@
<div class="flex flex-col gap-2 flex-1 {isPost ? "nav:(flex-row gap-4)" : ""}"> <div class="flex flex-col gap-2 flex-1 {isPost ? "nav:(flex-row gap-4)" : ""}">
{#if post.tags.length > 0} {#if post.tags.length > 0}
<div class="flex flex-row items-center gap-2"> <div class="flex flex-row items-center gap-2">
<div class="i-fa6-solid:tags" /> <div class="i-ic:outline-bookmarks text-xl -ml-1" />
{#each post.tags as tag} {#each post.tags as tag}
<a href="/blog/tags/{tag.slug}" class="no-underline rounded-2 p-1 {isPost ? "bg-secondary" : "bg-primary"}">{tag.name}</a> <a href="/blog/tags/{tag.slug}" class="no-underline rounded-2 p-1 {isPost ? "bg-secondary" : "bg-primary"}">{tag.name}</a>
{/each} {/each}
</div> </div>
{/if} {/if}
{#each post.authors as author} {#each post.authors as author}
<a href="/blog/authors/{author.slug}" class="flex items-center gap-2 no-underline"><div class="i-fa6-solid:user" />{author.name}</a> <a href="/blog/authors/{author.slug}" class="flex items-center gap-2 no-underline"><div class="i-ic:outline-person text-xl -ml-1" />{author.name}</a>
{/each} {/each}
<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs <span class="flex items-center gap-2"><div class="i-ic:outline-calendar-month text-xl -ml-1" /> {dayjs
(post.published_at) (post.published_at)
.format("ddd, DD MMM YYYY HH:mm")}</span> .format("ddd, DD MMM YYYY HH:mm")}</span>
<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {post.plaintext.trim().split(/\s+/).length} words</span> <span class="flex items-center gap-2"><div class="i-ic:outline-edit text-2xl -ml-1" /> {post.plaintext.trim().split(/\s+/).length} words</span>
<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {post.reading_time} minute read</span> <span class="flex items-center gap-2"><div class="i-ic:outline-import-contacts text-xl -ml-1" /> {post.reading_time} minute read</span>
</div> </div>

View File

@ -1,17 +1,8 @@
<footer class="flex flex-col text-xl sticky top-full"> <footer class="flex flex-col text-xl sticky top-full">
<div <div
class="flex items-center flex-col border-t border-t-solid border-t-grey p-2 children:(text-text text-sm font-500 text-center)" class="flex flex-col justify-center sm:flex-row gap-1 border-t border-t-solid border-t-grey p-3 text-sm"
> >
<span>© 2021 - present, Project Segfault <a href="/team">team</a></span> <span class="flex flex-row items-center gap-1">Made with <div class="i-simple-icons:svelte" />SvelteKit <span class="hidden sm:block">-</span></span>
<span <a href="https://github.com/ProjectSegfault/website">Source code</a>
>Made with <a href="https://kit.svelte.dev/">SvelteKit</a> and
released under the
<a href="https://opensource.org/licenses/MIT/">MIT license</a
>.</span
>
<span
><a href="https://github.com/ProjectSegfault/website">Source code</a
></span
>
</div> </div>
</footer> </footer>

View File

@ -13,7 +13,7 @@
<Note <Note
content="The submit button will be visible when you complete the Captcha." content="The submit button will be visible when you complete the Captcha."
icon="i-fa6-solid:circle-info" icon="i-ic:outline-info text-xl"
/> />
<HCaptcha <HCaptcha
{sitekey} {sitekey}

View File

@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import ThemeToggle from "./ThemeToggle.svelte"; import ThemeToggle from "./ThemeToggle.svelte";
import { page } from "$app/stores"; import { page } from "$app/stores";
import { slide } from "svelte/transition";
import { quintOut } from 'svelte/easing';
$: currentPage = $page.url.pathname; $: currentPage = $page.url.pathname;
@ -14,6 +16,8 @@
$: menuOpen = innerWidth > 1030; $: menuOpen = innerWidth > 1030;
$: menuOpenMobile = innerWidth < 1030 && menuOpen;
let showThemeToggle: boolean = true; let showThemeToggle: boolean = true;
const toggleMenu = () => { const toggleMenu = () => {
@ -53,7 +57,8 @@
<svelte:window bind:innerWidth /> <svelte:window bind:innerWidth />
<nav <nav
class="bg-primary border-b border-b-solid border-b-grey flex p-2 flex-col justify-between nav:(flex-row items-center)" class="bg-primary {menuOpenMobile ? "" : "border-b border-b-solid border-b-grey"} flex p-2 flex-col justify-between nav:(flex-row items-center)"
class:hasJSNav={typeof Window !== "undefined"}
> >
<div class="flex flex-row items-center justify-between"> <div class="flex flex-row items-center justify-between">
<a <a
@ -71,7 +76,7 @@
{#if showMenuButton} {#if showMenuButton}
<button <button
on:click={toggleMenu} on:click={toggleMenu}
class="i-fa6-solid:bars cursor-pointer mr-2" class="{menuOpen ? "i-ic:outline-close" : "i-ic:outline-menu"} h-4 w-4 cursor-pointer mr-2"
/> />
{/if} {/if}
</div> </div>
@ -81,6 +86,7 @@
class="links" class="links"
class:hasJS={typeof Window !== "undefined"} class:hasJS={typeof Window !== "undefined"}
class:noJS={typeof Window === "undefined"} class:noJS={typeof Window === "undefined"}
transition:slide="{{duration: 300, easing: quintOut }}"
> >
{#each menus as { url, name, external }} {#each menus as { url, name, external }}
<a <a
@ -91,7 +97,7 @@
on:click={handleNavigation} on:click={handleNavigation}
>{#if external} >{#if external}
<div <div
class="i-fa6-solid:arrow-up-right-from-square mr-2" class="i-ic:outline-open-in-new mr-2 h-4 w-4"
/> />
{/if} {/if}
{name} {name}
@ -138,17 +144,30 @@
} }
.hasJS { .hasJS {
@apply flex flex-col pt-2 gap-2; @apply flex flex-col pt-2 gap-2 fixed bg-primary w-full left-0 top-[2.8rem] p-2 z-50 border-b-solid border-b border-b-grey shadow shadow-secondary;
} }
.noJS { .noJS {
@apply grid grid-cols-2 gap-2 pt-2 w-fit; @apply grid grid-cols-2 gap-2 pt-2 w-fit;
} }
.hasJSNav {
@apply sticky top-0 z-50;
}
@media (min-width: 1030px) { @media (min-width: 1030px) {
.hasJS { .hasJS {
flex-direction: row; flex-direction: row;
padding-top: 0; padding-top: 0;
position: initial;
background-color: initial;
width: initial;
left: initial;
top: initial;
padding: initial;
z-index: initial;
border-bottom: initial;
box-shadow: initial;
} }
.noJS { .noJS {

View File

@ -19,6 +19,6 @@
on:click={toggle} on:click={toggle}
class="cursor-pointer flex items-center py-1 px-0 bg-transparent border-0 font-primary color-text" class="cursor-pointer flex items-center py-1 px-0 bg-transparent border-0 font-primary color-text"
> >
<div class="i-fa6-solid:{theme === 'dark' ? 'sun' : 'moon'}" /> <div class="i-ic:{theme === 'dark' ? 'outline-light-mode' : 'outline-dark-mode'} h-4 w-4" />
<span class="ml-2 nav:(hidden ml-1)">Toggle theme</span> <span class="ml-2 nav:(hidden ml-1)">Toggle theme</span>
</button> </button>

View File

@ -26,11 +26,11 @@
<LinkButton <LinkButton
url="/instances" url="/instances"
title="Explore our instances" title="Explore our instances"
icon="i-fa6-solid:bell-concierge" icon="i-ic:outline-room-service text-xl"
/> />
<LinkButton <LinkButton
url="/donate" url="/donate"
icon="i-fa6-solid:money-bill" icon="i-ic:outline-attach-money text-xl"
title="Donate" title="Donate"
bg="#F6C915" bg="#F6C915"
color="#151515" color="#151515"

View File

@ -19,31 +19,31 @@
> >
{#if announcements.severity === "info"} {#if announcements.severity === "info"}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="i-fa6-solid:circle-info" /> <div class="i-ic:outline-info text-xl" />
<span>Info</span> <span>Info</span>
</div> </div>
{:else if announcements.severity === "low"} {:else if announcements.severity === "low"}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="i-fa6-solid:check" /> <div class="i-ic:outline-check-circle text-xl" />
<span>Resolved</span> <span>Resolved</span>
</div> </div>
{:else if announcements.severity === "medium"} {:else if announcements.severity === "medium"}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="i-fa6-solid:triangle-exclamation" /> <div class="i-ic:outline-priority-high text-xl" />
<span>Attention</span> <span>Attention</span>
</div> </div>
{:else if announcements.severity === "high"} {:else if announcements.severity === "high"}
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<div class="i-fa6-solid:ban" /> <div class="i-ic:outline-block text-xl" />
<span>Attention</span> <span>Attention</span>
</div> </div>
{/if} {/if}
<span class="flex items-center gap-2"> <span class="flex items-center gap-2">
<div class="i-fa6-solid:user" /> <div class="i-ic:outline-person text-xl" />
{announcements.author} {announcements.author}
</span> </span>
<span class="flex items-center gap-2"> <span class="flex items-center gap-2">
<div class="i-fa6-solid:calendar" /> <div class="i-ic:outline-calendar-month text-xl" />
{dayjs {dayjs
.unix(announcements.created) .unix(announcements.created)
.format("DD/MM/YYYY HH:mm")} .format("DD/MM/YYYY HH:mm")}

View File

@ -24,12 +24,12 @@
<LinkButton <LinkButton
url="/blog/tags" url="/blog/tags"
title="Tags" title="Tags"
icon="i-fa6-solid:tags" icon="i-ic:outline-bookmarks"
/> />
<LinkButton <LinkButton
url="/blog/authors" url="/blog/authors"
title="Authors" title="Authors"
icon="i-fa6-solid:user" icon="i-ic:outline-people text-xl"
/> />
<LinkButton <LinkButton
url="https://blog.projectsegfau.lt/rss/" url="https://blog.projectsegfau.lt/rss/"

View File

@ -22,7 +22,7 @@
> >
<Note <Note
content="Your IP will be logged for anti-abuse measures." content="Your IP will be logged for anti-abuse measures."
icon="i-fa6-solid:lock" icon="i-ic:outline-lock text-xl"
/> />
<Meta <Meta
inputType="email" inputType="email"
@ -59,7 +59,7 @@
<noscript> <noscript>
<Note <Note
content="The contact form does not work without JavaScript enabled." content="The contact form does not work without JavaScript enabled."
icon="i-fa6-solid:circle-info" icon="i-ic:outline-info text-xl"
/> />
<style> <style>
.contact-form { .contact-form {

View File

@ -28,8 +28,8 @@
<div class="flex items-center gap-2 text-base"> <div class="flex items-center gap-2 text-base">
<div <div
class={item === 200 class={item === 200
? "i-fa6-solid:arrow-up-right-from-square" ? "i-ic:outline-open-in-new text-xl"
: "i-fa6-solid:xmark"} : "i-ic:outline-close"}
/> />
<span> <span>
{#if item !== 200} {#if item !== 200}

View File

@ -61,7 +61,7 @@
url={website} url={website}
class="web" class="web"
> >
<div class="i-fa6-solid:globe" /> <div class="i-ic:outline-language" />
</Link> </Link>
{/if} {/if}
@ -70,7 +70,7 @@
url="mailto:{email}" url="mailto:{email}"
class="email" class="email"
> >
<div class="i-fa6-solid:envelope" /> <div class="i-ic:outline-mail" />
</Link> </Link>
{/if} {/if}
@ -79,7 +79,7 @@
url={pgp} url={pgp}
class="pgp" class="pgp"
> >
<div class="i-fa6-solid:key" /> <div class="i-ic:outline-vpn-key" />
</Link> </Link>
{/if} {/if}
@ -88,7 +88,7 @@
url={picture} url={picture}
class="picture" class="picture"
> >
<div class="i-fa6-solid:camera" /> <div class="i-ic:outline-photo-camera" />
</Link> </Link>
{/if} {/if}
</LinksOuter> </LinksOuter>

View File

@ -56,5 +56,5 @@ export default defineConfig({
transformers: [transformerVariantGroup(), transformerDirectives()], transformers: [transformerVariantGroup(), transformerDirectives()],
safelist: ["i-fa6-solid:moon", "i-fa6-solid:sun"] safelist: ["i-ic:outline-dark-mode", "i-ic:outline-light-mode"]
}); });