Rewrote colors to use variables

This commit is contained in:
Firq 2023-03-05 21:58:01 +01:00
parent f53cc0b31a
commit e5669d33ab
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
16 changed files with 34 additions and 58 deletions

View file

@ -33,8 +33,8 @@ if(mlb === "false") {
} }
article { article {
background-color: rgb(27, 27, 27); background-color: var(--c-darkergray);
border-color: #1e1e1e; border-color: var(--c-darkgray);
padding: 20px; padding: 20px;
padding-top: 5px; padding-top: 5px;
width: 35%; width: 35%;

View file

@ -22,8 +22,8 @@ const { link, site } = Astro.props;
line-height: normal; line-height: normal;
} }
article { article {
background-color: rgb(27, 27, 27); background-color: var(--c-darkergray);
border-color: #1e1e1e; border-color: var(--c-darkgray);
padding: 10px; padding: 10px;
text-align: center; text-align: center;
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);

View file

@ -49,8 +49,8 @@ const img: string = `/fgosite/favourites/${image}.webp`;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
background-color: rgb(27, 27, 27); background-color: var(--c-darkergray);
border-color: #1e1e1e; border-color: var(--c-darkgray);
padding: 0em 0.75em; padding: 0em 0.75em;
width: 40%; width: 40%;
height: auto; height: auto;

View file

@ -12,7 +12,7 @@ This is still a work in progress and continuously expanded. Feel free to look ar
display: flex; display: flex;
width: 100%; width: 100%;
height: 5em; height: 5em;
background-color: #2e2e2e; background-color: var(--c-gray);
text-align: center; text-align: center;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

View file

@ -19,7 +19,7 @@
<style> <style>
header { header {
background-color: #1e1e1e; background-color: var(--c-darkgray);
display: flex; display: flex;
height: auto; height: auto;
width: 100%; width: 100%;
@ -53,7 +53,7 @@
line-height: 1.5em; line-height: 1.5em;
} }
.mobile > ul { .mobile > ul {
background-color: #1e1e1e; background-color: var(--c-darkgray);
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
@ -70,7 +70,7 @@
.mobile { .mobile {
display:flex; display:flex;
background-color: #1e1e1e; background-color: var(--c-darkgray);
border: 0px; border: 0px;
width: 100%; width: 100%;
height: 64px; height: 64px;

View file

@ -45,9 +45,9 @@ const fulllink = `/fgosite/${slug}`;
font-weight: bold; font-weight: bold;
} }
li > a:hover{ li > a:hover{
color: #c105ff; color: var(--c-purplepink);
} }
.current { .current {
color: #b86cffed; color: var(--c-darkpurple);
} }
</style> </style>

View file

@ -1,31 +0,0 @@
---
---
<div>
<button>Servant Offering</button>
<button>TA Achievements</button>
<button>About</button>
</div>
<style>
div {
display: flex;
margin: 1em 0%;
}
button {
padding: 1em 1em;
margin: 0em 0.5em;
background-color: rgb(218, 66, 218);
border-radius: 0%;
border-width: 0;
text-align: center;
font-size: large;
color: black;
width: 10em;
}
button:active {
background-color: blueviolet;
}
</style>

View file

@ -63,8 +63,8 @@ if(bond10 === "false") {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: column; flex-direction: column;
background-color: rgb(27, 27, 27); background-color: var(--c-darkergray);
border-color: #1e1e1e; border-color: var(--c-darkgray);
padding: 0em 0.75em; padding: 0em 0.75em;
width: 40%; width: 40%;
height: auto; height: auto;
@ -113,7 +113,7 @@ if(bond10 === "false") {
article:hover .expand-on-hover { article:hover .expand-on-hover {
transform: scaleY(1); transform: scaleY(1);
transition: transform 200ms ease-in-out; transition: transform 200ms ease-in-out;
background-color: #242424; background-color: var(--c-duskgray);
} }
.bond-ce { .bond-ce {

View file

@ -19,8 +19,8 @@ const icon: string = `background: url('/fgosite/ta_icons/${image}.webp')`
<style> <style>
article { article {
background-color: rgb(27, 27, 27); background-color: var(--c-darkergray);
border-color: #1e1e1e; border-color: var(--c-darkgray);
padding: 10px; padding: 10px;
text-align: center; text-align: center;
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);
@ -40,7 +40,7 @@ article > div {
article:hover h2 { article:hover h2 {
color: white; color: white;
background-color: #1e1e1e; background-color: var(--c-darkgray);
font-size: 18px; font-size: 18px;
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;

View file

@ -19,8 +19,8 @@ const icon: string = `background-image: url('/fgosite/technologies/${image}.webp
<style> <style>
article { article {
background-color: rgb(27, 27, 27); background-color: var(--c-darkergray);
border-color: #1e1e1e; border-color: var(--c-darkgray);
padding: 10px; padding: 10px;
text-align: center; text-align: center;
transition: transform var(--speed) var(--ease); transition: transform var(--speed) var(--ease);
@ -39,7 +39,7 @@ article > div {
article:hover h2 { article:hover h2 {
color: white; color: white;
background-color: #1e1e1e; background-color: var(--c-darkgray);
font-size: 18px; font-size: 18px;
display: inline-block; display: inline-block;
vertical-align: center; vertical-align: center;

View file

@ -42,9 +42,16 @@ const description: string = "A reference for all esports Servants, CEs and alrea
--speed: 50%; --speed: 50%;
--ease: 50%; --ease: 50%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--c-darkgray: #1e1e1e;
--c-duskgray: #242424;
--c-gray: #2e2e2e;
--c-lightgray: #3e3e3e;
--c-darkpurple: #b86cff;
--c-purplepink: #c105ff;
--c-darkergray: #1b1b1b;
} }
body { body {
background: #3e3e3e; background: var(--c-lightgray);
margin: 0px; margin: 0px;
} }
</style> </style>

View file

@ -35,7 +35,7 @@ const { title } = Astro.props;
margin: 0.5rem 0px 0.5rem 0.5em; margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
width: max-content; width: max-content;
background-color: #1e1e1e; background-color: var(--c-darkgray);
} }
@media(min-width: 512px) { @media(min-width: 512px) {
div { div {

View file

@ -19,7 +19,7 @@ const { title } = Astro.props;
margin: 0.5rem 0px 0.5rem 0.5em; margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
width: max-content; width: max-content;
background-color: #1e1e1e; background-color: var(--c-darkgray);
} }
div { div {
row-gap: 1em; row-gap: 1em;

View file

@ -18,7 +18,7 @@ h1 {
margin: 0.5rem 0px 0.5rem 0.5em; margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
width: max-content; width: max-content;
background-color: #1e1e1e; background-color: var(--c-darkgray);
} }
div { div {
row-gap: 1em; row-gap: 1em;

View file

@ -26,6 +26,6 @@
font-weight: bold; font-weight: bold;
color: white; color: white;
font-size: 5em; font-size: 5em;
background-color: #1e1e1e; background-color: var(--c-darkgray);
} }
</style> </style>

View file

@ -28,7 +28,7 @@ const { title } = Astro.props;
margin: 0.5rem 0px 0.5rem 0.5em; margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
width: max-content; width: max-content;
background-color: #1e1e1e; background-color: var(--c-darkgray);
} }
h2 { h2 {
color: white; color: white;