From 6b6ede9b9439d9c99cdadfc28641f5c33151e600 Mon Sep 17 00:00:00 2001 From: Odyssey346 Date: Thu, 21 Apr 2022 15:37:01 +0200 Subject: [PATCH] I prefer rounded corners. Signed-off-by: Odyssey346 --- src/assets/global.css | 161 ++++++++++++++++++++++-------------------- src/lib/Header.svelte | 38 ++-------- 2 files changed, 88 insertions(+), 111 deletions(-) diff --git a/src/assets/global.css b/src/assets/global.css index e78c567..87fe04e 100644 --- a/src/assets/global.css +++ b/src/assets/global.css @@ -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%; + } } \ No newline at end of file diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte index eb49086..ca4713c 100644 --- a/src/lib/Header.svelte +++ b/src/lib/Header.svelte @@ -1,4 +1,3 @@ - @@ -16,9 +15,7 @@ Minecraft Contact - - FAQ - + @@ -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; - } - + \ No newline at end of file