Merge branch 'test'
This commit is contained in:
+5
-3
@@ -7,10 +7,14 @@
|
||||
<title id="website_title"></title>
|
||||
<link rel="stylesheet" href="styles/main_style.css">
|
||||
<link rel="stylesheet" href="styles/sidebar_style.css">
|
||||
<link rel="stylesheet" href="styles/mobile_bar_style.css">
|
||||
<link rel="stylesheet" href="styles/projects_style.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="navbar-mobile">
|
||||
|
||||
</div>
|
||||
<aside class="sidebar">
|
||||
|
||||
<div id="sidebar-top">
|
||||
@@ -54,9 +58,7 @@
|
||||
<div id="projects-section"></div>
|
||||
</div>
|
||||
|
||||
<script src="scripts/main_page.js">
|
||||
|
||||
</script>
|
||||
<script src="scripts/main_page.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
|
||||
+19
-3
@@ -85,6 +85,8 @@ async function loadData() {
|
||||
const navbar = document.getElementById("navbar");
|
||||
const sidebar_top = document.getElementById("sidebar-top-content");
|
||||
|
||||
const navbar_mobile = document.getElementById("navbar-mobile");
|
||||
|
||||
const sidebar_top_status = document.createElement("p");
|
||||
sidebar_top_status.textContent = data.status;
|
||||
sidebar_top.appendChild(sidebar_top_status);
|
||||
@@ -113,7 +115,7 @@ async function loadData() {
|
||||
github_link_introduction.rel = "noopener noreferrer";
|
||||
introduction.appendChild(github_link_introduction);
|
||||
|
||||
create_navbar_entry(navbar, data.title_introduction, "introduction", 0);
|
||||
create_navbar_entry(navbar, navbar_mobile, data.title_introduction, "introduction", 0);
|
||||
|
||||
const navbar_group = document.createElement("li");
|
||||
navbar_group.className = "navbar-group";
|
||||
@@ -128,7 +130,7 @@ async function loadData() {
|
||||
project.setAttribute("data-nav", item.id);
|
||||
container.appendChild(project);
|
||||
|
||||
create_navbar_entry(navbar, item.title, item.id, j + 1);
|
||||
create_navbar_entry(navbar, navbar_mobile, item.title, item.id, j + 1);
|
||||
|
||||
const header = document.createElement("div");
|
||||
header.className = "section-header";
|
||||
@@ -275,7 +277,7 @@ document.addEventListener("click", (e) => {
|
||||
}
|
||||
});
|
||||
|
||||
function create_navbar_entry(navbar, title, id, j) {
|
||||
function create_navbar_entry(navbar, navar_mobile, title, id, j) {
|
||||
const navbar_item = document.createElement("li");
|
||||
navbar_item.className = "navbar-item";
|
||||
navbar.appendChild(navbar_item);
|
||||
@@ -293,6 +295,20 @@ function create_navbar_entry(navbar, title, id, j) {
|
||||
navbar_link.appendChild(text);
|
||||
navbar_link.dataset.target = id;
|
||||
navbar_item.appendChild(navbar_link);
|
||||
|
||||
create_navbar_entry_mobile(navar_mobile, title, id)
|
||||
}
|
||||
|
||||
function create_navbar_entry_mobile(navar_mobile, title, id) {
|
||||
const navbar_item = document.createElement("li");
|
||||
navbar_item.className = "navbar-item-mobile";
|
||||
navar_mobile.appendChild(navbar_item);
|
||||
|
||||
const navbar_link = document.createElement("a");
|
||||
navbar_link.className = "nav-link-mobile";
|
||||
navbar_link.href = `#${id}`;
|
||||
navbar_link.textContent = title;
|
||||
navbar_item.appendChild(navbar_link);
|
||||
}
|
||||
|
||||
function setCookie(name, value, maxAge) {
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
--serif: Georgia, serif;
|
||||
--sans: system-ui, sans-serif;
|
||||
--nav-w: 230px;
|
||||
--nav-mobile-w: 100px;
|
||||
--font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,44 @@
|
||||
#navbar-mobile {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: var(--nav-mobile-w);
|
||||
height: 100vh;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
border-right: 1px solid var(--border);
|
||||
gap: 10px;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
@media (min-width: 1001px) {
|
||||
#navbar-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-item-mobile {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.navbar-item-mobile:hover {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.nav-link-mobile {
|
||||
text-align: center;
|
||||
font-size: calc(var(--font-size) - 0.2rem);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@@ -3,6 +3,13 @@
|
||||
--margin-main-content: 100px;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.main-content {
|
||||
margin-left: var(--nav-mobile-w);
|
||||
--margin-main-content: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
#introduction {
|
||||
padding-top: 100px;
|
||||
margin-left: var(--margin-main-content);
|
||||
|
||||
@@ -14,6 +14,12 @@
|
||||
--padding: 30px;
|
||||
}
|
||||
|
||||
@media (max-width: 1000px) {
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sidebar Top */
|
||||
|
||||
#sidebar-top {
|
||||
|
||||
Reference in New Issue
Block a user