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 {
background-color: rgb(27, 27, 27);
border-color: #1e1e1e;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 20px;
padding-top: 5px;
width: 35%;

View file

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

View file

@ -49,8 +49,8 @@ const img: string = `/fgosite/favourites/${image}.webp`;
display: flex;
flex-wrap: wrap;
flex-direction: column;
background-color: rgb(27, 27, 27);
border-color: #1e1e1e;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 0em 0.75em;
width: 40%;
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;
width: 100%;
height: 5em;
background-color: #2e2e2e;
background-color: var(--c-gray);
text-align: center;
align-items: center;
justify-content: center;

View file

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

View file

@ -45,9 +45,9 @@ const fulllink = `/fgosite/${slug}`;
font-weight: bold;
}
li > a:hover{
color: #c105ff;
color: var(--c-purplepink);
}
.current {
color: #b86cffed;
color: var(--c-darkpurple);
}
</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;
flex-wrap: wrap;
flex-direction: column;
background-color: rgb(27, 27, 27);
border-color: #1e1e1e;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 0em 0.75em;
width: 40%;
height: auto;
@ -113,7 +113,7 @@ if(bond10 === "false") {
article:hover .expand-on-hover {
transform: scaleY(1);
transition: transform 200ms ease-in-out;
background-color: #242424;
background-color: var(--c-duskgray);
}
.bond-ce {

View file

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

View file

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

View file

@ -42,9 +42,16 @@ const description: string = "A reference for all esports Servants, CEs and alrea
--speed: 50%;
--ease: 50%;
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 {
background: #3e3e3e;
background: var(--c-lightgray);
margin: 0px;
}
</style>

View file

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

View file

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

View file

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

View file

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

View file

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