Skip to content

Commit 4ebed07

Browse files
jedisct1jedisct1
committed
Implement Design Refinements from TODO list
1 parent 372c310 commit 4ebed07

File tree

4 files changed

+310
-5
lines changed

4 files changed

+310
-5
lines changed

‎www/TODO.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@ This document outlines planned improvements and future tasks for the IPCrypt web
3939

4040
### Design Refinements
4141

42-
- [ ] Improve card hover effects for better interactivity
43-
- [ ] Add subtle animations for page transitions
44-
- [ ] Create custom icons for features and benefits
45-
- [ ] Enhance the color scheme with more accent colors
46-
- [ ] Improve typography with better font pairings
42+
- [x] Improve card hover effects for better interactivity
43+
- [x] Add subtle animations for page transitions
44+
- [x] Create custom icons for features and benefits
45+
- [x] Enhance the color scheme with more accent colors
46+
- [x] Improve typography with better font pairings
4747

4848
### Technical Improvements
4949

‎www/_layouts/default.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@
3838
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/variables.css">
3939
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
4040
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/syntax.css">
41+
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/design-refinements.css">
4142
<!-- JavaScript -->
4243
<script defer src="{{ site.baseurl }}/assets/js/main.js"></script>
4344
{% if jekyll.environment == 'production' and site.google_analytics %}

‎www/assets/css/design-refinements.css‎

