2
2
--gradient-color-one : # 020024 ;
3
3
--gradient-color-two : # 27254d ;
4
4
--gradient-color-three : # 425162 ;
5
-
6
5
--text-color : # fefefe ;
7
6
--text-selection-color : # aeaeae ;
8
7
--text-selection-bg : # 383838 ;
9
-
10
8
--header-one-color : # d4f1ff ;
11
9
--header-two-color : # d6d8f5 ;
12
-
13
10
--container-bg : # 92b9bd1c ;
14
11
--border-color : # 606680 ;
15
12
--container-shadow : # 00000075 ;
16
-
17
13
--link-color : # 7f8c8d ;
18
14
--link-border : # 6066808e ;
19
15
--link-shadow : # 00000030 ;
20
16
--link-hover : # 6cb4e4 ;
21
17
--link-hover-bg : # 3d416386 ;
22
18
--link-selection : # 67cbec ;
23
19
--link-selection-bg : # 3d4163 ;
24
-
25
20
--footer-bg : # 758b8d11 ;
26
21
--footer-border : # 758b8d3f ;
27
22
--footer-shadow : # 00000020 ;
31
26
--footer-link-selection : # 7ccce6 ;
32
27
--footer-link-selection-bg : # 3d4163 ;
33
28
}
34
-
35
29
* ,
36
30
* ::before ,
37
31
* ::after {
38
32
margin : 0 ;
39
33
padding : 0 ;
40
34
box-sizing : border-box;
41
35
}
42
-
43
36
html {
44
37
font-size : 62.5% ;
45
38
min-height : 100% ;
46
39
font-family : "Rubik farsi" ;
47
40
}
48
-
49
41
body {
50
42
height : 100dvh ;
51
43
justify-content : center;
@@ -56,24 +48,21 @@ body {
56
48
background-image : linear-gradient (
57
49
20deg ,
58
50
var (--gradient-color-one ) 0% ,
59
- var (--gradient-color-two ) 33% ,
60
- var (--gradient-color-three ) 80%
51
+ var (--gradient-color-two ) 33% ,
52
+ var (--gradient-color-three ) 80%
61
53
);
62
54
background-attachment : fixed;
63
55
color : var (--text-color );
64
56
font-size : 1.2rem ;
65
57
}
66
-
67
58
* ::-moz-selection {
68
59
color : var (--text-selection-color );
69
60
background-color : var (--text-selection-bg );
70
61
}
71
-
72
62
* ::selection {
73
63
color : var (--text-selection-color );
74
64
background-color : var (--text-selection-bg );
75
65
}
76
-
77
66
a : link ,
78
67
a : visited {
79
68
text-decoration : none;
@@ -85,14 +74,12 @@ a:visited {
85
74
padding : 0.5rem 1rem ;
86
75
transition : color 0.2s , background-color 0.2s ;
87
76
}
88
-
89
77
a : hover ,
90
78
a : focus {
91
79
outline : none;
92
80
background-color : var (--link-selection-bg );
93
81
color : var (--link-selection );
94
82
}
95
-
96
83
a .inline : link ,
97
84
a .inline : visited {
98
85
text-decoration : none;
@@ -103,25 +90,21 @@ a.inline:visited {
103
90
border : none;
104
91
padding : 0 ;
105
92
}
106
-
107
93
a .inline : hover ,
108
94
a .inline : focus {
109
95
outline : none;
110
96
color : var (--link-selection );
111
97
}
112
-
113
98
main {
114
99
display : flex;
115
100
flex-direction : column;
116
101
justify-content : center;
117
102
align-items : center;
118
103
}
119
-
120
104
p {
121
105
line-height : 2 ;
122
106
margin : 0.6rem ;
123
107
}
124
-
125
108
ul {
126
109
list-style : none;
127
110
display : flex;
@@ -130,26 +113,30 @@ ul {
130
113
border : 1px solid var (--border-color );
131
114
padding : 0.8rem ;
132
115
border-radius : 1rem ;
116
+ flex-wrap : wrap;
117
+ justify-content : center;
133
118
}
134
-
135
119
.title {
136
120
display : flex;
137
121
flex-direction : column;
138
122
gap : 0.8rem ;
139
123
margin : 1rem 0 ;
140
124
line-height : 1.4 ;
141
125
}
142
-
143
126
.img-profile {
144
127
aspect-ratio : 1 / 1 ;
145
128
border-radius : 10% ;
146
129
height : auto !important ;
147
130
}
148
-
149
131
.title-name {
150
132
font-weight : 800 ;
151
133
}
152
-
153
134
.title-desc {
154
135
font-weight : 600 ;
155
136
}
137
+
138
+ /* Added styles for FontAwesome icons */
139
+ .fab , .fas {
140
+ margin-left : 0.5rem ;
141
+ font-size : 1.4rem ;
142
+ }
0 commit comments