Skip to content

Commit ff7c3c8

Browse files
OpenSourceSimonOpenSourceSimon
authored
Merge pull request #3 from OpenSourceSimon/develop
Beginning of settings and reformating
2 parents 91ec043 + 303972c commit ff7c3c8

File tree

6 files changed

+591
-205
lines changed

6 files changed

+591
-205
lines changed

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ The quote and background also change on reload on the demo!
2121
3. Enable Developer Mode and click Load unpacked extension button and upload the folder
2222
4. Enjoy!
2323

24-
## Quote API
25-
This extension uses a quote API that I created. You can find the source code [here](https://github.com/OpenSourceSimon/QuoteAPI). You're welcome to add quotes, please read the README for more information! If you want to self host the API, you can do that too. Just follow the instructions in the README.
24+
## Quote
25+
This extension uses [Quotable](https://github.com/lukePeavey/quotable) to get random quotes. It is a free API that is open source!
2626

2727
## Contributing & Ways to improve 📈
2828

‎index.html‎

Lines changed: 76 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -5,94 +5,96 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>Blank Tab</title>
77
<script src="jquery.min.js"></script>
8-
<style>
8+
<style>
99

10-
body, html {
11-
height: 100%;
12-
margin: 0;
13-
}
10+
body, html {
11+
height: 100%;
12+
margin: 0;
13+
}
1414

15-
#bgimg {
16-
height: 100%;
17-
background-position: center;
18-
background-size: cover;
19-
position: relative;
20-
color: white;
21-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
22-
}
23-
.topleft {
24-
position: absolute;
25-
top: 0;
26-
left: 16px;
27-
}
15+
#bgimg {
16+
height: 100%;
17+
background-position: center;
18+
background-size: cover;
19+
position: relative;
20+
color: white;
21+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
22+
}
2823

29-
.middle {
30-
width: 100%;
31-
position: absolute;
32-
top: 45%;
33-
left: 50%;
34-
transform: translate(-50%, -50%);
35-
text-align: center;
36-
}
37-
.bottom{
38-
top: 95%;
39-
font-size: "20px";
40-
}
41-
.orignal_image{
42-
position: absolute;
43-
top: 95%;
44-
}
24+
.topleft {
25+
position: absolute;
26+
top: 0;
27+
left: 16px;
28+
}
4529

30+
.middle {
31+
width: 100%;
32+
position: absolute;
33+
top: 45%;
34+
left: 50%;
35+
transform: translate(-50%, -50%);
36+
text-align: center;
37+
}
4638

39+
.bottom {
40+
top: 95%;
41+
font-size: 20px;
42+
}
4743

48-
#myVideo {
49-
position: fixed;
50-
right: 0;
51-
bottom: 0;
52-
min-width: 100%;
53-
min-height: 100%;
54-
}
44+
.orignal_image {
45+
position: absolute;
46+
top: 95%;
47+
}
5548

56-
/* Add some content at the bottom of the video/page */
57-
.content {
58-
position: fixed;
59-
bottom: 0;
60-
background: rgba(0, 0, 0, 0.5);
61-
color: #f1f1f1;
62-
width: 100%;
63-
padding: 20px;
64-
}
6549

66-
/* Style the button used to pause/play the video */
67-
#myBtn {
68-
width: 200px;
69-
font-size: 18px;
70-
padding: 10px;
71-
border: none;
72-
background: #000;
73-
color: #fff;
74-
cursor: pointer;
75-
}
50+
#myVideo {
51+
position: fixed;
52+
right: 0;
53+
bottom: 0;
54+
min-width: 100%;
55+
min-height: 100%;
56+
}
7657

77-
#myBtn:hover {
78-
background: #ddd;
79-
color: black;
80-
}
58+
/* Add some content at the bottom of the video/page */
59+
.content {
60+
position: fixed;
61+
bottom: 0;
62+
background: rgba(0, 0, 0, 0.5);
63+
color: #f1f1f1;
64+
width: 100%;
65+
padding: 20px;
66+
}
8167

68+
/* Style the button used to pause/play the video */
69+
#myBtn {
70+
width: 200px;
71+
font-size: 18px;
72+
padding: 10px;
73+
border: none;
74+
background: #000;
75+
color: #fff;
76+
cursor: pointer;
77+
}
8278

83-
</style>
79+
#myBtn:hover {
80+
background: #ddd;
81+
color: black;
82+
}
83+
84+
85+
</style>
8486

8587
</head>
8688
<body>
87-
<script defer src="index.js"></script>
89+
<script defer src="index.js"></script>
8890
<div id="bgimg">
89-
<video muted loop id="myVideo"></video>
90-
<div class="middle">
91-
<span style="font-size: 20vh;font-weight: 100;text-shadow: 0 0 2px gray;" id="time"></span><br>
92-
<span style=" font-size: 5vh;font-weight: 200;text-shadow: 0 0 2px gray;" id="date"></span><br><br>
93-
</div>
94-
<div class="middle bottom" id="quote">
95-
</div>
96-
</div>
91+
<video muted loop id="myVideo"></video>
92+
<div class="middle">
93+
<span style="font-size: 20vh;font-weight: 100;text-shadow: 0 0 2px gray;" id="time"></span><br>
94+
<span style=" font-size: 5vh;font-weight: 200;text-shadow: 0 0 2px gray;" id="date"></span><br><br>
95+
</div>
96+
<div class="middle bottom" id="quote">
97+
</div>
98+
</div>
9799
</body>
98100
</html>

0 commit comments

Comments
 (0)