Skip to content

Commit c222352

Browse files
ikelaiahikelaiah
committed
feat: Edits to styles
1 parent fa1ba94 commit c222352

File tree

3 files changed

+106
-31
lines changed

3 files changed

+106
-31
lines changed

‎layouts/_default/baseof.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
const newTheme = body.getAttribute('data-theme') === 'light' ? 'dark' : 'light';
3838
body.setAttribute('data-theme', newTheme);
3939
localStorage.setItem('theme', newTheme);
40+
// CSS variables automatically handle syntax highlighting theme switching!
4041
});
4142
}
4243
</script>

‎layouts/index.html‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@
22
<!-- Hero Section -->
33
<section class="hero">
44
<div class="container">
5-
<h1>Pascal - Readable, Reliable Programming</h1>
6-
<p>A structured programming language that emphasizes clarity, reliability, and educational value. Perfect for learning programming fundamentals and building robust applications.</p>
7-
<a href="{{ "/learn/" | relURL }}" class="hero-cta">Get Started</a>
5+
<h1>Pascal</h1>
6+
<p class="hero-subtitle">A language empowering everyone<br>to build readable and reliable software.</p>
7+
<div class="hero-actions">
8+
<a href="{{ "/learn/" | relURL }}" class="hero-cta primary">Get Started</a>
9+
<a href="{{ "/docs/" | relURL }}" class="hero-cta secondary">Documentation</a>
10+
</div>
11+
<p class="version-info">Latest: Free Pascal 3.2.2 • Lazarus 3.6</p>
812
</div>
913
</section>
1014

@@ -21,26 +25,22 @@ <h2 class="section-title">Clean, Readable Code</h2>
2125
</div>
2226
</section>
2327

24-
<!-- Features Section -->
25-
<section class="content-section" style="background-color: var(--bg-secondary);">
28+
<!-- Why Pascal Section -->
29+
<section class="why-pascal">
2630
<div class="container">
27-
<h2 class="section-title">Why Choose Pascal?</h2>
28-
<div class="cards">
29-
<div class="card">
30-
<h3>📖 Readable</h3>
31-
<p>Pascal's clear syntax and structured approach make code easy to read, understand, and maintain. Perfect for both beginners and experienced developers.</p>
31+
<h2 class="section-title">Why Pascal?</h2>
32+
<div class="pillars">
33+
<div class="pillar">
34+
<h3>Readability</h3>
35+
<p>Pascal's clean, English-like syntax makes code self-documenting. Strong structure and clear semantics eliminate guesswork, making maintenance a breeze for teams of any size.</p>
3236
</div>
33-
<div class="card">
34-
<h3>🔒 Reliable</h3>
35-
<p>Strong typing and compile-time checking help catch errors early, resulting in more robust and dependable software applications.</p>
36-
</div>
37-
<div class="card">
38-
<h3>🎓 Educational</h3>
39-
<p>Designed with education in mind, Pascal teaches fundamental programming concepts and good coding practices from the ground up.</p>
37+
<div class="pillar">
38+
<h3>Reliability</h3>
39+
<p>Pascal's strong type system and compile-time checks catch errors before they reach production. Memory safety and structured programming prevent entire classes of bugs.</p>
4040
</div>
41-
<div class="card">
42-
<h3>⚡ Cross-Platform</h3>
43-
<p>Modern Pascal implementations support multiple platforms, allowing you to write once and deploy everywhere with excellent performance.</p>
41+
<div class="pillar">
42+
<h3>Productivity</h3>
43+
<p>Pascal has excellent tooling, comprehensive libraries, and cross-platform support. Rapid development cycles with integrated debugging and visual designers boost developer efficiency.</p>
4444
</div>
4545
</div>
4646
</div>

‎static/css/main.css‎

Lines changed: 85 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -192,38 +192,74 @@ a:hover {
192192
}
193193

194194
.hero h1 {
195-
font-size: 3rem;
196-
margin-bottom: var(--spacing-lg);
195+
font-size: 4rem;
196+
font-weight: 800;
197+
margin-bottom: var(--spacing-md);
197198
color: var(--text-primary);
199+
letter-spacing: -0.02em;
198200
}
199201

