Skip to content
This repository was archived by the owner on Aug 19, 2023. It is now read-only.

Commit a3947ac

Browse files
vLuckyyyRollcziJakubk15
authored
GH-87 Move css to style file and setup variables (#87)
* setup type safe script and use routing * Update README.md Co-authored-by: Jakubk15 <[email protected]> * follow rollczi's suggestions * Remove projects i about href * Thank you frontaś * Update Navbar.vue * Move css to file, and setup variables * Update router.ts --------- Co-authored-by: Norbert Dejlich <[email protected]> Co-authored-by: Jakubk15 <[email protected]>
1 parent 4de8868 commit a3947ac

File tree

11 files changed

+118
-119
lines changed

11 files changed

+118
-119
lines changed

‎src/App.vue‎

Lines changed: 0 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -12,70 +12,4 @@ import Footer from "@/components/footer/Footer.vue";
1212
</template>
1313

1414

15-
<style>
16-
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200;300;400;500;600;700;800;900&display=swap');
17-
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap');
18-
19-
::-webkit-scrollbar {
20-
width: 8px;
21-
}
22-
23-
::-webkit-scrollbar-track {
24-
background: #000000;
25-
box-shadow: inset 0 0 5px rgb(0, 0, 0);
26-
border-radius: 0;
27-
}
28-
29-
::-webkit-scrollbar-thumb {
30-
background-color: rgb(22, 22, 22);
31-
border-radius: 0;
32-
}
33-
34-
* {
35-
padding: 0;
36-
margin: 0;
37-
align-items: center;
38-
}
39-
40-
html {
41-
width: 100%;
42-
height: 100%;
43-
scroll-behavior: smooth;
44-
overflow-x: hidden;
45-
}
46-
47-
body {
48-
font-family: "Montserrat", sans-serif;
49-
font-weight: 500;
50-
height: 100%;
51-
overflow-x: hidden;
52-
background: rgb(30, 31, 31);
53-
background: -moz-linear-gradient(146deg, rgba(30, 31, 31, 1) 45%, rgba(2, 2, 2, 1) 100%);
54-
background: -webkit-linear-gradient(right, rgb(30, 31, 31), #020202);
55-
background: linear-gradient(to right, #1e1f1f, #020202);
56-
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#1e1f1f", endColorstr="#020202", GradientType=1);
57-
}
58-
59-
a:link {
60-
text-decoration: none;
61-
}
62-
63-
header {
64-
background-image: url('/assets/img/header/bg.webp');
65-
background-size: cover;
66-
background-position: center;
67-
background-repeat: no-repeat;
68-
}
69-
70-
@media only screen and (max-width: 1000px) {
71-
header {
72-
background-image: url('/assets/img/header/bg.webp');
73-
}
74-
}
75-
76-
</style>
77-
78-
79-
80-
8115

‎src/components/about/About.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default {
3838
}
3939
4040
.card-ab h1 {
41-
border-left: 5px solid #0f0f0f;
41+
border-left: 5px solid var(--black);
4242
}
4343
4444
.card-ab p {
@@ -55,12 +55,12 @@ export default {
5555
background: -webkit-linear-gradient(90deg, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
5656
background: linear-gradient(90deg, rgba(63, 94, 251, 1) 0%, rgba(252, 70, 107, 1) 100%);
5757
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3f5efb", endColorstr="#fc466b", GradientType=1);
58-
color: #ffffff;
58+
color: var(--white);
5959
}
6060
6161
.card-ab h1 {
6262
font-weight: 800;
63-
border-left: 5px solid #ffffff;
63+
border-left: 5px solid var(--white);
6464
}
6565
6666
.card-ab p {
@@ -80,7 +80,7 @@ export default {
8080
8181
8282
.intellij {
83-
box-shadow: rgba(0, 0, 0, 0.8) 0 0 15px;
83+
box-shadow: var(--black) 0 0 15px;
8484
width: 100%;
8585
border-radius: 15px;
8686
}

‎src/components/footer/Footer.vue‎

Lines changed: 8 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,48 +22,40 @@
2222
</footer>
2323
</template>
2424

25-
<style>
25+
<style scoped>
2626
@media only screen and (max-width: 1000px) {
2727
footer {
28-
background-color: #11111100;
28+
background-color: var(--dark-gray);
2929
margin: 7% 11% 7% 8%;
3030
padding: 2%;
3131
font-size: small;
32-
color: #444444;
32+
color: var(--primary-dark-gray);
3333
}
3434
}
3535
3636
footer {
37-
background-color: #111111;
37+
background-color: var(--dark-gray);
3838
border-radius: 12px;
3939
margin: 2% 11% 2% 8%;
4040
padding: 2%;
4141
font-size: small;
42-
color: #444444;
42+
color: var(--primary-dark-gray);
4343
}
4444
4545
footer .info {
4646
margin-top: 15px;
4747
transition: 0.5s;
48-
color: #d3d4d5 !important;
48+
color: var(--white-gray) !important;
4949
margin-right: 19px;
5050
font-size: 14px;
5151
}
5252
53-
footer .info:hover {
54-
color: #666666 !important;
55-
}
56-
5753
footer a {
58-
color: rgb(133, 133, 133);
59-
}
60-
61-
footer a:hover {
62-
color: rgb(100, 100, 100);
54+
color: var(--secondary-title);
6355
}
6456
6557
.footer-social a {
66-
color: rgb(190, 190, 190) !important;
58+
color: var(--primary-title) !important;
6759
margin: 5px;
6860
font-size: large;
6961
}

‎src/components/header/Flex.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,11 @@
7979
}
8080
8181
.flex p {
82-
color: #666666;
82+
color: var(--primary-dark-gray);
8383
}
8484
8585
.flex h1 {
86-
color: #ffffff;
86+
color: var(--white);
8787
font-weight: 800;
8888
font-size: 50px;
8989
}
@@ -94,13 +94,13 @@
9494
9595
.social a {
9696
position: -ms-device-fixed;
97-
color: #b8b8b8 !important;
97+
color: var(--white-gray) !important;
9898
margin: 10px;
9999
font-size: large;
100100
}
101101
102102
.social a:hover {
103-
color: #666666;
103+
color: var(--primary-dark-gray);
104104
}
105105
106106
.skill {

‎src/components/header/Navbar.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ export default {
9090
}
9191
9292
.navbar-brand {
93-
color: white !important;
93+
color: var(--white) !important;
9494
margin-top: 30px;
9595
margin-left: 10px
9696
}
@@ -110,7 +110,7 @@ export default {
110110
.nav-link {
111111
font-family: "Inter", sans-serif;
112112
text-transform: uppercase;
113-
color: #d3d4d5 !important;
113+
color: var(--white-gray) !important;
114114
margin-right: 3px;
115115
font-size: 15px;
116116
transition: 0.5s;
@@ -119,16 +119,16 @@ export default {
119119
120120
.nav-link:hover {
121121
transition: 0.5s;
122-
color: #666666 !important;
122+
color: var(--primary-dark-gray) !important;
123123
transform: scale(1.05);
124124
}
125125
126126
.custom-toggler {
127-
color: #d3d4d5;
127+
color: var(--white-gray);
128128
}
129129
130130
.navbar-brand {
131-
color: white !important;
131+
color: var(--white) !important;
132132
font-weight: 700;
133133
}
134134

‎src/components/projects/Projects.vue‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@ export default {
4444
</script>
4545

4646
<style>
47-
4847
.projects-row {
4948
display: flex;
5049
justify-content: space-around;
@@ -83,11 +82,11 @@ export default {
8382
}
8483
8584
.card-pro h5 {
86-
color: rgb(167, 167, 167);
85+
color: var(--primary-title);
8786
}
8887
8988
.card-pro h6 {
90-
color: rgb(153, 150, 150);
89+
color: var(--secondary-title);
9190
}
9291
}
9392
@@ -97,7 +96,7 @@ export default {
9796
9897
#projects h1 {
9998
font-weight: 800;
100-
color: #d3d3d380;
99+
color: var(--primary-title);
101100
font-size: 40px;
102101
border: 2px;
103102
margin-bottom: 1%;
@@ -106,7 +105,7 @@ export default {
106105
107106
#projects p {
108107
font-weight: 500;
109-
color: #d3d3d354;
108+
color: var(--secondary-title);
110109
font-size: medium;
111110
margin-top: -10px;
112111
border: 2px;
@@ -119,7 +118,7 @@ export default {
119118
}
120119
121120
.card-pro {
122-
background-color: #2a2c2c;
121+
background-color: var(--light-gray);
123122
border-radius: 12px;
124123
margin-bottom: 2%;
125124
padding: 6% 10%;
@@ -133,7 +132,7 @@ export default {
133132
}
134133
135134
.card-pro h5 {
136-
color: rgb(114, 114, 114);
135+
color: var(--secondary-title);
137136
font-weight: 600;
138137
}
139138

‎src/components/skills/Skills.vue‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export default {
5151
};
5252
</script>
5353

54-
<style>
54+
<style scoped>
5555
.skills-row {
5656
display: flex;
5757
justify-content: space-around;
@@ -68,14 +68,14 @@ export default {
6868
6969
#skills h1 {
7070
font-weight: 800;
71-
color: #92909080;
71+
color: var(--primary-title);
7272
font-size: x-large;
7373
border: 2px;
7474
margin-bottom: 2%;
7575
}
7676
7777
.card-info {
78-
background-color: #2a2c2c;
78+
background-color: var(--light-gray);
7979
border-radius: 15px;
8080
padding: 10% 10% 10%;
8181
align-items: center;
@@ -86,19 +86,14 @@ export default {
8686
height: 95%;
8787
}
8888
89-
.card-info:hover {
90-
background-color: #353838;
91-
transition: 0.5s;
92-
}
93-
9489
.card-info h5 {
95-
color: rgb(196, 196, 196);
90+
color: var(--primary-title);
9691
font-weight: 700;
9792
margin-top: 4%;
9893
}
9994
10095
.card-info p {
101-
color: #666666;
96+
color: var(--secondary-title);
10297
font-size: small;
10398
}
10499

‎src/components/team/Team.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,15 +85,15 @@ export default {
8585
8686
#team h1 {
8787
font-weight: 800;
88-
color: #d3d3d380;
88+
color: var(--white-gray);
8989
font-size: 40px;
9090
border: 2px;
9191
text-align: center;
9292
}
9393
9494
#team p {
9595
font-weight: 500;
96-
color: #d3d3d354;
96+
color: var(--white-gray);
9797
font-size: medium;
9898
border: 2px;
9999
text-align: center;
@@ -105,4 +105,4 @@ export default {
105105
justify-content: center;
106106
align-items: stretch;
107107
}
108-
</style>
108+
</style>

‎src/components/team/components/Member.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default {
3333
</script>
3434
<style>
3535
.team-card {
36-
background: #2a2c2c;
36+
background: var(--light-gray);
3737
transition: 0.3s;
3838
height: 100%;
3939
}
@@ -43,11 +43,11 @@ export default {
4343
}
4444
4545
.team-card-title {
46-
color: #fff;
46+
color: var(--white);
4747
}
4848
4949
.team-card-subtitle {
50-
color: #fff;
50+
color: var(--white);
5151
}
5252
5353
.list-inline-item {

0 commit comments

Comments
 (0)