Skip to content

Commit adbd7e0

Browse files
rejasrejas
committed
Refactor into flex based layout
1 parent 04094e8 commit adbd7e0

File tree

1 file changed

+32
-36
lines changed

1 file changed

+32
-36
lines changed

‎src/github-card.js‎

Lines changed: 32 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,16 @@ class GithubCard extends HTMLElement {
1616
.user {
1717
font-family: var(--ghc-fontfamily), sans-serif;
1818
font-size: var(--ghc-fontsize);
19-
display: inline-block;
20-
width: 265px;
21-
height: 300px;
22-
overflow: hidden;
19+
display: flex;
20+
flex-flow: column;
21+
min-width: 250px;
2322
border: 1px solid var(--ghc-primarycolor);
2423
border-radius: 6px;
2524
position: relative;
26-
background-color: var(--ghc-primarycolor);
2725
text-align: center;
2826
color: var(--ghc-secondarycolor);
2927
transition: background 1000ms ease-out;
28+
background: linear-gradient(to bottom, white 0%, white 5rem, var(--ghc-primarycolor) 5rem, var(--ghc-primarycolor) 100%);
3029
}
3130
3231
.user dl,
@@ -39,53 +38,49 @@ class GithubCard extends HTMLElement {
3938
}
4039
4140
.user-data {
42-
background: var(--ghc-secondarycolor) url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>') no-repeat 5px 5px;
43-
background-size: 25px;
44-
height: 85px;
41+
background: var(--ghc-secondarycolor) url('data:image/svg+xml;utf8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub icon</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>') no-repeat 0.25rem 0.25rem;
42+
background-color: transparent;
43+
background-size: 1.5rem;
4544
}
4645
47-
dd.user-avatar {
48-
display: inline-block;
49-
margin: 1em 0;
46+
.user-avatar {
47+
padding: 1rem 0;
5048
}
5149
5250
.user-avatar img {
53-
height: 120px;
54-
width: 120px;
55-
background-color: var(--ghc-secondarycolor);
51+
height: 7rem;
52+
width: 7rem;
5653
border: 3px solid var(--ghc-secondarycolor);
5754
border-radius: 100%;
5855
}
5956
60-
dd.user-name,
61-
dd.user-account {
62-
margin: 0 0 0.5em;
57+
.user-name,
58+
.user-account {
59+
margin: 0 0 0.5rem;
6360
}
6461
6562
.user-name {
66-
font-size: 1.5em;
63+
font-size: 1.5rem;
64+
padding-bottom: 0.5rem;
6765
}
6866
6967
.user-account {
70-
font-size: 1em;
7168
color: var(--ghc-textcolor);
69+
font-size: 1rem;
70+
padding-bottom: 1rem;
7271
}
7372
7473
.user-stats {
74+
padding: 0.5rem 2rem;
7575
border-top: 1px groove var(--ghc-textcolor);
76-
position: relative;
77-
top: 155px;
78-
}
79-
80-
.user-stats dd {
81-
padding: 0.5em 1em;
76+
display: flex;
8277
}
8378
8479
.user-repos,
8580
.user-followers {
86-
display: inline-block;
87-
font-size: 1.25em;
8881
color: var(--ghc-textcolor);
82+
display: inline-block;
83+
font-size: 1.25rem;
8984
}
9085
9186
.user-repos::after,
@@ -94,23 +89,24 @@ class GithubCard extends HTMLElement {
9489
text-transform: uppercase;
9590
color: var(--ghc-textcolor);
9691
display: block;
97-
font-size: 0.5em;
98-
line-height: 1.5em;
92+
font-size: 0.625rem;
93+
line-height: 1.25rem;
9994
}
10095
10196
.spinner {
10297
background: var(--ghc-primarycolor) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzgiIGhlaWdodD0iMzgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxIDEpIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGNpcmNsZSBzdHJva2Utb3BhY2l0eT0iLjUiIGN4PSIxOCIgY3k9IjE4IiByPSIxOCIvPjxwYXRoIGQ9Ik0zNiAxOGMwLTkuOTQtOC4wNi0xOC0xOC0xOCI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMTggMTgiIHRvPSIzNjAgMTggMTgiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIi8+PC9wYXRoPjwvZz48L3N2Zz4=) no-repeat center center;
10398
}
10499
105-
a.user-github-url,
106-
a.user-repos-url,
107-
a.user-followers-url {
100+
.user-github-url,
101+
.user-repos-url,
102+
.user-followers-url {
108103
text-decoration: none;
104+
flex-basis: 50%;
109105
}
110106
</style>
111107
112108
<article class="user spinner">
113-
<dl class="user-data" hidden>
109+
<dl class="user-data">
114110
<dt>Avatar:</dt>
115111
<dd class="user-avatar">
116112
<img src="" alt="User avatar">
@@ -124,13 +120,13 @@ class GithubCard extends HTMLElement {
124120
<dd class="user-account"></dd>
125121
</a>
126122
</dl>
127-
<dl class="user-stats" hidden>
128-
<dt>Repos</dt>
123+
<dl class="user-stats">
124+
<dt>Repos:</dt>
129125
<a class="user-repos-url">
130126
<dd class="user-repos" data-stats="repos"></dd>
131127
</a>
132128
133-
<dt>Followers</dt>
129+
<dt>Followers:</dt>
134130
<a class="user-followers-url">
135131
<dd class="user-followers" data-stats="followers"></dd>
136132
</a>

0 commit comments

Comments
 (0)