this repo has no description
are we done?
+36
-66
+12
-12
index.html
+12
-12
index.html
···
9
9
<link rel="icon" type="image/png" href="bottom.png" />
10
10
<link rel="shortcut icon" type="image/png" href="bottom.png" />
11
11
<link rel="apple-touch-icon" type="image/png" href="bottom.png" />
12
+
<meta name="twitter:card" content="summary_large_image" />
13
+
<meta name="twitter:title" content="iveble.art" />
14
+
<meta name="twitter:description" content="🥺" />
15
+
<meta name="twitter:image" content="bottom.png" />
12
16
</head>
13
17
<body>
14
-
<div id="page-container">
15
-
<div id="content-wrap">
16
-
<div id="content"></div>
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>
18
+
<div id="container">
19
+
<div id="content"></div>
20
+
<a id="newplsuwu" href="#" class="button">can i have a new one? 🥺</a>
21
+
<div class="twitter-btn">
22
+
<a href="#"><i></i> <span>Tweet</span></a>
24
23
</div>
25
-
<footer id="footer">
24
+
<div> </div>
25
+
<div id="footer">
26
26
created by <a href="https://twitter.com/__justplaying">alice</a>, inspired by
27
27
<a href="https://twitter.com/thingskatedid/status/1435166036475604994">@thingskatedid's tweet</a>
28
-
</footer>
28
+
</div>
29
29
</div>
30
30
</body>
31
31
</html>
+19
-51
main.css
+19
-51
main.css
···
3
3
line-height: 1.2;
4
4
}
5
5
6
-
#page-container {
7
-
position: relative;
8
-
min-height: 100vh;
6
+
#container {
7
+
display: flex;
8
+
flex-direction: column;
9
+
align-items: center;
10
+
height: 100vh;
11
+
/* justify-content: center; */
12
+
/* align-content: center; */
13
+
/* margin-left: auto; */
9
14
}
10
15
11
16
#content {
12
-
font-size: 2.5rem;
17
+
font-size: 10vw;
13
18
font-weight: bold;
14
-
padding-bottom: 50px;
19
+
padding: 10vw 3vw 10vw 3vw;
20
+
text-align: center;
21
+
flex: 1 1 1px;
15
22
}
16
23
17
-
/* #tweetit {
18
-
display: block;
19
-
padding-top: 10px;
20
-
} */
21
-
22
24
/* twitter button */
23
25
.twitter-btn {
24
26
margin: 10px;
···
45
47
display: inline-block;
46
48
text-decoration: none;
47
49
}
48
-
/* .twitter-btn a:hover {
49
-
background-color: #0c7abf;
50
-
} */
50
+
51
51
.twitter-btn a i {
52
52
width: 18px;
53
53
height: 18px;
···
57
57
background: transparent 0 0 no-repeat;
58
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
59
}
60
+
60
61
.twitter-btn a span {
61
62
margin-left: 4px;
62
63
white-space: nowrap;
···
65
66
zoom: 1;
66
67
}
67
68
69
+
/* new button */
68
70
a.button {
69
71
display: inline-block;
70
-
padding: 0.3em 0.6em;
72
+
padding: 0.7em;
71
73
border: 0.16em solid #000;
72
74
margin: 0;
73
75
box-sizing: border-box;
74
76
text-decoration: none;
75
-
font-size: 0.8rem;
77
+
font-size: 1rem;
76
78
font-weight: 400;
77
79
color: #000;
78
80
text-align: center;
79
81
transition: all 0.15s;
80
82
}
81
-
/* a.button:hover {
82
-
color: #1da1f2;
83
-
border-color: #1da1f2;
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
-
} */
102
-
103
-
#content-wrap {
104
-
position: absolute;
105
-
top: 30%;
106
-
left: 50%;
107
-
text-align: center;
108
-
-moz-transform: translateX(-50%) translateY(-50%);
109
-
-webkit-transform: translateX(-50%) translateY(-50%);
110
-
transform: translateX(-50%) translateY(-50%);
111
-
padding-bottom: 2rem; /* Footer height */
112
-
}
113
83
114
84
#footer {
115
-
position: absolute;
116
-
bottom: 0;
117
-
width: 100%;
118
-
height: 2rem; /* Footer height */
85
+
margin-top: auto;
119
86
text-align: center;
120
87
font-size: 0.8rem;
88
+
padding-bottom: 20px;
121
89
}
+5
-3
main.js
+5
-3
main.js
···
4
4
const self = "https://iveble.art";
5
5
const randomive = ive[Math.floor(Math.random() * ive.length)];
6
6
const randomable = ble[Math.floor(Math.random() * ble.length)];
7
-
const output = `${randomive} and ${randomable}`;
7
+
const output = `${randomive}<br/>and<br/>${randomable}`;
8
+
const tweetText = `i'm ${randomive} and ${randomable}🥺`;
8
9
document.querySelector("#content").innerHTML = output;
9
10
document.querySelector(".twitter-btn").addEventListener("click", (event) => {
10
11
event.preventDefault();
11
-
window.open(`https://twitter.com/intent/tweet?text=i%27m%20${output}%20🥺&url=${self}`, "_blank");
12
+
window.open(`https://twitter.com/intent/tweet?text=${tweetText}&url=${self}`, "_blank");
12
13
});
13
14
};
14
15
15
16
document.addEventListener("DOMContentLoaded", (event) => {
16
17
iveble();
17
18
document.querySelector("#newplsuwu").addEventListener("click", (event) => {
19
+
event.preventDefault();
20
+
e.stopImmediatePropagation();
18
21
iveble();
19
-
event.preventDefault();
20
22
});
21
23
});