Skip to content

Commit ca504f4

Browse files
SevenOutmanSevenOutman
committed
fix demo page styling
1 parent 102dae6 commit ca504f4

File tree

2 files changed

+56
-39
lines changed

2 files changed

+56
-39
lines changed

‎src/demo/App.vue

Lines changed: 9 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,5 @@
11
<template>
22
<div id="app">
3-
<a href="https://github.com/SevenOutman/vue-aplayer" target="_blank" class="github-corner">
4-
<svg width="80" height="80" viewBox="0 0 250 250"
5-
style="fill:#41b883; color:#35495e; position: absolute; top: 0; border: 0; right: 0;">
6-
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
7-
<path
8-
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
9-
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
10-
<path
11-
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"
12-
fill="currentColor" class="octo-body"></path>
13-
</svg>
14-
</a>
153
<div class="container">
164
<h1 align="center">Vue-APlayer</h1>
175
<p align="center">
@@ -151,10 +139,19 @@
151139
}
152140
</script>
153141
<style>
142+
html, body {
143+
width: 100%;
144+
height: 100%;
145+
margin: 0;
146+
padding: 0;
147+
overflow: hidden;
148+
}
149+
154150
body {
155151
font-family: Source Sans Pro, 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
156152
background: linear-gradient(135deg, rgb(65, 184, 131), rgb(74, 156, 238));
157153
color: #fff;
154+
overflow-y: auto;
158155
}
159156
160157
#app {
@@ -212,30 +209,4 @@
212209
p {
213210
font-size: 18px;
214211
}
215-
216-
.github-corner:hover .octo-arm {
217-
animation: octocat-wave 560ms ease-in-out
218-
}
219-
220-
@keyframes octocat-wave {
221-
0%, 100% {
222-
transform: rotate(0deg)
223-
}
224-
20%, 60% {
225-
transform: rotate(-25deg)
226-
}
227-
40%, 80% {
228-
transform: rotate(10deg)
229-
}
230-
}
231-
232-
@media (max-width: 500px) {
233-
.github-corner:hover .octo-arm {
234-
animation: none
235-
}
236-
237-
.github-corner .octo-arm {
238-
animation: octocat-wave 560ms ease-in-out
239-
}
240-
}
241212
</style>

‎src/demo/index.html

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,55 @@
44
<meta charset="UTF-8">
55
<title>Vue-APlayer Demo</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link rel="shortcut icon" href="https://ws4.sinaimg.cn/large/006tKfTcgy1fhu01y9uy7j305k04s3yc.jpg">
7+
<style>
8+
.github-corner {
9+
position: absolute;
10+
top: 0;
11+
border: 0;
12+
right: 0;
13+
z-index: 1;
14+
}
15+
16+
.github-corner:hover .octo-arm {
17+
animation: octocat-wave 560ms ease-in-out
18+
}
19+
20+
@keyframes octocat-wave {
21+
0%, 100% {
22+
transform: rotate(0deg)
23+
}
24+
20%, 60% {
25+
transform: rotate(-25deg)
26+
}
27+
40%, 80% {
28+
transform: rotate(10deg)
29+
}
30+
}
31+
32+
@media (max-width: 500px) {
33+
.github-corner:hover .octo-arm {
34+
animation: none
35+
}
36+
37+
.github-corner .octo-arm {
38+
animation: octocat-wave 560ms ease-in-out
39+
}
40+
}
41+
</style>
842
</head>
943
<body>
44+
<a href="https://github.com/SevenOutman/vue-aplayer" target="_blank" class="github-corner">
45+
<svg width="80" height="80" viewBox="0 0 250 250"
46+
style="fill:#41b883; color:#35495e">
47+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
48+
<path
49+
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
50+
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
51+
<path
52+
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"
53+
fill="currentColor" class="octo-body"></path>
54+
</svg>
55+
</a>
1056
<div id="app"></div>
1157
<script src="https://cdn.jsdelivr.net/npm/colorthief@2.0.2/src/color-thief.js"></script>
1258
</body>

0 commit comments

Comments
 (0)