Skip to content

Commit 0e74f78

Browse files
PrashantUnityPrashantUnity
committed
Experimenting with About Section
1 parent 2f4dbac commit 0e74f78

File tree

2 files changed

+111
-68
lines changed

2 files changed

+111
-68
lines changed

‎layouts/about/about.html‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,25 @@
33
<head>
44
{{ partial "header.html" . }}
55
<link rel="stylesheet" href="/css/about.css">
6+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
67
</head>
78
<body style="background-color: #e5e9f4;" >
89
<header>
910
<h1 onclick="window.location.href='/'">
10-
<img style="align-items: center;" src="/images/IconCodefrydev.svg" alt="Codefrydev Logo" height="96px">
11-
<br/>
12-
{{ .Title }}
11+
<img src="/images/IconCodefrydev.svg" alt="Codefrydev Logo" height="80px">
12+
<span>{{ .Title }}</span>
1313
</h1>
1414
</header>
1515
<main>
1616
<section>
1717
<ol class="cards">
1818
{{ range .Site.Data.about.cards }}
19-
<li class="card" style="--accent-color: {{ .accent_color }}" onclick="window.location.href='{{ .url }}'">
20-
<h2>{{ .title }}</h2>
21-
<p>{{ .content }}</p>
22-
<i class="{{ .icon }}"></i>
19+
<li>
20+
<a class="card" href="{{ .url }}" style="--accent-color: {{ .accent_color }}">
21+
<h2>{{ .title }}</h2>
22+
<p>{{ .content }}</p>
23+
<i class="{{ .icon }}"></i>
24+
</a>
2325
</li>
2426
{{ end }}
2527
</ol>

‎static/css/about.css‎

Lines changed: 102 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,124 @@
1-
ol.cards {
2-
display: flex;
3-
flex-wrap: wrap; /* Allows items to wrap to the next line */
4-
gap: 2rem;
5-
padding: 2rem;
1+
/* --- General & Body --- */
2+
body {
3+
background-color: #e5e9f4;
4+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
5+
color: #333;
66
margin: 0;
7-
list-style: none;
8-
justify-content: center; /* Centers items horizontally */
97
}
108

11-
ol.cards > .card {
12-
flex: 1 1 calc(33.333% - 2rem); /* Adjust width, considering gap */
13-
max-width: 300px; /* Ensures cards don't get too wide */
14-
min-width: 250px; /* Prevents them from getting too small */
15-
16-
color: hsl(0 0% 40%);
9+
main {
10+
padding: 2rem;
11+
}
12+
13+
/* --- Header --- */
14+
header {
1715
background-color: #ffffff;
16+
padding: 1.5rem;
1817
text-align: center;
19-
20-
padding: 2rem;
21-
border-radius: .5rem;
22-
box-shadow: .5rem .5rem 1rem hsl(0 0% 0% / .25);
23-
24-
position: relative;
25-
counter-increment: cardCount;
18+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
19+
border-bottom: 1px solid #d1d9e6;
20+
margin-bottom: 2rem;
2621
}
2722

28-
/* Numbering */
29-
ol.cards > .card::before {
30-
color: hsl(0 0% 100%);
31-
padding: 0.5rem 1rem;
32-
background-color: var(--accent-color);
33-
border-radius: .5rem .5rem 0 0;
34-
box-shadow: 0.125rem -0.125rem 0.25rem hsl(0 0% 0% / .25);
35-
36-
position: absolute;
37-
top: 100%;
38-
left: 50%;
39-
transform: translate(-50%, -100%);
40-
white-space: nowrap;
23+
header h1 {
24+
font-weight: 500;
25+
color: #2c3e50;
26+
cursor: pointer;
27+
display: inline-flex;
28+
flex-direction: column;
29+
align-items: center;
30+
gap: 0.75rem;
31+
margin: 0;
32+
font-size: 1.5rem;
4133
}
4234

43-
ol.cards > .card > i {
44-
color: var(--accent-color);
45-
font-size: 2rem;
35+
/* --- Cards Grid --- */
36+
ol.cards {
37+
display: grid;
38+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
39+
gap: 2.5rem; /* Increased gap for more breathing room */
40+
list-style: none;
41+
padding: 0;
42+
margin: 0;
43+
counter-reset: cardCount; /* Ensure counter starts at 0 */
4644
}
4745

48-
ol.cards > .card > h2 {
49-
font-weight: 400;
50-
color: var(--accent-color);
51-
margin-top: 0;
46+
/* --- BOLD Card Styling --- */
47+
li {
48+
display: flex; /* Required for the <a> to fill the space */
5249
}
5350

54-
/* Header styling */
55-
header {
51+
.card {
52+
background-color: #ffffff;
53+
/* A thick top border using the accent color */
54+
border-top: 6px solid var(--accent-color);
55+
/* A subtle border on all other sides for definition */
56+
border-left: 1px solid #d1d9e6;
57+
border-right: 1px solid #d1d9e6;
58+
border-bottom: 1px solid #d1d9e6;
59+
60+
border-radius: 8px; /* Slightly larger radius */
61+
/* A stronger, more defined shadow */
62+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07), 0 3px 6px rgba(0, 0, 0, 0.05);
63+
64+
padding: 2rem;
65+
position: relative;
66+
5667
display: flex;
57-
justify-content: center;
58-
align-items: center;
59-
width: 100%;
60-
padding: 1rem;
68+
flex-direction: column;
69+
text-decoration: none;
70+
color: #444; /* Default text color for the card */
71+
72+
transition: transform 0.3s ease, box-shadow 0.3s ease;
6173
}
6274

63-
header h1 {
64-
font-weight: 300;
65-
text-align: center;
75+
.card:hover,
76+
.card:focus-visible {
77+
transform: translateY(-8px) scale(1.02);
78+
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.12), 0 5px 10px rgba(0, 0, 0, 0.08);
6679
}
6780

68-
/* Responsive adjustments */
69-
@media (max-width: 768px) {
70-
ol.cards {
71-
justify-content: center;
72-
}
81+
/* Card Numbering - Placed INSIDE the card */
82+
.card::before {
83+
counter-increment: cardCount;
84+
content: "0" counter(cardCount); /* Pad with a zero */
85+
font-weight: 700;
86+
font-size: 2rem;
87+
88+
color: #e0e0e0; /* Make number subtle, part of the background */
7389

74-
ol.cards > .card {
75-
flex: 1 1 calc(50% - 2rem); /* Two items per row */
76-
}
90+
position: absolute;
91+
top: 1rem;
92+
right: 1.5rem;
93+
line-height: 1;
94+
z-index: 0;
7795
}
7896

79-
@media (max-width: 480px) {
80-
ol.cards > .card {
81-
flex: 1 1 100%; /* One item per row */
82-
}
97+
/* --- Card Content --- */
98+
.card > h2,
99+
.card > p,
100+
.card > i {
101+
position: relative; /* Ensure content sits on top of the number */
102+
z-index: 1;
83103
}
104+
105+
.card > h2 {
106+
color: var(--accent-color);
107+
font-weight: 700; /* Bold title */
108+
font-size: 1.5rem;
109+
margin: 0 0 0.5rem 0;
110+
}
111+
112+
.card > p {
113+
font-size: 1rem;
114+
line-height: 1.6;
115+
margin-bottom: 1.5rem;
116+
flex-grow: 1; /* Pushes the icon to the bottom */
117+
}
118+
119+
.card > i {
120+
color: var(--accent-color);
121+
font-size: 2.5rem;
122+
align-self: flex-end; /* Pushes icon to the right */
123+
margin-top: 1rem;
124+
}

0 commit comments

Comments
 (0)