Lines changed: 281 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,281 @@
1+
/* Design Refinements for IPCrypt Website */
2+
3+
/* 1. Improved Card Hover Effects */
4+
.card {
5+
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
6+
position: relative;
7+
overflow: hidden;
8+
border-radius: 0.5rem;
9+
border: 1px solid var(--color-border);
10+
background-color: white;
11+
padding: 1.5rem;
12+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
13+
}
14+
15+
.card::before {
16+
content: '';
17+
position: absolute;
18+
top: 0;
19+
left: 0;
20+
width: 100%;
21+
height: 4px;
22+
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
23+
transform: scaleX(0);
24+
transform-origin: left;
25+
transition: transform 0.3s ease;
26+
}
27+
28+
.card:hover {
29+
transform: translateY(-5px);
30+
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
31+
border-color: var(--color-primary-light);
32+
}
33+
34+
.card:hover::before {
35+
transform: scaleX(1);
36+
}
37+
38+
/* Feature Card Enhancements */
39+
.feature-card {
40+
transition: transform 0.3s ease, box-shadow 0.3s ease;
41+
border-radius: 0.5rem;
42+
border: 1px solid var(--color-border);
43+
background-color: white;
44+
padding: 1.5rem;
45+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
46+
position: relative;
47+
overflow: hidden;
48+
}
49+
50+
.feature-card::before {
51+
content: '';
52+
position: absolute;
53+
top: 0;
54+
left: 0;
55+
width: 4px;
56+
height: 100%;
57+
background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-accent) 100%);
58+
transform: scaleY(0);
59+
transform-origin: top;
60+
transition: transform 0.3s ease;
61+
}
62+
63+
.feature-card:hover {
64+
transform: translateY(-5px);
65+
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
66+
}
67+
68+
.feature-card:hover::before {
69+
transform: scaleY(1);
70+
}
71+
72+
.feature-card h3 {
73+
margin-top: 0;
74+
color: var(--color-primary);
75+
transition: color 0.3s ease;
76+
}
77+
78+
.feature-card:hover h3 {
79+
color: var(--color-primary-dark);
80+
}
81+
82+
/* 2. Subtle Page Transitions */
83+
.page-transition {
84+
animation: fadeIn 0.5s ease-in-out;
85+
}
86+
87+
@keyframes fadeIn {
88+
from {
89+
opacity: 0;
90+
transform: translateY(10px);
91+
}
92+
93+
to {
94+
opacity: 1;
95+
transform: translateY(0);
96+
}
97+
}
98+
99+
/* Apply page transition to main content */
100+
main {
101+
animation: fadeIn 0.5s ease-in-out;
102+
}
103+
104+
/* Section transitions */
105+
section {
106+
opacity: 0;
107+
transform: translateY(20px);
108+
transition: opacity 0.6s ease, transform 0.6s ease;
109+
}
110+
111+
section.visible {
112+
opacity: 1;
113+
transform: translateY(0);
114+
}
115+
116+
/* 3. Enhanced Color Scheme with Accent Colors */
117+
:root {
118+
/* Original colors */
119+
--color-primary: #2563eb;
120+
--color-primary-dark: #1d4ed8;
121+
--color-secondary: #10b981;
122+
--color-secondary-dark: #059669;
123+
124+
/* New accent colors */
125+
--color-primary-light: #60a5fa;
126+
--color-secondary-light: #34d399;
127+
--color-accent: #8b5cf6;
128+
--color-accent-dark: #7c3aed;
129+
--color-accent-light: #a78bfa;
130+
--color-warning: #f59e0b;
131+
--color-warning-light: #fbbf24;
132+
--color-info: #0ea5e9;
133+
--color-info-light: #38bdf8;
134+
135+
/* Improved text colors */
136+
--color-text: #1e293b;
137+
--color-text-light: #64748b;
138+
--color-text-lighter: #94a3b8;
139+
--color-background: #f8fafc;
140+
--color-background-alt: #f1f5f9;
141+
--color-border: #e2e8f0;
142+
--color-code-bg: #f1f5f9;
143+
}
144+
145+
/* Apply accent colors to various elements */
146+
.text-accent {
147+
color: var(--color-accent);
148+
}
149+
150+
.bg-accent {
151+
background-color: var(--color-accent);
152+
}
153+
154+
.border-accent {
155+
border-color: var(--color-accent);
156+
}
157+
158+
.btn-accent {
159+
background-color: var(--color-accent);
160+
color: white;
161+
border: 1px solid var(--color-accent-dark);
162+
}
163+
164+
.btn-accent:hover {
165+
background-color: var(--color-accent-dark);
166+
}
167+
168+
/* 4. Improved Typography with Better Font Pairings */
169+
:root {
170+
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
171+
--font-heading: 'Montserrat', var(--font-sans);
172+
--font-mono: 'JetBrains Mono', "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
173+
}
174+
175+
/* Apply improved typography */
176+
body {
177+
font-family: var(--font-sans);
178+
line-height: 1.7;
179+
}
180+
181+
h1,
182+
h2,
183+
h3,
184+
h4,
185+
h5,
186+
h6 {
187+
font-family: var(--font-heading);
188+
line-height: 1.3;
189+
letter-spacing: -0.025em;
190+
}
191+
192+
h1 {
193+
font-weight: 700;
194+
}
195+
196+
h2 {
197+
font-weight: 700;
198+
}
199+
200+
h3 {
201+
font-weight: 600;
202+
}
203+
204+
code,
205+
pre {
206+
font-family: var(--font-mono);
207+
font-size: 0.9em;
208+
}
209+
210+
/* Font imports */
211+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700&family=JetBrains+Mono:wght@400;500&display=swap');
212+
213+
/* 5. Additional Refinements */
214+
215+
/* Improved button hover effects */
216+
.btn {
217+
transition: all 0.3s ease;
218+
position: relative;
219+
overflow: hidden;
220+
}
221+
222+
.btn::after {
223+
content: '';
224+
position: absolute;
225+
top: 50%;
226+
left: 50%;
227+
width: 5px;
228+
height: 5px;
229+
background: rgba(255, 255, 255, 0.5);
230+
opacity: 0;
231+
border-radius: 100%;
232+
transform: scale(1, 1) translate(-50%);
233+
transform-origin: 50% 50%;
234+
}
235+
236+
.btn:hover::after {
237+
animation: ripple 1s ease-out;
238+
}
239+
240+
@keyframes ripple {
241+
0% {
242+
transform: scale(0, 0);
243+
opacity: 0.5;
244+
}
245+
246+
100% {
247+
transform: scale(20, 20);
248+
opacity: 0;
249+
}
250+
}
251+
252+
/* Improved focus styles for accessibility */
253+
a:focus,
254+
button:focus,
255+
input:focus,
256+
select:focus,
257+
textarea:focus {
258+
outline: 2px solid var(--color-primary);
259+
outline-offset: 2px;
260+
}
261+
262+
/* Add this script to the end of your main.js file to enable section animations */
263+
/*
264+
document.addEventListener('DOMContentLoaded', function() {
265+
const sections = document.querySelectorAll('section');
266+
267+
const observer = new IntersectionObserver((entries) => {
268+
entries.forEach(entry => {
269+
if (entry.isIntersecting) {
270+
entry.target.classList.add('visible');
271+
}
272+
});
273+
}, {
274+
threshold: 0.1
275+
});
276+
277+
sections.forEach(section => {
278+
observer.observe(section);
279+
});
280+
});
281+
*/

‎www/assets/js/main.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,27 @@ document.addEventListener('DOMContentLoaded', function () {
2121
}
2222
});
2323
});
24+
25+
// Section animations for page transitions
26+
const sections = document.querySelectorAll('section');
27+
28+
const observer = new IntersectionObserver((entries) => {
29+
entries.forEach(entry => {
30+
if (entry.isIntersecting) {
31+
entry.target.classList.add('visible');
32+
}
33+
});
34+
}, {
35+
threshold: 0.1
36+
});
37+
38+
sections.forEach(section => {
39+
observer.observe(section);
40+
});
41+
42+
// Add page transition class to main content
43+
const mainContent = document.querySelector('main');
44+
if (mainContent) {
45+
mainContent.classList.add('page-transition');
46+
}
2447
});

0 commit comments

Comments
 (0)