Skip to content

Commit 1d1c867

Browse files
alanfox2000softwarealanfox2000software
committed
commit
1 parent 4433e36 commit 1d1c867

File tree

3 files changed

+114
-106
lines changed

3 files changed

+114
-106
lines changed

‎bible/index.html‎

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,33 @@
33
<head>
44
<title>Bible & Pseudepigrapha</title>
55
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
77
<link rel="stylesheet" href="styles.css">
88
</head>
99
<body>
1010
<!-- Mobile menu button -->
11-
<div id="mobile-menu" onclick="toggleSidebar()">☰</div>
11+
<button id="mobile-menu" aria-label="Toggle menu">☰</button>
1212

1313
<div class="container">
1414
<!-- Left Sidebar -->
15-
<div class="sidebar" id="sidebar">
15+
<nav class="sidebar" id="sidebar">
1616
<h2>Books</h2>
1717
<div id="book-list"></div>
18-
</div>
18+
</nav>
1919

2020
<!-- Right Content Area -->
21-
<div class="main-content">
22-
<div id="navigation">
23-
<button id="prevChapter">&lt;</button>
24-
<div id="chapter-numbers"></div>
25-
<button id="nextChapter">&gt;</button>
21+
<main class="main-content">
22+
<div class="chapter-nav">
23+
<button id="prevChapter" aria-label="Previous chapter">&lt;</button>
24+
<div class="chapters-wrapper">
25+
<div id="chapter-numbers" class="chapter-numbers"></div>
26+
</div>
27+
<button id="nextChapter" aria-label="Next chapter">&gt;</button>
2628
</div>
27-
<div id="verses"></div>
28-
</div>
29-
</div>
29+
<article id="verses"></article>
30+
</main>
31+
</div>
32+
33+
<script src="script.js"></script>
34+
</body>
35+
</html>

‎bible/script.js‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -74,21 +74,31 @@ function initBooks() {
7474
.join('');
7575
}
7676

77-
// Mobile sidebar toggle
77+
// Mobile menu functionality
78+
const mobileMenu = document.getElementById('mobile-menu');
79+
const sidebar = document.getElementById('sidebar');
80+
7881
function toggleSidebar() {
79-
const sidebar = document.getElementById('sidebar');
80-
sidebar.classList.toggle('active');
82+
sidebar.style.left = sidebar.style.left === '0px' ? '-100%' : '0';
8183
}
8284

