Skip to content

Commit 9f6b5ee

Browse files
committed
Responsiveness
1 parent 0a5ea26 commit 9f6b5ee

File tree

3 files changed

+43
-28
lines changed

3 files changed

+43
-28
lines changed

public/global.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,35 @@ body,
88
body {
99
background-color: #607d8b;
1010
}
11+
12+
/* GITHUB corner */
13+
.github-corner {
14+
position: fixed;
15+
top: 0;
16+
right: 0;
17+
}
18+
.github-corner:hover .octo-arm {
19+
animation: octocat-wave 560ms ease-in-out;
20+
}
21+
@keyframes octocat-wave {
22+
0%,
23+
100% {
24+
transform: rotate(0);
25+
}
26+
20%,
27+
60% {
28+
transform: rotate(-25deg);
29+
}
30+
40%,
31+
80% {
32+
transform: rotate(10deg);
33+
}
34+
}
35+
@media (max-width: 500px) {
36+
.github-corner:hover .octo-arm {
37+
animation: none;
38+
}
39+
.github-corner .octo-arm {
40+
animation: octocat-wave 560ms ease-in-out;
41+
}
42+
}

public/index.html

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -35,33 +35,7 @@
3535
d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
3636
fill="currentColor"
3737
class="octo-body"
38-
></path></svg></a
39-
><style>
40-
.github-corner:hover .octo-arm {
41-
animation: octocat-wave 560ms ease-in-out;
42-
}
43-
@keyframes octocat-wave {
44-
0%,
45-
100% {
46-
transform: rotate(0);
47-
}
48-
20%,
49-
60% {
50-
transform: rotate(-25deg);
51-
}
52-
40%,
53-
80% {
54-
transform: rotate(10deg);
55-
}
56-
}
57-
@media (max-width: 500px) {
58-
.github-corner:hover .octo-arm {
59-
animation: none;
60-
}
61-
.github-corner .octo-arm {
62-
animation: octocat-wave 560ms ease-in-out;
63-
}
64-
}
65-
</style>
38+
></path></svg
39+
></a>
6640
</body>
6741
</html>

src/dev/App.svelte

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
align-items: center;
2121
justify-content: center;
2222
flex-direction: column;
23+
padding: 16px;
24+
box-sizing: border-box;
2325
}
2426
2527
h1 {
@@ -58,6 +60,13 @@
5860
li:hover {
5961
background-color: #eeeeee;
6062
}
63+
64+
@media screen and (max-width: 800px) {
65+
ul {
66+
max-width: 100%;
67+
margin-right: 0px;
68+
}
69+
}
6170
</style>
6271

6372
<main>

0 commit comments

Comments
 (0)