Skip to content

Commit fb46872

Browse files
Code-JLCode-JL
committed
extracted common styles to universal.css.
1 parent 4120f23 commit fb46872

File tree

7 files changed

+64
-303
lines changed

7 files changed

+64
-303
lines changed

‎assets/about.css‎

Lines changed: 0 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -7,42 +7,10 @@
77

88
/* Typography */
99
li, p {
10-
font-size: 18px;
1110
line-height: 1.6;
1211
margin-bottom: 20px;
1312
}
1413

15-
h1 {
16-
font-size: 85px;
17-
}
18-
19-
h2 {
20-
font-size: 55px;
21-
margin-bottom: 25px;
22-
}
23-
24-
h3 {
25-
font-size: 40px;
26-
}
27-
28-
/* Contact Section Styling */
29-
section#contact p a img {
30-
width: 50px;
31-
height: 50px;
32-
margin-right: 8px;
33-
vertical-align: middle;
34-
}
35-
36-
section#contact p a {
37-
font-family: 'rampage-monoline', sans-serif;
38-
font-size: 30px;
39-
color: #e7df69;
40-
}
41-
42-
section#contact p a:visited {
43-
color: #dfa843;
44-
}
45-
4614
/* Title Section */
4715
.title {
4816
text-align: center;
@@ -55,12 +23,4 @@ section#contact p a:visited {
5523
width: 90%;
5624
margin: 20px auto;
5725
}
58-
59-
h1 {
60-
font-size: 60px;
61-
}
62-
63-
h2 {
64-
font-size: 40px;
65-
}
6626
}

‎assets/education.css‎

Lines changed: 2 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,5 @@
1-
/* Contact Section Styling */
2-
section#contact p a img {
3-
width: 50px;
4-
height: 50px;
5-
margin-right: 8px;
6-
vertical-align: middle; /* Aligns icons with text */
7-
}
8-
9-
section#contact p a {
10-
font-family: 'rampage-monoline', sans-serif;
11-
font-size: 30px;
12-
color: #e7df69; /* Bright yellow text */
13-
}
14-
15-
section#contact p a:visited, li a {
16-
color: #dfa843; /* Alternate color for visited links */
17-
}
18-
191
section {
20-
width: 50%;
2+
width: 50%;
213
}
224

235
/* School Header Styling */
@@ -36,22 +18,5 @@ section {
3618

3719
/* List and Link Styling */
3820
li a {
39-
color: #e7df69; /* Bright yellow text for links */
40-
}
41-
42-
li, p {
43-
font-size: 18px; /* Standard font size */
44-
}
45-
46-
/* Headings */
47-
h1 {
48-
font-size: 85px; /* Large heading */
49-
}
50-
51-
h2 {
52-
font-size: 55px; /* Medium heading */
53-
}
54-
55-
h3 {
56-
font-size: 40px; /* Small heading */
21+
color: #e7df69;
5722
}

‎assets/home.css‎

Lines changed: 0 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22
:root {
33
--gallery-bg: rgba(255, 255, 255, 0.1);
44
--border-color: #112c42;
5-
--highlight-color: #e7df69;
6-
--visited-link: #dfa843;
75
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
86
}
97

@@ -62,44 +60,12 @@
6260
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
6361
}
6462

65-
/* Enhanced Contact Section */
66-
#contact p a {
67-
display: inline-flex;
68-
align-items: center;
69-
font-family: 'rampage-monoline', sans-serif;
70-
font-size: 30px;
71-
color: var(--highlight-color);
72-
transition: transform var(--transition-smooth);
73-
}
74-
75-
#contact p a:hover {
76-
transform: translateX(10px);
77-
}
78-
79-
#contact p a img {
80-
width: 50px;
81-
height: 50px;
82-
margin-right: 12px;
83-
transition: transform var(--transition-smooth);
84-
}
85-
86-
#contact p a:hover img {
87-
transform: rotate(5deg);
88-
}
89-
90-
/* Typography Refinements */
91-
h1 { font-size: clamp(3rem, 8vw, 85px); }
92-
h2 { font-size: clamp(2rem, 6vw, 55px); }
93-
h3 { font-size: clamp(1.5rem, 4vw, 40px); }
94-
li, p { font-size: clamp(16px, 2vw, 18px); }
95-
9663
/* Animations */
9764
@keyframes fadeIn {
9865
from { opacity: 0; transform: translateY(20px); }
9966
to { opacity: 1; transform: translateY(0); }
10067
}
10168

102-
/* Responsive Design */
10369
@media (min-width: 900px) {
10470
.gallery {
10571
grid-template-columns: repeat(3, 1fr);
@@ -110,8 +76,4 @@ li, p { font-size: clamp(16px, 2vw, 18px); }
11076
#home {
11177
width: 80%;
11278
}
113-
114-
#contact p a {
115-
font-size: 24px;
116-
}
11779
}

‎assets/load/universal.css‎

Lines changed: 62 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111
--nav-hover: #133653;
1212
--section-bg: rgba(65, 65, 65, 0.95);
1313
--transition-speed: 0.3s;
14+
--visited-link: #dfa843;
15+
16+
--highlight-color: #e7df69;
17+
--visited-color: #dfa843;
18+
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
1419
}
1520

1621
/* Fonts */
@@ -32,8 +37,37 @@
3237
font-style: normal;
3338
}
3439

