extern/web-check
1
0
Fork 0
mirror of https://github.com/Lissy93/web-check.git synced 2025-05-14 03:04:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: Updates nav, icon, colors, background and homepage

Browse Source
This commit is contained in:
Alicia Sykes 2024-06-15 22:46:13 +01:00
parent 0172de829c
commit ff18904d6c
5 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/homepage/AboutSection.astro
View File

@ -1,6 +1,5 @@
--- ---
import Icon from '@components/molecules/Icon.svelte';
import ButtonGroup from '@components/homepage/ButtonGroup.astro'; import ButtonGroup from '@components/homepage/ButtonGroup.astro';
import Features from '@components/homepage/Features.astro'; import Features from '@components/homepage/Features.astro';
import SponsorSegment from '@components/homepage/SponsorSegment.astro'; import SponsorSegment from '@components/homepage/SponsorSegment.astro';
@ -49,7 +48,7 @@ const links = [
}, },
{ {
title: 'Deploy your Own', title: 'Deploy your Own',
url: 'https://github.com/lissy93/web-check', url: '/self-hosted-setup',
icon: 'rocket', icon: 'rocket',
isCta: false, isCta: false,
}, },

2
src/components/homepage/HomeBackground.tsx
View File

@ -77,7 +77,7 @@ const generateMeteor = (id: number, gridSizeX: number, gridSizeY: number) => {
duration, duration,
tailVisible: true, tailVisible: true,
animationStage: 'traveling', animationStage: 'traveling',
opacity: 1, // Initial opacity opacity: 1,
}; };
}; };

1
src/components/molecules/Icon.svelte
View File

@ -11,6 +11,7 @@
github: brands.faGithubAlt, github: brands.faGithubAlt,
code: solidIcons.faCode, code: solidIcons.faCode,
rocket: solidIcons.faRocket, rocket: solidIcons.faRocket,
copy: solidIcons.faCopy,
}; };
export let name: string; export let name: string;

27
src/components/scafold/Nav.astro
View File

@ -13,9 +13,9 @@
</a> </a>
</div> </div>
<div class="nav-right"> <div class="nav-right">
<a href="/check" class="nav-link">Try Live</a> <a href="/check" class="nav-link">Check</a>
<a href="/check/about" class="nav-link">About</a> <a href="/about" class="nav-link">API</a>
<a href="/account" class="nav-link">Join</a> <a href="/account" class="nav-link">Login</a>
</div> </div>
</nav> </nav>
@ -33,8 +33,6 @@
margin: 0 auto; margin: 0 auto;
border-radius: 2rem; border-radius: 2rem;
border: 1px solid var(--primary-transparent); border: 1px solid var(--primary-transparent);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px); backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
@ -79,16 +77,31 @@
margin-left: 1rem; margin-left: 1rem;
padding: 0.5rem; padding: 0.5rem;
transition: background-color 0.3s; transition: background-color 0.3s;
position: relative;
&:hover { &:hover {
background-color: var(--primary-light); background-color: var(--primary-light);
} }
&:focus { &:focus {
outline: none; outline: none;
background-color: var(--primary-dark); background-color: var(--primary-dark);
box-shadow: 0 0 0 3px var(--primary); box-shadow: 0 0 0 3px var(--primary);
} }
&:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 2px;
left: 50%;
position: absolute;
background: var(--primary);
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
&:hover:after {
width: 100%;
left: 0;
}
} }
} }
} }

3
src/styles/colors.scss
View File

@ -6,7 +6,8 @@
--text-color-thirdly: #ffffff5b; --text-color-thirdly: #ffffff5b;
--background: #111211; --background: #111211;
--background-darker: #111927; --background-darker: #111927;
--background-lighter: #1a2332; // --background-lighter: #1a2332;
--background-lighter: #3A3B3A;
--background-50: #11121180; --background-50: #11121180;
--bg-shadow-color: #0f1620; --bg-shadow-color: #0f1620;
--fg-shadow-color: #456602; --fg-shadow-color: #456602;