Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases176 Packages1 Wiki Activity Actions

Colors and other stuff

Browse source
This commit is contained in:
Firq 2024-10-24 18:52:33 +02:00
commit 34e24346d1
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
25 changed files with 234 additions and 272 deletions

24
src/components/cards/blogCard.astro
View file

@ -41,21 +41,21 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
width: 100%;
}
p {
color: white;
color: var(--c-primary-text);
text-align: left;
font-size: 1.1em;
margin: 0.5em;
}
article > h2 {
margin: 0.3rem 0.5rem;
color: var(--c-darkpurple);
color: var(--c-accent-1);
font-size: 1.5rem;
line-height: normal;
text-decoration: none;
}
article > h3 {
margin: 0.2em 0.5rem;
color: white;
color: var(--c-primary-text);
font-size: 1rem;
line-height: normal;
text-decoration: none;
@ -68,19 +68,13 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
align-items: center;
align-content: center;
justify-content: center;
background-color: var(--c-darkergray);
background-color: var(--c-primary-background);
padding: 10px;
text-align: center;
transition: transform var(--speed) var(--ease);
min-height: 100%;
border-radius: 1.25rem;
}
a:hover > article {
transform: scaleY(102.5%) scaleX(101%);
transition: transform var(--speed) var(--ease);
}
@media (min-width: 900px) {
.circle {
margin: 1rem 0.5rem 1rem 0.5rem;
@ -89,12 +83,12 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
visibility: visible;
height: 1rem;
width: 1rem;
background-color: var(--c-darkpurple);
background-color: var(--c-accent-1);
border-style: solid;
border-width: 0.25rem;
border-color: var(--c-lightgray);
border-color: var(--c-secondary-background);
border-radius: 40%;
transition: transform var(--speed) var(--ease);
transition: all var(--a-time-short) var(--a-animation-1);
}
a:hover > .circle {
@ -105,14 +99,14 @@ const date = new Date(pubdate).toLocaleDateString('en-GB', options_date)
}
a:hover article {
border-color: var(--c-darkpurple);
border-color: var(--c-accent-1);
transform: none;
}
article {
border-style: solid;
border-width: 2px;
border-color: var(--c-darkergray);
border-color: var(--c-primary-background);
align-items: flex-start;
align-content: flex-start;
margin-left: 0.5rem;

6
src/components/cards/ceCard.astro
View file

@ -35,8 +35,8 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
article {
border-radius: 1.25rem;
border: 2px var(--c-darkgray) solid;
background-color: var(--c-darkergray);
border: 2px var(--c-primary-background) solid;
background-color: var(--c-primary-background);
width: 35%;
height: auto;
justify-content: center;
@ -53,7 +53,7 @@ const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
}
article:hover {
border: 2px var(--c-darkpurple) solid;
border: 2px var(--c-accent-1) solid;
}
article div {

81
src/components/cards/contactCard.astro
View file

@ -10,7 +10,6 @@ export interface Props {
}
const { imageFile, link, site } = Astro.props
const logoAltText = `${site} Logo`
const imagePath = `/src/assets/social/${imageFile}`
const images_logos = import.meta.glob<GlobImage>(
'/src/assets/social/*.{png,webp}'
@ -25,12 +24,12 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
aria-label=`${site} - new window`
>
<article class="contact do-hover">
<Image src={loadedLogoImage} alt="" loading={'eager'} width={150} height={150} quality={100}/>
<Image src={loadedLogoImage} alt="" loading={'eager'} width={128} height={128} quality={100}/>
<div>
<h2>{site}</h2>
</div>
</article>
<span class="visually-hidden">{logoAltText}</span>
<span class="visually-hidden">{site}</span>
</a>
<style>
@ -39,64 +38,52 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath)
}
article {
--size-value: 6.25rem;
border-radius: 1.25rem;
display: flex;
justify-content: center;
position: relative;
align-items: center;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 10px;
justify-content: center;
text-align: center;
transition: transform var(--speed) var(--ease);
background-color: var(--c-primary-background);
border: 2px solid var(--c-primary-background);
border-radius: 1.25rem;
padding: 6px;
height: auto;
width: auto;
position: relative;
}
article img {
border-radius: 1.25rem;
width: var(--size-value);
height: var(--size-value);
}
article:hover div {
border-radius: 1.25rem;
padding: 0 0.5rem;
margin: unset;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
height: calc(var(--size-value));
width: calc(var(--size-value) - 1rem);
opacity: 90%;
border-style: solid;
border-width: 10px;
border-color: var(--c-darkgray);
z-index: 100;
position: absolute;
}
article:hover h2 {
margin: 0;
display: inline-flex;
font-weight: bold;
color: white;
font-size: 18px;
}
article h2 {
position: absolute;
display: none;
width: 80px;
height: auto;
}
article div {
display: none;
}
a:hover {
transform: scale(var(--hover-scale));
article:hover {
border-color: var(--c-accent-1);
}
article:hover div {
display: flex;
position: absolute;
margin: unset;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-primary-background);
border-radius: 1.25rem;
width: 80px;
height: 80px;
opacity: 90%;
z-index: 100;
}
article:hover h2 {
display: inline-flex;
font-size: 16px;
font-weight: 500;
color: var(--c-primary-text);
}
</style>

11
src/components/cards/favouriteCard.astro
View file

@ -38,7 +38,7 @@ const loadedImage = plsLoadImage(images, imagePath)
min-height: 2.5rem;
line-height: 1.75rem;
font-size: 24px;
color: white;
color: var(--c-primary-text);
max-width: 200px;
padding-bottom: 0.3rem;
font-weight: bold;
@ -52,19 +52,18 @@ const loadedImage = plsLoadImage(images, imagePath)
display: flex;
flex-wrap: wrap;
flex-direction: column;
background-color: var(--c-darkergray);
background-color: var(--c-primary-background);
padding: 0em 0.25em;
width: max(40%, 128px);
height: auto;
justify-content: center;
align-items: center;
text-align: center;
transition: transform var(--speed) var(--ease);
text-decoration: none;
border: 2px var(--c-darkgray) solid;
border: 2px var(--c-primary-background) solid;
&:hover {
border: 2px var(--c-darkpurple) solid;
border: 2px var(--c-accent-1) solid;
}
img {
@ -87,7 +86,7 @@ const loadedImage = plsLoadImage(images, imagePath)
}
.subtext {
color: white;
color: var(--c-primary-text);
font-size: 16px;
font-weight: 600;
margin: 0.5rem;

14
src/components/cards/servantCard.astro
View file

@ -48,15 +48,15 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
<style>
article:hover {
transform: scale(1);
border-color: var(--c-darkpurple);
border-color: var(--c-accent-1);
}
article {
display: flex;
flex-wrap: wrap;
flex-direction: column;
background-color: var(--c-darkergray);
border: 2px var(--c-darkgray) solid;
background-color: var(--c-primary-background);
border: 2px var(--c-primary-background) solid;
padding: 10px;
width: max(30%, 100px);
height: auto;
@ -73,7 +73,7 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
margin-top: 0.75rem;
}
.subtext {
color: white;
color: var(--c-primary-text);
font-size: 16px;
font-weight: 600;
margin: 5;
@ -81,8 +81,8 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
}
.expand-on-hover {
background-color: var(--c-darkergray);
border: 2px var(--c-darkpurple) solid;
background-color: var(--c-primary-background);
border: 2px var(--c-accent-1) solid;
border-top: 0px;
z-index: 99;
transform: scaleY(0);
@ -95,7 +95,7 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy";
article:hover .expand-on-hover {
transform: scaleY(1);
transition: transform 200ms ease-in-out;
transition: all var(--a-time-default) var(--a-animation-1);
}
.bond-ce {

24
src/components/cards/taCard.astro
View file

@ -62,8 +62,8 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: var(--c-darkergray);
border: 2px var(--c-darkgray) solid;
background-color: var(--c-primary-background);
border: 2px var(--c-primary-background) solid;
padding: 10px;
text-align: center;
width: max(30%, 100px);
@ -76,7 +76,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
a:hover {
transform: scale(1);
border-color: var(--c-darkpurple);
border-color: var(--c-accent-1);
z-index: 10;
}
@ -98,11 +98,11 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
width: 100%;
height: 100%;
opacity: 90%;
box-shadow: 0px 0px 0px 1px var(--c-darkgray);
box-shadow: 0px 0px 0px 1px var(--c-primary-background);
border-radius: 1.25rem;
}
@ -110,7 +110,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
margin: 4px;
display: inline-flex;
font-weight: 500;
color: white;
color: var(--c-primary-text);
font-size: 1rem;
line-height: 150%;
}
@ -128,7 +128,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
align-items: center;
line-height: 100%;
text-decoration: none;
color: white;
color: var(--c-primary-text);
font-size: 1rem;
font-weight: 400;
margin: 0.5rem 0px 0.25rem 0px;
@ -140,8 +140,8 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
flex-wrap: wrap;
align-items: top;
justify-content: space-evenly;
background-color: var(--c-darkergray);
border: 2px var(--c-darkpurple) solid;
background-color: var(--c-primary-background);
border: 2px var(--c-accent-1) solid;
border-top: 0px;
z-index: 99;
transform: scaleY(0);
@ -150,7 +150,7 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
top: 90%;
padding-top: 0.5rem;
margin-top: 0.2rem;
color: white;
color: var(--c-primary-text);
border-radius: 0px 0px 1.25rem 1.25rem;
width: 100%;
}
@ -168,8 +168,8 @@ const hasuser = user !== undefined ? 'display: flex' : 'display: none'
a:hover .expand-on-hover {
transform: scaleY(1);
transition: transform 200ms ease-in-out;
background-color: var(--c-darkergray);
transition: transform var(--a-time-default) var(--a-animation-1);
background-color: var(--c-primary-background);
}
@media (min-width: 512px) {

82
src/components/cards/technologyCard.astro
View file

@ -31,64 +31,54 @@ const loadedImage = plsLoadImage(images_logos, imagePath)
a {
text-decoration: none;
}
article {
--size-value: 6.25rem;
background-color: var(--c-darkergray);
border-color: var(--c-darkgray);
padding: 10px;
display: flex;
justify-content: center;
position: relative;
align-items: center;
justify-content: center;
text-align: center;
transition: transform var(--speed) var(--ease);
background-color: var(--c-primary-background);
border: 2px solid var(--c-primary-background);
border-radius: 1.25rem;
padding: 6px;
height: auto;
width: auto;
line-height: 100px;
border-radius: 1.25rem;
position: relative;
}
article:hover {
transform: scale(var(--hover-scale));
}
article > img {
border-radius: 1.25rem;
width: var(--size-value);
height: var(--size-value);
}
article:hover div {
article img {
border-radius: 1.25rem;
padding: 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-darkgray);
height: calc(var(--size-value));
width: calc(var(--size-value) - 1rem);
opacity: 90%;
z-index: 100;
position: absolute;
border-style: solid;
border-width: 10px;
border-color: var(--c-darkgray);
}
article:hover h2 {
margin: 0;
position: absolute;
display: inline-flex;
font-weight: bold;
color: white;
font-size: 18px;
line-height: 150%;
}
article h2 {
display: none;
width: 80px;
height: auto;
}
article div {
display: none;
}
article:hover {
border-color: var(--c-accent-1);
}
article:hover div {
display: flex;
position: absolute;
margin: unset;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--c-primary-background);
border-radius: 1.25rem;
width: 80px;
height: 80px;
opacity: 90%;
z-index: 100;
}
article:hover h2 {
display: inline-flex;
font-size: 16px;
font-weight: 500;
color: var(--c-primary-text);
}
</style>

20
src/components/fgotaHero.astro
View file

@ -10,7 +10,7 @@ const display = fadeout ? "": "display: none"
<span>
I am currently creating a site to catalogue past and future TAs for the whole community.
</span>
<a href=`https://fgo-ta.com/`><span class="fancy">Visit fgo-ta.com &gt;&gt;</span></a>
<a href=`https://fgo-ta.com/` target="_blank" rel="noopener noreferrer"><span class="fancy">Visit fgo-ta.com &gt;&gt;</span></a>
<div class="fade" style={display}></div>
</div>
@ -20,11 +20,11 @@ const display = fadeout ? "": "display: none"
width: 100%;
flex-wrap: nowrap;
flex-flow: column;
background-color: var(--c-darkergray);
background-color: var(--c-primary-background);
text-align: center;
align-items: center;
justify-content: center;
color: white;
color: var(--c-primary-text);
font-size: 1.5em;
padding: 2rem 0rem 0rem 0rem;
font-weight: 400;
@ -34,33 +34,33 @@ const display = fadeout ? "": "display: none"
a {
font-weight: 500;
font-family: 'Work Sans Variable', sans-serif;
color: white;
color: var(--c-primary-text);
margin: 1rem 0px 0px;
padding: 0.5rem 0.75rem;
text-decoration: none;
background-color: var(--c-duskgray);
background-color: var(--c-secondary-background);
border-radius: 10px;
border: 2px var(--c-darkpurple) solid;
border: 2px var(--c-accent-1) solid;
}
a:hover {
border-color: var(--c-purplepink);
border-color: var(--c-accent-1-alt);
}
.fade {
margin-top: 3rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
background: linear-gradient(to bottom, transparent, var(--c-secondary-background));
height: 2.5rem;
width: 100%;
}
.fancy {
color: var(--c-darkpurple);
color: var(--c-accent-1);
}
@supports (background-clip: text) {
a:hover .fancy {
background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
background-clip: text;
color: transparent;
}

4
src/components/hero.astro
View file

@ -12,11 +12,11 @@
display: flex;
width: 100%;
height: 5em;
background-color: var(--c-gray);
background-color: var(--c-secondary-background);
text-align: center;
align-items: center;
justify-content: center;
color: white;
color: var(--c-primary-text);
font-size: 1.5em;
}
</style>

10
src/components/navbar/navbar.astro
View file

@ -33,13 +33,13 @@ const hamburger_src_url = `url("${hamburger.src}")`
z-index: 1000;
position: sticky;
top: 0px;
background-color: var(--c-darkergray);
background-color: var(--c-primary-background);
display: flex;
height: auto;
width: 100%;
align-items: flex-start;
line-height: 1.5em;
border-bottom: 2px solid var(--c-darkpurple) ;
border-bottom: 2px solid var(--c-accent-1) ;
}
header > a {
margin-left: 16px;
@ -68,7 +68,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
line-height: 1.5em;
}
.mobile > ul {
background-color: var(--c-darkergray);
background-color: var(--c-primary-background);
align-items: center;
flex-wrap: wrap;
flex-direction: column;
@ -85,7 +85,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
.mobile {
display: flex;
background-color: var(--c-darkergray);
background-color: var(--c-primary-background);
border: 0px;
width: 100%;
height: 64px;
@ -116,7 +116,7 @@ const hamburger_src_url = `url("${hamburger.src}")`
.hamburger-menu {
mask: var(--hamburger_src_url) no-repeat center;
mask-size: cover;
background-color: white;
background-color: var(--c-primary-text);
width: 2.25rem;
height: 2.25rem;
position: static;

12
src/components/navbar/navbarEntry.astro
View file

@ -49,7 +49,7 @@ let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
li > a {
display: inline-flex;
color: white;
color: var(--c-primary-text);
text-decoration: none;
justify-content: center;
align-items: center;
@ -60,24 +60,24 @@ let extraattributes = navtype === 'mobile' ? { tabindex: '0' } : {}
}
li > a:hover {
color: var(--c-purplepink) !important;
color: var(--c-accent-1-alt) !important;
}
li > a:hover > .icon {
background-color: var(--c-purplepink) !important;
background-color: var(--c-accent-1-alt) !important;
}
.current {
color: var(--c-darkpurple) !important;
color: var(--c-accent-1) !important;
}
.current > .icon {
background-color: var(--c-darkpurple) !important;
background-color: var(--c-accent-1) !important;
}
.icon {
mask: var(--icon_src_url) no-repeat center;
background-color: white;
background-color: var(--c-primary-text);
width: 1.4em;
height: 1.4em;
}

18
src/components/titles/smallTitle.astro
View file

@ -22,20 +22,20 @@ const displayBackButton = returnbutton ? "": "display: none"
a {
font-weight: 500;
font-family: 'Work Sans Variable', sans-serif;
color: white;
color: var(--c-primary-text);
margin: 1rem 0px 0px;
padding: 0.5rem 0.75rem;
text-decoration: none;
background-color: var(--c-lightgray);
background-color: var(--c-secondary-background);
border-radius: 10px;
border-style: solid;
border-width: 2px;
border-color: var(--c-lightgray);
border-color: var(--c-secondary-background);
text-transform: capitalize;
}
a:hover {
border-color: var(--c-darkpurple);
border-color: var(--c-accent-1);
}
.wrap {
@ -46,13 +46,13 @@ const displayBackButton = returnbutton ? "": "display: none"
align-items: center;
flex-wrap: wrap;
flex-direction: column;
color: var(--c-lighter);
background-color: var(--c-darkergray);
color: var(--c-primary-text);
background-color: var(--c-primary-background);
}
.fade {
margin-top: 2rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
background: linear-gradient(to bottom, transparent, var(--c-secondary-background));
height: 2.5rem;
width: 100%;
}
@ -73,12 +73,12 @@ const displayBackButton = returnbutton ? "": "display: none"
}
.head {
color: var(--c-darkpurple);
color: var(--c-accent-1);
}
@supports (background-clip: text) {
.head {
background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
background-clip: text;
color: transparent;
}

10
src/components/titles/title.astro
View file

@ -16,13 +16,13 @@
align-items: center;
flex-wrap: wrap;
flex-direction: column;
color: var(--c-lighter);
background-color: var(--c-darkergray);
color: var(--c-primary-text);
background-color: var(--c-primary-background);
}
.fade {
margin-top: 1.5rem;
background: linear-gradient(to bottom, transparent, var(--c-lightgray));
background: linear-gradient(to bottom, transparent, var(--c-secondary-background));
height: 2.5rem;
width: 100%;
}
@ -41,12 +41,12 @@
}
.fancy {
color: var(--c-darkpurple);
color: var(--c-accent-1);
}
@supports (background-clip: text) {
.fancy {
background: linear-gradient(125deg, var(--c-darkpurple), var(--c-purplepink), var(--c-reddish) );
background: linear-gradient(125deg, var(--c-accent-1), var(--c-accent-1-alt), var(--c-accent-2) );
background-clip: text;
color: transparent;
}

2
src/components/youtubeEmbed.astro
View file

@ -44,7 +44,7 @@ const { id, thumbnail } = Astro.props
.warningtext {
display: flex;
justify-content: center;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
width: 640px;
height: 360px;
}