Skip to content

Commit 5706fea

Browse files
interfinityOfficialinterfinityOfficial
committed
Added Day 59
1 parent e04b76f commit 5706fea

1 file changed

Lines changed: 148 additions & 0 deletions

File tree

‎public/59/index.html‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="icon" href="/assets/icon.png" />
7+
<title>Day 59/100</title>
8+
</head>
9+
<body>
10+
<main>
11+
<div class="download-link" id="download-link">
12+
<div class="download-text" id="download-text">Download</div>
13+
<div class="download-hover-spacer"></div>
14+
<div class="download-hover-part" id="download-hover-part">
15+
<span> from the App Store</span>
16+
<svg
17+
class="download-icon"
18+
version="1.1"
19+
xmlns="http://www.w3.org/2000/svg"
20+
xmlns:xlink="http://www.w3.org/1999/xlink"
21+
viewBox="0 0 15.0935 14.716"
22+
>
23+
<g>
24+
<rect height="14.716" opacity="0" width="15.0935" x="0" y="0" />
25+
<path
26+
d="M0.339226 14.3914C0.772622 14.815 1.37789 14.8398 1.85093 14.3721L11.3482 4.88455L13.3316 2.73963C13.7533 2.30037 13.7287 1.75194 13.3554 1.38319C12.9804 1.00116 12.417 0.959757 11.9805 1.38846L9.83377 3.37011L0.346257 12.8691C-0.13909 13.358-0.0888959 13.9686 0.339226 14.3914ZM12.606 7.33652L12.606 10.9805C12.606 11.5705 13.0812 12.0695 13.6599 12.0695C14.2341 12.0695 14.7296 11.5892 14.7296 10.9502L14.7234 1.15332C14.7234 0.472656 14.2732 0.0144564 13.5828 0.0144564L3.77614 0.0144564C3.12556 0.0144564 2.66482 0.501953 2.66482 1.07441C2.66482 1.64511 3.1656 2.11405 3.74586 2.11405L7.2234 2.11405L12.8404 1.91171Z"
27+
/>
28+
</g>
29+
</svg>
30+
</div>
31+
</div>
32+
</main>
33+
34+
<style>
35+
@font-face {
36+
font-family: "SFMono";
37+
src: url("/assets/SFMono-Medium.woff2") format("woff2");
38+
font-weight: 500;
39+
}
40+
41+
body {
42+
margin: 0;
43+
overflow: hidden;
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
-webkit-tap-highlight-color: transparent;
48+
width: 100vw;
49+
height: 100vh;
50+
background-color: #fff;
51+
}
52+
53+
.download-link {
54+
position: relative;
55+
cursor: pointer;
56+
display: flex;
57+
justify-content: center;
58+
align-items: center;
59+
width: 100vw;
60+
height: min(10vw, 10vh);
61+
/* background-color: rgba(245, 245, 245, 1); */
62+
}
63+
64+
.download-text,
65+
.download-hover-part {
66+
font-family: "SFMono", sans-serif;
67+
font-weight: 500;
68+
font-size: min(3vw, 3vh);
69+
}
70+
71+
.download-text {
72+
color: #000;
73+
}
74+
75+
.download-hover-spacer {
76+
width: 0px;
77+
height: 100%;
78+
transition: width 0.5s ease-in-out;
79+
}
80+
81+
.download-link:hover .download-hover-spacer {
82+
width: var(--download-hover-part-width, 0px);
83+
}
84+
85+
.download-hover-part {
86+
position: absolute;
87+
top: 50%;
88+
left: 50%;
89+
transform: translate(50%, -50%);
90+
display: flex;
91+
align-items: center;
92+
gap: 10px;
93+
opacity: 0%;
94+
color: rgba(70, 131, 255, 1);
95+
transition: all 0.5s ease-in-out;
96+
}
97+
98+
.download-hover-part span {
99+
white-space: pre;
100+
}
101+
102+
.download-link:hover .download-hover-part {
103+
left: calc(50% + var(--download-hover-x, 0px));
104+
transform: translate(-50%, -50%);
105+
opacity: 100%;
106+
}
107+
108+
.download-icon {
109+
width: min(2.2vw, 2.2vh);
110+
fill: rgba(70, 131, 255, 1);
111+
}
112+
</style>
113+
114+
<script>
115+
const downloadLink = document.getElementById("download-link");
116+
const downloadText = document.getElementById("download-text");
117+
const downloadHoverPart = document.getElementById("download-hover-part");
118+
119+
function updateElements() {
120+
document.documentElement.style.setProperty(
121+
"--download-hover-part-width",
122+
`${downloadHoverPart.clientWidth}px`
123+
);
124+
document.documentElement.style.setProperty(
125+
"--download-hover-x",
126+
`${downloadText.clientWidth / 2}px`
127+
);
128+
}
129+
130+
window.onresize = () => {
131+
updateElements();
132+
};
133+
134+
const resizeObserver = new ResizeObserver(() => {
135+
updateElements();
136+
});
137+
138+
resizeObserver.observe(downloadLink);
139+
resizeObserver.observe(downloadText);
140+
resizeObserver.observe(downloadHoverPart);
141+
142+
window.onload = () => {
143+
updateElements();
144+
};
145+
</script>
146+
</body>
147+
</html>
148+
1

0 commit comments

Comments
 (0)