Colors and other stuff
Some checks failed
/ get-version (push) Successful in 3s
/ astro-check (push) Failing after 9s
/ checking (push) Failing after 8s
/ create-release (push) Has been skipped
/ check-tag (push) Successful in 2s
/ build-site (push) Has been skipped
/ auto-deploy-dockge (push) Has been skipped
/ run-unlighthouse (push) Has been skipped
Some checks failed
/ get-version (push) Successful in 3s
/ astro-check (push) Failing after 9s
/ checking (push) Failing after 8s
/ create-release (push) Has been skipped
/ check-tag (push) Successful in 2s
/ build-site (push) Has been skipped
/ auto-deploy-dockge (push) Has been skipped
/ run-unlighthouse (push) Has been skipped
This commit is contained in:
parent
aab26e63b2
commit
34e24346d1
GPG key ID:
3ACC61C8CEC83C20
25 changed files with 234 additions and 272 deletions
44
package-lock.json
generated
44
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 >></span></a>
|
||||
<a href=`https://fgo-ta.com/` target="_blank" rel="noopener noreferrer"><span class="fancy">Visit fgo-ta.com >></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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in a new issue