Skip to content

Commit 737774b

Browse files
Elin Elmvik DiczfalusyElin Elmvik Diczfalusy
Elin Elmvik Diczfalusy
authored and
Elin Elmvik Diczfalusy
committed
styling
1 parent 0c80bb2 commit 737774b

7 files changed

Lines changed: 131 additions & 37 deletions

File tree

‎code/chart.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ const drawChart = (x) => {
1616
label: 'My First Dataset',
1717
data: [x, 19-x],
1818
backgroundColor: [
19-
'rgb(255, 99, 132)',
20-
'rgb(54, 162, 235)',
19+
'#7B6079',
20+
'#DE8971',
2121

2222
],
2323
hoverOffset: 4

‎code/img/background.jpg‎

2.26 MB
Loading

‎code/img/background.png‎

414 KB
Loading

‎code/img/github.png‎

3.47 KB
Loading

‎code/index.html‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="icon" type="image/png" href="./img/github.png" sizes="16x16" />
78
<link rel="preconnect" href="https://fonts.googleapis.com">
89
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
910
<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -14,18 +15,25 @@
1415
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
1516
</head>
1617
<body>
17-
18+
<header>
19+
<img class="img-logo" src="./img/github.png" alt="gitHub logo">
20+
</header>
1821
<section class= "main-container">
1922
<!-- This will be used to draw the chart 👇 -->
20-
<div class ="first-column">
21-
<div id ="header" ></div>
22-
<canvas id="chart" class="chart-container"></canvas>
23+
<div class ="first-column">
24+
<div id ="first" ></div>
25+
<div class="chart-container">
26+
<canvas id="chart"></canvas>
27+
</div>
2328
</div>
2429
<main id="projects" class ="projects-grid"></main>
25-
26-
2730
</section>
2831

32+
<footer>
33+
<p>©Elin Diczfalusy 2021</p>
34+
<p>Student project for <a href="technigo.oi">Technigo</a></p>
35+
</footer>
36+
2937
<script src="./script.js"></script>
3038
<script src="./chart.js"></script>
3139
</body>

‎code/script.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const USER = `Ajliin`
22
const REPOS_URL = `https://api.github.com/users/${USER}/repos`
33

4-
const headerContainer = document.getElementById('header')
4+
const firstContainer = document.getElementById('first')
55
const projectContainer = document.getElementById('projects')
66

77
// ------------FIRST FETCH FUNCTION------------
@@ -19,13 +19,15 @@ fetchRepos()
1919
// ------------fetching reop for first lines inside FIRST FETCH FUNCTION------------
2020

2121
const repoInfo = ((data) =>{
22-
headerContainer.innerHTML = `
22+
first.innerHTML = `
23+
<div class=header-image>
2324
<h1>Welcome to ${data[0].owner.login}s GitHub Tracker</h1>
2425
<img class="profile-img" src="https://avatars.githubusercontent.com/u/84288114?v=4" alt="profile pic Ajliin">
26+
</div>
2527
<div class=info-square>
2628
<h2>Elin Diczfalusy</h2>
2729
<p>User name: ${data[0].owner.login}</p>
28-
<p>GitHub page: ${data[0].owner.html_url}</p>
30+
<p>GitHub page: <a href="${data[0].owner.html_url}">${data[0].owner.html_url}</a></p>
2931
</div>`
3032

3133
const forkedRepo = data.filter((repo) => repo.fork && repo.name.startsWith('project-'))
@@ -39,7 +41,7 @@ const repoInfo = ((data) =>{
3941

4042
projectContainer.innerHTML += `<div class ="project">
4143
<p>Project name: ${repo.name}</p>
42-
<p>Project url: ${repo.html_url}</p>
44+
<p>Project url: <a href="${repo.html_url}"> ${repo.html_url}</a></p>
4345
<p>Default branch: ${repo.default_branch}</p>
4446
4547
<p>Last push: ${dateString.toUTCString()}

‎code/style.css‎

Lines changed: 109 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,94 @@
1+
:root{
2+
--purple: #7B6079;
3+
--orange:#DE8971;
4+
--beige: #FFE9D6;
5+
--transparent-light:rgba(0, 0, 0, 0.2);
6+
--transparent-dark: rgba(0, 0, 0, 0.5);
7+
8+
}
9+
10+
111
body {
2-
background: rgb(51, 55, 55);
12+
background-image: url("img/background.png");
313
font-family: raleway;
14+
margin: 0;
15+
box-sizing: border-box;
16+
17+
418
}
519

620
h1 {
7-
color:bisque
21+
margin-top: 0;
22+
text-align: center;
23+
font-size: 34px;
24+
line-height: 40px;
25+
font-weight: 500;
26+
margin-block-end:0.4em;
27+
color: var(--orange);
828
}
929

1030
h2 {
1131
color:black;
32+
margin-top: 0;
33+
text-align: center;
34+
font-size: 34px;
35+
line-height: 40px;
36+
font-weight: 500;
37+
}
38+
39+
40+
header{
41+
background-color: rgba(255, 255, 255, 0.564);
42+
}
43+
44+
.img-logo{
45+
width: 50px;
46+
1247
}
1348

1449
.main-container{
15-
max-width: 320px;
1650
display: flex;
51+
flex-direction: column;
52+
margin: 0 auto;
53+
padding: 2vh;
54+
box-sizing: border-box;
55+
}
56+
57+
.first-column{
1758
margin: 0 auto;
1859
}
60+
.header-image{
61+
width: 100%;
62+
align-self: center;
63+
}
64+
.profile-img{
65+
width: 100%;
66+
align-self: center;
67+
border-radius: 50%;
68+
border: 5px solid var(--orange);
69+
margin: 1vh 0;
70+
margin: 0 auto;
71+
box-sizing: border-box;
72+
}
73+
.info-square{
74+
background: rgba(255, 255, 255, 0.831);
75+
border-radius: 10pt;
76+
padding: 2vh;
77+
width: 100%;
78+
margin: 1vh 0;
79+
box-sizing: border-box;
80+
}
81+
82+
83+
.chart-container{
84+
display: flex;
85+
width: 100%;
86+
background-color: rgba(255, 255, 255, 0.831);;
87+
border-radius: 10pt;
88+
margin: 2vh 0;
89+
}
90+
91+
1992

2093
.projects-grid {
2194
display: flex;
@@ -25,61 +98,72 @@ h2 {
2598
}
2699

27100
.project{
28-
background-color: antiquewhite;
101+
background-color: rgba(255, 255, 255, 0.831);;
29102
border: 1px solid rebeccapurple;
30103
flex-direction: column;
31104
justify-content: left;
32105
align-items: flex-start;
33106
align-items: center;
34107
padding: 1rem;
35108
border-radius: 12px;
36-
margin: 0.5rem 0.5rem 0 0.5rem;
109+
margin: 2vh 0;
110+
box-sizing: border-box;
111+
width:100%;
112+
border-left: 4px solid var(--orange);
113+
border-right: 4px solid var(--orange);
37114
}
38115

39-
.profile-img{
40-
width: 100%;
41-
align-self: center;
42-
border-radius: 50%;
43-
border: 2px solid black;
44-
}
45116

46-
.info-square{
47-
background: bisque;
117+
a{
118+
text-decoration: none;
119+
color: black;
48120
}
49121

122+
a:hover {
123+
color: var(--orange);
124+
font-size: larger;
125+
}
50126

51-
.chart-container{
52-
display: flex;
53-
width: 50%;
54-
background-color: bisque;
127+
footer{
128+
box-sizing: border-box;
129+
width: 100%;
130+
background-color: rgba(255, 255, 255, 0.564);
131+
height: auto;
132+
padding: 2vh;
133+
display: absolute;
134+
bottom: 0;
55135

56136
}
57137

58-
@media (min-width: 768px){
138+
@media (min-width: 900px){
59139

60140
.main-container {
61141
max-width: 768px;
142+
display: grid;
143+
grid-template-columns: 1fr 4fr;
144+
margin: 0 auto;
62145
}
63146

64147
.first-column{
65-
display: grid;
66-
grid-template-rows: 3;
148+
display: flex;
149+
flex-direction: column;
150+
min-height: 100vh;
67151
}
68152

69-
.profile-img{
153+
/* .profile-img{
70154
width: 100%;
71155
grid-column: 1/1;
72156
grid-row: 1/3;
73-
}
157+
} */
74158

75-
.chart-container{
76-
background-color: grey;
159+
/* .chart-container{
160+
background-color: rgba(255, 255, 255, 0.831);;
77161
grid-column: 1/2;
78162
grid-row: 3/4;
79163
width: 100%;
80164
81165
82-
}
166+
} */
83167

84168
.projects-grid {
85169
display: grid;

0 commit comments

Comments
 (0)