200-
.hero p {
201-
font-size: 1.25rem;
202+
.hero-subtitle {
203+
font-size: 1.5rem;
202204
margin-bottom: var(--spacing-xl);
203205
color: var(--text-secondary);
204206
max-width: 600px;
205207
margin-left: auto;
206208
margin-right: auto;
209+
line-height: 1.4;
210+
}
211+
212+
.hero-actions {
213+
display: flex;
214+
gap: var(--spacing-md);
215+
justify-content: center;
216+
margin-bottom: var(--spacing-lg);
217+
flex-wrap: wrap;
218+
}
219+
220+
.version-info {
221+
font-size: 1rem;
222+
color: var(--text-muted);
223+
margin: 0;
207224
}
208225

209226
.hero-cta {
210227
display: inline-block;
211-
background-color: var(--accent-primary);
212-
color: white;
213228
padding: var(--spacing-md) var(--spacing-xl);
214229
border-radius: var(--border-radius);
215230
font-weight: 600;
216231
font-size: 1.1rem;
217232
transition: var(--transition);
233+
text-decoration: none;
234+
border: 2px solid transparent;
218235
}
219236

220-
.hero-cta:hover {
221-
background-color: var(--accent-hover);
237+
.hero-cta.primary {
238+
background-color: var(--accent-primary);
222239
color: white;
240+
}
241+
242+
.hero-cta.secondary {
243+
background-color: transparent;
244+
color: var(--accent-primary);
245+
border-color: var(--accent-primary);
246+
}
247+
248+
.hero-cta:hover {
223249
transform: translateY(-2px);
224250
box-shadow: 0 4px 12px var(--shadow);
225251
}
226252

253+
.hero-cta.primary:hover {
254+
background-color: var(--accent-hover);
255+
color: white;
256+
}
257+
258+
.hero-cta.secondary:hover {
259+
background-color: var(--accent-primary);
260+
color: white;
261+
}
262+
227263
/* Content sections */
228264
.content-section {
229265
padding: var(--spacing-3xl) 0;
@@ -234,6 +270,45 @@ a:hover {
234270
margin-bottom: var(--spacing-2xl);
235271
}
236272

273+
/* Why Pascal Section */
274+
.why-pascal {
275+
background-color: #2a9d8f;
276+
color: white;
277+
padding: var(--spacing-3xl) 0;
278+
}
279+
280+
.why-pascal .section-title {
281+
color: white;
282+
margin-bottom: var(--spacing-2xl);
283+
}
284+
285+
.pillars {
286+
display: grid;
287+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
288+
gap: var(--spacing-2xl);
289+
margin-top: var(--spacing-2xl);
290+
}
291+
292+
.pillar {
293+
text-align: left;
294+
}
295+
296+
.pillar h3 {
297+
font-size: 1.5rem;
298+
font-weight: 700;
299+
margin-bottom: var(--spacing-md);
300+
color: white;
301+
border-bottom: 3px solid rgba(255, 255, 255, 0.3);
302+
padding-bottom: var(--spacing-sm);
303+
display: inline-block;
304+
}
305+
306+
.pillar p {
307+
color: rgba(255, 255, 255, 0.9);
308+
line-height: 1.6;
309+
font-size: 1rem;
310+
}
311+
237312
/* Cards */
238313
.cards {
239314
display: grid;
@@ -274,7 +349,7 @@ pre {
274349
padding: var(--spacing-lg);
275350
overflow-x: auto;
276351
font-family: var(--font-mono);
277-
font-size: 0.9rem;
352+
font-size: 1rem;
278353
line-height: 1.4;
279354
margin: 0;
280355
}
@@ -284,7 +359,7 @@ code {
284359
background-color: var(--code-bg);
285360
padding: 0.2em 0.4em;
286361
border-radius: 4px;
287-
font-size: 0.9em;
362+
font-size: 1em;
288363
}
289364

290365
pre code {
@@ -331,7 +406,6 @@ pre code {
331406
color: var(--text-muted);
332407
}
333408

334-
335409
/* Responsive design */
336410
@media (max-width: 768px) {
337411
.container {

0 commit comments

Comments
 (0)