itziarZG/MyWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: change icons and fonts

Browse Source
This commit is contained in:
itziarZG
2026-07-20 15:34:48 +02:00
parent b6a2b049bb
commit b4ff3a0aca
11 changed files with 93 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+86
View File
@@ -1,3 +1,89 @@
/* ==========================================================================
Self-Hosted Fonts & Icons
========================================================================== */
/* Space Grotesk */
@font-face {
font-display: swap;
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 300;
src: url('../fonts/space/space-grotesk-v22-latin-300.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 400;
src: url('../fonts/space/space-grotesk-v22-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
src: url('../fonts/space/space-grotesk-v22-latin-500.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 600;
src: url('../fonts/space/space-grotesk-v22-latin-600.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
src: url('../fonts/space/space-grotesk-v22-latin-700.woff2') format('woff2');
}
/* Instrument Serif */
@font-face {
font-display: swap;
font-family: 'Instrument Serif';
font-style: normal;
font-weight: 400;
src: url('../fonts/instrument/instrument-serif-v5-latin-regular.woff2') format('woff2');
}
@font-face {
font-display: swap;
font-family: 'Instrument Serif';
font-style: italic;
font-weight: 400;
src: url('../fonts/instrument/instrument-serif-v5-latin-italic.woff2') format('woff2');
}
/* Material Symbols Outlined */
@font-face {
font-display: swap;
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 100 700;
src: url('../fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2') format('woff2');
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
}
/* Glass Morphism Effect */ /* Glass Morphism Effect */
.glass { .glass {
background: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.4);
fonts/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2
BIN
View File
Binary file not shown.
fonts/instrument/instrument-serif-v5-latin-italic.woff2
BIN
View File
Binary file not shown.
fonts/instrument/instrument-serif-v5-latin-regular.woff2
BIN
View File
Binary file not shown.
fonts/space/space-grotesk-v22-latin-300.woff2
BIN
View File
Binary file not shown.
fonts/space/space-grotesk-v22-latin-500.woff2
BIN
View File
Binary file not shown.
fonts/space/space-grotesk-v22-latin-600.woff2
BIN
View File
Binary file not shown.
fonts/space/space-grotesk-v22-latin-700.woff2
BIN
View File
Binary file not shown.
fonts/space/space-grotesk-v22-latin-regular.woff2
BIN
View File
Binary file not shown.
huella.html
+3 -12
View File
@@ -29,14 +29,6 @@
}, },
}; };
</script> </script>
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Instrument+Serif:ital@0;1&amp;display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/styles.css" />
</head> </head>
<body <body
@@ -258,13 +250,12 @@
<h2 <h2
class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10 text-slate-900 dark:text-white" class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10 text-slate-900 dark:text-white"
> >
¿Creamos algo<br />extraordinario? ¿Hablamos?
</h2> </h2>
<p <p
class="text-xl text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto relative z-10" class="text-xl text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto relative z-10"
> >
Estoy siempre abierta a colaborar en proyectos que desafíen los Si buscas tecnología ligera, accesible y con los pies en la tierra — o simplemente quieres hablar de soberanía digital — escríbeme.
límites de lo posible con soberanía digital y tecnología responsable.
</p> </p>
<div <div
class="flex flex-col md:flex-row justify-center gap-6 relative z-10" class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
@@ -299,7 +290,7 @@
<div <div
class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm" class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm"
> >
<p>© 2025 Itziar ZG. Hecho con IA y mucho café.</p> <p>© 2026 Itziar ZG.</p>
<div class="flex gap-8"> <div class="flex gap-8">
<a <a
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
index.html
+4 -13
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Itziar ZG | AI &amp; Automation Developer</title> <title>Itziar ZG | Desarrollo web soberano y sostenible</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config"> <script id="tailwind-config">
tailwind.config = { tailwind.config = {
@@ -29,14 +29,6 @@
}, },
}; };
</script> </script>
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Instrument+Serif:ital@0;1&amp;display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/styles.css" />
</head> </head>
<body <body
@@ -591,13 +583,12 @@
<h2 <h2
class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10 text-slate-900 dark:text-white" class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10 text-slate-900 dark:text-white"
> >
¿Creamos algo<br />extraordinario? ¿Hablamos?
</h2> </h2>
<p <p
class="text-xl text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto relative z-10" class="text-xl text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto relative z-10"
> >
Estoy siempre abierta a colaborar en proyectos que desafíen los Si buscas tecnología ligera, accesible y con los pies en la tierra — o simplemente quieres hablar de soberanía digital — escríbeme.
límites de lo posible con IA y automatización.
</p> </p>
<div <div
class="flex flex-col md:flex-row justify-center gap-6 relative z-10" class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
@@ -632,7 +623,7 @@
<div <div
class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm" class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm"
> >
<p>© 2025 Itziar ZG. Hecho con IA y mucho café.</p> <p>© 2026 Itziar ZG.</p>
<div class="flex gap-8"> <div class="flex gap-8">
<a <a
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400" class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"