Skip to content

Commit 4433e36

Browse files
alanfox2000softwarealanfox2000software
committed
commit
1 parent 1171552 commit 4433e36

File tree

3 files changed

+139
-36
lines changed

3 files changed

+139
-36
lines changed

‎bible/index.html‎

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,27 @@
33
<head>
44
<title>Bible & Pseudepigrapha</title>
55
<meta charset="UTF-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
77
<link rel="stylesheet" href="styles.css">
88
</head>
99
<body>
10+
<!-- Mobile menu button -->
11+
<div id="mobile-menu" onclick="toggleSidebar()">☰</div>
12+
1013
<div class="container">
1114
<!-- Left Sidebar -->
12-
<div class="sidebar">
15+
<div class="sidebar" id="sidebar">
1316
<h2>Books</h2>
1417
<div id="book-list"></div>
1518
</div>
1619

1720
<!-- Right Content Area -->
1821
<div class="main-content">
19-
<div id="navigation" style="display: none;">
22+
<div id="navigation">
2023
<button id="prevChapter">&lt;</button>
2124
<div id="chapter-numbers"></div>
2225
<button id="nextChapter">&gt;</button>
2326
</div>
2427
<div id="verses"></div>
2528
</div>
26-
</div>
27-
28-
<script src="script.js"></script>
29-
</body>
30-
</html>
29+
</div>

‎bible/script.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,5 +74,23 @@ function initBooks() {
7474
.join('');
7575
}
7676

77+
// Mobile sidebar toggle
78+
function toggleSidebar() {
79+
const sidebar = document.getElementById('sidebar');
80+
sidebar.classList.toggle('active');
81+
}
82+
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');
92+
}
93+
});
94+
7795
// Initialize the app
7896
initBooks(); // Critical missing line added

‎bible/styles.css‎

Lines changed: 114 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,153 @@
1+
:root {
2+
--sidebar-width: 250px;
3+
--primary-color: #2c3e50;
4+
--accent-color: #3498db;
5+
}
6+
7+
/* Mobile First Approach */
18
body {
29
margin: 0;
3-
font-family: Arial, sans-serif;
10+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
11+
line-height: 1.6;
12+
font-size: 16px;
13+
}
14+
15+
#mobile-menu {
16+
display: block;
17+
position: fixed;
18+
top: 10px;
19+
left: 10px;
20+
z-index: 1000;
21+
font-size: 24px;
22+
background: var(--primary-color);
23+
color: white;
24+
padding: 8px 12px;
25+
border-radius: 4px;
26+
cursor: pointer;
427
}
528

629
.container {
730
display: flex;
8-
height: 100vh;
31+
flex-direction: column;
32+
min-height: 100vh;
933
}
1034

1135
.sidebar {
12-
width: 250px;
13-
background: #f5f5f5;
14-
padding: 20px;
36+
width: 100%;
37+
background: #f8f9fa;
38+
transform: translateX(-100%);
39+
transition: transform 0.3s ease;
40+
position: fixed;
41+
height: 100vh;
1542
overflow-y: auto;
43+
z-index: 999;
1644
}
1745

1846
.main-content {
19-
flex: 1;
20-
padding: 20px;
21-
overflow-y: auto;
22-
}
23-
24-
#book-list button {
25-
display: block;
2647
width: 100%;
27-
padding: 10px;
28-
margin: 5px 0;
29-
text-align: left;
30-
cursor: pointer;
48+
padding: 20px 15px;
49+
margin-top: 50px; /* Space for mobile menu */
3150
}
3251

33-
.verse {
34-
margin: 10px 0;
52+
/* Desktop Styles */
53+
@media (min-width: 768px) {
54+
#mobile-menu {
55+
display: none;
56+
}
57+
58+
.container {
59+
flex-direction: row;
60+
}
61+
62+
.sidebar {
63+
width: var(--sidebar-width);
64+
transform: translateX(0);
65+
position: relative;
66+
height: auto;
67+
}
68+
69+
.main-content {
70+
width: calc(100% - var(--sidebar-width));
71+
padding: 20px;
72+
margin-top: 0;
73+
}
3574
}
75+
76+
/* Navigation Controls */
3677
#navigation {
3778
display: flex;
38-
align-items: center;
3979
gap: 10px;
4080
margin-bottom: 20px;
81+
flex-wrap: wrap;
4182
}
4283

4384
#chapter-numbers {
4485
display: flex;
4586
gap: 5px;
4687
overflow-x: auto;
47-
padding: 5px 0;
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;
4899
}
49100

50101
.chapter-btn {
51-
padding: 8px 12px;
52-
cursor: pointer;
102+
padding: 10px 15px;
103+
min-width: 44px;
104+
text-align: center;
105+
background: white;
53106
border: 1px solid #ddd;
54-
background: #f8f8f8;
55107
border-radius: 4px;
108+
cursor: pointer;
109+
transition: all 0.2s;
56110
}
57111

58112
.chapter-btn.active {
59-
background: #4CAF50;
113+
background: var(--accent-color);
60114
color: white;
61-
border-color: #45a049;
115+
border-color: var(--accent-color);
62116
}
63117

64-
#prevChapter, #nextChapter {
65-
padding: 8px 16px;
66-
font-size: 1.2em;
118+
/* Book List */
119+
#book-list button {
120+
display: block;
121+
width: 100%;
122+
padding: 15px;
123+
margin: 8px 0;
124+
background: white;
125+
border: 1px solid #eee;
126+
border-radius: 4px;
127+
text-align: left;
128+
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;
140+
}
141+
142+
#verses p {
143+
margin: 15px 0;
144+
padding: 10px;
145+
background: white;
146+
border-radius: 4px;
147+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
67148
}
149+
150+
/* Mobile Sidebar Activation */
151+
.sidebar.active {
152+
transform: translateX(0);
153+
}

0 commit comments

Comments
 (0)