aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--assets/css/partials/header.scss109
-rw-r--r--assets/js/navbar.js10
-rw-r--r--layouts/_default/baseof.html3
-rw-r--r--layouts/partials/header.html66
4 files changed, 152 insertions, 36 deletions
diff --git a/assets/css/partials/header.scss b/assets/css/partials/header.scss
index 1562952..e35d9ec 100644
--- a/assets/css/partials/header.scss
+++ b/assets/css/partials/header.scss
@@ -4,40 +4,55 @@ header {
color: black;
display: flex;
- flex-direction: row;
- align-items: center;
+ flex-direction: column;
justify-content: space-between;
- padding: 0 2rem;
+ padding: 0 1rem;
margin-bottom: 1rem;
a {
display: inline-block;
- padding-top: 1rem;
- padding-bottom: calc(1rem - 4px);
+ padding-top: 0.5rem;
+ padding-bottom: calc(0.5rem - 4px);
}
- >div {
+ #brand {
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
- }
- h1 {
- font-size: 2rem;
- margin: 0;
- font-weight: 900;
- letter-spacing: 0.15rem;
+ h1 {
+ font-size: 2rem;
+ margin: 0;
+ font-weight: 900;
+ letter-spacing: 0.15rem;
- a {
- text-decoration: none;
+ a {
+ text-decoration: none;
+ }
}
}
- p {
- font-size: 1.2rem;
- font-weight: 300;
+ #nav-pages {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+
+ padding-inline-start: 2.5rem;
+ }
+
+ #nav-socials {
+ align-self: center;
+
+ display: flex;
+ gap: 1.5rem;
+
+ a {
+ font-size: 1.5rem;
+ transition: color 0.2s ease-in-out;
+ line-height: 1;
+ }
}
nav>a {
@@ -46,7 +61,6 @@ header {
font-size: 1.2rem;
text-transform: uppercase;
letter-spacing: 0.1rem;
- margin: 0 0.5rem;
transition: color 0.2s ease-in-out;
&:hover {
@@ -57,20 +71,69 @@ header {
border-bottom: 2px solid var(--accent-3);
}
}
+
+ button#mobile-menu {
+ display: block;
+ background-color: transparent;
+ border: none;
+ font-size: 2rem;
+ cursor: pointer;
+ }
+
+ &.collapsed {
+
+ #nav-pages,
+ #nav-socials {
+ display: none;
+ }
+ }
}
-@media (max-width: 768px) {
+@media (min-width: 480px) {
header {
- flex-direction: column;
+ flex-direction: row;
align-items: center;
- justify-content: center;
+ justify-content: space-between;
+
+ a {
+ padding-top: 1rem;
+ padding-bottom: calc(1rem - 4px);
+ }
+
+ #nav-pages {
+ justify-self: start;
+ flex-direction: row;
+ gap: 1.5rem;
+ padding-inline-start: 0;
+ }
+
+ button#mobile-menu {
+ display: none;
+ }
+
+ &.collapsed {
+
+ #nav-pages,
+ #nav-socials {
+ display: flex;
+ }
+ }
+ }
+}
+
+@media (min-width: 1024px) {
+ header {
+ padding: 0 1rem;
+ gap: 1.5rem;
+ justify-content: start;
h1 {
margin-bottom: 0.5rem;
}
- p {
- margin-bottom: 0;
+ #nav-socials {
+ align-self: flex-end;
+ margin-left: auto;
}
}
} \ No newline at end of file
diff --git a/assets/js/navbar.js b/assets/js/navbar.js
new file mode 100644
index 0000000..902ed8f
--- /dev/null
+++ b/assets/js/navbar.js
@@ -0,0 +1,10 @@
+/** @type {HTMLElement} */
+const header = document.querySelector('body > header');
+/** @type {HTMLButtonElement} */
+const toggleButton = document.querySelector('button#mobile-menu');
+
+function toggleNavbar() {
+ header.classList.toggle('collapsed');
+}
+
+toggleButton.addEventListener('click', toggleNavbar); \ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 115b754..9bac02c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -29,6 +29,9 @@
</main>
{{ partial "partials/footer.html" . }}
+
+ {{ $script := resources.Get "js/navbar.js" | minify }}
+ <script src='{{ $script.RelPermalink }}'></script>
</body>
</html> \ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 5cf34fc..e3b55c7 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,22 +1,62 @@
-<header>
- <div>
+<header class="collapsed">
+ <div id="brand">
+ <button id="mobile-menu" type="button">
+ <img src="/icons/menu-2.svg" alt="Menu" width="24" height="24" />
+ </button>
+
<h1>
<a href="{{ .Site.Home.RelPermalink }}">
CostasDEV
</a>
</h1>
-
- <nav>
- {{$current := .}}
- {{ range .Site.Home.Pages }}
- <a href="{{ .RelPermalink }}"{{ if eq .RelPermalink $current.RelPermalink }} class="active"{{ end }}>{{ .Title }}</a>
- {{ end }}
- </nav>
</div>
- <nav>
- <a rel="me" href="https://masto.es/@arielcg">Mastodon</a>
- <a href="https://github.com/arielcostas">GitHub</a>
- <a href="https://linkedin.com/in/ariel-costas">LinkedIn</a>
+ <nav id="nav-pages">
+ {{$current := .}}
+ {{ range .Site.Home.Pages }}
+ <a href="{{ .RelPermalink }}" {{ if eq .RelPermalink $current.RelPermalink }} class="active" {{ end }}>{{ .Title
+ }}</a>
+ {{ end }}
+ </nav>
+
+ <nav id="nav-socials">
+ <a rel="me" href="https://masto.es/@arielcg" title="Mastodon">
+
+ <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-mastodon" width="32"
+ height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+ stroke-linecap="round" stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+ <path
+ d="M18.648 15.254c-1.816 1.763 -6.648 1.626 -6.648 1.626a18.262 18.262 0 0 1 -3.288 -.256c1.127 1.985 4.12 2.81 8.982 2.475c-1.945 2.013 -13.598 5.257 -13.668 -7.636l-.026 -1.154c0 -3.036 .023 -4.115 1.352 -5.633c1.671 -1.91 6.648 -1.666 6.648 -1.666s4.977 -.243 6.648 1.667c1.329 1.518 1.352 2.597 1.352 5.633s-.456 4.074 -1.352 4.944z" />
+ <path
+ d="M12 11.204v-2.926c0 -1.258 -.895 -2.278 -2 -2.278s-2 1.02 -2 2.278v4.722m4 -4.722c0 -1.258 .895 -2.278 2 -2.278s2 1.02 2 2.278v4.722" />
+ </svg>
+
+ </a>
+ <a href="https://github.com/arielcostas" title="GitHub">
+
+ <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="32"
+ height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+ stroke-linecap="round" stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+ <path
+ d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
+ </svg>
+
+ </a>
+ <a href="https://linkedin.com/in/ariel-costas" title="LinkedIn">
+
+ <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-linkedin" width="32"
+ height="32" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
+ stroke-linecap="round" stroke-linejoin="round">
+ <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+ <path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" />
+ <path d="M8 11l0 5" />
+ <path d="M8 8l0 .01" />
+ <path d="M12 16l0 -5" />
+ <path d="M16 16v-3a2 2 0 0 0 -4 0" />
+ </svg>
+
+ </a>
</nav>
</header> \ No newline at end of file
generated by cgit v1.3 (git 2.53.0) at 2026-04-12 06:10:49 +0000