Skip to content

Commit c6903ae

Browse files
author
aryan
committed
range sub-pages for exercise page and polished qna-calc-wrapper
1 parent 87a295b commit c6903ae

14 files changed

Lines changed: 530 additions & 9 deletions

File tree

‎content/_index.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,4 +78,6 @@ width: normal
7878
link="about"
7979
>}}
8080
81-
{{< /hextra/feature-grid >}}
81+
{{< /hextra/feature-grid >}}
82+
83+
{{< home/home >}}

‎layouts/partials/home/book.html‎

Lines changed: 266 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,266 @@
1+
<div class="book-details-page">
2+
<header class="header">
3+
<span class="icon">&lt;</span> <span class="icon">&#x22EE;</span>
4+
</header>
5+
6+
<div class="book-main-info">
7+
<img
8+
src="images/code-1.jpg"
9+
alt="Scavengers Book Cover"
10+
class="main-book-cover"
11+
/>
12+
<h1>Scavengers</h1>
13+
<p class="author">Daren Simpson</p>
14+
</div>
15+
16+
<div class="book-stats">
17+
<div class="stat-item">
18+
<span class="stat-icon">⭐</span>
19+
<span class="stat-value">4.5</span>
20+
<span class="stat-label">Rating</span>
21+
</div>
22+
<div class="stat-item">
23+
<span class="stat-icon">📖</span>
24+
<span class="stat-value">193</span>
25+
<span class="stat-label">Pages</span>
26+
</div>
27+
<div class="stat-item">
28+
<span class="stat-icon">🇬🇧</span>
29+
<span class="stat-value">ENG</span>
30+
<span class="stat-label">Language</span>
31+
</div>
32+
</div>
33+
34+
<div class="chapter-card">
35+
<div class="chapter-info">
36+
<h3>Chapter 2 - New Hope</h3>
37+
<span class="chapter-percentage">75%</span>
38+
</div>
39+
<div class="progress-bar-container">
40+
<div class="progress-bar" style="width: 75%"></div>
41+
</div>
42+
<p class="current-page-info">Page 160 of 193</p>
43+
</div>
44+
45+
<div class="synopsis-section">
46+
<h2>Synopsis</h2>
47+
<p>
48+
Jack and Jill is the story of a boy and a girl who went up a hill
49+
together. They went to fetch a pail of water, but unfortunately. Their
50+
plan is disrupted when he came. Not only the main character but also other
51+
characters who have a crucial role in the story.
52+
</p>
53+
</div>
54+
55+
<button class="continue-reading-button">Continue Reading</button>
56+
</div>
57+
58+
<style>
59+
.book-details-page {
60+
background-color: #ffffff;
61+
border-radius: 15px;
62+
padding: 20px;
63+
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
64+
width: 100%;
65+
max-width: 375px; /* Typical mobile screen width */
66+
box-sizing: border-box;
67+
display: flex;
68+
flex-direction: column;
69+
align-items: center; /* Center content horizontally */
70+
}
71+
72+
.header {
73+
width: 100%;
74+
display: flex;
75+
justify-content: space-between;
76+
align-items: center;
77+
margin-bottom: 20px;
78+
}
79+
80+
.header .icon {
81+
font-size: 24px;
82+
color: #333;
83+
cursor: pointer;
84+
}
85+
86+
.book-main-info {
87+
text-align: center;
88+
margin-bottom: 25px;
89+
}
90+
91+
.main-book-cover {
92+
width: 180px;
93+
height: 270px;
94+
border-radius: 12px;
95+
object-fit: cover;
96+
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
97+
margin-bottom: 15px;
98+
}
99+
100+
.book-main-info h1 {
101+
font-size: 28px;
102+
font-weight: 700;
103+
color: #333;
104+
margin: 0 0 5px 0;
105+
}
106+
107+
.book-main-info .author {
108+
font-size: 16px;
109+
color: #666;
110+
margin: 0;
111+
}
112+
113+
.book-stats {
114+
display: flex;
115+
justify-content: space-around;
116+
width: 100%;
117+
margin-bottom: 30px;
118+
background-color: #f8f8f8; /* Slightly different background for the stats section */
119+
border-radius: 10px;
120+
padding: 15px 0;
121+
}
122+
123+
.stat-item {
124+
display: flex;
125+
flex-direction: column;
126+
align-items: center;
127+
font-size: 14px;
128+
color: #555;
129+
}
130+
131+
.stat-item .stat-icon {
132+
font-size: 24px; /* Adjust icon size */
133+
margin-bottom: 5px;
134+
}
135+
136+
.stat-item .stat-value {
137+
font-size: 18px;
138+
font-weight: 700;
139+
color: #333;
140+
margin-bottom: 3px;
141+
}
142+
143+
.stat-item .stat-label {
144+
font-size: 12px;
145+
color: #888;
146+
}
147+
148+
.chapter-card {
149+
width: calc(100% - 40px); /* Adjust for padding */
150+
background-color: #e0f7fa; /* Light blue background for the chapter card */
151+
border-radius: 15px;
152+
padding: 20px;
153+
margin-bottom: 30px;
154+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
155+
}
156+
157+
.chapter-card .chapter-info {
158+
display: flex;
159+
justify-content: space-between;
160+
align-items: center;
161+
margin-bottom: 10px;
162+
}
163+
164+
.chapter-card h3 {
165+
font-size: 18px;
166+
font-weight: 600;
167+
color: #333;
168+
margin: 0;
169+
}
170+
171+
.chapter-card .chapter-percentage {
172+
font-size: 16px;
173+
font-weight: 700;
174+
color: #007bff; /* Blue for percentage */
175+
}
176+
177+
.progress-bar-container {
178+
width: 100%;
179+
height: 8px;
180+
background-color: #cceeff; /* Lighter blue for progress bar background */
181+
border-radius: 4px;
182+
overflow: hidden;
183+
margin-bottom: 10px;
184+
}
185+
186+
.progress-bar {
187+
height: 100%;
188+
background-color: #007bff; /* Blue for actual progress */
189+
border-radius: 4px;
190+
}
191+
192+
.chapter-card .current-page-info {
193+
font-size: 14px;
194+
color: #666;
195+
text-align: right;
196+
margin: 0;
197+
}
198+
199+
.synopsis-section {
200+
width: 100%;
201+
margin-bottom: 30px;
202+
}
203+
204+
.synopsis-section h2 {
205+
font-size: 20px;
206+
font-weight: 700;
207+
color: #333;
208+
margin-bottom: 10px;
209+
}
210+
211+
.synopsis-section p {
212+
font-size: 15px;
213+
line-height: 1.6;
214+
color: #555;
215+
text-align: justify;
216+
}
217+
218+
.continue-reading-button {
219+
width: 100%;
220+
padding: 15px 20px;
221+
background-color: #007bff; /* Blue button */
222+
color: #fff;
223+
border: none;
224+
border-radius: 10px;
225+
font-size: 18px;
226+
font-weight: 600;
227+
cursor: pointer;
228+
transition: background-color 0.3s ease;
229+
}
230+
231+
.continue-reading-button:hover {
232+
background-color: #0056b3;
233+
}
234+
235+
/* Responsive adjustments */
236+
@media (max-width: 400px) {
237+
.book-details-page {
238+
padding: 15px;
239+
border-radius: 0; /* Remove border-radius on very small screens to go edge-to-edge */
240+
box-shadow: none;
241+
}
242+
243+
.book-main-info h1 {
244+
font-size: 24px;
245+
}
246+
247+
.main-book-cover {
248+
width: 150px;
249+
height: 225px;
250+
}
251+
252+
.book-stats {
253+
flex-wrap: wrap; /* Allow stats to wrap on smaller screens */
254+
gap: 10px;
255+
padding: 10px 0;
256+
}
257+
258+
.stat-item {
259+
flex: 1 1 30%; /* Allow items to take about a third width */
260+
}
261+
262+
.chapter-card {
263+
padding: 15px;
264+
}
265+
}
266+
</style>

0 commit comments

Comments
 (0)