Skip to content

Commit 4120f23

Browse files
Code-JLCode-JL
committed
extract common styles to projectsUniversal.css and fix header links
1 parent 16aaa26 commit 4120f23

File tree

13 files changed

+138
-928
lines changed

13 files changed

+138
-928
lines changed

‎projects/ai_page_summary/about.css‎

Lines changed: 5 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,104 +1,9 @@
11
:root {
2-
--primary-blue: #1b4e7e;
3-
--highlight-yellow: #e7df69;
4-
--visited-orange: #dfa843;
5-
--text-light: #eef6fc;
6-
--code-bg: #2a2a2a;
72
--gallery-bg: rgba(255, 255, 255, 0.05);
83
--shadow: rgba(0, 0, 0, 0.2);
94
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
105
}
116

12-
/* Project Styling */
13-
.project img {
14-
width: 70%;
15-
border-radius: 8px;
16-
margin-bottom: 15px;
17-
transition: transform var(--transition-smooth);
18-
}
19-
20-
.project img:hover {
21-
transform: scale(1.02);
22-
}
23-
24-
/* Technology Badges */
25-
.tech-grid {
26-
display: flex;
27-
flex-wrap: wrap;
28-
gap: 12px;
29-
justify-content: center;
30-
margin: 20px 0;
31-
}
32-
33-
.tech-badge {
34-
background: var(--primary-blue);
35-
color: var(--text-light);
36-
padding: 10px 20px;
37-
border-radius: 20px;
38-
font-size: 16px;
39-
border: 2px solid var(--highlight-yellow);
40-
transition: transform var(--transition-smooth);
41-
}
42-
43-
.tech-badge:hover {
44-
transform: translateY(-2px);
45-
}
46-
47-
/* Code Blocks */
48-
pre {
49-
background: var(--code-bg);
50-
padding: 20px;
51-
border-radius: 8px;
52-
overflow-x: auto;
53-
border-left: 3px solid var(--highlight-yellow);
54-
margin: 20px 0;
55-
}
56-
57-
code {
58-
color: var(--highlight-yellow);
59-
font-family: 'Consolas', monospace;
60-
}
61-
62-
/* Typography */
63-
li, p { font-size: clamp(16px, 2vw, 18px); }
64-
h1 { font-size: clamp(3rem, 8vw, 85px); }
65-
h2 { font-size: clamp(2rem, 6vw, 55px); }
66-
h3 {
67-
font-size: clamp(1.5rem, 4vw, 40px);
68-
text-align: left;
69-
}
70-
71-
/* Contact Section */
72-
section#contact p a {
73-
display: inline-flex;
74-
align-items: center;
75-
font-family: 'rampage-monoline', sans-serif;
76-
font-size: 30px;
77-
color: var(--highlight-yellow);
78-
transition: transform var(--transition-smooth);
79-
}
80-
81-
section#contact p a:hover {
82-
transform: translateX(10px);
83-
}
84-
85-
section#contact p a img {
86-
width: 50px;
87-
height: 50px;
88-
margin-right: 12px;
89-
vertical-align: middle;
90-
transition: transform var(--transition-smooth);
91-
}
92-
93-
section#contact p a:hover img {
94-
transform: rotate(5deg);
95-
}
96-
97-
section#contact p a:visited {
98-
color: var(--visited-orange);
99-
}
100-
101-
/* Gallery Styling */
1027
.project-gallery {
1038
width: 80%;
1049
margin: 2rem auto;
@@ -108,31 +13,6 @@ section#contact p a:visited {
10813
backdrop-filter: blur(8px);
10914
}
11015

