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

added a cool animation, to be improved

Browse Source
This commit is contained in:
Midou36O 2022-04-22 19:01:43 +00:00
commit f356541fe5
Signed by untrusted user: midou
GPG Key ID: 08063D5407090BC2
2 changed files with 91 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

161
src/assets/global.css
View File

@ -1,79 +1,84 @@
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Quicksand:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Quicksand:wght@500&display=swap');
body { body {
background-color: #101010; background-color: #101010;
color: white; color: white;
font-family: 'Comfortaa', sans-serif; font-family: 'Comfortaa', sans-serif;
} }
a { a {
color: #ce1818; color: #ce1818;
text-decoration: none; text-decoration: none;
} }
a.hover { a.hover {
color: rgb(233, 110, 110); color: rgb(233, 110, 110);
} }
a.visited { a.visited {
color: #5f1919; color: #5f1919;
} }
.card { .card {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
} }
.card > div { .card > div {
word-wrap: break-word; word-wrap: break-word;
margin: 50px; margin: 50px;
padding: 20px; padding: 20px;
border-radius: 25px; border-radius: 25px;
background-color: #252525; background-color: #252525;
box-shadow: 0 0 5px 5px #252525; box-shadow: 0 0 5px 5px #252525;
} }
.button { .button {
background-color: #3db686; background-color: #00755e; /* Green */
border: none; border: none;
color: white; color: white;
padding: 1% 1%; padding: 16px 32px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 16px; font-size: 16px;
margin: 4px 2px; margin: 4px 2px;
transition-duration: 0.4s; border-radius: 16px;
cursor: pointer; transition-duration: 0.4s;
} cursor: pointer;
.button:hover { }
background-color: #101010;
color: #3db686; .button:hover {
border: #3db686; background-color: #00d4aa;
} color: black;
transform: translateY(-0.25em);
.ResponsiveImage { }
max-inline-size: 50%; .button:active {
block-size: auto; background-color: #4beacb;
aspect-ratio: 2/1; }
object-fit: contain;
} .ResponsiveImage {
max-inline-size: 50%;
.pointyfinger { block-size: auto;
cursor: pointer; aspect-ratio: 2/1;
} object-fit: contain;
}
.gameserversCardTitle, .centreofattention {
text-align: center; .pointyfinger {
} cursor: pointer;
}
#wordwrappedlongthingaaa {
word-wrap: break-word; .gameserversCardTitle, .centreofattention {
} text-align: center;
}
@media (max-width: 800px) {
.card { #wordwrappedlongthingaaa {
flex-direction: column; word-wrap: break-word;
} }
.ResponsiveImage {
max-inline-size: 100%; @media (max-width: 800px) {
} .card {
flex-direction: column;
}
.ResponsiveImage {
max-inline-size: 100%;
}
} }

15
src/lib/Header.svelte
View File

@ -1,4 +1,3 @@
<script lang="ts"> <script lang="ts">
import css from "../assets/animation.css"; import css from "../assets/animation.css";
import ProjectSegfaultLogo from "../assets/images/projectsegfault1.png"; import ProjectSegfaultLogo from "../assets/images/projectsegfault1.png";
@ -16,9 +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>
<a href="/faq" class="button">FAQ</a>
</section>
</header> </header>
@ -33,15 +30,16 @@
} }
#ProjectSegfaultLogoHeader { #ProjectSegfaultLogoHeader {
/*Here goes anything to do with the header logo*/ /*Here goes anything to do with the header logo*/
border-radius: 5px; border-radius: 16px;
width: 32px; width: 32px;
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
} }
.center { .center {
text-align: center; text-align: center;
} }
<<<<<<< HEAD
.button { .button {
background-color: #00755e; /* Green */ background-color: #00755e; /* Green */
border: none; border: none;
@ -75,3 +73,6 @@
animation: text-flicker-in-glow 900ms both; animation: text-flicker-in-glow 900ms both;
} }
</style> </style>
=======
</style>
>>>>>>> 6b6ede9b9439d9c99cdadfc28641f5c33151e600