0xMRTT/webcompile
1
0
Fork 0
forked from ProjectSegfault/website
Code Pull Requests Activity

Merge branch 'projectsegfault-left' of https://github.com/ProjectSegfault/website into projectsegfault-left

Browse Source
This commit is contained in:
Odyssey346 2022-04-23 16:47:45 +02:00
commit 5df143134e
7 changed files with 1541 additions and 1316 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -26,6 +26,7 @@
}, },
"type": "module", "type": "module",
"dependencies": { "dependencies": {
"@modular-css/svelte": "^28.1.0",
"@sveltejs/adapter-static": "next" "@sveltejs/adapter-static": "next"
} }
} }

1
src/app.d.ts vendored
View File

@ -1,3 +1,4 @@
/* eslint-disable */
/// <reference types="@sveltejs/kit" /> /// <reference types="@sveltejs/kit" />
// See https://kit.svelte.dev/docs/typescript // See https://kit.svelte.dev/docs/typescript

263
src/assets/animation.css Normal file
View File

@ -0,0 +1,263 @@
/* ----------------------------------------------
* Generated by Animista on 2022-4-22 18:29:34
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation text-flicker-in-glow
* ----------------------------------------
*/
@-webkit-keyframes text-flicker-in-glow {
0% {
opacity: 0;
}
10% {
opacity: 0;
text-shadow: none;
}
10.1% {
opacity: 1;
text-shadow: none;
}
10.2% {
opacity: 0;
text-shadow: none;
}
20% {
opacity: 0;
text-shadow: none;
}
20.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
}
20.6% {
opacity: 0;
text-shadow: none;
}
30% {
opacity: 0;
text-shadow: none;
}
30.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
30.5% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
30.6% {
opacity: 0;
text-shadow: none;
}
45% {
opacity: 0;
text-shadow: none;
}
45.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
50% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
55% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
55.1% {
opacity: 0;
text-shadow: none;
}
57% {
opacity: 0;
text-shadow: none;
}
57.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
}
60% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
}
60.1% {
opacity: 0;
text-shadow: none;
}
65% {
opacity: 0;
text-shadow: none;
}
65.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
}
75% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
}
75.1% {
opacity: 0;
text-shadow: none;
}
77% {
opacity: 0;
text-shadow: none;
}
77.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
}
85% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
}
85.1% {
opacity: 0;
text-shadow: none;
}
86% {
opacity: 0;
text-shadow: none;
}
86.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
}
100% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
}
}
@keyframes text-flicker-in-glow {
0% {
opacity: 0;
}
10% {
opacity: 0;
text-shadow: none;
}
10.1% {
opacity: 1;
text-shadow: none;
}
10.2% {
opacity: 0;
text-shadow: none;
}
20% {
opacity: 0;
text-shadow: none;
}
20.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.25);
}
20.6% {
opacity: 0;
text-shadow: none;
}
30% {
opacity: 0;
text-shadow: none;
}
30.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
30.5% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
30.6% {
opacity: 0;
text-shadow: none;
}
45% {
opacity: 0;
text-shadow: none;
}
45.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
50% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
55% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 60px rgba(255, 255, 255, 0.25);
}
55.1% {
opacity: 0;
text-shadow: none;
}
57% {
opacity: 0;
text-shadow: none;
}
57.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
}
60% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35);
}
60.1% {
opacity: 0;
text-shadow: none;
}
65% {
opacity: 0;
text-shadow: none;
}
65.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
}
75% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.35), 0 0 100px rgba(255, 255, 255, 0.1);
}
75.1% {
opacity: 0;
text-shadow: none;
}
77% {
opacity: 0;
text-shadow: none;
}
77.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
}
85% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.55), 0 0 60px rgba(255, 255, 255, 0.4), 0 0 110px rgba(255, 255, 255, 0.2), 0 0 100px rgba(255, 255, 255, 0.1);
}
85.1% {
opacity: 0;
text-shadow: none;
}
86% {
opacity: 0;
text-shadow: none;
}
86.1% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
}
100% {
opacity: 1;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.6), 0 0 60px rgba(255, 255, 255, 0.45), 0 0 110px rgba(255, 255, 255, 0.25), 0 0 100px rgba(255, 255, 255, 0.1);
}
}

