mirror of
https://github.com/ProjectSegfault/website.git
synced 2024-11-10 01:52:03 +05:30
change icons to md, change nav and footer
This commit is contained in:
parent
114ad04dd9
commit
42f32da4d6
@ -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",
|
||||||
|
@ -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
|
||||||
|
@ -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>
|
@ -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>
|
||||||
|
@ -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}
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
@ -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"
|
||||||
|
@ -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")}
|
||||||
|
@ -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/"
|
||||||
|
@ -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 {
|
||||||
|
@ -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}
|
||||||
|
@ -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>
|
||||||
|
@ -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"]
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user