83-
// Close sidebar when clicking outside on mobile
84-
document.addEventListener('click', (event) => {
85-
const sidebar = document.getElementById('sidebar');
86-
const mobileMenu = document.getElementById('mobile-menu');
87-
88-
if (window.innerWidth < 768 &&
89-
!event.target.closest('.sidebar') &&
90-
!event.target.closest('#mobile-menu')) {
91-
sidebar.classList.remove('active');
85+
mobileMenu.addEventListener('click', (e) => {
86+
e.stopPropagation();
87+
toggleSidebar();
88+
});
89+
90+
document.addEventListener('click', (e) => {
91+
if (window.innerWidth < 768 && !sidebar.contains(e.target)) {
92+
sidebar.style.left = '-100%';
93+
}
94+
});
95+
96+
// Handle window resize
97+
window.addEventListener('resize', () => {
98+
if (window.innerWidth >= 768) {
99+
sidebar.style.left = '0';
100+
} else {
101+
sidebar.style.left = '-100%';
92102
}
93103
});
94104

‎bible/styles.css‎

Lines changed: 74 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,34 @@
1+
/* Base Reset */
2+
* {
3+
box-sizing: border-box;
4+
margin: 0;
5+
padding: 0;
6+
}
7+
18
:root {
2-
--sidebar-width: 250px;
3-
--primary-color: #2c3e50;
4-
--accent-color: #3498db;
9+
--sidebar-width: 260px;
10+
--primary: #2c3e50;
11+
--accent: #3498db;
512
}
613

7-
/* Mobile First Approach */
14+
/* Mobile First Styles */
815
body {
9-
margin: 0;
10-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
11-
line-height: 1.6;
12-
font-size: 16px;
16+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
17+
line-height: 1.5;
18+
-webkit-tap-highlight-color: transparent;
1319
}
1420

1521
#mobile-menu {
1622
display: block;
1723
position: fixed;
18-
top: 10px;
19-
left: 10px;
20-
z-index: 1000;
24+
top: 12px;
25+
left: 12px;
26+
z-index: 1001;
2127
font-size: 24px;
22-
background: var(--primary-color);
28+
background: var(--primary);
2329
color: white;
24-
padding: 8px 12px;
30+
border: none;
31+
padding: 8px 16px;
2532
border-radius: 4px;
2633
cursor: pointer;
2734
}
@@ -33,89 +40,90 @@ body {
3340
}
3441

3542
.sidebar {
36-
width: 100%;
37-
background: #f8f9fa;
38-
transform: translateX(-100%);
39-
transition: transform 0.3s ease;
4043
position: fixed;
41-
height: 100vh;
44+
left: -100%;
45+
top: 0;
46+
width: 85%;
47+
max-width: var(--sidebar-width);
48+
height: 100%;
49+
background: #f8f9fa;
4250
overflow-y: auto;
43-
z-index: 999;
51+
transition: left 0.3s ease;
52+
z-index: 1000;
53+
padding: 20px 15px;
4454
}
4555

4656
.main-content {
4757
width: 100%;
48-
padding: 20px 15px;
49-
margin-top: 50px; /* Space for mobile menu */
58+
padding: 70px 15px 20px;
59+
}
60+
61+
/* Chapter Navigation */
62+
.chapter-nav {
63+
display: flex;
64+
gap: 8px;
65+
margin-bottom: 20px;
66+
width: 100%;
67+
}
68+
69+
.chapters-wrapper {
70+
flex: 1;
71+
min-width: 0;
72+
}
73+
74+
.chapter-numbers {
75+
display: flex;
76+
gap: 6px;
77+
overflow-x: auto;
78+
padding-bottom: 5px;
79+
-webkit-overflow-scrolling: touch;
80+
}
81+
82+
#prevChapter,
83+
#nextChapter {
84+
flex-shrink: 0;
85+
padding: 12px;
86+
font-size: 1.1em;
87+
background: var(--primary);
88+
color: white;
89+
border: none;
90+
border-radius: 4px;
91+
min-width: 48px;
5092
}
5193

5294
/* Desktop Styles */
5395
@media (min-width: 768px) {
5496
#mobile-menu {
5597
display: none;
5698
}
57-
99+
58100
.container {
59101
flex-direction: row;
102+
padding-left: var(--sidebar-width);
60103
}
61104

62105
.sidebar {
106+
left: 0;
63107
width: var(--sidebar-width);
64-
transform: translateX(0);
65-
position: relative;
66108
height: auto;
67109
}
68110

69111
.main-content {
70-
width: calc(100% - var(--sidebar-width));
71-
padding: 20px;
72-
margin-top: 0;
112+
width: 100%;
113+
padding: 30px 40px;
73114
}
74115
}
75116

76-
/* Navigation Controls */
77-
#navigation {
78-
display: flex;
79-
gap: 10px;
80-
margin-bottom: 20px;
81-
flex-wrap: wrap;
82-
}
83-
84-
#chapter-numbers {
85-
display: flex;
86-
gap: 5px;
87-
overflow-x: auto;
88-
flex-grow: 1;
89-
}
90-
91-
#prevChapter, #nextChapter {
92-
padding: 10px 15px;
93-
font-size: 1.1em;
94-
background: var(--primary-color);
95-
color: white;
96-
border: none;
97-
border-radius: 4px;
98-
min-width: 60px;
99-
}
100-
117+
/* Common Elements */
101118
.chapter-btn {
102-
padding: 10px 15px;
103-
min-width: 44px;
104-
text-align: center;
119+
flex-shrink: 0;
120+
padding: 12px 16px;
105121
background: white;
106-
border: 1px solid #ddd;
122+
border: 1px solid #eee;
107123
border-radius: 4px;
108124
cursor: pointer;
109-
transition: all 0.2s;
110125
}
111126

112-
.chapter-btn.active {
113-
background: var(--accent-color);
114-
color: white;
115-
border-color: var(--accent-color);
116-
}
117-
118-
/* Book List */
119127
#book-list button {
120128
display: block;
121129
width: 100%;
@@ -126,28 +134,12 @@ body {
126134
border-radius: 4px;
127135
text-align: left;
128136
cursor: pointer;
129-
transition: all 0.2s;
130-
}
131-
132-
#book-list button:hover {
133-
background: #f8f9fa;
134-
}
135-
136-
/* Verses */
137-
#verses {
138-
font-size: 1.1em;
139-
color: #333;
140137
}
141138

142139
#verses p {
143140
margin: 15px 0;
144-
padding: 10px;
141+
padding: 15px;
145142
background: white;
146143
border-radius: 4px;
147-
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
148-
}
149-
150-
/* Mobile Sidebar Activation */
151-
.sidebar.active {
152-
transform: translateX(0);
144+
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
153145
}

0 commit comments

Comments
 (0)