6
src/assets/global.css
View File

@ -51,10 +51,14 @@ a.visited {
.button:hover { .button:hover {
background-color: #00d4aa; background-color: #00d4aa;
color: black; color: black;
border-radius: 12px;
transform: translateY(-0.25em); transform: translateY(-0.25em);
box-shadow: 0 0.5em 0.5em -0.4em #00755e;
} }
.button:active { .button:active {
transform: translateY(0.10em);
background-color: #4beacb; background-color: #4beacb;
box-shadow: 0 0.5em 0.5em -0.4em #00c7a1;
} }
.ResponsiveImage { .ResponsiveImage {
@ -83,4 +87,4 @@ a.visited {
.ResponsiveImage { .ResponsiveImage {
max-inline-size: 100%; max-inline-size: 100%;
} }
} }

26
src/lib/Header.svelte
View File

@ -1,11 +1,11 @@
<script lang="ts"> <script lang="ts">
import ProjectSegfaultLogo from "../assets/images/projectsegfault1.png"; import css from "../assets/animation.css";
import ProjectSegfaultLogo from "../assets/images/projectsegfault1.png";
</script> </script>
<header> <header>
<img src={ProjectSegfaultLogo} id="ProjectSegfaultLogoHeader" alt="Why is this not loading? Anyway, project segfault's logo." /> <img src={ProjectSegfaultLogo} id="ProjectSegfaultLogoHeader" alt="project segfault's logo." />
<a href="/" style="color: #ce1717">Project</a> <a href="/" style="color: #00d4aa">Segfault</a> <a href="/" class="text-flicker-in-glow" style="color: #ce1717">Project <span style="color: #00d4aa">Segfault</span></a>
<div class="center">
<section class="center">
<a href="/instances" class="button">Instances</a> <a href="/instances" class="button">Instances</a>
<a href="/gameservers" class="button">Games</a> <a href="/gameservers" class="button">Games</a>
@ -15,8 +15,7 @@
<a href="/minecraft" class="button">Minecraft</a> <a href="/minecraft" class="button">Minecraft</a>
<a href="/contact" class="button">Contact</a> <a href="/contact" class="button">Contact</a>
</section> </div>
</header> </header>
<style> <style>
@ -35,6 +34,15 @@
} }
.center { .center {
text-align: center; text-align: center;
} }
</style> .text-flicker-in-glow {
opacity:1;
-webkit-animation: text-flicker-in-glow 900ms both;
animation: text-flicker-in-glow 900ms both;
}
@media screen and (prefers-reduced-motion: reduce) {
.text-flicker-in-glow {
opacity:1;
}
}
</style>

6
src/routes/gameservers.md
View File

@ -12,9 +12,9 @@ title: Our Gameservers
<div class="card"> <div class="card">
<div id="gmod"> <div id="gmod">
<h3 class="gameserversCardTitle"> Garry's Mod </h3> <h3 class="gameserversCardTitle"> Garry's Mod </h3>
<a href="https://gmod.mutahar.rocks">Garry's Mod has it's own website. Check it out here!</a> <a href="https://gmod.projectsegfau.lt">Garry's Mod has it's own website. Check it out here!</a>
<br> <br>
<a href="steam://connect/gmodsrv.mutahar.rocks">Connect to the server using this link</a> <a href="steam://connect/gmodsrv.projectsegfau.lt">Connect to the server using this link</a>
<br> <br>
<a href="https://www.gametracker.com/server_info/176.174.120.242:27015/" target="_blank">GameTracker Link</a> <a href="https://www.gametracker.com/server_info/176.174.120.242:27015/" target="_blank">GameTracker Link</a>
</div> </div>
@ -47,4 +47,4 @@ title: Our Gameservers
<br> <br>
<a href="https://www.gametracker.com/server_info/176.174.120.242:27018/" target="_blank">GameTracker Link</a> <a href="https://www.gametracker.com/server_info/176.174.120.242:27018/" target="_blank">GameTracker Link</a>
</div> </div>
</div> </div>

2554
yarn.lock
View File

File diff suppressed because it is too large Load Diff