Skip to content

Commit 8403363

Browse files
committed
Initial commit
0 parents  commit 8403363

File tree

7 files changed

+701
-0
lines changed

7 files changed

+701
-0
lines changed
1.12 KB
Binary file not shown.

css/github-corner.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/*
2+
* GitHub Corners
3+
* Credit: https://github.com/tholman/github-corners
4+
*/
5+
.github-corner:hover .octo-arm {
6+
animation: octocat-wave 560ms ease-in-out;
7+
}
8+
@keyframes octocat-wave {
9+
0%,
10+
100% {
11+
transform: rotate(0);
12+
}
13+
20%,
14+
60% {
15+
transform: rotate(-25deg);
16+
}
17+
40%,
18+
80% {
19+
transform: rotate(10deg);
20+
}
21+
}
22+
@media (max-width: 500px) {
23+
.github-corner:hover .octo-arm {
24+
animation: none;
25+
}
26+
.github-corner .octo-arm {
27+
animation: octocat-wave 560ms ease-in-out;
28+
}
29+
}

css/speech-bubbles.css

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
/* Speech Bubbles */
2+
.speech-bubble-left {
3+
position: absolute;
4+
background: #fcf113;
5+
border-radius: 1.2em;
6+
width: 275px;
7+
height: 70px;
8+
padding: 15px;
9+
left: -25%;
10+
top: 6%;
11+
border-bottom: 5px solid black;
12+
-webkit-animation: breathe-left 1.5s linear infinite; /* Safari 4+ */
13+
-moz-animation: breathe-left 1.5s linear infinite; /* Fx 5+ */
14+
-o-animation: breathe-left 1.5s linear infinite; /* Opera 12+ */
15+
animation: breathe-left 1.5s linear infinite; /* IE 10+, Fx 29+ */
16+
}
17+
18+
.speech-bubble-left:after {
19+
content: "";
20+
position: absolute;
21+
right: 0;
22+
top: 50%;
23+
width: 0;
24+
height: 0;
25+
border: 10px solid transparent;
26+
border-left-color: #fcf113;
27+
border-right: 0;
28+
margin-top: -10px;
29+
margin-right: -10px;
30+
}
31+
32+
.speech-bubble-right {
33+
position: absolute;
34+
background: #fcf113;
35+
border-radius: 1.2em;
36+
width: 275px;
37+
height: 70px;
38+
padding: 15px;
39+
top: 148%;
40+
right: -25%;
41+
border-bottom: 5px solid black;
42+
-webkit-animation: breathe-right 1.5s linear infinite; /* Safari 4+ */
43+
-moz-animation: breathe-right 1.5s linear infinite; /* Fx 5+ */
44+
-o-animation: breathe-right 1.5s linear infinite; /* Opera 12+ */
45+
animation: breathe-right 1.5s linear infinite; /* IE 10+, Fx 29+ */
46+
}
47+
48+
.speech-bubble-right:after {
49+
content: "";
50+
position: absolute;
51+
left: 0;
52+
top: 50%;
53+
width: 0;
54+
height: 0;
55+
border: 10px solid transparent;
56+
border-right-color: #fcf113;
57+
border-left: 0;
58+
margin-top: -10px;
59+
margin-left: -10px;
60+
}
61+
62+
.speech-bubble-close {
63+
margin-left: auto;
64+
cursor: pointer;
65+
-webkit-transition: -webkit-transform 0.2s ease-in-out;
66+
transition: transform 0.2s ease-in-out;
67+
}
68+
69+
.speech-bubble-close:hover {
70+
-webkit-transform: rotate(90deg);
71+
transform: rotate(90deg);
72+
}
73+
74+
.speech-bubble-close:active {
75+
transform: translateY(-1px);
76+
}
77+
78+
@keyframes breathe-left {
79+
0% {
80+
left: -25%;
81+
}
82+
50% {
83+
left: -26%;
84+
}
85+
100% {
86+
left: -25%;
87+
}
88+
}
89+
90+
@keyframes breathe-right {
91+
0% {
92+
right: -25%;
93+
}
94+
50% {
95+
right: -26%;
96+
}
97+
100% {
98+
right: -25%;
99+
}
100+
}

