Skip to content

Commit

Permalink
good
Browse files Browse the repository at this point in the history
  • Loading branch information
@SIDDHU123M
SIDDHU123M committed Nov 27, 2024
1 parent 5b8d09a commit c2c4931
Show file tree
Hide file tree
Showing 3 changed files with 119 additions and 89 deletions.
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ <h3>Sections</h3>
<div id="right-nav-content"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/showdown@1.9.1/dist/showdown.min.js"></script>
<script src="scripts/main.js"></script>
<script defer src="scripts/main.js"></script>
</body>

</html>
68 changes: 39 additions & 29 deletions scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ document.addEventListener("DOMContentLoaded", () => {
});
});

/* Existing JavaScript code */

const converter = new showdown.Converter();
const iconMap = {
Overview: "home",
Expand Down Expand Up @@ -65,15 +63,21 @@ function renderSidebar(files) {
}

async function loadPage(file) {
const response = await fetch(file);
const markdown = await response.text();
let htmlContent = converter.makeHtml(markdown);
document.getElementById("content").innerHTML = htmlContent;
if (file !== "data/README.md") {
createRightNav();
try {
const response = await fetch(file);
if (!response.ok) {
throw new Error(`Failed to load ${file}: ${response.statusText}`);
}
const markdown = await response.text();
let htmlContent = converter.makeHtml(markdown);
document.getElementById("content").innerHTML = htmlContent;
if (file !== "data/README.md") {
createRightNav();
}
} catch (error) {
console.error(error);
document.getElementById("content").innerHTML = `<p>Error loading content. Please try again later.</p>`;
}
// Remove or define updatePagination function
// updatePagination();
}

function createRightNav() {
Expand All @@ -99,30 +103,36 @@ function createRightNav() {
});
});

// Add navigation links after the first line of the content for mobile users
if (window.innerWidth <= 768) {
content.append(document.createElement("hr"));
const mobileNav = `
<nav class="mobile-nav">
<ul>${rightNavContent}</ul>
</nav>`;
if (firstH2) {
firstH2.insertAdjacentHTML("afterend", mobileNav);
} else {
content.insertAdjacentHTML("afterbegin", mobileNav);
}
addMobileNav(content, rightNavContent, firstH2);
}
}

function addMobileNav(content, rightNavContent, firstH2) {
content.append(document.createElement("hr"));
const mobileNav = `
<nav class="mobile-nav" aria-label="Mobile Navigation">
<ul>${rightNavContent}</ul>
</nav>`;
if (firstH2) {
firstH2.insertAdjacentHTML("afterend", mobileNav);
} else {
content.insertAdjacentHTML("afterbegin", mobileNav);
}
}

function addSidebarEventListeners() {
document.querySelectorAll("#sidebar-content a").forEach((link, index) => {
link.addEventListener("click", (e) => {
e.preventDefault();
currentIndex = index;
loadPage(files[currentIndex].file);
setActiveLink(link);
});
});
document.getElementById("sidebar-content").addEventListener("click", handleSidebarClick);
}

function handleSidebarClick(e) {
if (e.target.tagName === "A") {
e.preventDefault();
const link = e.target;
const file = link.getAttribute("data-link");
loadPage(file);
setActiveLink(link);
}
}

function setActiveLink(activeLink) {
Expand Down
138 changes: 79 additions & 59 deletions styles/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,31 @@
:root {
--primary-color: #ff9800;
--secondary-color: #1a73e8;
--background-color: #f4f5f7;
--text-color: #333;
--sidebar-bg-color: #333;
--sidebar-text-color: #fff;
--sidebar-hover-bg-color: #444;
--right-nav-bg-color: #f8f9fa;
--right-nav-border-color: #ddd;
--right-nav-hover-bg-color: #ddd;
--font-family-main: Arial, sans-serif;
--font-family-title: "Nabla", system-ui;
--font-family-heading: "Space Grotesk", sans-serif;
--font-family-alt: "Titillium Web", sans-serif;
--font-family-kanit: "Kanit", sans-serif;
--font-size-title: 2.5em;
--font-size-heading: 1.5em;
--font-size-sidebar: 1em;
--font-size-right-nav: 0.95em;
--font-size-right-nav-heading: 1.2em;
--font-size-main-content: 1.05em;
--font-weight-bold: 600;
--font-weight-normal: 400;
--font-weight-heading: 900;
--transition-duration: 0.3s;
}

* {
margin: 0;
padding: 0;
Expand All @@ -6,17 +34,17 @@

body {
display: flex;
font-family: Arial, sans-serif;
color: #333;
font-family: var(--font-family-main);
color: var(--text-color);
line-height: 1.6;
background-color: #f4f5f7;
background-color: var(--background-color);
/* overflow: hidden; */
}

#sidebar {
width: 250px;
background-color: #333;
color: #fff;
background-color: var(--sidebar-bg-color);
color: var(--sidebar-text-color);
padding: 20px;
position: fixed;
top: 0;
Expand All @@ -29,7 +57,7 @@ body {
#sidebar h2 {
font-size: 1.3em;
margin-bottom: 15px;
color: #ff9800;
color: var(--primary-color);
}

#sidebar-content {
Expand All @@ -48,23 +76,22 @@ body {
display: flex;
align-items: center;
padding: 10px;
font-size: 1em;
font-size: var(--font-size-sidebar);
text-decoration: none;
color: #ddd;
border-radius: 5px;
transition: background-color 0.3s;
font-weight: 500;
transition: background-color var(--transition-duration);
margin-right: 1.8em;
}

#sidebar-content a:hover {
background-color: #444;
background-color: var(--sidebar-hover-bg-color);
}

#sidebar-content .material-symbols-outlined {
margin-right: 10px;
font-size: 1.2em;
color: #ff9800;
color: var(--primary-color);
}

