forked from codefrydev/codefrydev.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathabout.css
More file actions
124 lines (106 loc) · 2.9 KB
/
Copy pathabout.css
File metadata and controls
124 lines (106 loc) · 2.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
/* --- General & Body --- */
body {
background-color: var(--bg-primary);
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
color: var(--text-primary);
margin: 0;
}
main {
padding: 2rem;
}
/* --- Header --- */
header {
background-color: var(--bg-tertiary);
padding: 1.5rem;
text-align: center;
box-shadow: 0 4px 10px var(--shadow-card);
border-bottom: 1px solid var(--border-medium);
margin-bottom: 2rem;
}
header h1 {
font-weight: 500;
color: var(--text-primary);
cursor: pointer;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin: 0;
font-size: 1.5rem;
}
/* --- Cards Grid --- */
ol.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 2.5rem; /* Increased gap for more breathing room */
list-style: none;
padding: 0;
margin: 0;
counter-reset: cardCount; /* Ensure counter starts at 0 */
}
/* --- BOLD Card Styling --- */
li {
display: flex; /* Required for the <a> to fill the space */
}
.card {
background-color: var(--bg-card);
/* A thick top border using the accent color */
border-top: 6px solid var(--accent-color);
/* A subtle border on all other sides for definition */
border-left: 1px solid var(--border-medium);
border-right: 1px solid var(--border-medium);
border-bottom: 1px solid var(--border-medium);
border-radius: 8px; /* Slightly larger radius */
/* A stronger, more defined shadow */
box-shadow: 0 10px 20px var(--shadow-card), 0 3px 6px var(--shadow-card);
padding: 2rem;
position: relative;
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--text-primary); /* Default text color for the card */
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover,
.card:focus-visible {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 25px var(--shadow-card-hover), 0 5px 10px var(--shadow-card-hover);
}
/* Card Numbering - Placed INSIDE the card */
.card::before {
counter-increment: cardCount;
content: "0" counter(cardCount); /* Pad with a zero */
font-weight: 700;
font-size: 2rem;
color: var(--text-quaternary); /* Make number subtle, part of the background */
position: absolute;
top: 1rem;
right: 1.5rem;
line-height: 1;
z-index: 0;
}
/* --- Card Content --- */
.card > h2,
.card > p,
.card > i {
position: relative; /* Ensure content sits on top of the number */
z-index: 1;
}
.card > h2 {
color: var(--accent-color);
font-weight: 700; /* Bold title */
font-size: 1.5rem;
margin: 0 0 0.5rem 0;
}
.card > p {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.5rem;
flex-grow: 1; /* Pushes the icon to the bottom */
}
.card > i {
color: var(--accent-color);
font-size: 2.5rem;
align-self: flex-end; /* Pushes icon to the right */
margin-top: 1rem;
}