forked from ProjectSegfault/website
change icons to md, change nav and footer
This commit is contained in:
parent
114ad04dd9
commit
42f32da4d6
GPG Key ID:
267BF5C6677944ED
@ -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",
|
||||
|
||||
8
pnpm-lock.yaml
generated
8
pnpm-lock.yaml
generated
@ -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
|
||||
|
||||
@ -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>
|
||||
@ -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)"
|
||||
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
|
||||
>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
|
||||
>
|
||||
<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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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")}
|
||||
|
||||
@ -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/"
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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"]
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user