aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--about.html20
-rw-r--r--contact.html20
-rw-r--r--index.html23
-rw-r--r--post.html21
-rw-r--r--post2.html20
-rw-r--r--scripts/js.sh18
-rw-r--r--src/js/navbar-burger.js23
-rw-r--r--src/scss/custom/_header.scss29
-rw-r--r--src/scss/custom/_mediaqueries.scss14
9 files changed, 110 insertions, 78 deletions
diff --git a/about.html b/about.html
index 02f56f4..750c2bd 100644
--- a/about.html
+++ b/about.html
@@ -20,10 +20,19 @@
<h3 class="title is-3" style="color: white;">CL</h3>
</a>
<!-- this "navbar-burger" hamburger menu is only visible on mobile -->
- <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
- <span></span>
- <span></span>
- <span></span>
+ <label class="nav__toggle" for="navbar-toggle-cbox">
+ <!-- Menu -->
+ <svg class="menu" viewBox="0 0 448 512" width="100" title="bars">
+ <path
+ d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+ />
+ </svg>
+ <!-- Close -->
+ <svg class="close" viewBox="0 0 384 512" width="100" title="times">
+ <path
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+ />
+ </svg>
</label>
<!-- end of burger -->
</div>
@@ -198,8 +207,5 @@
</div>
</footer>
<!-- end of footer -->
- <!-- navbar-burger -->
- <script src="dist/js/navbar-burger.js"></script>
- <!-- end of navbar-burger -->
</body>
</html>
diff --git a/contact.html b/contact.html
index c36ad86..bcb77d6 100644
--- a/contact.html
+++ b/contact.html
@@ -20,10 +20,19 @@
<h3 class="title is-3" style="color: white;">CL</h3>
</a>
<!-- this "navbar-burger" hamburger menu is only visible on mobile -->
- <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
- <span></span>
- <span></span>
- <span></span>
+ <label class="nav__toggle" for="navbar-toggle-cbox">
+ <!-- Menu -->
+ <svg class="menu" viewBox="0 0 448 512" width="100" title="bars">
+ <path
+ d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+ />
+ </svg>
+ <!-- Close -->
+ <svg class="close" viewBox="0 0 384 512" width="100" title="times">
+ <path
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+ />
+ </svg>
</label>
<!-- end of burger -->
</div>
@@ -231,8 +240,5 @@
</div>
</footer>
<!-- end of footer -->
- <!-- navbar-burger -->
- <script src="dist/js/navbar-burger.js"></script>
- <!-- end of navbar-burger -->
</body>
</html>
diff --git a/index.html b/index.html
index 97025ae..3cac3a5 100644
--- a/index.html
+++ b/index.html
@@ -16,19 +16,27 @@
<div class="container">
<!-- nav site title -->
<!-- Input for menu-mobile with checkbox-->
- <input id="navbar-toggle-cbox" role="button" type="checkbox">
+ <input id="navbar-toggle-cbox" type="checkbox">
<!-- End Input for menu-mobile with checkbox-->
<div class="navbar-brand">
<a class="navbar-item">
<h3 class="title is-3" style="color: white;">CL</h3>
</a>
<!-- this "navbar-burger" hamburger menu is only visible on mobile -->
- <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
- <span></span>
- <span></span>
- <span></span>
+ <label class="nav__toggle" for="navbar-toggle-cbox">
+ <!-- Menu -->
+ <svg class="menu" viewBox="0 0 448 512" width="100" title="bars">
+ <path
+ d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+ />
+ </svg>
+ <!-- Close -->
+ <svg class="close" viewBox="0 0 384 512" width="100" title="times">
+ <path
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+ />
+ </svg>
</label>
-
<!-- end of burger -->
</div>
@@ -386,8 +394,5 @@
</div>
</footer>
<!-- end of footer -->
- <!-- navbar-burger -->
- <script src="dist/js/navbar-burger.js"></script>
- <!-- end of navbar-burger -->
</body>
</html>
diff --git a/post.html b/post.html
index 2338c55..a85ff2c 100644
--- a/post.html
+++ b/post.html
@@ -27,10 +27,19 @@
<h3 class="title is-3" style="color: white;">CL</h3>
</a>
<!-- this "navbar-burger" hamburger menu is only visible on mobile -->
- <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
- <span></span>
- <span></span>
- <span></span>
+ <label class="nav__toggle" for="navbar-toggle-cbox">
+ <!-- Menu -->
+ <svg class="menu" viewBox="0 0 448 512" width="100" title="bars">
+ <path
+ d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+ />
+ </svg>
+ <!-- Close -->
+ <svg class="close" viewBox="0 0 384 512" width="100" title="times">
+ <path
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+ />
+ </svg>
</label>
<!-- end of burger -->
</div>
@@ -448,10 +457,6 @@ echo "Hello world"
</div>
</footer>
<!-- end of footer -->
- <!-- navbar-burger -->
- <script src="dist/js/navbar-burger.js"></script>
- <!-- end of navbar-burger -->
-
<!-- aplaylist -->
<script src="dist/js/aplaylist.js"></script>
<!-- /aplaylist -->
diff --git a/post2.html b/post2.html
index ed72505..86ab29d 100644
--- a/post2.html
+++ b/post2.html
@@ -27,10 +27,19 @@
<h3 class="title is-3" style="color: white;">CL</h3>
</a>
<!-- this "navbar-burger" hamburger menu is only visible on mobile -->
- <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
- <span></span>
- <span></span>
- <span></span>
+ <label class="nav__toggle" for="navbar-toggle-cbox">
+ <!-- Menu -->
+ <svg class="menu" viewBox="0 0 448 512" width="100" title="bars">
+ <path
+ d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"
+ />
+ </svg>
+ <!-- Close -->
+ <svg class="close" viewBox="0 0 384 512" width="100" title="times">
+ <path
+ d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+ />
+ </svg>
</label>
<!-- end of burger -->
</div>
@@ -398,8 +407,5 @@
</div>
</footer>
<!-- end of footer -->
- <!-- navbar-burger -->
- <script src="dist/js/navbar-burger.js"></script>
- <!-- end of navbar-burger -->
</body>
</html>
diff --git a/scripts/js.sh b/scripts/js.sh
index 3a2af3c..ea5bbf0 100644
--- a/scripts/js.sh
+++ b/scripts/js.sh
@@ -1,22 +1,6 @@
#!/bin/bash
#
-run_navbar()
-{
- local _name="${1-navbar-burger}"
- local _dir="${2-$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)}"
- local _target="${_dir%/*}" # deleted slash
- local _src="${_target%scripts}/src/js/${_name}.js" # input
- local _dest="${_target%scripts}/dist/js/" # output
-
- if [[ -n "${_src}" ]];
- then
- mkdir -p "${_dest}"
- cp -fv "${_src}" "${_dest}"
- fi
-
-}
-
run_aplaylist()
{
local _name="${1-aplaylist}"
@@ -36,4 +20,4 @@ run_aplaylist()
# ==============================================================================
# EXECUTION - START
# ==============================================================================
-run_navbar "$@" && run_aplaylist "$@"
+run_aplaylist "$@"
diff --git a/src/js/navbar-burger.js b/src/js/navbar-burger.js
deleted file mode 100644
index 084f02b..0000000
--- a/src/js/navbar-burger.js
+++ /dev/null
@@ -1,23 +0,0 @@
-document.addEventListener('DOMContentLoaded', () => {
- // Get all "navbar-burger" elements
- const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
-
- // Check if there are any navbar burgers
- if ($navbarBurgers.length > 0) {
-
- // Add a click event on each of them
- $navbarBurgers.forEach( el => {
- el.addEventListener('click', () => {
-
- // Get the target from the "data-target" attribute
- const target = el.dataset.target;
- const $target = document.getElementById(target);
-
- // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
- el.classList.toggle('is-active');
- $target.classList.toggle('is-active');
-
- });
- });
- }
-});
diff --git a/src/scss/custom/_header.scss b/src/scss/custom/_header.scss
index 5b1e012..25ae9cd 100644
--- a/src/scss/custom/_header.scss
+++ b/src/scss/custom/_header.scss
@@ -5,6 +5,27 @@
display: none;
}
+.nav__toggle {
+ position: absolute;
+ cursor: pointer;
+ margin: 0 1rem;
+ right: 0;
+}
+
+.nav__toggle svg {
+ width: 1rem;
+ fill: white;
+}
+
+.nav__toggle .close {
+ display: none;
+}
+
+.nav__toggle .close,
+.nav__toggle .menu {
+ margin: 1rem auto;
+}
+
label[for=navbar-toggle-cbox] {
cursor: pointer;
}
@@ -13,6 +34,14 @@ label[for=navbar-toggle-cbox] {
display: block;
}
+#navbar-toggle-cbox:checked ~ .navbar-brand label.nav__toggle svg.close {
+ display: block;
+}
+
+#navbar-toggle-cbox:checked ~ .navbar-brand label.nav__toggle svg.menu {
+ display: none;
+}
+
/*- ----------- End Menu Mobile sin JS ------------- */
/* navigation */
diff --git a/src/scss/custom/_mediaqueries.scss b/src/scss/custom/_mediaqueries.scss
index 47c319c..f66079f 100644
--- a/src/scss/custom/_mediaqueries.scss
+++ b/src/scss/custom/_mediaqueries.scss
@@ -4,6 +4,20 @@
}
}
+@media only screen and (min-width: 1087px) {
+ .nav__toggle {
+ display: none;
+ }
+
+ .nav__menu {
+ flex-direction: row;
+ }
+
+ .nav__menu li {
+ display: block;
+ }
+}
+
@media screen and (max-width: 600px) {
.main-content {
padding: 0rem;
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-07 10:00:48 +0000