From 34e24346d1f6a27c0940d4ad1c7e5ae75122607b Mon Sep 17 00:00:00 2001 From: Firq Date: Thu, 24 Oct 2024 18:52:33 +0200 Subject: [PATCH] Colors and other stuff --- package-lock.json | 44 ++++++------ package.json | 2 +- src/components/cards/blogCard.astro | 24 +++---- src/components/cards/ceCard.astro | 6 +- src/components/cards/contactCard.astro | 81 ++++++++++------------ src/components/cards/favouriteCard.astro | 11 ++- src/components/cards/servantCard.astro | 14 ++-- src/components/cards/taCard.astro | 24 +++---- src/components/cards/technologyCard.astro | 82 ++++++++++------------- src/components/fgotaHero.astro | 20 +++--- src/components/hero.astro | 4 +- src/components/navbar/navbar.astro | 10 +-- src/components/navbar/navbarEntry.astro | 12 ++-- src/components/titles/smallTitle.astro | 18 ++--- src/components/titles/title.astro | 10 +-- src/components/youtubeEmbed.astro | 2 +- src/layouts/Layout.astro | 34 ++++++---- src/layouts/baseSection.astro | 4 +- src/layouts/blogPost.astro | 54 ++++++--------- src/layouts/blogSection.astro | 20 +++--- src/layouts/contactSection.astro | 4 +- src/layouts/customFooter.astro | 6 +- src/layouts/servantSection.astro | 4 +- src/layouts/taSection.astro | 6 +- src/pages/404.astro | 10 +-- 25 files changed, 234 insertions(+), 272 deletions(-) diff --git a/package-lock.json b/package-lock.json index dcc2d34..dbe79ab 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index bd24e07..2834e46 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/cards/blogCard.astro b/src/components/cards/blogCard.astro index 82ecacb..1838ed5 100644 --- a/src/components/cards/blogCard.astro +++ b/src/components/cards/blogCard.astro @@ -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; diff --git a/src/components/cards/ceCard.astro b/src/components/cards/ceCard.astro index 150309c..a379dbc 100644 --- a/src/components/cards/ceCard.astro +++ b/src/components/cards/ceCard.astro @@ -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 { diff --git a/src/components/cards/contactCard.astro b/src/components/cards/contactCard.astro index d3b3838..9697ee7 100644 --- a/src/components/cards/contactCard.astro +++ b/src/components/cards/contactCard.astro @@ -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( '/src/assets/social/*.{png,webp}' @@ -25,12 +24,12 @@ const loadedLogoImage = plsLoadImage(images_logos, imagePath) aria-label=`${site} - new window` >
- +

{site}

- + diff --git a/src/components/cards/favouriteCard.astro b/src/components/cards/favouriteCard.astro index 39d27a6..cae92ee 100644 --- a/src/components/cards/favouriteCard.astro +++ b/src/components/cards/favouriteCard.astro @@ -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; diff --git a/src/components/cards/servantCard.astro b/src/components/cards/servantCard.astro index 5ece04e..7b9a9e8 100644 --- a/src/components/cards/servantCard.astro +++ b/src/components/cards/servantCard.astro @@ -48,15 +48,15 @@ let loading: "eager" | "lazy" = index <= 3 ? "eager" : "lazy"; diff --git a/src/components/fgotaHero.astro b/src/components/fgotaHero.astro index 624028b..3d2d666 100644 --- a/src/components/fgotaHero.astro +++ b/src/components/fgotaHero.astro @@ -10,7 +10,7 @@ const display = fadeout ? "": "display: none" I am currently creating a site to catalogue past and future TAs for the whole community. - Visit fgo-ta.com >> + Visit fgo-ta.com >>
@@ -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; } diff --git a/src/components/hero.astro b/src/components/hero.astro index 08ad1d7..615129b 100644 --- a/src/components/hero.astro +++ b/src/components/hero.astro @@ -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; } diff --git a/src/components/navbar/navbar.astro b/src/components/navbar/navbar.astro index 008619b..44985cd 100644 --- a/src/components/navbar/navbar.astro +++ b/src/components/navbar/navbar.astro @@ -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; diff --git a/src/components/navbar/navbarEntry.astro b/src/components/navbar/navbarEntry.astro index a3ee4d6..04209f1 100644 --- a/src/components/navbar/navbarEntry.astro +++ b/src/components/navbar/navbarEntry.astro @@ -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; } diff --git a/src/components/titles/smallTitle.astro b/src/components/titles/smallTitle.astro index 72c2f6f..280b292 100644 --- a/src/components/titles/smallTitle.astro +++ b/src/components/titles/smallTitle.astro @@ -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; } diff --git a/src/components/titles/title.astro b/src/components/titles/title.astro index 31bd5af..692e20d 100644 --- a/src/components/titles/title.astro +++ b/src/components/titles/title.astro @@ -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; } diff --git a/src/components/youtubeEmbed.astro b/src/components/youtubeEmbed.astro index e0a99fa..181ff60 100644 --- a/src/components/youtubeEmbed.astro +++ b/src/components/youtubeEmbed.astro @@ -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; } diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 9a89ae6..1c47e29 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -107,22 +107,28 @@ const mapped_navdata = navdata.map((item) => ({ diff --git a/src/layouts/blogSection.astro b/src/layouts/blogSection.astro index 9fdf39a..ed559a5 100644 --- a/src/layouts/blogSection.astro +++ b/src/layouts/blogSection.astro @@ -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 { diff --git a/src/layouts/contactSection.astro b/src/layouts/contactSection.astro index d872bc5..a7a20a2 100644 --- a/src/layouts/contactSection.astro +++ b/src/layouts/contactSection.astro @@ -15,14 +15,14 @@ const { title } = Astro.props diff --git a/src/layouts/servantSection.astro b/src/layouts/servantSection.astro index af4788b..ae2a814 100644 --- a/src/layouts/servantSection.astro +++ b/src/layouts/servantSection.astro @@ -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; } diff --git a/src/layouts/taSection.astro b/src/layouts/taSection.astro index 6931eb8..d53fe85 100644 --- a/src/layouts/taSection.astro +++ b/src/layouts/taSection.astro @@ -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; diff --git a/src/pages/404.astro b/src/pages/404.astro index 5435dba..0af330d 100644 --- a/src/pages/404.astro +++ b/src/pages/404.astro @@ -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 {