Skip to content

Commit b3000dd

Browse files
YoshiroMaximusYoshiroMaximus
committed
updated for mobile, and fixed some bugs
do NOT try ultracode
1 parent 39f20bd commit b3000dd

14 files changed

Lines changed: 200 additions & 74 deletions

‎break.html‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6+
<meta name="apple-mobile-web-app-capable" content="yes">
7+
<meta name="mobile-web-app-capable" content="yes">
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9+
<meta name="apple-mobile-web-app-title" content="Break">
10+
<meta name="theme-color" content="#f5f4f0" media="(prefers-color-scheme: light)">
11+
<meta name="theme-color" content="#111110" media="(prefers-color-scheme: dark)">
612
<title>take a break</title>
713
<link rel="icon" type="image/x-icon" href="/favistuff/favicon.ico">
814
<link rel="icon" type="image/png" sizes="16x16" href="/favistuff/favicon-16x16.png">
@@ -48,8 +54,8 @@
4854
/* ── Back link ── */
4955
.back-link {
5056
position: fixed;
51-
top: 1.5rem;
52-
left: 1.5rem;
57+
top: max(1.5rem, env(safe-area-inset-top));
58+
left: max(1.5rem, env(safe-area-inset-left));
5359
font-family: 'DM Mono', monospace;
5460
font-size: 0.7rem;
5561
color: var(--line);
@@ -64,8 +70,8 @@
6470
/* ── Theme toggle ── */
6571
.theme-toggle {
6672
position: fixed;
67-
top: 1.5rem;
68-
right: 1.5rem;
73+
top: max(1.5rem, env(safe-area-inset-top));
74+
right: max(1.5rem, env(safe-area-inset-right));
6975
display: flex;
7076
align-items: center;
7177
gap: 0.1rem;

‎favistuff/site.webmanifest‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,16 @@
1-
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
1+
{
2+
"name": "Yoshiro",
3+
"short_name": "Yoshiro",
4+
"id": "/",
5+
"start_url": "/",
6+
"scope": "/",
7+
"display": "standalone",
8+
"orientation": "any",
9+
"background_color": "#f5f4f0",
10+
"theme_color": "#f5f4f0",
11+
"icons": [
12+
{ "src": "/favistuff/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
13+
{ "src": "/favistuff/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
14+
{ "src": "/favistuff/apple-touch-icon.png", "sizes": "180x180", "type": "image/png" }
15+
]
16+
}

‎index.html‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6+
<meta name="apple-mobile-web-app-capable" content="yes">
7+
<meta name="mobile-web-app-capable" content="yes">
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9+
<meta name="apple-mobile-web-app-title" content="Yoshiro">
10+
<meta name="theme-color" content="#f5f4f0" media="(prefers-color-scheme: light)">
11+
<meta name="theme-color" content="#111110" media="(prefers-color-scheme: dark)">
612
<title>Yoshiro</title>
713
<link rel="icon" type="image/x-icon" href="/favistuff/favicon.ico">
814
<link rel="icon" type="image/png" sizes="16x16" href="/favistuff/favicon-16x16.png">
@@ -40,8 +46,8 @@
4046
/* ── Theme toggle ── */
4147
.theme-toggle {
4248
position: fixed;
43-
top: 1.5rem;
44-
right: 1.5rem;
49+
top: max(1.5rem, env(safe-area-inset-top));
50+
right: max(1.5rem, env(safe-area-inset-right));
4551
display: flex;
4652
align-items: center;
4753
gap: 0.1rem;
@@ -74,7 +80,7 @@
7480
flex-direction: column;
7581
align-items: center;
7682
justify-content: center;
77-
padding: 2rem;
83+
padding: max(2rem, env(safe-area-inset-top)) max(2rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(2rem, env(safe-area-inset-left));
7884
}
7985

8086
.container {

‎portfolio.html‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6+
<meta name="apple-mobile-web-app-capable" content="yes">
7+
<meta name="mobile-web-app-capable" content="yes">
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9+
<meta name="apple-mobile-web-app-title" content="Portfolio">
10+
<meta name="theme-color" content="#f5f4f0" media="(prefers-color-scheme: light)">
11+
<meta name="theme-color" content="#111110" media="(prefers-color-scheme: dark)">
612
<title>Yoshiro</title>
713
<link rel="icon" type="image/x-icon" href="/favistuff/favicon.ico">
814
<link rel="icon" type="image/png" sizes="16x16" href="/favistuff/favicon-16x16.png">
@@ -40,8 +46,8 @@
4046
/* ── Theme toggle ── */
4147
.theme-toggle {
4248
position: fixed;
43-
top: 1.5rem;
44-
right: 1.5rem;
49+
top: max(1.5rem, env(safe-area-inset-top));
50+
right: max(1.5rem, env(safe-area-inset-right));
4551
display: flex;
4652
align-items: center;
4753
gap: 0.1rem;
@@ -67,8 +73,8 @@
6773
/* ── Back link ── */
6874
.back-link {
6975
position: fixed;
70-
top: 1.5rem;
71-
left: 1.5rem;
76+
top: max(1.5rem, env(safe-area-inset-top));
77+
left: max(1.5rem, env(safe-area-inset-left));
7278
font-family: 'DM Mono', monospace;
7379
font-size: 0.7rem;
7480
color: var(--line);
@@ -94,7 +100,7 @@
94100
.page {
95101
max-width: 640px;
96102
margin: 0 auto;
97-
padding: 0 2rem;
103+
padding: 0 max(2rem, env(safe-area-inset-right)) 0 max(2rem, env(safe-area-inset-left));
98104
}
99105

100106
section {
@@ -112,7 +118,7 @@
112118

113119
/* ── Header ── */
114120
header {
115-
padding: 5rem 0 4rem;
121+
padding: max(5rem, calc(env(safe-area-inset-top) + 3.5rem)) 0 4rem;
116122
border-bottom: 1px solid var(--line);
117123
opacity: 0;
118124
animation: fadeUp 0.6s ease 0.1s forwards;
@@ -506,7 +512,7 @@
506512

507513
/* ── Footer ── */
508514
footer {
509-
padding: 3rem 0;
515+
padding: 3rem 0 max(3rem, env(safe-area-inset-bottom));
510516
opacity: 0;
511517
animation: fadeUp 0.6s ease 0.2s forwards;
512518
}

‎tools.html‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6+
<meta name="apple-mobile-web-app-capable" content="yes">
7+
<meta name="mobile-web-app-capable" content="yes">
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9+
<meta name="apple-mobile-web-app-title" content="Tools">
10+
<meta name="theme-color" content="#f5f4f0" media="(prefers-color-scheme: light)">
11+
<meta name="theme-color" content="#111110" media="(prefers-color-scheme: dark)">
612
<title>Tools — Yoshiro</title>
713
<link rel="icon" type="image/x-icon" href="/favistuff/favicon.ico">
814
<link rel="icon" type="image/png" sizes="16x16" href="/favistuff/favicon-16x16.png">
@@ -40,8 +46,8 @@
4046
/* ── Theme toggle ── */
4147
.theme-toggle {
4248
position: fixed;
43-
top: 1.5rem;
44-
right: 1.5rem;
49+
top: max(1.5rem, env(safe-area-inset-top));
50+
right: max(1.5rem, env(safe-area-inset-right));
4551
display: flex;
4652
align-items: center;
4753
gap: 0.1rem;
@@ -67,8 +73,8 @@
6773
/* ── Back link ── */
6874
.back-link {
6975
position: fixed;
70-
top: 1.5rem;
71-
left: 1.5rem;
76+
top: max(1.5rem, env(safe-area-inset-top));
77+
left: max(1.5rem, env(safe-area-inset-left));
7278
font-family: 'DM Mono', monospace;
7379
font-size: 0.7rem;
7480
color: var(--line);
@@ -112,7 +118,7 @@
112118

113119
/* ── Header ── */
114120
header {
115-
padding: 5rem 0 4rem;
121+
padding: calc(env(safe-area-inset-top) + 5rem) 0 4rem;
116122
border-bottom: 1px solid var(--line);
117123
opacity: 0;
118124
animation: fadeUp 0.6s ease 0.1s forwards;
@@ -244,7 +250,7 @@
244250

245251
/* ── Footer ── */
246252
footer {
247-
padding: 3rem 0;
253+
padding: 3rem 0 calc(3rem + env(safe-area-inset-bottom));
248254
opacity: 0;
249255
animation: fadeUp 0.6s ease 0.2s forwards;
250256
}

‎tools/assignments.html‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6+
<meta name="apple-mobile-web-app-capable" content="yes">
7+
<meta name="mobile-web-app-capable" content="yes">
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9+
<meta name="apple-mobile-web-app-title" content="Assignments">
10+
<meta name="theme-color" content="#f5f4f0" media="(prefers-color-scheme: light)">
11+
<meta name="theme-color" content="#111110" media="(prefers-color-scheme: dark)">
612
<title>Assignments — Yoshiro</title>
713
<link rel="icon" type="image/x-icon" href="/favistuff/favicon.ico">
814
<link rel="icon" type="image/png" sizes="16x16" href="/favistuff/favicon-16x16.png">
@@ -52,7 +58,7 @@
5258
}
5359

5460
.theme-toggle {
55-
position: fixed; top: 1.5rem; right: 1.5rem;
61+
position: fixed; top: max(1.5rem, env(safe-area-inset-top)); right: max(1.5rem, env(safe-area-inset-right));
5662
display: flex; gap: .1rem; z-index: 300;
5763
}
5864
.theme-btn {
@@ -64,17 +70,17 @@
6470
.theme-btn.active { color: var(--text); }
6571

6672
.back-link {
67-
position: fixed; top: 1.5rem; left: 1.5rem;
73+
position: fixed; top: max(1.5rem, env(safe-area-inset-top)); left: max(1.5rem, env(safe-area-inset-left));
6874
font-family: 'DM Mono', monospace; font-size: .7rem;
6975
color: var(--line); text-decoration: none; letter-spacing: .06em;
7076
transition: color .2s; z-index: 300;
7177
}
7278
.back-link:hover { color: var(--muted); }
7379

74-
.page { max-width: 760px; margin: 0 auto; padding: 0 2rem 4rem; }
80+
.page { max-width: 760px; margin: 0 auto; padding: 0 max(2rem, env(safe-area-inset-right)) 4rem max(2rem, env(safe-area-inset-left)); }
7581

7682
header {
77-
padding: 5rem 0 2.75rem;
83+
padding: max(5rem, calc(3rem + env(safe-area-inset-top))) 0 2.75rem;
7884
border-bottom: 1px solid var(--line);
7985
opacity: 0; animation: fadeUp .6s ease .1s forwards;
8086
}
@@ -406,7 +412,7 @@
406412

407413
/* ── Sent-to-pomodoro flash ── */
408414
.toast {
409-
position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(120%);
415+
position: fixed; bottom: max(2rem, calc(1rem + env(safe-area-inset-bottom))); left: 50%; transform: translateX(-50%) translateY(120%);
410416
background: var(--text); color: var(--bg);
411417
padding: .7rem 1.2rem;
412418
border-radius: 4px;
@@ -431,8 +437,8 @@
431437
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
432438

433439
@media (max-width: 520px) {
434-
.page { padding: 0 1.25rem 3rem; }
435-
header { padding: 4rem 0 2rem; }
440+
.page { padding: 0 1.25rem max(3rem, calc(1rem + env(safe-area-inset-bottom))); }
441+
header { padding: max(4rem, calc(2rem + env(safe-area-inset-top))) 0 2rem; }
436442
section { padding: 2rem 0; }
437443
.item { grid-template-columns: auto 1fr; }
438444
.item-actions { grid-column: 2 / -1; justify-content: flex-end; }

‎tools/bell-schedule.html‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,15 @@
22
<html lang="en" data-theme="dark">
33
<head>
44
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
6+
<meta name="apple-mobile-web-app-capable" content="yes">
7+
<meta name="mobile-web-app-capable" content="yes">
8+
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
9+
<meta name="apple-mobile-web-app-title" content="Bell">
10+
<meta name="theme-color" content="#f4f4f6" media="(prefers-color-scheme: light)">
11+
<meta name="theme-color" content="#0a0a0a" media="(prefers-color-scheme: dark)">
12+
<link rel="apple-touch-icon" href="/favistuff/apple-touch-icon.png">
13+
<link rel="manifest" href="/favistuff/site.webmanifest">
614
<title>GWHS Bell Schedule</title>
715
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
816
<style>
@@ -43,12 +51,18 @@
4351
}
4452

4553
header{
46-
background:var(--red);padding:0 18px;
54+
background:var(--red);
55+
padding:env(safe-area-inset-top) max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
4756
display:flex;align-items:center;justify-content:space-between;
48-
height:52px;position:sticky;top:0;z-index:50;
57+
height:calc(52px + env(safe-area-inset-top));position:sticky;top:0;z-index:50;
4958
box-shadow:0 2px 16px rgba(200,16,46,.35);
5059
}
5160
header h1{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:3px;color:white;}
61+
.back-link{
62+
font-family:'DM Mono',monospace;font-size:12px;letter-spacing:1px;
63+
color:rgba(255,255,255,.85);text-decoration:none;transition:color .2s;flex-shrink:0;
64+
}
65+
.back-link:hover{color:white;}
5266
.hright{display:flex;align-items:center;gap:10px;}
5367
#live-clock{font-family:'DM Mono',monospace;font-size:13px;color:rgba(255,255,255,.9);letter-spacing:2px;}
5468
.theme-btn{
@@ -199,7 +213,7 @@
199213
.nick-item input:focus{border-color:var(--red);}
200214
.nick-item input::placeholder{color:var(--muted);opacity:.5;}
201215

202-
footer{text-align:center;padding:26px;color:var(--muted);font-size:11px;letter-spacing:1px;border-top:1px solid var(--border);}
216+
footer{text-align:center;padding:26px 26px max(26px,calc(26px + env(safe-area-inset-bottom)));color:var(--muted);font-size:11px;letter-spacing:1px;border-top:1px solid var(--border);}
203217

204218
@media(max-width:600px){
205219
.cp{font-size:34px;}.ct{font-size:46px;}
@@ -213,6 +227,7 @@
213227
<body>
214228

215229
<header>
230+
<a class="back-link" href="/tools.html">← tools</a>
216231
<h1>GWHS · Bell Schedule</h1>
217232
<div class="hright">
218233
<div id="live-clock">--:--:-- --</div>

0 commit comments

Comments
 (0)