111-
112-
.gallery {
113-
display: grid;
114-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
115-
gap: 2rem;
116-
margin-top: 1.5rem;
117-
}
118-
119-
.gallery-item {
120-
position: relative;
121-
margin: 0;
122-
transition: transform var(--transition-smooth);
123-
}
124-
125-
.gallery-item:hover {
126-
transform: scale(1.03);
127-
}
128-
129-
.gallery-image {
130-
width: 100%;
131-
height: auto;
132-
border-radius: 8px;
133-
box-shadow: 0 4px 12px var(--shadow);
134-
}
135-
13616
figcaption {
13717
margin-top: 1rem;
13818
text-align: center;
@@ -141,27 +21,6 @@ figcaption {
14121
opacity: 0.8;
14222
}
14323

144-
/* Responsive Design */
145-
@media (max-width: 768px) {
146-
.gallery {
147-
grid-template-columns: 1fr;
148-
}
149-
150-
.tech-grid {
151-
gap: 8px;
152-
}
153-
154-
.tech-badge {
155-
padding: 8px 16px;
156-
font-size: 14px;
157-
}
158-
}
159-
160-
/* Animation */
161-
.gallery-item, .tech-badge {
162-
animation: fadeIn 0.6s ease-out;
163-
}
164-
16524
@keyframes fadeIn {
16625
from {
16726
opacity: 0;
@@ -171,4 +30,8 @@ figcaption {
17130
opacity: 1;
17231
transform: translateY(0);
17332
}
174-
}
33+
}
34+
35+
.gallery-item, .tech-badge {
36+
animation: fadeIn 0.6s ease-out;
37+
}

‎projects/ai_page_summary/about.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Projects - AI Page Summary</title>
77
<link rel="stylesheet" href="../../assets/load/universal.css">
8+
<link rel="stylesheet" href="../projectsUniversal.css">
89
<link rel="stylesheet" href="about.css">
910
</head>
1011
<body>

‎projects/dna_sequence_analyzer/about.css‎

Lines changed: 0 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,162 +1,10 @@
1-
:root {
2-
--primary-blue: #1b4e7e;
3-
--highlight-yellow: #e7df69;
4-
--visited-orange: #dfa843;
5-
--text-light: #eef6fc;
6-
--code-bg: #2a2a2a;
7-
}
8-
9-
/* Project Styling - keeping your original structure with enhancements */
10-
.project img {
11-
width: 70%;
12-
border-radius: 5px;
13-
margin: 15px auto;
14-
display: block;
15-
transition: transform 0.3s ease;
16-
}
17-
18-
.project img:hover {
19-
transform: scale(1.02);
20-
}
21-
22-
/* Technology Badges - preserving your layout */
23-
.tech-grid {
24-
display: flex;
25-
flex-wrap: wrap;
26-
gap: 10px;
27-
justify-content: center;
28-
margin: 20px 0;
29-
}
30-
31-
.tech-badge {
32-
background: var(--primary-blue);
33-
color: var(--text-light);
34-
padding: 8px 16px;
35-
border-radius: 20px;
36-
font-size: 16px;
37-
border: 2px solid var(--highlight-yellow);
38-
transition: transform 0.3s ease;
39-
}
40-
41-
.tech-badge:hover {
42-
transform: translateY(-2px);
43-
}
44-
45-
/* Code Blocks - maintaining your styling */
46-
pre {
47-
background: var(--code-bg);
48-
padding: 15px;
49-
border-radius: 5px;
50-
overflow-x: auto;
51-
border-left: 3px solid var(--highlight-yellow);
52-
margin: 15px auto;
53-
width: 90%;
54-
}
55-
56-
code {
57-
color: var(--highlight-yellow);
58-
font-family: 'Consolas', monospace;
59-
}
60-
61-
/* Typography - keeping your sizes */
62-
li, p {
63-
font-size: 18px;
64-
}
65-
66-
h1 {
67-
font-size: 85px;
68-
}
69-
70-
h2 {
71-
font-size: 55px;
72-
}
73-
74-
h3 {
75-
font-size: 40px;
76-
text-align: left;
77-
}
78-
79-
/* Contact Section - preserving your styling */
80-
section#contact p a img {
81-
width: 50px;
82-
height: 50px;
83-
margin-right: 8px;
84-
vertical-align: middle;
85-
}
86-
87-
section#contact p a {
88-
font-family: 'rampage-monoline', sans-serif;
89-
font-size: 30px;
90-
color: var(--highlight-yellow);
91-
display: inline-flex;
92-
align-items: center;
93-
transition: transform 0.3s ease;
94-
}
95-
96-
section#contact p a:hover {
97-
transform: translateX(10px);
98-
}
99-
100-
section#contact p a:visited {
101-
color: var(--visited-orange);
102-
}
103-
104-
/* Project Gallery - keeping your structure */
105-
.project-gallery {
106-
margin: 2rem 0;
107-
padding: 2rem;
108-
background: rgba(255, 255, 255, 0.05);
109-
border-radius: 8px;
110-
}
111-
112-
.gallery {
113-
display: grid;
114-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
115-
gap: 2rem;
116-
margin-top: 1.5rem;
117-
}
118-
119-
.gallery-item {
120-
position: relative;
121-
margin: 0;
122-
transition: transform 0.3s ease;
123-
}
124-
125-
.gallery-item:hover {
126-
transform: scale(1.02);
127-
}
128-
129-
.gallery-image {
130-
width: 100%;
131-
height: auto;
132-
border-radius: 6px;
133-
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
134-
}
135-
136-
figcaption {
137-
margin-top: 1rem;
138-
text-align: center;
139-
font-size: 0.9rem;
140-
color: #ccc;
141-
}
142-
143-
/* Center content sections */
1441
.project, section#contact {
1452
width: 80%;
1463
margin: 2rem auto;
1474
}
1485

149-
/* Responsive adjustments */
1506
@media (max-width: 768px) {
151-
.gallery {
152-
grid-template-columns: 1fr;
153-
}
154-
1557
.project, section#contact {
1568
width: 90%;
1579
}
158-
159-
h1 { font-size: clamp(3rem, 8vw, 85px); }
160-
h2 { font-size: clamp(2rem, 6vw, 55px); }
161-
h3 { font-size: clamp(1.5rem, 4vw, 40px); }
16210
}

‎projects/dna_sequence_analyzer/about.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Projects - DNA Sequence Analyzer</title>
77
<link rel="stylesheet" href="../../assets/load/universal.css">
8+
<link rel="stylesheet" href="../projectsUniversal.css">
89
<link rel="stylesheet" href="about.css">
910
</head>
1011
<body>

0 commit comments

Comments
 (0)