I recently published my portfolio website. I would appreciate some feedback and any advice on the design, the HTML/CSS coding, the responsiveness as well as some feedback regarding best practices, efficient code and performance.
I created this website using a bit of Bootstrap classes and my own CSS style sheet.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Home - alejandro.uy / Desarrollo Web Front-End</title>
<meta name="description" content="Alejandro Bovino, desarrollador web front-End.">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon_io/favicon-16x16.png">
<link rel="manifest" href="/favicon_io/site.webmanifest" crossorigin="use-credentials">
<link rel="mask-icon" href="/favicon_io/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/favicon_io/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/favicon_io/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Glory:wght@400;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" rel="stylesheet">
<script src="/assets/script-out/fontfaceobserver.js"></script>
<script>
const material_symbols = new FontFaceObserver("Material Symbols Outlined");
Promise.all([material_symbols.load()]).then(function() {
document.documentElement.classList.add("fonts-loaded");
});
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PXGTG2YMSV"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-PXGTG2YMSV');
</script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- <link rel="stylesheet" href="/dist/style/style.min.css?1714191228" /> -->
<link rel="stylesheet" href="/dist/style/style.min.css">
</head>
<body>
<script>
const theme = localStorage.getItem("theme") || 'light';
document.documentElement.setAttribute("data-theme", theme);
</script>
<!-- separator -->
<header id="header">
<div class="theme-logo">
<span class="theme-logo__inner" title="alejandro.uy">
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 116" width="42" height="50" xmlns="http://www.w3.org/2000/svg">
<path d="m253 1009-243-141v-289c0-288 0-289 22-302 86-53 461-267 468-267 5 0 46 22 92 49s153 90 238 139l155 90 3 290 2 290-244 141c-134 77-245 141-247 141s-113-64-246-141zm205 63c-19-47-262-451-267-445-14 16-132 225-129 228 2 1 80 46 173 100 94 54 179 104 190 111 22 16 38 18 33 6zm164-35c40-24 96-56 123-71 37-21 151-87 193-111 1-1-28-55-64-119-37-64-70-113-75-109-8 9-259 443-259 449 0 8 10 3 82-39zm15-204 131-228-134-3c-74-1-194-1-268 0l-135 3 131 228c72 125 134 227 137 227 4 0 66-102 138-227zm-534-130c31-54 59-106 62-115 6-14-87-193-116-222-5-6-9 77-9 212 0 122 2 222 4 222s29-44 59-97zm857-130c0-132-4-213-9-207-21 21-122 206-119 217 6 23 113 207 121 207 4 0 7-98 7-217zm-222-71c-18-32-78-138-133-235s-102-177-105-177c-4 0-257 435-268 462-2 5 118 8 268 8h271zm-405-199c70-122 127-224 127-226 0-3-89 46-197 109-109 63-198 118-198 122 0 17 130 231 135 224 4-4 64-107 133-229zm541 117 66-115-48-28c-185-110-343-199-347-196-2 2 55 106 127 232 72 125 132 226 134 224 1-1 32-54 68-117z" fill="currentColor" transform="matrix(.1 0 0 -.1 0 116)" />
</svg>
<span class="theme-logo__label">Desarrollo <br>Front-End </span>
</span>
</div>
<div class="theme-header__wrapper">
<nav class="theme-nav theme-nav-1 d-none d-lg-block">
<ul class="theme-nav-1__ul">
<li class="theme-nav-1__ul__li">
<span class="btn active" title="Home">Home</span>
</li>
<li class="theme-nav-1__ul__li">
<a href="/acerca-de/" class="btn" title="Acerca de">Acerca de</a>
</li>
<li class="theme-nav-1__ul__li">
<a href="/trabajos/" class="btn" title="Trabajos">Trabajos</a>
</li>
<li class="theme-nav-1__ul__li">
<a href="/blog/" class="btn" title="Blog">Blog</a>
</li>
</ul>
</nav>
<nav class="theme-nav theme-nav-5">
<ul class="theme-nav-5__ul">
<li class="theme-nav-5__ul__li d-none d-lg-block">
<button class="btn" data-bs-toggle="popover" title="Disminuir tamaño de texto" data-bs-content="Para disminuir el tamaño del texto, puede utilizar estos atajos en su navegador web.
<br>
<b>Windows y Linux</b>: Presione Ctrl y -
<br>
<b>Mac </b>: Presione ⌘ y -">
<span class="material-symbols-outlined material-symbols-outlined--sm">text_decrease</span>
</button>
</li>
<li class="theme-nav-5__ul__li d-none d-lg-block">
<button class="btn" data-bs-toggle="popover" title="Aumentar tamaño de texto" data-bs-content="Para aumentar el tamaño del texto, puede utilizar estos atajos en su navegador web.
<br>
<b>Windows y Linux</b>: Presione Ctrl y +
<br>
<b>Mac </b>: Presione ⌘ y +">
<span class="material-symbols-outlined material-symbols-outlined--sm">text_increase</span>
</button>
</li>
<li class="theme-nav-5__ul__li">
<button title="Tema oscuro" data-bs-toggle="tooltip" data-bs-placement="bottom" tabindex="0" class="btn btn-toggle-theme" id="theme-switch-dark">
<span class="material-symbols-outlined material-symbols-outlined--sm">nightlight</span>
</button>
<button title="Tema claro" data-bs-toggle="tooltip" data-bs-placement="bottom" tabindex="0" class="btn btn-toggle-theme" id="theme-switch-light">
<span class="material-symbols-outlined material-symbols-outlined--sm">light_mode</span>
</button>
</li>
<li class="theme-nav-5__ul__li d-none d-lg-block">
<!-- -->
<a href="/blog/politica-privacidad/" class="btn" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Help">
<span class="material-symbols-outlined material-symbols-outlined--sm">help</span>
</a>
</li>
<li class="theme-nav-5__ul__li d-block d-lg-none">
<button class="btn" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">
<span class="material-symbols-outlined material-symbols-outlined--sm">menu</span>
</button>
</li>
</ul>
</nav>
</div>
</header>
<aside id="sidebar">
<nav class="theme-nav theme-nav-2">
<ul class="theme-nav-2__ul theme-nav-2__ul--md">
<li class="theme-nav-2__ul__li">
<span class="btn active" title="Home">
<span class="material-symbols-outlined material-symbols-outlined--md">home</span> HOME </span>
</li>
<li class="theme-nav-2__ul__li">
<a href="/diseno-web/" class="btn" title="Diseño Web">
<span class="material-symbols-outlined material-symbols-outlined--md"> design_services </span> Diseño Web </a>
</li>
<li class="theme-nav-2__ul__li">
<a href="/escuela-de-desarrollo-web/" class="btn" title="Escuela de Desarrollo Web">
<span class="material-symbols-outlined material-symbols-outlined--md">local_library</span> Escuela </a>
</li>
<li class="theme-nav-2__ul__li">
<a href="/templates/" class="btn" title="Templates">
<span class="material-symbols-outlined material-symbols-outlined--md"> view_quilt </span> Templates </a>
</li>
<li class="theme-nav-2__ul__li">
<a href="/contacto/" class="btn" title="Contacto">
<span class="material-symbols-outlined material-symbols-outlined--md"> send </span> Contacto </a>
</li>
</ul>
<ul class="theme-nav-2__ul theme-nav-2__ul--sm">
<li class="theme-nav-2__ul__li">
<span class="btn active" title="Home">
<span class="material-symbols-outlined material-symbols-outlined--md">home</span>
</span>
</li>
<li class="theme-nav-2__ul__li">
<a href="/diseno-web/" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Diseño Web">
<span class="material-symbols-outlined material-symbols-outlined--md"> design_services </span>
</a>
</li>
<li class="theme-nav-2__ul__li">
<a href="/escuela-de-desarrollo-web/" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Escuela de Desarrollo Web">
<span class="material-symbols-outlined material-symbols-outlined--md">local_library</span>
</a>
</li>
<li class="theme-nav-2__ul__li">
<a href="/templates/" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Templates">
<span class="material-symbols-outlined material-symbols-outlined--md"> view_quilt </span>
</a>
</li>
<li class="theme-nav-2__ul__li">
<a href="/contacto/" class="btn" data-bs-toggle="tooltip" data-bs-placement="right" title="Contacto">
<span class="material-symbols-outlined material-symbols-outlined--md"> send </span>
</a>
</li>
</ul>
</nav>
</aside>
<main id="main" class="theme-main">
<article>
<h1 class="theme-title theme-title-1">Desarrollo Web Front-End</h1>
<p> El trabajo de un Desarrollador Front-End es hacer que los sitios web sean visualmente atractivos para los usuarios finales. Toman una base de código y la convierten en una experiencia accesible del lado del cliente. Si alguna vez usó un sitio web, interactuó con el trabajo de un Desarrollador Front-End. </p>
<p> Los lenguajes de programación más comunes son: <strong>HTML</strong> (lenguaje de marcado de hipertexto), <a href="/blog/tag/css/">
<strong>CSS</strong>
</a> (hojas de estilo en cascada) y <a href="/blog/tag/javascript/">
<strong>JavaScript</strong>
</a>. Estos tres lenguajes principales le indican cómo mostrar y qué detalles de diseño (como el color de la fuente), el contenido en una página web en el lado del cliente (el navegador web). </p>
<hr>
<div class="theme-card">
<div class="theme-card__c1">
<a href="https://products-web-app.netlify.app" class="btn btn-epsilon btn-card" target="app" title="Product App">
<svg stroke="currentColor" fill="currentColor" stroke-width="0" role="img" viewBox="0 0 24 24" height="1.5rem" width="1.5rem" xmlns="http://www.w3.org/2000/svg">
<title></title>
<path d="M20.21 24c-1.148-.007-2.477-.334-3.89-.915-2.823-1.163-6.04-3.372-9.036-6.367C4.289 13.723 2.075 10.505.913 7.68-.25 4.857-.383 2.36.988.989 2.358-.38 4.855-.248 7.679.915c.306.125.617.265.932.415-.331.113-.658.24-.974.383l-.141-.058C4.832.558 2.698.519 1.607 1.609.517 2.7.557 4.83 1.653 7.494c1.097 2.663 3.235 5.793 6.147 8.704 2.91 2.911 6.044 5.05 8.708 6.147 2.664 1.097 4.79 1.136 5.88.045 1.091-1.09 1.056-3.22-.041-5.884-.108-.263-.23-.531-.358-.803.134-.317.25-.642.354-.973.282.54.53 1.07.744 1.589 1.163 2.823 1.292 5.32-.079 6.691-.685.685-1.651.997-2.799.99zM3.79 24c-1.148.008-2.117-.305-2.802-.99-1.37-1.37-1.238-3.868-.075-6.691.235-.572.517-1.16.836-1.76.098.333.212.66.34.978a17.67 17.67 0 00-.436.969C.556 19.169.521 21.3 1.611 22.39c1.091 1.091 3.221 1.051 5.885-.045.922-.38 3.021-1.69 4.026-2.308.216.162.433.32.649.474-1.157.733-3.415 2.13-4.492 2.574-1.412.581-2.74.907-3.888.915zm9.753-4.458c-.214-.14-.429-.282-.645-.433a34.547 34.547 0 003.302-2.911c2.912-2.911 5.05-6.04 6.147-8.704 1.097-2.664 1.132-4.794.042-5.885-1.091-1.09-3.217-1.055-5.88.042l-.072.029a10.726 10.726 0 00-.99-.379c.295-.14.587-.272.874-.39 2.824-1.163 5.321-1.292 6.691.078s1.238 3.864.075 6.688c-1.162 2.823-3.376 6.046-6.37 9.04a35.747 35.747 0 01-3.174 2.825zm1.95 1.156c-.325-.17-1.798-1.073-2.135-1.273 1.002-.806 2.423-1.97 3.396-2.944 1.718-1.718 3.981-4.787 5.162-6.555-.008.111-.093 2.49-.105 2.6a9.802 9.802 0 01-6.318 8.172zm-6.928-.034c-3.407-1.308-6.043-4.71-6.287-8.198-.01-.151-.06-.399-.054-.984.007-.602.056-1.423.159-1.283 1.036 1.42 3.976 5.455 5.352 6.83.973.973 1.927 1.624 2.929 2.43a112.45 112.45 0 01-2.1 1.205zm3.43-2.208a33.27 33.27 0 01-3.443-3.01c-2.54-2.54-4.462-5.254-5.568-7.582 1.45-3.597 4.973-6.138 9.087-6.138 4.051 0 7.53 2.465 9.02 5.976-1.093 2.363-3.045 5.145-5.643 7.743a33.161 33.161 0 01-3.452 3.011z"></path>
</svg>
<em> Products App </em>
</a>
</div>
<div class="theme-card__c2">
<p>
<strong>Ültimo proyecto:</strong> " <a href="https://products-web-app.netlify.app" target="app" title="Product App">Products App</a>" - Web App creada con la librería de JavaScript <a href="https://react.dev/" target="react_dev">React</a>. Los productos provienen de la <a href="https://fakeapi.platzi.com/" target="_blank">fake API de Platzy</a>.
</p>
</div>
</div>
<hr>
<div class="container text-center theme-feature-container">
<div class="row">
<div class="col-lg-4">
<p class="mb-0 s-mb-1">
<em> Desarrollador Web enfocado en Front-End con base en Montevideo, Uruguay que escribe código limpio, elegante y eficiente </em>
</p>
</div>
<div class="col-lg-4">
<p class="mb-0 s-mb-1">
<em>
<!-- Diseño web personalizado para mejorar su presencia en línea y aumentar su impacto. --> Con tecnologías web como HTML, CSS y JavaScript, se puede crear un sitio flexible que se vea bien en todos los tamaños de pantalla
</em>
</p>
</div>
<div class="col-lg-4">
<p class="mb-0">
<em> Más de una década de experiencia en creación de sitios web Front-End para diferentes casos </em>
</p>
</div>
</div>
</div>
</article>
</main>
<aside id="aside">
<article>
<h2 class="theme-title theme-title-3 theme-title--has-icon">
<a href="/blog/2023/03/10/javascript-basico/">JavaScript básico</a>
</h2>
<!-- <div class="mb-2"><small>16 de noviembre de 2022</small></div> -->
<p> JavaScript es un lenguaje de programación popular usado por el 78% de los desarrolladores... </p>
<div>
<a href="/blog/2023/03/10/javascript-basico/" class="btn btn-epsilon"> Continuar leyendo <span class="material-symbols-outlined material-symbols-outlined--sm">read_more</span>
</a>
</div>
</article>
<hr>
<article>
<h2 class="theme-title theme-title-3 theme-title--has-icon">
<a href="/blog/2023/02/09/5-grandes-frameworks-css-para-2023/">5 grandes frameworks CSS para 2023</a>
</h2>
<!-- <div class="mb-2"><small>16 de noviembre de 2022</small></div> -->
<p> Este artículo ilustrará los frameworks CSS más seguros, confiables y populares... </p>
<div>
<a href="/blog/2023/02/09/5-grandes-frameworks-css-para-2023/" class="btn btn-epsilon"> Continuar leyendo <span class="material-symbols-outlined material-symbols-outlined--sm">read_more</span>
</a>
</div>
</article>
</aside>
<footer id="footer">
<nav class="theme-nav theme-nav-1 theme-nav-1--sm d-none d-lg-block">
<ul class="theme-nav-1__ul">
<li class="theme-nav-1__ul__li">
<a href="/acerca-de/" class="btn" title="Acerca de">Acerca de</a>
</li>
<li class="theme-nav-1__ul__li">
<a href="/escuela-de-desarrollo-web/" class="btn" title="Escuela de Desarrollo web">Escuela</a>
</li>
<li class="theme-nav-1__ul__li">
<a href="/links/" class="btn" title="Links">Links</a>
</li>
<li class="theme-nav-1__ul__li">
<a href="/contacto/" class="btn" title="Contacto">Contacto</a>
</li>
</ul>
</nav>
<nav class="theme-nav theme-nav-4">
<ul class="theme-nav-4__ul">
<li class="theme-nav-4__ul__li">
<a href="https://about.me/alejandrobovino" target="st" class="btn social-link"> //about.me/alejandrobovino </a>
</li>
<li class="theme-nav-4__ul__li u-mr0-sm">
<a href="https://github.com/alejandr0bovino" class="btn social-icon" target="github" title="GitHub">
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="m9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0 -.94-2.61c3.14-.35 6.44-1.54 6.44-7a5.44 5.44 0 0 0 -1.5-3.75 5.07 5.07 0 0 0 -.09-3.77s-1.18-.35-3.91 1.48a13.38 13.38 0 0 0 -7 0c-2.73-1.83-3.91-1.48-3.91-1.48a5.07 5.07 0 0 0 -.09 3.77 5.44 5.44 0 0 0 -1.5 3.78c0 5.42 3.3 6.61 6.44 7a3.37 3.37 0 0 0 -.94 2.58v3.87" />
</svg>
</a>
</li>
<li class="theme-nav-4__ul__li c-sm-mr-0">
<a href="https://twitter.com/alejandrobovino" class="btn social-icon" target="twitter" title="Twitter">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" width="24px" height="24px">
<path fill="currentColor" d="M12.186 8.672 18.743.947h-2.927l-5.005 5.9-4.44-5.9H0l7.434 9.876-6.986 8.23h2.927l5.434-6.4 4.82 6.4H20L12.186 8.672Zm-2.267 2.671L8.544 9.515 3.2 2.42h2.2l4.312 5.719 1.375 1.828 5.731 7.613h-2.2l-4.699-6.237Z" />
</svg>
</a>
</li>
<li class="theme-nav-4__ul__li d-none d-xl-block">
<a href="https://www.instagram.com/alejandro_bovino/" class="btn social-icon" target="instagram" title="Instagram">
<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2">
<path d="m2 6c0-2.20914 1.79086-4 4-4h12c2.2091 0 4 1.79086 4 4v12c0 2.2091-1.7909 4-4 4h-12c-2.20914 0-4-1.7909-4-4z" />
<circle cx="12" cy="12.0001" r="4.44444" />
<path d="m18 6.0217v-.0217" />
</g>
</svg>
</a>
</li>
<li class="theme-nav-4__ul__li d-none d-lg-block">
<a href="https://www.youtube.com/alejandrobovino" class="btn social-icon" target="youtube" title="YouTube">
<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 12L10.5 14V10L14 12Z" fill="currentColor" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M2 12.7075V11.2924C2 8.39705 2 6.94939 2.90549 6.01792C3.81099 5.08645 5.23656 5.04613 8.08769 4.96549C9.43873 4.92728 10.8188 4.8999 12 4.8999C13.1812 4.8999 14.5613 4.92728 15.9123 4.96549C18.7634 5.04613 20.189 5.08645 21.0945 6.01792C22 6.94939 22 8.39705 22 11.2924V12.7075C22 15.6028 22 17.0505 21.0945 17.9819C20.189 18.9134 18.7635 18.9537 15.9124 19.0344C14.5613 19.0726 13.1812 19.1 12 19.1C10.8188 19.1 9.43867 19.0726 8.0876 19.0344C5.23651 18.9537 3.81097 18.9134 2.90548 17.9819C2 17.0505 2 15.6028 2 12.7075Z" stroke="currentColor" stroke-width="2.2" />
</svg>
</a>
</li>
</ul>
</nav>
</footer>
<!-- separator -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<div class="offcanvas__theme-logo">
<a href="/">
<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 116" width="42" height="50" xmlns="http://www.w3.org/2000/svg">
<path d="m253 1009-243-141v-289c0-288 0-289 22-302 86-53 461-267 468-267 5 0 46 22 92 49s153 90 238 139l155 90 3 290 2 290-244 141c-134 77-245 141-247 141s-113-64-246-141zm205 63c-19-47-262-451-267-445-14 16-132 225-129 228 2 1 80 46 173 100 94 54 179 104 190 111 22 16 38 18 33 6zm164-35c40-24 96-56 123-71 37-21 151-87 193-111 1-1-28-55-64-119-37-64-70-113-75-109-8 9-259 443-259 449 0 8 10 3 82-39zm15-204 131-228-134-3c-74-1-194-1-268 0l-135 3 131 228c72 125 134 227 137 227 4 0 66-102 138-227zm-534-130c31-54 59-106 62-115 6-14-87-193-116-222-5-6-9 77-9 212 0 122 2 222 4 222s29-44 59-97zm857-130c0-132-4-213-9-207-21 21-122 206-119 217 6 23 113 207 121 207 4 0 7-98 7-217zm-222-71c-18-32-78-138-133-235s-102-177-105-177c-4 0-257 435-268 462-2 5 118 8 268 8h271zm-405-199c70-122 127-224 127-226 0-3-89 46-197 109-109 63-198 118-198 122 0 17 130 231 135 224 4-4 64-107 133-229zm541 117 66-115-48-28c-185-110-343-199-347-196-2 2 55 106 127 232 72 125 132 226 134 224 1-1 32-54 68-117z" fill="currentColor" transform="matrix(.1 0 0 -.1 0 116)" />
</svg>
</a>
</div>
<h3 class="offcanvas-title" id="offcanvasRightLabel">Desarrollo Front-End</h3>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body p-4 pt-0">
<hr class="offcanvas_hr">
<ul class="navbar-nav flex-row flex-wrap">
<li class="nav-item col-5">
<span class="nav-link nav-link--active">Home</span>
</li>
<li class="nav-item col-5 offset-2">
<a class="nav-link" href="/blog/">Blog</a>
</li>
<li class="nav-item col-5">
<a class="nav-link" href="/diseno-web/">Diseño Web</a>
</li>
<li class="nav-item col-5 offset-2">
<a class="nav-link" href="/acerca-de/">Acerca de</a>
</li>
<li class="nav-item col-5">
<a class="nav-link" href="/escuela-de-desarrollo-web/">Escuela</a>
</li>
<li class="nav-item col-5 offset-2">
<a class="nav-link" href="/contacto/">Contacto</a>
</li>
<li class="nav-item col-5">
<a class="nav-link" href="/trabajos/">Trabajos</a>
</li>
<li class="nav-item col-5 offset-2">
<a class="nav-link" href="/templates/">Templates</a>
</li>
<li class="nav-item col-5">
<a class="nav-link" href="/links/">Links</a>
</li>
</ul>
<hr>
<ul class="navbar-nav flex-row flex-wrap">
<li class="nav-item col-5">
<a href="https://github.com/alejandr0bovino" class="nav-link social-icon" target="github" title="GitHub">
<svg fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="m9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0 -.94-2.61c3.14-.35 6.44-1.54 6.44-7a5.44 5.44 0 0 0 -1.5-3.75 5.07 5.07 0 0 0 -.09-3.77s-1.18-.35-3.91 1.48a13.38 13.38 0 0 0 -7 0c-2.73-1.83-3.91-1.48-3.91-1.48a5.07 5.07 0 0 0 -.09 3.77 5.44 5.44 0 0 0 -1.5 3.78c0 5.42 3.3 6.61 6.44 7a3.37 3.37 0 0 0 -.94 2.58v3.87" />
</svg> Github </a>
</li>
<li class="nav-item col-5 offset-2">
<a href="https://twitter.com/alejandrobovino" class="nav-link social-icon" target="twitter" title="Twitter">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20" width="24px" height="24px">
<path fill="currentColor" d="M12.186 8.672 18.743.947h-2.927l-5.005 5.9-4.44-5.9H0l7.434 9.876-6.986 8.23h2.927l5.434-6.4 4.82 6.4H20L12.186 8.672Zm-2.267 2.671L8.544 9.515 3.2 2.42h2.2l4.312 5.719 1.375 1.828 5.731 7.613h-2.2l-4.699-6.237Z" />
</svg> Twitter </a>
</li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="/dist/script/script.min.js"></script>
</body>
</html>
CSS
hr {
background-color: var(--color-2);
border-bottom: 1px solid var(--color-2);
margin-bottom: calc(var(--unit-rem) * 1.5);
margin-top: calc(var(--unit-rem) * 1.5);
opacity: 1;
}
.badge,
.btn {
border-radius: 0;
}
.btn {
border-width: var(--unit);
font-weight: 700;
letter-spacing: 0.5px;
padding: calc(var(--unit-rem) * 0.5) var(--unit-rem);
}
.btn,
.btn:hover {
color: inherit;
}
.btn:focus {
box-shadow: none;
}
.btn:active {
border-color: var(--color-2);
}
.btn:focus-visible {
box-shadow: 0 0 0 var(--box-shadow-width) var(--box-shadow-color);
}
.tooltip {
font-family: inherit;
font-weight: 700;
}
.tooltip-inner {
border-radius: 0;
}
.tooltip.show {
opacity: 1;
}
.popover {
border-color: var(--color-2);
border-radius: 0;
border-width: var(--unit);
font-family: inherit;
font-size: calc(var(--unit-rem) * 0.875);
font-weight: 600;
}
.popover-header {
border-bottom-width: var(--unit);
font-size: var(--unit-rem);
font-weight: 700;
}
.bs-popover-auto[data-popper-placement^="bottom"] .popover-header:before,
.bs-popover-bottom .popover-header:before {
border-bottom: transparent;
}
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow:after,
.bs-popover-bottom > .popover-arrow:after {
top: 2px;
}
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow:before,
.bs-popover-bottom > .popover-arrow:before {
top: -1px;
}
.bs-popover-auto[data-popper-placement^="top"] .popover-header:before,
.bs-popover-top .popover-header:before {
border-top: transparent;
}
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow:after,
.bs-popover-top > .popover-arrow:after {
bottom: 2px;
}
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow:before,
.bs-popover-top > .popover-arrow:before {
bottom: -1px;
}
.bs-popover-auto[data-popper-placement^="left"] .popover-header:before,
.bs-popover-left .popover-header:before {
border-left: transparent;
}
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow:after,
.bs-popover-start > .popover-arrow:after {
right: 2px;
}
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow:before,
.bs-popover-start > .popover-arrow:before {
right: -1px;
}
.bs-popover-auto[data-popper-placement^="right"] .popover-header:before,
.bs-popover-right .popover-header:before {
border-right: transparent;
}
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow:after,
.bs-popover-end > .popover-arrow:after {
left: 2px;
}
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow:before,
.bs-popover-end > .popover-arrow:before {
left: -1px;
}
.form-control {
border-radius: 0;
border-width: var(--unit);
font-size: inherit;
font-weight: 600;
padding: calc(var(--unit-rem) * 0.5) var(--unit-rem);
}
.form-control,
.form-control:focus {
background-color: inherit;
border-color: var(--color-2);
color: var(--color-2);
}
.form-control:focus,
.input-group-text:focus {
box-shadow: 0 0 0 var(--box-shadow-width) var(--box-shadow-color);
}
.form-control::placeholder {
color: var(--color-2);
opacity: 0.75;
}
.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
box-shadow: 0 0 0 var(--box-shadow-width) rgba(220, 53, 69, 0.25);
}
.form-floating > .form-control,
.form-floating > label {
padding: var(--unit-rem);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
transform: scale(0.85) translateY(-0.5rem) translateX(0.25rem);
}
.dropdown-divider {
border-top: none;
}
.dropdown-item {
font-weight: 600;
}
@media (max-width: 575px) {
.btn-epsilon {
width: 100%;
}
}
@media (max-width: 991px) {
body {
grid-template-areas: "header" "sidebar" "main" "aside" "footer";
grid-template-rows: auto auto auto auto auto;
}
.theme-logo svg {
height: auto;
width: calc(var(--unit-rem) * 2.25);
}
.theme-nav-5 .btn {
padding: calc(var(--unit-rem) * 0.5) calc(var(--unit-rem) * 0.5);
}
}
@media (min-width: 992px) {
body {
grid-template-areas: "header header header" "sidebar main aside" "sidebar footer footer";
grid-template-columns: calc(var(--unit-rem) * 13.6) 6fr 23rem;
grid-template-rows: calc(var(--unit-rem) * 5.5) 1fr calc(
var(--unit-rem) * 3.75
);
height: 100vh;
}
.theme-header__wrapper {
padding: 0 var(--unit-rem);
}
#header {
padding: 0;
}
.theme-logo {
align-items: center;
padding: 0 0 0 calc(var(--unit-rem) * 2.3);
width: calc(var(--unit-rem) * 13.6);
}
#sidebar,
.theme-logo {
display: flex;
justify-content: start;
}
#sidebar {
flex-direction: column;
grid-area: sidebar;
overflow: hidden;
padding: calc(var(--unit-rem) * 2) calc(var(--unit-rem) * 1.45);
}
#aside,
.theme-main {
border-left: var(--unit) solid var(--color-2);
border-top: var(--unit) solid var(--color-2);
overflow: auto;
}
#footer {
align-items: center;
border-left: var(--unit) solid transparent;
border-right: var(--unit) solid transparent;
justify-content: space-between;
padding-bottom: 0;
padding-top: 0;
}
.theme-nav-2__ul {
flex-direction: column;
}
@media (min-width: 1200px) {
.theme-nav-2__ul {
align-items: start !important;
}
}
.material-symbols-outlined {
min-width: auto;
}
.theme-nav-2__ul__li:not(:last-child) {
margin-bottom: var(--unit-rem);
}
.theme-search-action {
padding: calc(var(--unit-rem) * 0.5) var(--unit-rem);
}
}
@media (min-width: 768px) {
.theme-header__wrapper {
border-left: var(--unit) solid transparent;
border-right: var(--unit) solid transparent;
display: flex;
justify-content: end;
width: calc(100% - var(--unit-rem) * 13.6);
}
}
@media (min-width: 992px) {
.theme-header__wrapper {
align-items: center;
justify-content: space-between;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.theme-nav-2__ul--sm {
display: flex;
}
.theme-nav-2__ul--md {
display: none !important;
}
.theme-nav-2__ul__li {
width: 90%;
}
.theme-nav-2__ul__li .btn {
justify-content: center;
}
body {
grid-template-columns: calc(var(--unit-rem) * 8.5) 6fr 23rem;
}
.theme-logo {
justify-content: center;
padding: 0;
width: calc(var(--unit-rem) * 8.5);
}
.theme-logo__label {
display: none;
}
.theme-header__wrapper {
width: calc(100% - var(--unit-rem) * 8.5);
}
}
@media (min-width: 1200px) {
.theme-nav-2__ul--sm {
display: none !important;
}
.theme-nav-2__ul__li {
width: 100%;
}
}
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
cursor: pointer;
outline: none;
}
::selection {
background: var(--color-2);
color: var(--color-1);
}
body {
background-color: var(--color-1);
color: var(--color-2);
font-family: Glory, sans-serif;
font-weight: 600;
line-height: 1.6;
}
body:before {
animation: grain 8s steps(10) infinite;
background-image: url(../../assets/img/noise.png);
content: "";
height: 300%;
left: -50%;
opacity: 0.35;
pointer-events: none;
position: fixed;
top: -100%;
width: 300%;
}
@keyframes grain {
0%,
to {
transform: translate(0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%);
}
70% {
transform: translateY(15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
[data-theme="dark"] body:before {
opacity: 0.8;
}
h2,
h3 {
margin-bottom: 1rem;
}
ul {
list-style: none;
margin-bottom: 0;
padding-left: 0;
}
a {
color: var(--color-2);
outline: none;
}
a:hover {
color: inherit;
}
a:focus-visible {
box-shadow: 0 0 0 var(--box-shadow-width) var(--box-shadow-color);
}
body {
display: grid;
}
#header {
align-items: center;
display: flex;
grid-area: header;
justify-content: space-between;
}
@media (max-width: 991px) {
#header {
background-color: var(--shade-color);
border-bottom: var(--unit) solid var(--color-2);
left: 0;
overflow: hidden;
padding: var(--unit-rem);
position: fixed;
right: 0;
z-index: 10;
}
}
.theme-logo__inner {
align-items: center;
display: flex;
text-decoration: none;
}
.theme-logo__label {
font-size: 0.85rem;
line-height: 1;
margin-left: 0.75rem;
}
@media (max-width: 991px) {
#sidebar {
display: none;
}
}
.theme-logo > a:active,
.theme-logo > a:focus {
box-shadow: none;
}
.theme-logo > a > svg:focus-visible {
outline: none;
}
.theme-logo > span > svg::selection {
background: none;
}
.theme-main {
border-bottom: var(--unit) solid var(--color-2);
grid-area: main;
padding: var(--unit-rem);
}
@media (min-width: 992px) {
.theme-main {
font-size: calc(var(--unit-rem) * 1.125);
}
}
@media (max-width: 991px) {
.theme-main {
padding-top: 96px;
}
}
@media (min-width: 1200px) {
.theme-main {
padding-right: 10%;
}
}
.theme-main::-webkit-scrollbar {
width: calc(var(--unit) * 2.5);
}
.theme-main::-webkit-scrollbar-track {
background: var(--color-1);
}
.theme-main::-webkit-scrollbar-thumb,
.theme-main::-webkit-scrollbar-thumb:hover {
background: var(--color-2);
}
#aside {
background-color: var(--shade-color);
border-bottom: var(--unit) solid var(--color-2);
grid-area: aside;
padding: var(--unit-rem);
}
#aside::-webkit-scrollbar {
width: calc(var(--unit) * 2.5);
}
#aside::-webkit-scrollbar-track {
background: var(--shade-color);
}
#aside::-webkit-scrollbar-thumb,
#aside::-webkit-scrollbar-thumb:hover {
background: var(--color-2);
}
@media (min-width: 992px) {
#aside {
font-size: calc(var(--unit-rem) * 1.125);
}
}
#aside h2 {
margin-bottom: 0.5rem;
}
#aside hr {
margin-bottom: 1rem;
}
#aside div {
margin-bottom: 0.5rem;
}
#footer {
display: flex;
grid-area: footer;
overflow: hidden;
padding: var(--unit-rem);
}
@media (max-width: 991px) {
#footer {
background-color: var(--color-1);
justify-content: end;
z-index: 10;
}
}
html.fonts-loaded .material-symbols-outlined {
visibility: visible;
}
.material-symbols-outlined {
font-weight: 500;
overflow: hidden;
visibility: hidden;
}
@media (max-width: 991px) {
.material-symbols-outlined {
min-width: calc(var(--unit-rem) * 2);
}
}
.material-symbols-outlined--sm {
width: calc(var(--unit-rem) * 1.5);
}
.material-symbols-outlined--md {
font-size: calc(var(--unit-rem) * 2);
width: calc(var(--unit-rem) * 2);
}
.theme-feature-container {
width: 90%;
}
:root {
--unit: 2px;
--unit-rem: 1rem;
--box-shadow-width: calc(var(--unit-rem) * 0.25);
--color-1: #f5f5f5;
--color-2: #333;
--box-shadow-color: #d3d3d3;
--shade-color: #e8e8e8;
}
[data-theme="dark"] {
--color-1: #111;
--color-2: #32cd32;
--box-shadow-color: #32cd3265;
--shade-color: #152415;
}
.btn .material-symbols-outlined {
vertical-align: bottom;
}
.btn-epsilon {
background-color: transparent;
border-color: var(--color-2);
text-transform: uppercase;
}
.btn-epsilon:hover {
border-color: var(--color-2) !important;
}
.btn-epsilon:active {
border-color: var(--color-2);
border-style: dashed;
}
.btn-epsilon:focus-visible {
border-color: var(--color-2);
box-shadow: 0 0 0 var(--box-shadow-width) var(--box-shadow-color);
}
.btn-epsilon:active:focus:hover {
border-color: var(--color-2) !important;
}
.btn-card {
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
padding-bottom: var(--unit-rem);
padding-top: var(--unit-rem);
}
.btn-card svg {
margin-bottom: 1rem;
}
@media (max-width: 575px) {
.btn-card svg {
margin-bottom: 0.5rem;
}
}
.btn-card em,
.btn-card span {
line-height: 1;
}
.badge-gamma {
border: var(--unit) solid var(--color-2);
color: var(--color-2);
font-size: inherit;
font-size: var(--unit-rem);
text-decoration: none;
}
.badge-gamma--2 {
font-family: monospace;
line-height: 0.5;
position: relative;
top: -1px;
}
.theme-ul {
list-style: square;
margin-bottom: 1rem;
margin-left: calc(var(--unit-rem) * 2);
}
.theme-card {
align-items: center;
display: flex;
}
@media (max-width: 767px) {
.theme-card__c1 {
flex: 2;
}
.theme-card__c2 {
flex: 3;
padding-left: 1rem;
}
}
@media (min-width: 768px) {
.theme-card__c1 {
flex: 3;
}
.theme-card__c2 {
flex: 9;
padding-left: 1rem;
}
}
.theme-card__c2 p {
margin-bottom: 0;
}
.theme-skills {
text-align: center;
}
.theme-skills svg {
display: block;
height: 50px;
margin-left: auto;
margin-right: auto;
width: 50px;
}
@media (max-width: 767px) {
.theme-skills svg {
margin-bottom: 0.5rem;
}
}
@media (min-width: 768px) {
.theme-skills svg {
margin-bottom: 1rem;
}
}
.theme-figure a {
display: inline-block;
}
.theme-title-1 {
border-bottom: var(--unit) solid var(--color-2);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
.theme-title-1.theme-title-1--nb {
border-bottom: none;
margin-bottom: 0.25rem;
}
.theme-title-3.theme-title--has-icon a:before {
content: "article";
font-family: Material Symbols Outlined;
font-weight: 300;
margin-left: -4px;
margin-right: 0.25rem;
vertical-align: calc(var(--unit-rem) * -0.35);
}
.theme-title-3.theme-title--has-icon a {
display: flex;
}
.theme-title-3 a {
text-decoration: none;
}
@media (max-width: 575px) {
.theme-title-1 {
font-size: 2rem;
}
.theme-title.theme-title--has-icon a:before {
vertical-align: calc(var(--unit-rem) * -0.25);
}
.theme-title-3.theme-title--has-icon a:before {
font-weight: 500;
margin-left: -2px;
}
}
.screen-reader-text {
display: none;
}
.page-title,
.search-result-count {
margin-bottom: 1rem;
}
.page-title {
border-bottom: var(--unit) solid var(--color-2);
padding-bottom: 0.5rem;
}
@media (max-width: 575px) {
.page-title {
font-size: 2rem;
}
}
.entry-title a {
text-decoration: none;
}
.type-post {
border-bottom: var(--unit) solid var(--color-2);
margin-bottom: 1.5rem;
padding-bottom: 0.5rem;
}
.entry-header {
margin-bottom: 1rem;
}
#aside .theme-search,
.widget_block {
margin-bottom: 2rem;
}
#aside .widget_block:last-child {
margin-bottom: 0;
}
.widget_block a {
border-bottom: var(--unit) solid var(--color-2);
display: block;
padding-bottom: calc(var(--unit-rem) * 0.5);
padding-top: calc(var(--unit-rem) * 0.5);
text-decoration: none;
}
.comments-area .form-floating {
margin-bottom: 1rem;
}
#comments + .navigation .nav-links a {
display: flex;
}
.posted-on {
border-top: var(--unit) solid var(--color-2);
display: block;
padding: 0.5rem 0.5rem 0.25rem;
}
.post-taxonomies,
.posted-on {
border-left: var(--unit) solid var(--color-2);
border-right: var(--unit) solid var(--color-2);
}
.post-taxonomies {
border-bottom: var(--unit) solid var(--color-2);
padding: 0 0.5rem 0.5rem;
}
.post-taxonomies .badge-gamma {
margin-right: 0.2rem;
}
.comments-title {
margin-bottom: 1rem;
}
.comment-list > li {
border-bottom: var(--unit) solid var(--color-2);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
}
.comment-content {
margin-bottom: 0.5rem;
}
.comment-content > p {
margin-bottom: 0;
}
.comment-author,
.comment-metadata {
margin-bottom: 1rem;
}
@media (max-width: 991px) {
.cat-links,
.cat-links .badge {
margin-right: 0.25rem;
}
.cat-links-title {
display: none;
}
}
@media (min-width: 992px) {
.cat-links {
margin-right: 0.5rem;
}
.cat-links-title {
margin-right: 0.25rem;
}
}
@media (max-width: 767px) {
.hcb_wrap.hcb_wrap pre {
white-space: break-spaces;
}
}
.nav-next a,
.nav-previous a {
display: flex;
}
.comment-form-cookies-consent label[for="wp-comment-cookies-consent"] {
display: inline;
}
.theme-nav > ul {
align-items: center;
display: flex;
}
.theme-nav ul > li > .btn {
display: flex;
}
.theme-nav ul > li > .active {
border-color: var(--color-2);
cursor: default;
}
.theme-nav ul > li > .active-blog {
border-color: var(--color-2);
cursor: pointer;
}
.theme-nav ul > li > .active-blog:focus-visible {
box-shadow: 0 0 0 var(--box-shadow-width) var(--box-shadow-color);
}
.theme-nav-1__ul {
text-transform: uppercase;
}
.theme-nav-1__ul__li {
margin-left: var(--unit-rem);
margin-right: var(--unit-rem);
}
.theme-nav-1__ul__li:first-child {
margin-left: 0;
}
.theme-nav-1__ul__li:last-child {
margin-right: 0;
}
.theme-nav-1__ul__li > .btn {
position: relative;
}
.theme-nav-1__ul__li:not(:last-child) > .btn:after {
border: var(--unit) solid var(--color-2);
content: "";
height: calc(var(--unit) * 4);
margin-top: calc(var(--unit) * -2);
pointer-events: none;
position: absolute;
right: calc(var(--unit) * -11);
top: 50%;
width: calc(var(--unit) * 4);
}
.theme-nav-1--sm ul > li > .btn {
font-size: calc(var(--unit-rem) * 0.75);
padding: calc(var(--unit-rem) * 0.25) calc(var(--unit-rem) * 0.5);
}
.theme-nav-1--sm ul > li:not(:last-child) > .btn:after {
height: calc(var(--unit) * 3);
top: 56%;
width: calc(var(--unit) * 3);
}
@media (max-width: 991px) {
.theme-nav-2__ul {
flex-direction: row;
}
}
.theme-nav-2__ul .material-symbols-outlined {
font-weight: 325;
}
@media (min-width: 1200px) {
.theme-nav-2__ul .material-symbols-outlined {
margin-right: calc(var(--unit) * 3.5);
}
}
.theme-nav-2__ul__li .btn {
align-items: center;
text-align: left;
text-transform: uppercase;
}
.theme-nav-4__ul__li:not(:last-child) {
margin-right: var(--unit-rem);
}
.theme-nav-4__ul__li > .btn {
padding: calc(var(--unit-rem) * 0.25) calc(var(--unit-rem) * 0.5);
}
.theme-nav-4__ul__li > .btn > svg {
height: 19.5px;
width: 19.5px;
}
.theme-nav-4__ul__li > .btn > svg::selection {
background: none;
}
.social-link {
font-size: calc(var(--unit-rem) * 0.75);
letter-spacing: calc(var(--unit) * 0.5);
}
@media (min-width: 992px) {
.theme-nav-5__ul__li:not(:last-child) {
margin-right: var(--unit-rem);
}
.theme-nav-5__ul__li:nth-last-child(2) {
margin-right: 0;
}
}
.offcanvas {
background-color: var(--color-1);
color: var(--color-2);
}
.offcanvas .btn-close {
opacity: 1;
}
.offcanvas .btn-close:focus {
box-shadow: none;
}
[data-theme="dark"] .offcanvas .btn-close {
filter: invert(86%) sepia(29%) saturate(4828%) hue-rotate(62deg)
brightness(85%) contrast(91%);
}
.offcanvas-title {
margin-left: calc(var(--unit-rem) * 0.5);
width: 100%;
}
.offcanvas .social-icon {
align-items: center;
display: flex;
text-decoration: none;
}
.offcanvas .social-icon svg {
height: calc(var(--unit-rem) * 1.125);
margin-right: 0.75rem;
width: calc(var(--unit-rem) * 1.125);
}
.offcanvas__theme-logo a {
display: block;
}
.offcanvas__theme-logo svg {
height: 2rem;
}
.offcanvas__theme-logo svg:focus {
outline: none;
}
.offcanvas-header .btn-close {
margin-right: auto;
}
.offcanvas_hr {
margin-top: 0;
}
.offcanvas-body .nav-link--active {
border: 2px solid var(--color-2);
display: block;
}
.offcanvas-body .nav-link {
padding: 0.25rem 1rem;
}
.offcanvas-body .nav-item {
margin-bottom: 0.5rem;
}
.theme-search .input-group-text {
background-color: var(--color-1);
border-color: var(--color-2);
border-radius: 0;
border-width: var(--unit);
border-left: none;
color: var(--color-2);
cursor: pointer;
padding: calc(var(--unit-rem) * 0.5) var(--unit-rem);
}
.fullscreen .fullscreen-on,
.fullscreen-off {
display: none !important;
}
.fullscreen .fullscreen-off {
display: flex !important;
}
.theme-switch input,
[data-theme="dark"] #theme-switch-dark,
[data-theme="light"] #theme-switch-light {
display: none;
}
.tooltip-inner {
background-color: var(--color-2);
color: var(--color-1);
}
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow:before,
.bs-tooltip-end .tooltip-arrow:before {
border-right-color: var(--color-2);
}
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow:before,
.bs-tooltip-bottom .tooltip-arrow:before {
border-bottom-color: var(--color-2);
}
.popover {
background-color: var(--color-1);
}
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow:before,
.bs-popover-top > .popover-arrow:before {
border-top-color: var(--color-2);
}
.bs-popover-auto[data-popper-placement^="top"] > .popover-arrow:after,
.bs-popover-top > .popover-arrow:after {
border-top-color: var(--color-1);
}
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow:before,
.bs-popover-bottom > .popover-arrow:before {
border-bottom-color: var(--color-2);
}
.bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow:after,
.bs-popover-bottom > .popover-arrow:after {
border-bottom-color: var(--color-1);
}
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow:before,
.bs-popover-start > .popover-arrow:before {
border-left-color: var(--color-2);
}
.bs-popover-auto[data-popper-placement^="left"] > .popover-arrow:after,
.bs-popover-start > .popover-arrow:after {
border-left-color: var(--color-1);
}
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow:before,
.bs-popover-end > .popover-arrow:before {
border-right-color: var(--color-2);
}
.bs-popover-auto[data-popper-placement^="right"] > .popover-arrow:after,
.bs-popover-end > .popover-arrow:after {
border-right-color: var(--color-1);
}
.popover-header {
background-color: var(--color-1);
border-bottom-color: var(--color-2);
}
.popover-body,
.popover-header {
color: var(--color-2);
}
.b-and-w {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
@media (max-width: 991px) {
.s-mb-1 {
margin-bottom: 1rem !important;
}
.c-sm-mr-0 {
margin-right: 0 !important;
}
.c-sm-mb-1 {
margin-bottom: 1rem;
}
}
@media (max-width: 767px) {
.c-sm-2-mb-1 {
margin-bottom: 1rem;
}
.c-sm-2-mb-0 {
margin-bottom: 0 !important;
}
}
.btn {
transition: none;
}
.badge-gamma,
.btn-epsilon,
.form-control,
.platzi-profile,
.theme-nav ul > li > .active,
.wp-block-search__inside-wrapper input {
background-color: var(--color-1) !important;
position: relative;
z-index: 9;
}
.form-floating label {
z-index: 9;
}
#aside .btn-epsilon,
#aside .form-control,
#aside .input-group-text {
background-color: var(--shade-color) !important;
}
.platzi-profile {
filter: grayscale(100%);
max-width: 100%;
}
/assets/script-out/fontfaceobserver.js? Alternatively, if that's not for review, at least describe what it is and how the presented code uses it. \$\endgroup\$