#main-content {
Expand All @@ -77,17 +104,17 @@ body {
}

header h1#doc-title {
font-family: "Nabla", system-ui;
font-size: 2.5em;
font-family: var(--font-family-title);
font-size: var(--font-size-title);
text-shadow: #000000 0px 0px 3px;
background: linear-gradient(to right, #ff9800 0%, rgba(255, 152, 0, 0) 100%);
color: #ff9800;
background: linear-gradient(to right, var(--primary-color) 0%, rgba(255, 152, 0, 0) 100%);
color: var(--primary-color);
font-weight: bold;
-webkit-background-clip: text;
}

h1#doc-title {
font-family: "Kanit", sans-serif;
font-family: var(--font-family-kanit);
/* font-weight: 400; */
font-style: normal;
}
Expand All @@ -96,119 +123,112 @@ h1#doc-title {
#content h3,
#content h4 {
color: #000000;
font-family: "Space Grotesk", sans-serif;
font-family: var(--font-family-heading);
/* margin-top: 20px; */
font-weight: 900;
font-size: 1.5em;
font-weight: var(--font-weight-heading);
font-size: var(--font-size-heading);
padding: 0.25em 0px;
}

#content p {
font-size: 1.05em;
font-size: var(--font-size-main-content);
color: #444;
font-weight: 400;
font-weight: var(--font-weight-normal);
line-height: 1.8;
margin-bottom: 20px;
}

#content ul,
#content ol {
font-size: 1.05em;
font-size: var(--font-size-main-content);
color: #444;
font-weight: 400;
font-weight: var(--font-weight-normal);
margin-left: 20px;
line-height: 1.8;
}

#content a {
font-weight: 600;
color: #ff9800;
font-weight: var(--font-weight-bold);
color: var(--primary-color);
text-decoration: none;
transition: color 0.3s;
transition: color var(--transition-duration);
}

#content a:hover {
color: #f57c00;
}

#content li a {
font-weight: 600;
color: #1a73e8;
font-weight: var(--font-weight-bold);
color: var(--secondary-color);
text-decoration: none;
transition: color 0.3s;
transition: color var(--transition-duration);
}

#content li a:hover {
color: #ff9800;
color: var(--primary-color);
}

#content ul li {
font-family: "Space Grotesk", sans-serif;
font-family: var(--font-family-heading);
font-variation-settings: "wdth" 100;
font-weight: 400;
font-weight: var(--font-weight-normal);
> a {
font-family: "Titillium Web", sans-serif;
font-weight: 600;
font-family: var(--font-family-alt);
font-weight: var(--font-weight-bold);
font-style: normal;
}
}

#right-nav {
width: 200px;
background-color: #f8f9fa;
color: #333;
background-color: var(--right-nav-bg-color);
color: var(--text-color);
padding: 20px;
border-left: 1px solid #ddd;
border-left: 1px solid var(--right-nav-border-color);
overflow-y: auto;
position: fixed;
right: 0;
top: 0;
height: 100vh;
> #right-nav-content ul {
list-style: none;
padding: 0;
> #right-nav-content ul {
list-style: none;
padding: 0;
}
}

#right-nav h3 {
font-size: 1.2em;
color: #333;
font-size: var(--font-size-right-nav-heading);
color: var(--text-color);
margin-bottom: 10px;
}

#right-nav a {
display: block;
padding: 10px 5px;
font-size: 0.95em;
font-size: var(--font-size-right-nav);
text-decoration: none;
color: #333;
transition: background-color 0.3s;
color: var(--text-color);
transition: background-color var(--transition-duration);
border-left: 3px solid transparent;
}

#right-nav a:hover {
background-color: #ddd;
border-left: 3px solid #ff9800;
}

#sidebar-content a.active,
#right-nav a.active {
background-color: #444;
border-left: 3px solid #ff9800;
color: #fff;
background-color: var(--right-nav-hover-bg-color);
border-left: 3px solid var(--primary-color);
}

#sidebar-content a.active,
#right-nav a.active {
background-color: #444;
border-left: 3px solid #ff9800;
background-color: var(--sidebar-hover-bg-color);
border-left: 3px solid var(--primary-color);
color: #fff;
}

#right-nav a.active {
background-color: #ddd;
border-left: 3px solid #ff9800;
color: #333;
background-color: var(--right-nav-hover-bg-color);
border-left: 3px solid var(--primary-color);
color: var(--text-color);
}

/* Existing styles */
Expand Down

0 comments on commit c2c4931

Please sign in to comment.