Skip to content

Commit c7a7702

Browse files
author
MoonTech
committed
Update website content
1 parent caaf2af commit c7a7702

File tree

6 files changed

+148
-17
lines changed

6 files changed

+148
-17
lines changed

‎Dark.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Get_Started.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h1 class="logo">
1414
<img src="RetroUse-NavLogo.png" alt="NavLogo"> RetroUse
1515
</h1>
1616
<nav class="nav">
17-
<img src="Dark.png" alt="Switch" class="SwitchDM" id="SwitchDMGS" onclick="toggleDarkModeGS()">
17+
<img src="Dark.svg" alt="Switch" class="SwitchDM" id="SwitchDMGS" onclick="toggleDarkModeGS()">
1818
</nav>
1919
</div>
2020
</header>
@@ -53,6 +53,6 @@ <h3>Download RetroUse</h3>
5353
</footer>
5454

5555
<!-- External JavaScript -->
56-
<script src="Site1.js"></script>
56+
<script src="script.js"></script>
5757
</body>
5858
</html>

‎Light.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎index.html‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,29 @@
99
<body>
1010

1111
<!-- Header -->
12-
<header class="header">
13-
<div class="container header-inner">
14-
<h1 class="logo"><img src="RetroUse-NavLogo.png" alt="NavLogo"> RetroUse</h1>
15-
<nav class="nav">
16-
<img src="Dark.png" alt="Switch" class="SwitchDM" onclick="toggleDarkMode()" id="SwitchDM">
17-
</nav>
18-
</div>
19-
</header>
12+
<header class="header">
13+
<nav class="Hnav">
14+
<ul class="main-nav">
15+
<li class="logo"><a href="index.html"><img src="RetroUse-NavLogo.png" alt="NavLogo"> RetroUse</a></li>
16+
<li><a href="#intro">Introduction</a></li>
17+
<li><a href="#problem">The Problem</a></li>
18+
<li><a href="#solution">The Solution</a></li>
19+
<li><a href="#howto">How to Use</a></li>
20+
<li><a href="#future">Future Vision</a></li>
21+
<li><a href="Get_Started.html">Get Started</a></li>
22+
<li class="menu-button" onclick="showSidebar()"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
23+
</ul>
24+
<ul class="sidebar">
25+
<li onclick="hideSidebar()"><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
26+
<li><a href="#intro">Introduction</a></li>
27+
<li><a href="#problem">The Problem</a></li>
28+
<li><a href="#solution">The Solution</a></li>
29+
<li><a href="#howto">How to Use</a></li>
30+
<li><a href="#future">Future Vision</a></li>
31+
<li><a href="Get_Started.html">Get Started</a></li>
32+
</ul>
33+
</nav>
34+
</header>
2035

2136
<!-- Hero Section -->
2237
<div class="hero">

‎script.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ function toggleDarkMode() {
1414
}
1515

1616
if (body.classList.contains("body-dm")) {
17-
if (DMID) DMID.src = "Dark.png";
17+
if (DMID) DMID.src = "Dark.svg";
1818
} else {
19-
if (DMID) DMID.src = "Light.png";
19+
if (DMID) DMID.src = "Light.svg";
2020
}
2121
}
2222

@@ -32,16 +32,24 @@ function toggleDarkModeGS() {
3232
sectionGS.classList.toggle("sectionGS-dm");
3333
if (downloadBox) downloadBox.classList.toggle("download-box-dm");
3434

35-
containers.forEach(function(container) {
35+
containers.forEach(function (container) {
3636
container.classList.toggle("containerB-dm");
3737
});
3838

3939
if (bodyGS.classList.contains("BodyGS-dm")) {
40-
DMIDGS.src = "Dark.png";
40+
DMIDGS.src = "Dark.svg";
4141
} else {
42-
DMIDGS.src = "Light.png";
42+
DMIDGS.src = "Light.svg";
4343
}
4444
}
4545
function SwitchToGS() {
4646
window.location.href = "Get_Started.html";
4747
}
48+
function showSidebar() {
49+
const sidebar = document.querySelector('.sidebar')
50+
sidebar.style.display = 'flex'
51+
}
52+
function hideSidebar() {
53+
const sidebar = document.querySelector('.sidebar')
54+
sidebar.style.display = 'none'
55+
}

‎style.css‎

Lines changed: 108 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ body {
6161
.header-inner {
6262
display: flex;
6363
justify-content: space-between;
64-
align-items: center;
64+
align-items: flex-start;
6565
}
6666

6767
.logo {
@@ -287,7 +287,7 @@ body {
287287
}
288288
.GS {
289289
margin: 0 auto;
290-
margin-bottom: 30px;
290+
margin-bottom: 55px;
291291
padding: 10px 5px;
292292
text-align: center;
293293
font-size: 20px;
@@ -332,3 +332,109 @@ body {
332332
--angle: 360deg;
333333
}
334334
}
335+
/* Always visible navbar */
336+
.Hnav {
337+
width: 100%;
338+
background: transparent;
339+
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1);
340+
position: sticky;
341+
top: 0;
342+
z-index: 1000;
343+
}
344+
345+
.main-nav {
346+
display: flex;
347+
align-items: flex-start;
348+
justify-content: flex-end;
349+
list-style: none;
350+
padding: 0 2rem;
351+
background: transparent;
352+
}
353+
354+
.main-nav li {
355+
height: 50px;
356+
display: flex;
357+
align-items: center;
358+
}
359+
360+
.main-nav .logo {
361+
margin-right: auto;
362+
}
363+
364+
.main-nav a {
365+
color: #fff;
366+
padding: 0 30px;
367+
text-decoration: none;
368+
font-weight: 500;
369+
display: flex;
370+
align-items: center;
371+
height: 100%;
372+
transition: background 0.3s;
373+
}
374+
375+
.main-nav a:hover {
376+
background-color: #f0f0f0;
377+
color: #100c08;
378+
}
379+
380+
.menu-button {
381+
display: none;
382+
cursor: pointer;
383+
}
384+
385+
/* Sidebar styles */
386+
.sidebar {
387+
position: fixed;
388+
top: 0;
389+
right: -250px;
390+
height: 100vh;
391+
width: 250px;
392+
background-color: rgba(255, 255, 255, 0.95);
393+
backdrop-filter: blur(12px);
394+
box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
395+
list-style: none;
396+
display: flex;
397+
flex-direction: column;
398+
align-items: flex-start;
399+
justify-content: flex-start;
400+
transition: right 0.3s;
401+
z-index: 2000;
402+
}
403+
404+
.sidebar.show {
405+
right: 0;
406+
}
407+
408+
.sidebar li {
409+
width: 100%;
410+
}
411+
412+
.sidebar a {
413+
width: 100%;
414+
color: #100c08;
415+
padding: 1rem 2rem;
416+
text-decoration: none;
417+
display: flex;
418+
align-items: center;
419+
}
420+
421+
.sidebar a:hover {
422+
background-color: #f0f0f0;
423+
}
424+
425+
/* Responsive: show hamburger on mobile, hide main nav */
426+
@media (max-width: 900px) {
427+
.main-nav li:not(.logo):not(.menu-button) {
428+
display: none;
429+
}
430+
.menu-button {
431+
display: flex;
432+
}
433+
}
434+
435+
/* Sidebar full width on very small screens */
436+
@media (max-width: 400px) {
437+
.sidebar {
438+
width: 100%;
439+
}
440+
}

0 commit comments

Comments
 (0)