diff --git a/main.css b/main.css
index dcd4bca..a726a52 100644
--- a/main.css
+++ b/main.css
@@ -1,6 +1,5 @@
html,
body {
- margin: 0;
overflow-x: hidden;
}
diff --git a/mainpage.css b/mainpage.css
index 3c633bf..7a80f70 100644
--- a/mainpage.css
+++ b/mainpage.css
@@ -72,8 +72,3 @@
height: var(--image-height);
/* height: 100vh; */
}
-
-.menuBar .menu {
- margin: auto 1em;
- cursor: pointer;
-}
diff --git a/menuchange.js b/menuchange.js
index 1e0ec22..e1737d9 100644
--- a/menuchange.js
+++ b/menuchange.js
@@ -3,7 +3,7 @@ $(function () {
var $nav = $(".menuBar");
$nav.toggleClass(
"scrolled",
- $(this).scrollTop() > $(".main-imagex").height() - $nav.height() * 2 - 10
+ $(this).scrollTop() > $(".main-imagex").height() - $nav.height() * 2 - 30
);
});
});
diff --git a/navbar.js b/navbar.js
new file mode 100644
index 0000000..18a7e19
--- /dev/null
+++ b/navbar.js
@@ -0,0 +1,15 @@
+// window.addEventListener("load", );
+
+document.addEventListener("DOMContentLoaded", function () {
+ const menubar = `||`;
+
+ const div = document.createElement("div");
+ div.className = "menuBar standalone";
+ div.innerHTML = menubar;
+
+ document.body.prepend(div);
+});
diff --git a/unbap.css b/unbap.css
index 60a4d1f..cb5ebd2 100644
--- a/unbap.css
+++ b/unbap.css
@@ -1,22 +1,47 @@
+html,
+body {
+ margin: 0;
+}
+
.menuBar {
background-color: rgba(255, 255, 255, 0.2);
position: fixed;
+ width: 100%;
+ text-align: right;
top: 0;
- right: 0;
font-family: "arial", sans-serif;
font-size: 1.01rem;
color: rgba(255, 255, 255, 0.8);
letter-spacing: 0.05rem;
- padding-left: 100%;
- padding-right: 2.5vh;
- padding-top: 1.5vh;
- padding-bottom: 1.5vh;
- display: flex;
+ padding: 0.7em;
+ display: block;
z-index: 1;
transition: background-color 200ms linear;
}
-.menuBar.scrolled {
+.menuBar .menu:last-child {
+ margin-right: 3em;
+}
+
+.menuBar.scrolled,
+.menuBar.standalone {
background-color: rgba(0, 0, 0) !important;
transition: background-color 200ms linear;
}
+
+.menuBar.standalone {
+ top: 0;
+ position: sticky;
+ /* display: block; */
+ text-align: right;
+ margin: 0;
+}
+.menuBar.standalone a {
+ text-decoration: none;
+ color: rgba(255, 255, 255, 0.8);
+}
+
+.menuBar .menu {
+ margin: auto 1em;
+ cursor: pointer;
+}