Skip to content

Commit bb036fa

Browse files
author
Yvain Liechti
committed
improve style
1 parent 4d73ed0 commit bb036fa

File tree

2 files changed

+117
-9
lines changed

2 files changed

+117
-9
lines changed

‎src/css/index.scss

+106-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,108 @@
1+
$color-bunting: #152347;
2+
$color-gull: #99A1B3;
3+
$color-bay: #39486F;
4+
$color-pink: #f0a;
5+
$color-white: #fff;
6+
7+
*,*:before,*:after{box-sizing: border-box;}
8+
19
body {
2-
background: black;
3-
color: white;
10+
background: $color-bunting;
11+
color: $color-gull;
12+
}
13+
14+
.header {
15+
text-align: center;
16+
17+
&-title {
18+
color: $color-white;
19+
font-size: calc(3vw + 2rem);
20+
}
21+
}
22+
23+
.container {
24+
width: 90vw;
25+
max-width: 60rem;
26+
margin: auto;
27+
}
28+
29+
.grid {
30+
display: flex;
31+
flex-wrap: wrap;
32+
list-style: none;
33+
align-items: stretch;
34+
justify-items: flex-start;
35+
justify-content: center;
36+
padding: 0;
37+
margin: 0;
38+
39+
> li {
40+
flex: 0 0 calc((100% - 3rem) / 3);
41+
min-width: 18rem;
42+
background: $color-bay;
43+
padding: 1rem;
44+
margin: .5rem;
45+
}
46+
}
47+
48+
.user {
49+
display: grid;
50+
height: 100%;
51+
grid-template-columns: 1fr 2fr;
52+
grid-template-rows: 4fr 1fr;
53+
grid-template-areas: "avatar info "
54+
"avatar progress";
55+
grid-gap: .25rem 1rem;
56+
57+
&-info {
58+
grid-area: info;
59+
font-size: 1.2rem;
60+
color: $color-white;
61+
}
62+
63+
&-name {
64+
font-size: .8em;
65+
display: block;
66+
color: $color-gull;
67+
}
68+
69+
&-pseudo {
70+
display: block;
71+
}
72+
73+
&-avatar {
74+
grid-area: avatar;
75+
width: 100%;
76+
height: auto;
77+
border-radius: 50rem;
78+
border: 2px solid $color-white;
79+
}
80+
81+
&-progress {
82+
grid-area: progress;
83+
width: 100%;
84+
}
85+
}
86+
87+
.progress {
88+
-webkit-appearance: none;
89+
-moz-appearance: none;
90+
appearance: none;
91+
background: $color-bunting;
92+
border: 2px solid $color-bunting;
93+
color: $color-pink;
94+
95+
&::-webkit-progress-bar {
96+
background: transparent;
97+
}
98+
99+
&::-webkit-progress-value {
100+
background: $color-pink;
101+
background: linear-gradient(80deg, #ffc337 0%, $color-pink 100%);
102+
}
103+
104+
&::-moz-progress-bar {
105+
background: $color-pink;
106+
background: linear-gradient(80deg, #ffc337 0%, $color-pink 100%);
107+
}
4108
}

‎src/html/index.twig

+11-7
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,21 @@
99
</head>
1010

1111
<body>
12-
<header>
13-
<h1>HacktoberFest</h1>
12+
<header class="header">
13+
<h1 class="header-title">HacktoberFest</h1>
1414
</header>
1515
<div class="container">
16-
<ul>
16+
<ul class="grid">
1717
{% for user in usersData %}
1818
<li>
19-
<img alt="" src="{{ user.avatarUrl }}" width="72" height="72"/>
20-
<strong>{{ user.name }}</strong>
21-
@{{ user.login }}
22-
<progress max="4" value="{{ user.prCount }}"> 70% </progress>
19+
<div class="user">
20+
<img class="user-avatar" alt="" src="{{ user.avatarUrl }}" width="72" height="72"/>
21+
<div class="user-info">
22+
<strong class="user-speudo">@{{ user.login }}</strong>
23+
<span class="user-name">{{ user.name }}</span>
24+
</div>
25+
<progress class="user-progress progress" max="4" value="{{ user.prCount }}">{{ user.prCount }} / 4</progress>
26+
</div>
2327
</li>
2428
{% endfor %}
2529
</ul>

0 commit comments

Comments
 (0)