Skip to content

Commit 0ec4dde

Browse files
Timer91Timer91
committed
CSS: code review, :root variable, fontAwesome
1 parent 2c69d6f commit 0ec4dde

File tree

8 files changed

+69
-34
lines changed

8 files changed

+69
-34
lines changed

‎assets/fa-solid-900.woff2‎ renamed to ‎assets/fontawesome-solid.woff2‎

File renamed without changes.

‎index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
<head>
44
<title>Timeseries</title>
55
<meta charset="utf-8">
6-
<link rel="stylesheet" type="text/css" href="src/css/fontawesome-regular.css">
6+
<link rel="stylesheet" type="text/css" href="src/css/root.css">
77
<link rel="stylesheet" type="text/css" href="src/css/app.css">
8+
<link rel="stylesheet" type="text/css" href="src/css/fontawesome.css">
89
<link rel="stylesheet" type="text/css" href="src/css/timeline.css">
910
<script type="text/javascript"> function lg( a ) { console.log.apply( console, arguments ); return a; } </script>
1011
</head>

‎src/css/app.css‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@font-face {
2-
font-family: 'FontAwesome';
3-
src: url('../../assets/webfont.woff2') format('woff2');
2+
font-family: "FontAwesome";
3+
src: url("../../assets/fontawesome-solid.woff2") format("woff2");
44
}
55

66
html {
@@ -14,6 +14,22 @@ body {
1414
align-items: center;
1515
margin: 0;
1616
padding: 0;
17-
background-color: hsla(211, 22%, 15%, 1);
17+
background-color: var( --app-bg );
1818
font-family: sans-serif;
1919
}
20+
21+
.icon {
22+
position: relative;
23+
display: inline-block;
24+
font-family: "FontAwesome";
25+
font-weight: normal;
26+
font-style: normal;
27+
text-align: center;
28+
text-indent: 0;
29+
width: 1.25em;
30+
}
31+
32+
.ico-drag::before {
33+
content: "\f142";
34+
}
35+

‎src/css/fontawesome-regular.css‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/css/fontawesome.css‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/root.css‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
:root {
2+
--app-bg: hsla(211, 22%, 15%, 1);
3+
4+
--timeline-bg: #283440;
5+
6+
--serie-height: 40px;
7+
--serie-opacity: .4;
8+
--serie-margin-top: 1px;
9+
10+
--title-padding-right: 10px;
11+
--title-color: #ddd;
12+
--title-bg-color: rgba( 255, 255, 255, .12 );
13+
14+
--season-bg-color: rgba(255, 255, 255, .18);
15+
--season-bd: 7px solid;
16+
--season-bd-rad: 4px;
17+
}

‎src/css/timeline.css‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,40 @@
33
width: 100%;
44
margin: 20px;
55
border-radius: 4px;
6-
background-color: #283440;
6+
background-color: var( --timeline-bg );
77
}
88

99
.serie {
10+
display: flex;
1011
position: relative;
11-
height: 40px;
12+
height: var( --serie-height );
1213
box-sizing: border-box;
13-
line-height: 40px;
14+
line-height: var( --serie-height );
15+
transition: opacity .5s;
1416
}
1517

16-
.opacity {
17-
opacity: .5;
18+
.serie-opacity {
19+
opacity: var( --serie-opacity );
1820
}
1921

2022
.serie + .serie {
21-
margin-top: 1px;
23+
margin-top: var( --serie-margin-top );
2224
}
2325

2426
.title {
25-
position: absolute;
26-
width: 100%;
27-
height: 100%;
28-
padding-right: 10px;
27+
flex: 1;
28+
padding-right: var( --title-padding-right );
2929
text-align: right;
3030
box-sizing: border-box;
3131
cursor: default;
32-
color: #ddd;
33-
background-color: rgba(255, 255, 255, .12);
32+
color: var( --title-color );
33+
background-color: var( --title-bg-color );
3434
transition: color .5s, background-color .5s;
3535
}
3636

3737
#timelines:hover .serie:not(:hover) .title,
3838
#timelines.no-hover:hover .serie:hover .title {
39-
color: rgba(255, 255, 255, .2);
39+
color: var( --title-bg-color );
4040
}
4141

4242
#timelines:not(.no-hover) .serie:hover .title {
@@ -46,16 +46,17 @@
4646
.season {
4747
position: absolute;
4848
height: 100%;
49-
background: rgba(255, 255, 255, .18);
50-
border-radius: 4px;
51-
border-left: 7px solid #2980b9;
49+
background: var( --season-bg-color );
50+
border-radius: var( --season-bd-rad );
51+
border-left: var( --season-bd );
5252
box-sizing: border-box;
5353
}
5454

55-
div[name="twd"] .season { border-left: 7px solid #9b59b6; }
56-
div[name="strangerthings"] .season { border-left: 7px solid #f39c12; }
57-
div[name="mrrobot"] .season { border-left: 7px solid #c0392b; }
58-
div[name="narcos"] .season { border-left: 7px solid #27ae60; }
59-
div[name="got"] .season { border-left: 7px solid #ea6027; }
60-
div[name="bcs"] .season { border-left: 7px solid #0e627a; }
61-
div[name="brba"] .season { border-left: 7px solid #627a0e; }
55+
div[name="twd"] .season { border-color: #9b59b6; }
56+
div[name="strangerthings"] .season { border-color: #f39c12; }
57+
div[name="mrrobot"] .season { border-color: #c0392b; }
58+
div[name="narcos"] .season { border-color: #27ae60; }
59+
div[name="got"] .season { border-color: #ea6027; }
60+
div[name="bcs"] .season { border-color: #0e627a; }
61+
div[name="brba"] .season { border-color: #627a0e; }
62+
div[name="house"] .season { border-color: #2980b9; }

‎src/js/dragAndDrop.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ class DragAndDrop {
1616

1717
e.dataTransfer.effectAllowed = "move";
1818
e.dataTransfer.setData( "Text", this.curDrag.textContent );
19-
this.curDrag.classList.add( "opacity" );
19+
this.curDrag.classList.add( "serie-opacity" );
2020
this.rootElement.classList.add( "no-hover" );
2121
}
2222
_onDragOver( e ) {
@@ -36,7 +36,7 @@ class DragAndDrop {
3636
_onDrop( e ) {
3737
e.preventDefault();
3838
e.stopPropagation();
39-
this.curDrag.classList.remove( "opacity" );
39+
this.curDrag.classList.remove( "serie-opacity" );
4040
this.rootElement.classList.remove( "no-hover" );
4141
this._localStorageUpdate();
4242
return false;

0 commit comments

Comments
 (0)