aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--about.html24
-rw-r--r--contact.html24
-rw-r--r--css/style.css16
-rw-r--r--index.html22
-rw-r--r--post.html24
5 files changed, 62 insertions, 48 deletions
diff --git a/about.html b/about.html
index 84e9f30..c9b5d51 100644
--- a/about.html
+++ b/about.html
@@ -16,32 +16,30 @@
<nav class="navbar">
<div class="container">
<!-- nav site title -->
+ <!-- Input for menu-mobile with checkbox-->
+ <input id="navbar-toggle-cbox" role="button" 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 -->
- <span class="navbar-burger" data-target="navMenu">
+ <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
<span></span>
<span></span>
<span></span>
- </span>
+ </label>
<!-- end of burger -->
</div>
<!-- this "nav-menu" is hidden on mobile -->
<div id="navMenu" class="navbar-menu">
- <div class="navbar-end">
- <a href="index.html" class="navbar-item is-tab">Home</a>
- <a href="post.html" class="navbar-item is-tab">Static Post</a>
- <a href="about.html" class="navbar-item is-tab is-active">About</a>
- <a href="contact.html" class="navbar-item is-tab">Contact</a>
- <a class="navbar-item">
- <span class="icon">
- <i class="fa fa-search"></i>
- </span>
- </a>
- </div>
+ <ul class="navbar-end">
+ <li><a href="index.html" class="navbar-item is-tab">Home</a></li>
+ <li><a href="post.html" class="navbar-item is-tab">Static Post</a></li>
+ <li><a href="about.html" class="navbar-item is-tab is-active">About</a></li>
+ <li><a href="contact.html" class="navbar-item is-tab">Contact</a></li>
+ </ul>
</div>
<!-- end of nav -->
</div>
diff --git a/contact.html b/contact.html
index 68622f4..117410e 100644
--- a/contact.html
+++ b/contact.html
@@ -16,32 +16,30 @@
<nav class="navbar">
<div class="container">
<!-- nav site title -->
+ <!-- Input for menu-mobile with checkbox-->
+ <input id="navbar-toggle-cbox" role="button" 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 -->
- <span class="navbar-burger" data-target="navMenu">
+ <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
<span></span>
<span></span>
<span></span>
- </span>
+ </label>
<!-- end of burger -->
</div>
<!-- this "nav-menu" is hidden on mobile -->
<div id="navMenu" class="navbar-menu">
- <div class="navbar-end">
- <a href="index.html" class="navbar-item is-tab">Home</a>
- <a href="post.html" class="navbar-item is-tab">Static Post</a>
- <a href="about.html" class="navbar-item is-tab">About</a>
- <a href="contact.html" class="navbar-item is-tab is-active">Contact</a>
- <a class="navbar-item">
- <span class="icon">
- <i class="fa fa-search"></i>
- </span>
- </a>
- </div>
+ <ul class="navbar-end">
+ <li><a href="index.html" class="navbar-item is-tab">Home</a></li>
+ <li><a href="post.html" class="navbar-item is-tab">Static Post</a></li>
+ <li><a href="about.html" class="navbar-item is-tab">About</a></li>
+ <li><a href="contact.html" class="navbar-item is-tab is-active">Contact</a></li>
+ </ul>
</div>
<!-- end of nav -->
</div>
diff --git a/css/style.css b/css/style.css
index 7825122..753d625 100644
--- a/css/style.css
+++ b/css/style.css
@@ -5,6 +5,22 @@ Author: jesus e.
*/
/* basic formatting changes (mostly to cater for darker colours) */
+
+/* ------------- Menu Mobile sin JS ---------------- */
+/* input hidden */
+#navbar-toggle-cbox {
+ display: none;
+}
+
+label[for=navbar-toggle-cbox] {
+ cursor: pointer;
+}
+
+#navbar-toggle-cbox:checked ~ .navbar-menu {
+ display: block;
+}
+/*- ----------- End Menu Mobile sin JS ------------- */
+
code {
background-color: #282828;
color: #73d1ed;
diff --git a/index.html b/index.html
index 23895bd..6812fff 100644
--- a/index.html
+++ b/index.html
@@ -18,28 +18,32 @@
<div class="navigation">
<nav class="navbar">
<div class="container">
- <!-- nav site title -->
+ <!-- nav site title -->
+ <!-- Input for menu-mobile with checkbox-->
+ <input id="navbar-toggle-cbox" role="button" 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 -->
- <span class="navbar-burger" data-target="navMenu">
+ <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
<span></span>
<span></span>
<span></span>
- </span>
+ </label>
+
<!-- end of burger -->
</div>
<!-- this "navbar-menu" is hidden on mobile -->
<div id="navMenu" class="navbar-menu">
- <div class="navbar-end">
- <a href="index.html" class="navbar-item is-tab is-active">Home</a>
- <a href="post.html" class="navbar-item is-tab">Static Post</a>
- <a href="about.html" class="navbar-item is-tab">About</a>
- <a href="contact.html" class="navbar-item is-tab">Contact</a>
- </div>
+ <ul class="navbar-end">
+ <li><a href="index.html" class="navbar-item is-tab is-active">Home</a></li>
+ <li><a href="post.html" class="navbar-item is-tab">Static Post</a></li>
+ <li><a href="about.html" class="navbar-item is-tab">About</a></li>
+ <li><a href="contact.html" class="navbar-item is-tab">Contact</a></li>
+ </ul>
</div>
<!-- end of nav -->
</div>
diff --git a/post.html b/post.html
index 3a6b5d3..f16aa42 100644
--- a/post.html
+++ b/post.html
@@ -19,32 +19,30 @@
<nav class="navbar">
<div class="container">
<!-- nav site title -->
+ <!-- Input for menu-mobile with checkbox-->
+ <input id="navbar-toggle-cbox" role="button" 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 -->
- <span class="navbar-burger" data-target="navMenu">
+ <label class="navbar-burger" for="navbar-toggle-cbox" data-target="navMenu">
<span></span>
<span></span>
<span></span>
- </span>
+ </label>
<!-- end of burger -->
</div>
<!-- this "navbar-menu" is hidden on mobile -->
<div id="navMenu" class="navbar-menu">
- <div class="navbar-end">
- <a href="index.html" class="navbar-item is-tab">Home</a>
- <a href="post.html" class="navbar-item is-tab is-active">Static Post</a>
- <a href="about.html" class="navbar-item is-tab">About</a>
- <a href="contact.html" class="navbar-item is-tab">Contact</a>
- <a class="navbar-item">
- <span class="icon">
- <i class="fa fa-search"></i>
- </span>
- </a>
- </div>
+ <ul class="navbar-end">
+ <li><a href="index.html" class="navbar-item is-tab">Home</a></li>
+ <li><a href="post.html" class="navbar-item is-tab is-active">Static Post</a></li>
+ <li><a href="about.html" class="navbar-item is-tab">About</a></li>
+ <li><a href="contact.html" class="navbar-item is-tab">Contact</a></li>
+ </ul>
</div>
<!-- end of nav -->
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-07 20:21:25 +0000