35-
title {
40+
/* General Styling */
41+
body {
42+
font-family: 'roboto', sans-serif;
43+
margin: 0;
44+
padding: 0;
45+
line-height: 1.6;
46+
color: var(--text-dark);
47+
background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-middle), var(--gradient-end));
48+
}
49+
50+
/* Typography */
51+
h1, h2, h3 {
3652
font-family: 'rampage-monoline', sans-serif;
53+
color: var(--text-light);
54+
text-align: center;
55+
}
56+
57+
h1 {
58+
font-size: 85px;
59+
}
60+
61+
h2 {
62+
font-size: 55px;
63+
}
64+
65+
h3 {
66+
font-size: 40px;
67+
}
68+
69+
li, p {
70+
font-size: 18px;
3771
}
3872

3973
/* Header */
@@ -49,13 +83,6 @@ header {
4983
transition: all var(--transition-speed) ease;
5084
}
5185

52-
header nav ul li a img {
53-
width: 30px;
54-
height: 30px;
55-
margin-right: 4px;
56-
vertical-align: middle;
57-
}
58-
5986
nav ul {
6087
list-style: none;
6188
padding: 0;
@@ -86,20 +113,11 @@ nav ul li a:hover {
86113
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
87114
}
88115

89-
/* General Styling */
90-
body {
91-
font-family: 'roboto', sans-serif;
92-
margin: 0;
93-
padding: 0;
94-
line-height: 1.6;
95-
color: var(--text-dark);
96-
background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-middle), var(--gradient-end));
97-
}
98-
99-
h1, h2, h3 {
100-
font-family: 'rampage-monoline', sans-serif;
101-
color: var(--text-light);
102-
text-align: center;
116+
header nav ul li a img {
117+
width: 30px;
118+
height: 30px;
119+
margin-right: 4px;
120+
vertical-align: middle;
103121
}
104122

105123
/* Section Styling */
@@ -120,11 +138,28 @@ section:hover {
120138
transform: translateX(10px);
121139
}
122140

123-
/* Section Sizing */
124141
section.title {
125142
width: 30%;
126143
}
127144

145+
/* Contact Section Styling */
146+
section#contact p a img {
147+
width: 50px;
148+
height: 50px;
149+
margin-right: 8px;
150+
vertical-align: middle;
151+
}
152+
153+
section#contact p a {
154+
font-family: 'rampage-monoline', sans-serif;
155+
font-size: 30px;
156+
color: var(--accent-color);
157+
}
158+
159+
section#contact p a:visited {
160+
color: var(--visited-link);
161+
}
162+
128163
/* Buttons and Links */
129164
.button {
130165
display: inline-block;
@@ -186,4 +221,8 @@ canvas {
186221
nav ul li {
187222
margin: 5px;
188223
}
224+
225+
#contact p a {
226+
font-size: 24px;
227+
}
189228
}

‎assets/projects.css‎

Lines changed: 0 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
:root {
22
--image-border: rgba(255, 255, 255, 0.1);
3-
--highlight-color: #e7df69;
4-
--visited-link: #dfa843;
53
--transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
64
}
75

@@ -34,29 +32,6 @@
3432
padding: 20px 0;
3533
}
3634

37-
/* Typography Refinements */
38-
h1 {
39-
font-size: clamp(3rem, 8vw, 85px);
40-
margin-bottom: 1rem;
41-
}
42-
43-
h2 {
44-
font-size: clamp(2rem, 6vw, 55px);
45-
background: linear-gradient(135deg, var(--highlight-color), #fff);
46-
background-clip: text;
47-
-webkit-background-clip: text;
48-
-webkit-text-fill-color: transparent;
49-
}
50-
51-
h3 {
52-
font-size: clamp(1.5rem, 4vw, 40px);
53-
}
54-
55-
li, p {
56-
font-size: clamp(16px, 2vw, 18px);
57-
line-height: 1.6;
58-
}
59-
6035
/* Project Features List */
6136
.project ul {
6237
list-style: none;
@@ -76,50 +51,6 @@ li, p {
7651
color: var(--highlight-color);
7752
}
7853

79-
/* Enhanced Contact Section */
80-
#contact p a {
81-
display: inline-flex;
82-
align-items: center;
83-
font-family: 'rampage-monoline', sans-serif;
84-
font-size: 30px;
85-
color: var(--highlight-color);
86-
transition: transform var(--transition-smooth);
87-
}
88-
89-
#contact p a:hover {
90-
transform: translateX(10px);
91-
}
92-
93-
#contact p a img {
94-
width: 50px;
95-
height: 50px;
96-
margin-right: 12px;
97-
transition: transform var(--transition-smooth);
98-
}
99-
100-
#contact p a:hover img {
101-
transform: rotate(5deg);
102-
}
103-
104-
#contact p a:visited {
105-
color: var(--visited-link);
106-
}
107-
108-
/* Responsive Design */
109-
@media (max-width: 768px) {
110-
.project img {
111-
width: 90%;
112-
}
113-
114-
#contact p a {
115-
font-size: 24px;
116-
}
117-
118-
.project ul li {
119-
padding-left: 1.2em;
120-
}
121-
}
122-
12354
/* Animation for Project Sections */
12455
.project {
12556
animation: slideIn 0.6s ease-out;

0 commit comments

Comments
 (0)