aboutsummaryrefslogtreecommitdiff
path: root/src/partials
diff options
context:
space:
mode:
Diffstat (limited to 'src/partials')
-rw-r--r--src/partials/Footer.astro2
-rw-r--r--src/partials/Header.astro12
-rw-r--r--src/partials/TechnologyBadge.astro134
3 files changed, 9 insertions, 139 deletions
diff --git a/src/partials/Footer.astro b/src/partials/Footer.astro
index bc30217..213aaa8 100644
--- a/src/partials/Footer.astro
+++ b/src/partials/Footer.astro
@@ -39,7 +39,7 @@ import t from "../i18n/es.json";
}
p {
- max-width: 82ch;
+ max-width: 60ch;
margin-inline: auto;
}
}
diff --git a/src/partials/Header.astro b/src/partials/Header.astro
index 2ca99bb..500fadd 100644
--- a/src/partials/Header.astro
+++ b/src/partials/Header.astro
@@ -48,11 +48,15 @@ import t from "../i18n/es.json";
}
@media (max-width: $breakpointTablet) {
- }
+ header {
+ flex-direction: column;
+ align-items: center;
+ gap: 1rem;
- @media (min-width: $breakpointTablet) {
+ a {
+ font-size: 1.5rem;
+ }
+ }
}
- @media (min-width: $breakpointDesktop) {
- }
</style>
diff --git a/src/partials/TechnologyBadge.astro b/src/partials/TechnologyBadge.astro
deleted file mode 100644
index c5e170e..0000000
--- a/src/partials/TechnologyBadge.astro
+++ /dev/null
@@ -1,134 +0,0 @@
----
-interface Technology {
- name: string;
- colour: string;
- text?: "light" | "dark";
- icon: string;
-}
-
-export const technologies: { [key: string]: Technology } = {
- java: {
- name: "Java",
- colour: "#e76f00",
- icon: "java",
- },
- dotnet: {
- name: ".NET",
- colour: "#512bd4",
- icon: "dotnet",
- },
- go: {
- name: "Go",
- colour: "#00add8",
- icon: "go",
- },
- mysql: {
- name: "MySQL",
- colour: "#3a75b0",
- icon: "mysql",
- },
- mongodb: {
- name: "MongoDB",
- colour: "#4db33d",
- icon: "mongodb",
- },
- sqlserver: {
- name: "SQL Server",
- colour: "#cc2927",
- icon: "sqlserver",
- },
- php: {
- name: "PHP",
- colour: "#8892be",
- icon: "php",
- },
- python: {
- name: "Python",
- colour: "#306998",
- icon: "python",
- },
- javascript: {
- name: "JavaScript",
- colour: "#ffe70b",
- text: "dark",
- icon: "javascript",
- },
- typescript: {
- name: "TypeScript",
- colour: "#007acc",
- icon: "typescript",
- },
- azure: {
- name: "Azure",
- colour: "#0089d6",
- icon: "azure",
- },
- linux: {
- name: "Linux",
- colour: "#010101",
- icon: "linux",
- },
- windows: {
- name: "Windows",
- colour: "#0078d6",
- icon: "windows",
- },
- astro: {
- name: "Astro",
- colour: "#3d50f5",
- icon: "astro",
- },
- rabbitmq: {
- name: "RabbitMQ",
- colour: "#ff6600",
- icon: "rabbitmq",
- },
-};
-
-interface Props {
- // tech must be name of the key of one of the technologies
- code: string;
-
- size?: "small" | "large";
-}
-
-const { code, size } = Astro.props;
-const tech = technologies[code] as Technology;
----
-
-<span class={`pill-${size ?? "small"} text-${tech.text ?? "light"}`}>
- {tech.name}
-</span>
-
-<style define:vars={{ colour: tech.colour }}>
- span {
- display: inline-block;
- background-color: var(--colour);
- font-weight: bold;
- text-transform: uppercase;
- border-radius: 0.5em;
- padding: 0.5em 1em;
- }
-
- .text-dark {
- color: #000;
- }
-
- .text-light {
- color: #fff;
- }
-
- .pill-small {
- padding: 0.35em 0.5em;
- border-radius: 0.25em;
-
- font-size: 0.75em;
- }
-
- .pill-large {
- padding: 0.35 0.75em;
- border-radius: 0.5em;
-
- font-size: 0.75em;
- }
-</style>