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

I prefer rounded corners.

Browse Source 
Signed-off-by: Odyssey346 <odyssey346@disroot.org>
This commit is contained in:
Odyssey346 2022-04-21 15:37:01 +02:00
parent b03e25b001
commit 6b6ede9b94
2 changed files with 88 additions and 111 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');
body {
background-color: #101010;
color: white;
font-family: 'Comfortaa', sans-serif;
}
a {
color: #ce1818;
text-decoration: none;
}
a.hover {
color: rgb(233, 110, 110);
}
a.visited {
color: #5f1919;
}
.card {
display: flex;
justify-content: space-evenly;
}
.card > div {
word-wrap: break-word;
margin: 50px;
padding: 20px;
border-radius: 25px;
background-color: #252525;
box-shadow: 0 0 5px 5px #252525;
}
.button {
background-color: #3db686;
border: none;
color: white;
padding: 1% 1%;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: #101010;
color: #3db686;
border: #3db686;
}
.ResponsiveImage {
max-inline-size: 50%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
.pointyfinger {
cursor: pointer;
}
.gameserversCardTitle, .centreofattention {
text-align: center;
}
#wordwrappedlongthingaaa {
word-wrap: break-word;
}
@media (max-width: 800px) {
.card {
flex-direction: column;
}
.ResponsiveImage {
max-inline-size: 100%;
}
@import url('https://fonts.googleapis.com/css2?family=Comfortaa&family=Quicksand:wght@500&display=swap');
body {
background-color: #101010;
color: white;
font-family: 'Comfortaa', sans-serif;
}
a {
color: #ce1818;
text-decoration: none;
}
a.hover {
color: rgb(233, 110, 110);
}
a.visited {
color: #5f1919;
}
.card {
display: flex;
justify-content: space-evenly;
}
.card > div {
word-wrap: break-word;
margin: 50px;
padding: 20px;
border-radius: 25px;
background-color: #252525;
box-shadow: 0 0 5px 5px #252525;
}
.button {
background-color: #00755e; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 16px;
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: #00d4aa;
color: black;
transform: translateY(-0.25em);
}
.button:active {
background-color: #4beacb;
}
.ResponsiveImage {
max-inline-size: 50%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
.pointyfinger {
cursor: pointer;
}
.gameserversCardTitle, .centreofattention {
text-align: center;
}
#wordwrappedlongthingaaa {
word-wrap: break-word;
}
@media (max-width: 800px) {
.card {
flex-direction: column;
}
.ResponsiveImage {
max-inline-size: 100%;
}
}

38
src/lib/Header.svelte
View File

@ -1,4 +1,3 @@
<script lang="ts">
import ProjectSegfaultLogo from "../assets/images/projectsegfault1.png";
</script>
@ -16,9 +15,7 @@
<a href="/minecraft" class="button">Minecraft</a>
<a href="/contact" class="button">Contact</a>
<a href="/faq" class="button">FAQ</a>
</section>
</section>
</header>
@ -31,38 +28,13 @@
}
#ProjectSegfaultLogoHeader {
/*Here goes anything to do with the header logo*/
border-radius: 5px;
border-radius: 16px;
width: 32px;
vertical-align: middle;
display: inline-block;
vertical-align: middle;
display: inline-block;
}
.center {
text-align: center;
}
.button {
background-color: #00755e; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 10px;
transition-duration: 0.4s;
cursor: pointer;
}
.button:hover {
background-color: #00d4aa;
color: black;
border-radius: 2px;
transform: translateY(-0.25em);
box-shadow: 0 0.5em 0.5em -0.4em #00755e;
}
.button:active {
background-color: #4beacb;
box-shadow: 0 0.51em 0.51em 0.4em #00b591;
}
</style>
</style>