mirror of
https://github.com/ProjectSegfault/website.git
synced 2024-11-09 17:42:02 +05:30
fix colours and add current page highlight on nav
This commit is contained in:
parent
efbc2d935d
commit
2c49e8dc41
@ -104,7 +104,7 @@
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
padding: 0.5rem;
|
||||
font-family: "Comfortaa", sans-serif;
|
||||
font-family: var(--font-primary);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -120,7 +120,7 @@
|
||||
}
|
||||
|
||||
.button:not(select):hover {
|
||||
background-color: var(--accent-tertiary);
|
||||
background-color: var(--accent);
|
||||
text-decoration: none;
|
||||
transition: all 0.5s;
|
||||
color: var(--secondary);
|
||||
|
@ -61,7 +61,7 @@
|
||||
|
||||
img {
|
||||
width: 270px;
|
||||
background: var(--accent-primary);
|
||||
background: var(--accent);
|
||||
padding: 0.5rem;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
@ -20,7 +20,6 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
.hero > * {
|
||||
@ -31,12 +30,12 @@
|
||||
|
||||
p {
|
||||
font-size: 30px;
|
||||
color: #b6b6b6;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 50px;
|
||||
font-weight: 800;
|
||||
color: var(--accent-primary);
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
@ -1,8 +1,24 @@
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import IconBars from "~icons/fa6-solid/bars";
|
||||
import IconMatrix from "~icons/simple-icons/matrix";
|
||||
import IconGitHub from "~icons/simple-icons/github";
|
||||
import ThemeToggle from "./ThemeToggle.svelte";
|
||||
import { page } from "$app/stores";
|
||||
|
||||
$: currentPage = $page.url.pathname;
|
||||
|
||||
const menus = [
|
||||
{name: "Instances", url: "https://instances.projectsegfau.lt/"},
|
||||
{name: "Minecraft", url: "/minecraft"},
|
||||
{name: "Donate", url: "/donate"},
|
||||
{name: "FAQ", url: "/faq"},
|
||||
{name: "Contact us", url: "/contact"},
|
||||
{name: "Our team", url: "/team"},
|
||||
{name: "Timeline", url: "/timeline"},
|
||||
{name: "Blog", url: "https://blog.projectsegfau.lt/"},
|
||||
{name: "Legal", url: "/legal"},
|
||||
{name: "Status", url: "https://status.projectsegfau.lt/"},
|
||||
]
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
@ -19,16 +35,9 @@
|
||||
</label>
|
||||
|
||||
<div class="links">
|
||||
<a href="https://instances.projectsegfau.lt/">Instances</a>
|
||||
<a href="/minecraft">Minecraft</a>
|
||||
<a href="/donate">Donate</a>
|
||||
<a href="/faq">FAQ</a>
|
||||
<a href="/contact">Contact us</a>
|
||||
<a href="/team">Our team</a>
|
||||
<a href="/timeline">Timeline</a>
|
||||
<a href="https://blog.projectsegfau.lt/">Blog</a>
|
||||
<a href="/legal">Legal</a>
|
||||
<a href="https://status.projectsegfau.lt/">Status</a>
|
||||
{#each menus as { url, name }}
|
||||
<a sveltekit:prefetch class:active={url !== "/" ? currentPage.match(url) : url === currentPage} href={url}>{name}</a>
|
||||
{/each}
|
||||
<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt/">
|
||||
<IconMatrix />
|
||||
</a>
|
||||
@ -60,6 +69,10 @@
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
a.brand:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
@ -83,7 +96,7 @@
|
||||
|
||||
.links > *:hover {
|
||||
text-decoration: none;
|
||||
color: var(--accent-primary);
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
img {
|
||||
|
@ -1,15 +1,3 @@
|
||||
@font-face {
|
||||
font-family: Comfortaa;
|
||||
src: url("/Comfortaa.ttf");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Inter;
|
||||
src: url("/Inter.ttf");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: Raleway;
|
||||
src: url("/Raleway.ttf");
|
||||
@ -17,8 +5,7 @@
|
||||
}
|
||||
|
||||
html {
|
||||
--accent-primary: #b59bd8;
|
||||
--accent-secondary: #b59bd8;
|
||||
--accent: #b59bd8;
|
||||
--accent-translucent: #b59bd898;
|
||||
--font-primary: Raleway;
|
||||
--font-header: Raleway;
|
||||
@ -34,10 +21,11 @@ html.dark {
|
||||
|
||||
html.light {
|
||||
--primary: #dddddd;
|
||||
--secondary: #bbbbbb;
|
||||
--secondary: #f9f3f3;
|
||||
--tertiary: #939393;
|
||||
--text: #1f1f1f;
|
||||
--grey: #292929;
|
||||
--text: #444444;
|
||||
--grey: #444444;
|
||||
--accent: #8c68bb;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -50,6 +38,7 @@ body {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
line-height: 1.625;
|
||||
transition: all .25s;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@ -62,7 +51,7 @@ main {
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
color: var(--accent-primary);
|
||||
color: var(--accent);
|
||||
text-underline-offset: 5px;
|
||||
transition: filter 0.25s;
|
||||
}
|
||||
|
@ -112,7 +112,7 @@
|
||||
|
||||
.buttons a {
|
||||
text-decoration: none;
|
||||
background-color: var(--accent-primary);
|
||||
background-color: var(--accent);
|
||||
padding: 8px 1em 8px 1em;
|
||||
color: var(--primary);
|
||||
border-radius: 10px;
|
||||
@ -133,7 +133,7 @@
|
||||
}
|
||||
|
||||
.announcement {
|
||||
color: var(--primary);
|
||||
color: #252525 !important;
|
||||
padding: 2rem 1rem;
|
||||
border-radius: 10px;
|
||||
width: fit-content;
|
||||
@ -142,7 +142,7 @@
|
||||
}
|
||||
|
||||
.announcement a {
|
||||
color: var(--primary);
|
||||
color: #252525;
|
||||
}
|
||||
|
||||
.announcement .general {
|
||||
|
@ -93,7 +93,7 @@
|
||||
}
|
||||
|
||||
.web:hover {
|
||||
background-color: var(--accent-tertiary);
|
||||
background-color: var(--accent);
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
|
@ -75,7 +75,7 @@
|
||||
}
|
||||
|
||||
.team-inner {
|
||||
background-color: #252525;
|
||||
background-color: var(--secondary);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
width: 30em;
|
||||
@ -104,7 +104,7 @@
|
||||
}
|
||||
|
||||
.matrixcolored {
|
||||
background-color: #fff;
|
||||
background-color: var(--tertiary);
|
||||
font-size: 20px;
|
||||
height: 23px;
|
||||
}
|
||||
@ -138,7 +138,7 @@
|
||||
}
|
||||
|
||||
.web:hover {
|
||||
background-color: var(--accent-tertiary);
|
||||
background-color: var(--accent);
|
||||
color: var(--secondary) !important;
|
||||
}
|
||||
|
||||
|
@ -224,6 +224,6 @@
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--accent-primary);
|
||||
color: var(--accent);
|
||||
}
|
||||
</style>
|
||||
|
Binary file not shown.
BIN
static/Inter.ttf
BIN
static/Inter.ttf
Binary file not shown.
Loading…
Reference in New Issue
Block a user