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=. ."
},
"devDependencies": {
"@iconify-json/fa6-solid": "^1.1.10",
"@iconify-json/ic": "^1.1.12",
"@iconify-json/simple-icons": "^1.1.40",
"@sveltejs/adapter-node": "1.0.0",
"@sveltejs/kit": "1.0.1",

View File

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

View File

@ -8,18 +8,18 @@
<div class="flex flex-col gap-2 flex-1 {isPost ? "nav:(flex-row gap-4)" : ""}">
{#if post.tags.length > 0}
<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}
<a href="/blog/tags/{tag.slug}" class="no-underline rounded-2 p-1 {isPost ? "bg-secondary" : "bg-primary"}">{tag.name}</a>
{/each}
</div>
{/if}
{#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}
<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)
.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-fa6-solid:book-open-reader" /> {post.reading_time} minute read</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-ic:outline-import-contacts text-xl -ml-1" /> {post.reading_time} minute read</span>
</div>

View File

@ -1,17 +1,8 @@
<footer class="flex flex-col text-xl sticky top-full">
<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)"
>
<span>© 2021 - present, Project Segfault <a href="/team">team</a></span>
<span
>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
class="flex flex-col justify-center sm:flex-row gap-1 border-t border-t-solid border-t-grey p-3 text-sm"
>
<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>
<a href="https://github.com/ProjectSegfault/website">Source code</a>
</div>
</footer>

View File

@ -13,7 +13,7 @@
<Note
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
{sitekey}

View File

@ -1,6 +1,8 @@
<script lang="ts">
import ThemeToggle from "./ThemeToggle.svelte";
import { page } from "$app/stores";
import { slide } from "svelte/transition";
import { quintOut } from 'svelte/easing';
$: currentPage = $page.url.pathname;
@ -14,6 +16,8 @@
$: menuOpen = innerWidth > 1030;
$: menuOpenMobile = innerWidth < 1030 && menuOpen;
let showThemeToggle: boolean = true;
const toggleMenu = () => {
@ -53,7 +57,8 @@
<svelte:window bind:innerWidth />
<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">
<a
@ -71,7 +76,7 @@
{#if showMenuButton}
<button
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}
</div>
@ -81,6 +86,7 @@
class="links"
class:hasJS={typeof Window !== "undefined"}
class:noJS={typeof Window === "undefined"}
transition:slide="{{duration: 300, easing: quintOut }}"
>
{#each menus as { url, name, external }}
<a
@ -91,7 +97,7 @@
on:click={handleNavigation}
>{#if external}
<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}
{name}
@ -138,17 +144,30 @@
}
.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 {
@apply grid grid-cols-2 gap-2 pt-2 w-fit;
}
.hasJSNav {
@apply sticky top-0 z-50;
}
@media (min-width: 1030px) {
.hasJS {
flex-direction: row;
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 {

View File

@ -19,6 +19,6 @@
on:click={toggle}
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>
</button>

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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