this repo has no description
looks pretty good?
+102
-14
+7
-2
index.html
+7
-2
index.html
···
14
14
<div id="page-container">
15
15
<div id="content-wrap">
16
16
<div id="content"></div>
17
-
<a id="tweetit" href="#"><img src="twitter.png" alt="twitter logo" width="0.8%" height="0.8%" /> tweet it</a>
18
-
<button id="newplsuwu">can i have a new one? 🥺</button>
17
+
<center>
18
+
<a id="newplsuwu" href="#" class="button">can i have a new one? 🥺</a>
19
+
<!-- <a id="tweetit" href="#"><img src="twitter.png" alt="twitter logo" width="20px" height="17px" /></a> -->
20
+
<div class="twitter-btn">
21
+
<a href="#"><i></i> <span>Tweet</span></a>
22
+
</div>
23
+
</center>
19
24
</div>
20
25
<footer id="footer">
21
26
created by <a href="https://twitter.com/__justplaying">alice</a>, inspired by
+90
-9
main.css
+90
-9
main.css
···
1
1
body {
2
2
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
3
-
}
4
-
5
-
img {
6
-
display: inline-block;
3
+
line-height: 1.2;
7
4
}
8
5
9
6
#page-container {
···
11
8
min-height: 100vh;
12
9
}
13
10
14
-
#page-container {
11
+
#content {
12
+
font-size: 2.5rem;
13
+
font-weight: bold;
14
+
padding-bottom: 50px;
15
+
}
16
+
17
+
/* #tweetit {
18
+
display: block;
19
+
padding-top: 10px;
20
+
} */
21
+
22
+
/* twitter button */
23
+
.twitter-btn {
24
+
margin: 10px;
25
+
width: 76px;
26
+
display: block;
27
+
text-align: left;
28
+
white-space: nowrap;
29
+
zoom: 1;
30
+
font-size: 13px;
31
+
line-height: 26px;
32
+
font-family: "Helvetica Neue", Arial, sans-serif;
33
+
}
34
+
.twitter-btn a {
35
+
height: 28px;
36
+
padding: 1px 10px 1px 9px;
37
+
border-radius: 4px;
38
+
position: relative;
39
+
font-weight: 500;
40
+
color: #fff;
41
+
cursor: pointer;
42
+
background-color: #1da1f2;
43
+
border-radius: 3px;
44
+
box-sizing: border-box;
45
+
display: inline-block;
46
+
text-decoration: none;
47
+
}
48
+
/* .twitter-btn a:hover {
49
+
background-color: #0c7abf;
50
+
} */
51
+
.twitter-btn a i {
52
+
width: 18px;
53
+
height: 18px;
54
+
top: 4px;
55
+
position: relative;
56
+
display: inline-block;
57
+
background: transparent 0 0 no-repeat;
58
+
background-image: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2072%2072%22%3E%3Cpath%20fill%3D%22none%22%20d%3D%22M0%200h72v72H0z%22%2F%3E%3Cpath%20class%3D%22icon%22%20fill%3D%22%23fff%22%20d%3D%22M68.812%2015.14c-2.348%201.04-4.87%201.744-7.52%202.06%202.704-1.62%204.78-4.186%205.757-7.243-2.53%201.5-5.33%202.592-8.314%203.176C56.35%2010.59%2052.948%209%2049.182%209c-7.23%200-13.092%205.86-13.092%2013.093%200%201.026.118%202.02.338%202.98C25.543%2024.527%2015.9%2019.318%209.44%2011.396c-1.125%201.936-1.77%204.184-1.77%206.58%200%204.543%202.312%208.552%205.824%2010.9-2.146-.07-4.165-.658-5.93-1.64-.002.056-.002.11-.002.163%200%206.345%204.513%2011.638%2010.504%2012.84-1.1.298-2.256.457-3.45.457-.845%200-1.666-.078-2.464-.23%201.667%205.2%206.5%208.985%2012.23%209.09-4.482%203.51-10.13%205.605-16.26%205.605-1.055%200-2.096-.06-3.122-.184%205.794%203.717%2012.676%205.882%2020.067%205.882%2024.083%200%2037.25-19.95%2037.25-37.25%200-.565-.013-1.133-.038-1.693%202.558-1.847%204.778-4.15%206.532-6.774z%22%2F%3E%3C%2Fsvg%3E);
59
+
}
60
+
.twitter-btn a span {
61
+
margin-left: 4px;
62
+
white-space: nowrap;
63
+
display: inline-block;
64
+
vertical-align: top;
65
+
zoom: 1;
15
66
}
16
67
17
-
#content {
18
-
font-size: 4rem;
19
-
font-weight: bold;
68
+
a.button {
69
+
display: inline-block;
70
+
padding: 0.3em 0.6em;
71
+
border: 0.16em solid #000;
72
+
margin: 0;
73
+
box-sizing: border-box;
74
+
text-decoration: none;
75
+
font-size: 0.8rem;
76
+
font-weight: 400;
77
+
color: #000;
78
+
text-align: center;
79
+
transition: all 0.15s;
80
+
}
81
+
/* a.button:hover {
82
+
color: #1da1f2;
83
+
border-color: #1da1f2;
20
84
}
85
+
a.button:active {
86
+
color: #1da1f2;
87
+
border-color: #1da1f2;
88
+
} */
89
+
/*
90
+
@media only screen and (max-width: 480px) {
91
+
* {
92
+
color: #ff00ff;
93
+
}
94
+
} */
95
+
/* @media all and (max-device-width: 812px) {
96
+
a.button {
97
+
display: block;
98
+
margin: 0.4em auto;
99
+
font-size: 0.5rem;
100
+
}
101
+
} */
21
102
22
103
#content-wrap {
23
104
position: absolute;
24
-
top: 20%;
105
+
top: 30%;
25
106
left: 50%;
26
107
text-align: center;
27
108
-moz-transform: translateX(-50%) translateY(-50%);
+5
-3
main.js
+5
-3
main.js
···
6
6
const randomable = ble[Math.floor(Math.random() * ble.length)];
7
7
const output = `${randomive} and ${randomable}`;
8
8
document.querySelector("#content").innerHTML = output;
9
-
document.querySelector("#tweetit").addEventListener("click", () => {
9
+
document.querySelector(".twitter-btn").addEventListener("click", (event) => {
10
+
event.preventDefault();
10
11
window.open(`https://twitter.com/intent/tweet?text=i%27m%20${output}%20🥺&url=${self}`, "_blank");
11
12
});
12
13
};
13
14
14
-
document.addEventListener("DOMContentLoaded", function (event) {
15
+
document.addEventListener("DOMContentLoaded", (event) => {
15
16
iveble();
16
-
document.querySelector("#newplsuwu").addEventListener("click", function () {
17
+
document.querySelector("#newplsuwu").addEventListener("click", (event) => {
17
18
iveble();
19
+
event.preventDefault();
18
20
});
19
21
});