Firq/firq-dev-website
Firq/firq-dev-website
1
0
Fork 0
Code Issues Pull requests Projects Releases 119 Packages 1 Wiki Activity Actions

Colors and other stuff
Some checks failed
/ get-version (push) Successful in 3s
Details
/ astro-check (push) Failing after 9s
Details
/ checking (push) Failing after 8s
Details
/ create-release (push) Has been skipped
Details
/ check-tag (push) Successful in 2s
Details
/ build-site (push) Has been skipped
Details
/ auto-deploy-dockge (push) Has been skipped
Details
/ run-unlighthouse (push) Has been skipped
Details

Browse source
This commit is contained in:
Firq 2024-10-24 18:52:33 +02:00
parent aab26e63b2
commit 34e24346d1
Signed by: Firq
GPG key ID: 3ACC61C8CEC83C20
25 changed files with 234 additions and 272 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
package-lock.json generated
View file

@ -2360,7 +2360,7 @@
"@types/estree-jsx": "^1.0.0",
"@types/hast": "^3.0.0",
"@types/mdx": "^2.0.0",
"collapse-white-space": "^2.0.0",
"collapse-var(--c-primary-text)-space": "^2.0.0",
"devlop": "^1.0.0",
"estree-util-build-jsx": "^3.0.0",
"estree-util-is-identifier-name": "^3.0.0",
@ -3535,9 +3535,9 @@
"node": ">=6"
}
},
"node_modules/collapse-white-space": {
"node_modules/collapse-var(--c-primary-text)-space": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
"resolved": "https://registry.npmjs.org/collapse-var(--c-primary-text)-space/-/collapse-var(--c-primary-text)-space-2.1.0.tgz",
"integrity": "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw==",
"funding": {
"type": "github",
@ -4297,7 +4297,7 @@
"devlop": "^1.0.0",
"estree-util-attach-comments": "^3.0.0",
"estree-util-is-identifier-name": "^3.0.0",
"hast-util-whitespace": "^3.0.0",
"hast-util-var(--c-primary-text)space": "^3.0.0",
"mdast-util-mdx-expression": "^2.0.0",
"mdast-util-mdx-jsx": "^3.0.0",
"mdast-util-mdxjs-esm": "^2.0.0",
@ -4321,7 +4321,7 @@
"@types/unist": "^3.0.0",
"ccount": "^2.0.0",
"comma-separated-tokens": "^2.0.0",
"hast-util-whitespace": "^3.0.0",
"hast-util-var(--c-primary-text)space": "^3.0.0",
"html-void-elements": "^3.0.0",
"mdast-util-to-hast": "^13.0.0",
"property-information": "^6.0.0",
@ -4345,7 +4345,7 @@
"comma-separated-tokens": "^2.0.0",
"devlop": "^1.0.0",
"estree-util-is-identifier-name": "^3.0.0",
"hast-util-whitespace": "^3.0.0",
"hast-util-var(--c-primary-text)space": "^3.0.0",
"mdast-util-mdx-expression": "^2.0.0",
"mdast-util-mdx-jsx": "^3.0.0",
"mdast-util-mdxjs-esm": "^2.0.0",
@ -4406,9 +4406,9 @@
"url": "https://opencollective.com/unified"
}
},
"node_modules/hast-util-whitespace": {
"node_modules/hast-util-var(--c-primary-text)space": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
"resolved": "https://registry.npmjs.org/hast-util-var(--c-primary-text)space/-/hast-util-var(--c-primary-text)space-3.0.0.tgz",
"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
"dependencies": {
"@types/hast": "^3.0.0"
@ -5201,7 +5201,7 @@
"micromark-factory-label": "^2.0.0",
"micromark-factory-space": "^2.0.0",
"micromark-factory-title": "^2.0.0",
"micromark-factory-whitespace": "^2.0.0",
"micromark-factory-var(--c-primary-text)space": "^2.0.0",
"micromark-util-character": "^2.0.0",
"micromark-util-chunked": "^2.0.0",
"micromark-util-classify-character": "^2.0.0",
@ -5530,9 +5530,9 @@
"micromark-util-types": "^2.0.0"
}
},
"node_modules/micromark-factory-whitespace": {
"node_modules/micromark-factory-var(--c-primary-text)space": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
"resolved": "https://registry.npmjs.org/micromark-factory-var(--c-primary-text)space/-/micromark-factory-var(--c-primary-text)space-2.0.0.tgz",
"integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
"funding": [
{
@ -9505,7 +9505,7 @@
"@types/estree-jsx": "^1.0.0",
"@types/hast": "^3.0.0",
"@types/mdx": "^2.0.0",
"collapse-white-space": "^2.0.0",
"collapse-var(--c-primary-text)-space": "^2.0.0",
"devlop": "^1.0.0",
"estree-util-build-jsx": "^3.0.0",
"estree-util-is-identifier-name": "^3.0.0",
@ -10343,9 +10343,9 @@
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
},
"collapse-white-space": {
"collapse-var(--c-primary-text)-space": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-2.1.0.tgz",
"resolved": "https://registry.npmjs.org/collapse-var(--c-primary-text)-space/-/collapse-var(--c-primary-text)-space-2.1.0.tgz",
"integrity": "sha512-loKTxY1zCOuG4j9f6EPnuyyYkf58RnhhWTvRoZEokgB+WbdXehfjFviyOVYkqzEWz1Q5kRiZdBYS5SwxbQYwzw=="
},
"color": {
@ -10865,7 +10865,7 @@
"devlop": "^1.0.0",
"estree-util-attach-comments": "^3.0.0",
"estree-util-is-identifier-name": "^3.0.0",
"hast-util-whitespace": "^3.0.0",
"hast-util-var(--c-primary-text)space": "^3.0.0",
"mdast-util-mdx-expression": "^2.0.0",
"mdast-util-mdx-jsx": "^3.0.0",
"mdast-util-mdxjs-esm": "^2.0.0",
@ -10885,7 +10885,7 @@
"@types/unist": "^3.0.0",
"ccount": "^2.0.0",
"comma-separated-tokens": "^2.0.0",
"hast-util-whitespace": "^3.0.0",
"hast-util-var(--c-primary-text)space": "^3.0.0",
"html-void-elements": "^3.0.0",
"mdast-util-to-hast": "^13.0.0",
"property-information": "^6.0.0",
@ -10905,7 +10905,7 @@
"comma-separated-tokens": "^2.0.0",
"devlop": "^1.0.0",
"estree-util-is-identifier-name": "^3.0.0",
"hast-util-whitespace": "^3.0.0",
"hast-util-var(--c-primary-text)space": "^3.0.0",
"mdast-util-mdx-expression": "^2.0.0",
"mdast-util-mdx-jsx": "^3.0.0",
"mdast-util-mdxjs-esm": "^2.0.0",
@ -10956,9 +10956,9 @@
"unist-util-find-after": "^5.0.0"
}
},
"hast-util-whitespace": {
"hast-util-var(--c-primary-text)space": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
"resolved": "https://registry.npmjs.org/hast-util-var(--c-primary-text)space/-/hast-util-var(--c-primary-text)space-3.0.0.tgz",
"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
"requires": {
"@types/hast": "^3.0.0"
@ -11506,7 +11506,7 @@
"micromark-factory-label": "^2.0.0",
"micromark-factory-space": "^2.0.0",
"micromark-factory-title": "^2.0.0",
"micromark-factory-whitespace": "^2.0.0",
"micromark-factory-var(--c-primary-text)space": "^2.0.0",
"micromark-util-character": "^2.0.0",
"micromark-util-chunked": "^2.0.0",
"micromark-util-classify-character": "^2.0.0",
@ -11731,9 +11731,9 @@
"micromark-util-types": "^2.0.0"
}
},
"micromark-factory-whitespace": {
"micromark-factory-var(--c-primary-text)space": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
"resolved": "https://registry.npmjs.org/micromark-factory-var(--c-primary-text)space/-/micromark-factory-var(--c-primary-text)space-2.0.0.tgz",
"integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
"requires": {
"micromark-factory-space": "^2.0.0",

2
package.json
View file

@ -1,7 +1,7 @@
{
"name": "@firq/fgosite",
"type": "module",
"version": "0.2.0-pre.30",
"version": "0.2.0-pre.32",
"private": true,
"scripts": {
"dev": "astro dev",

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;
}

34
src/layouts/Layout.astro
View file

@ -107,22 +107,28 @@ const mapped_navdata = navdata.map((item) => ({
</html>
<style is:global>
:root {
--hover-scale: 1.05;
--speed: 50%;
--ease: 50%;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--c-darkgray: #1e1e1e;
--c-duskgray: #242424;
--c-gray: #2e2e2e;
--c-lighter: #eee;
--c-lightgray: #3e3e3e;
--c-darkpurple: #b86cff;
--c-purplepink: #c105ff;
--c-darkergray: #1b1b1b;
--c-reddish: #ff0077;
/* Animations */
--a-time-default: 200ms;
--a-time-short: 100ms;
--a-time-slow: 1000ms;
--a-animation-1: ease-in-out;
/* Fonts */
--f-default: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--f-title: 'Work Sans Variable', sans-serif;
font-family: var(--f-default);
/* Colors */
--c-primary-background: #1b1b1b;
--c-secondary-background: #333;
--c-primary-text: #eee;
--c-accent-1: #b86cff;
--c-accent-1-alt: #c105ff;
--c-accent-2: #ff0077;
}
body {
background: var(--c-lightgray);
background: var(--c-secondary-background);
margin: 0px;
}

4
src/layouts/baseSection.astro
View file

@ -34,7 +34,7 @@ const { title } = Astro.props
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
color: var(--c-primary-text);
margin-top: 2rem;
margin-bottom: 0px;
margin-left: auto;
@ -42,7 +42,7 @@ const { title } = Astro.props
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding-bottom: 0.5rem;
}
@media (min-width: 512px) {

54
src/layouts/blogPost.astro
View file

@ -33,8 +33,8 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
justify-content: center;
width: 100%;
text-align: center;
color: white;
background-color: var(--c-gray);
color: var(--c-primary-text);
background-color: var(--c-secondary-background);
padding: 0.5rem 0px;
margin-bottom: 2rem;
text-decoration: none;
@ -43,31 +43,31 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
font-size: 34px;
line-height: 40px;
letter-spacing: -1px;
color: white;
color: var(--c-primary-text);
margin: 0.5rem 3rem 0.5rem 3rem;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
p {
color: white;
color: var(--c-primary-text);
margin: 0.5rem 3rem 0.5rem 3rem;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-gray);
background-color: var(--c-secondary-background);
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
article :global(h2) {
margin-right: 3rem;
word-wrap: normal;
color: white;
color: var(--c-primary-text);
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
@ -77,10 +77,10 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
margin-bottom: 0.5rem;
margin-right: 3rem;
word-wrap: normal;
color: white;
color: var(--c-primary-text);
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
@ -90,10 +90,10 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
margin-bottom: 0.5rem;
margin-right: 3rem;
word-wrap: normal;
color: white;
color: var(--c-primary-text);
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
@ -104,9 +104,10 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
font-style: italic;
}
article {
color: white;
color: var(--c-primary-text);
margin: 0.5rem 3rem 0.5rem 3rem;
font-size: 1.1em;
text-align: justify;
padding-bottom: 5rem;
}
article :global(.astro-code) {
@ -120,31 +121,16 @@ const subtext = `Written by ${frontmatter.author} • Published on ${date}`
@media (min-width: 1000px) {
article {
margin-left: 10rem;
margin-right: 10rem;
margin-left: 22.5%;
margin-right: 22.5%;
}
h1 {
margin-left: 10rem;
margin-right: 10rem;
margin-left: 20%;
margin-right: 20%;
}
p {
margin-left: 10rem;
margin-right: 10rem;
}
}
@media (min-width: 1500px) {
article {
margin-left: 20rem;
margin-right: 20rem;
}
h1 {
margin-left: 20rem;
margin-right: 20rem;
}
p {
margin-left: 20rem;
margin-right: 20rem;
margin-left: 20%;
margin-right: 20%;
}
}
</style>

20
src/layouts/blogSection.astro
View file

@ -42,7 +42,7 @@ const line = displayLine ? "flex" : "none"
bottom: -5rem;
border-radius: 0% 50% 50% 50%;
transform: rotate(45deg);
background-color: var(--c-darkpurple);
background-color: var(--c-accent-1);
}
.start {
@ -50,8 +50,8 @@ const line = displayLine ? "flex" : "none"
border-radius: 40%;
border-style: solid;
border-width: 0.25rem;
border-color: var(--c-lightgray);
background-color: var(--c-darkpurple);
border-color: var(--c-secondary-background);
background-color: var(--c-accent-1);
}
.line {
@ -62,7 +62,7 @@ const line = displayLine ? "flex" : "none"
right: 0;
margin-left: auto;
margin-right: auto;
background-color: var(--c-darkpurple);
background-color: var(--c-accent-1);
height: calc(100% + 5rem);
translate: 0% 2rem;
width: 0.25rem;
@ -71,14 +71,14 @@ const line = displayLine ? "flex" : "none"
h1 {
line-height: 48px;
letter-spacing: -1px;
color: white;
color: var(--c-primary-text);
font-size: 1.6rem;
margin-top: 1rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
@ -96,7 +96,7 @@ const line = displayLine ? "flex" : "none"
align-content: center;
justify-content: space-around;
padding: 1em;
color: white;
color: var(--c-primary-text);
font-size: 1em;
position: relative;
}
@ -115,10 +115,10 @@ const line = displayLine ? "flex" : "none"
font-size: 1.85rem;
}
}
@media (min-width: 1500px) {
@media (min-width: 1100px) {
.wrapper {
margin-left: 15rem;
margin-right: 15rem;
margin-left: 20%;
margin-right: 20%;
flex-direction: row;
}
section {

4
src/layouts/contactSection.astro
View file

@ -15,14 +15,14 @@ const { title } = Astro.props
<style>
h1 {
color: white;
color: var(--c-primary-text);
font-size: 26px;
line-height: 32px;
letter-spacing: -1px;
margin: 0.5rem 0px 0.5rem 0.5em;
padding: 0.25rem 0.75rem;
width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;

6
src/layouts/customFooter.astro
View file

@ -88,11 +88,11 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/
<style>
footer {
color: white;
color: var(--c-primary-text);
bottom: 0;
}
footer > div > a {
color: white;
color: var(--c-primary-text);
}
.sticky-image-wrapper {
position: fixed;
@ -108,7 +108,7 @@ const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/
bottom: -100px;
height: 64px;
width: 64px;
transition: transform 1s ease-in-out;
transition: transform var(--a-time-slow) var(--a-animation-1);
transform: translateX(-50%);
}
</style>

4
src/layouts/servantSection.astro
View file

@ -36,7 +36,7 @@ const { title } = Astro.props
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
color: var(--c-primary-text);
margin-top: 2rem;
margin-bottom: 0px;
margin-left: auto;
@ -44,7 +44,7 @@ const { title } = Astro.props
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding-bottom: 0.5rem;
}

6
src/layouts/taSection.astro
View file

@ -37,20 +37,20 @@ if (abovetext === undefined) {
font-size: 40px;
line-height: 48px;
letter-spacing: -1px;
color: white;
color: var(--c-primary-text);
margin-top: 2rem;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
padding: 0.25rem 0.75rem;
max-width: max-content;
background-color: var(--c-darkgray);
background-color: var(--c-primary-background);
padding: 0.25rem 1.5rem;
border-radius: 0.5rem;
padding-bottom: 0.5rem;
}
h2 {
color: white;
color: var(--c-primary-text);
font-size: 16px;
font-weight: 600;
margin: 5;

10
src/pages/404.astro
View file

@ -33,7 +33,7 @@ const description = "Error. This shouldn't happen :/"
h2 {
font-family: 'Work Sans Variable', sans-serif;
font-weight: 500;
color: white;
color: var(--c-primary-text);
font-size: 1.25rem;
margin-top: 1rem;
max-width: max-content;
@ -46,20 +46,20 @@ const description = "Error. This shouldn't happen :/"
width: fit-content;
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-darkergray);
background-color: var(--c-primary-background);
border-radius: 10px;
border-style: solid;
border-width: 2px;
border-color: var(--c-darkergray);
border-color: var(--c-primary-background);
text-transform: capitalize;
}
a:hover {
border-color: var(--c-darkpurple);
border-color: var(--c-accent-1);
}
img {