css/style.css

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
html {
2+
/*
3+
* This propery keeps the scroll on the page at all times.
4+
* Although it sounds inefficient, we keep this to have a better user interface while filtering.
5+
*/
6+
overflow-y: scroll;
7+
}
8+
9+
body {
10+
font-family: "Roboto", sans-serif;
11+
}
12+
13+
/* General focus reset */
14+
textarea:focus,
15+
input[type="text"]:focus,
16+
input[type="password"]:focus,
17+
input[type="datetime"]:focus,
18+
input[type="datetime-local"]:focus,
19+
input[type="date"]:focus,
20+
input[type="month"]:focus,
21+
input[type="time"]:focus,
22+
input[type="week"]:focus,
23+
input[type="number"]:focus,
24+
input[type="email"]:focus,
25+
input[type="url"]:focus,
26+
input[type="search"]:focus,
27+
input[type="tel"]:focus,
28+
input[type="color"]:focus {
29+
border-color: transparent;
30+
box-shadow: 0 1px 1px transparent inset, 0 0 8px transparent;
31+
outline: 0 none;
32+
border-radius: 0;
33+
}
34+
35+
/* Component level style */
36+
input[type="text"],
37+
input[type="text"]:focus {
38+
border: none;
39+
border-bottom: 3px solid #ddd;
40+
border-radius: 0;
41+
height: 70px;
42+
font-size: 32px;
43+
padding: 5px;
44+
}
45+
46+
::placeholder {
47+
/* Firefox, Chrome, Opera */
48+
color: #ddd !important;
49+
}
50+
51+
:-ms-input-placeholder {
52+
/* Internet Explorer 10-11 */
53+
color: #ddd !important;
54+
}
55+
56+
::-ms-input-placeholder {
57+
/* Microsoft Edge */
58+
color: #ddd !important;
59+
}
60+
61+
h1 {
62+
font-size: 56px;
63+
font-weight: 700;
64+
}
65+
66+
th {
67+
width: 20%;
68+
cursor: pointer;
69+
}
70+
71+
th:hover {
72+
background-color: #fdf893;
73+
}
74+
75+
.order:hover {
76+
background-color: #fdf893 !important;
77+
}
78+
79+
.err {
80+
display: none;
81+
font-size: 18px;
82+
padding: 15px;
83+
border-bottom: 5px solid black;
84+
background-color: #fcf113;
85+
border-radius: 10px;
86+
}
87+
88+
.thead-flash-once {
89+
-webkit-animation: thead-flash-once 0.4s ease-in-out 2; /* Safari 4+ */
90+
-moz-animation: thead-flash-once 0.4s ease-in-out 2; /* Fx 5+ */
91+
-o-animation: thead-flash-once 0.4s ease-in-out 2; /* Opera 12+ */
92+
animation: thead-flash-once 0.4s ease-in-out 2; /* IE 10+, Fx 29+ */
93+
}
94+
95+
@keyframes thead-flash-once {
96+
0% {
97+
background-color: transparent;
98+
}
99+
50% {
100+
background-color: #fdf893;
101+
}
102+
100% {
103+
background-color: transparent;
104+
}
105+
}
106+
107+
.dev-signature ul {
108+
margin: 0;
109+
font-size: 15px;
110+
}
111+
112+
.dev-signature .item-linkedin a {
113+
color: #2867b2;
114+
}
115+
116+
.dev-signature .item-website a {
117+
color: #212529;
118+
}
119+
120+
/* Very basic media queries */
121+
@media (max-width: 1200px) {
122+
.speech-bubble-left,
123+
.speech-bubble-right {
124+
display: none !important;
125+
}
126+
127+
table {
128+
font-size: 12px;
129+
overflow: hidden;
130+
}
131+
132+
h1 {
133+
font-size: 36px;
134+
}
135+
}
136+
137+
@media (max-width: 600px) {
138+
table {
139+
font-size: 8px;
140+
}
141+
.dev-signature {
142+
justify-content: flex-start !important;
143+
}
144+
}

0 commit comments

Comments
 (0)