Skip to content

Commit b855e67

Browse files
machineinteractivemachineinteractive
committed
added about overlay with toggle
added IBM mono plex font added about screen text added currently playing episode information to about screen added toggle about when clicking mini player title added track search and episode links wip added chevron down and info buttons to header to help user figure out how to toggle about wip wip update seek buttons wip wip wip wip wip
1 parent c5e9cd3 commit b855e67

7 files changed

Lines changed: 502 additions & 83 deletions

File tree

‎index.html‎

Lines changed: 218 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,12 @@
1010
<link rel="manifest" href="/manifest.json">
1111
<meta name="theme-color" content="#1a1a1a">
1212

13+
<link rel="preconnect" href="https://fonts.googleapis.com">
14+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15+
<link
16+
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
17+
rel="stylesheet">
18+
1319
<title>mfp;</title>
1420
<style>
1521
html,
@@ -19,14 +25,111 @@
1925
padding: 0;
2026
}
2127

22-
body {
23-
font-family: Arial, sans-serif;
28+
.ibm-plex-mono-thin {
29+
font-family: "IBM Plex Mono", monospace;
30+
font-weight: 100;
31+
font-style: normal;
32+
}
2433

25-
background-color: var(--c-black);
34+
.ibm-plex-mono-extralight {
35+
font-family: "IBM Plex Mono", monospace;
36+
font-weight: 200;
37+
font-style: normal;
38+
}
39+
40+
.ibm-plex-mono-light {
41+
font-family: "IBM Plex Mono", monospace;
42+
font-weight: 300;
43+
font-style: normal;
44+
}
45+
46+
.ibm-plex-mono-regular {
47+
font-family: "IBM Plex Mono", monospace;
48+
font-weight: 400;
49+
font-style: normal;
50+
}
51+
52+
.ibm-plex-mono-medium {
53+
font-family: "IBM Plex Mono", monospace;
54+
font-weight: 500;
55+
font-style: normal;
56+
}
57+
58+
.ibm-plex-mono-semibold {
59+
font-family: "IBM Plex Mono", monospace;
60+
font-weight: 600;
61+
font-style: normal;
62+
}
63+
64+
.ibm-plex-mono-bold {
65+
font-family: "IBM Plex Mono", monospace;
66+
font-weight: 700;
67+
font-style: normal;
68+
}
69+
70+
.ibm-plex-mono-thin-italic {
71+
font-family: "IBM Plex Mono", monospace;
72+
font-weight: 100;
73+
font-style: italic;
74+
}
75+
76+
.ibm-plex-mono-extralight-italic {
77+
font-family: "IBM Plex Mono", monospace;
78+
font-weight: 200;
79+
font-style: italic;
80+
}
81+
82+
.ibm-plex-mono-light-italic {
83+
font-family: "IBM Plex Mono", monospace;
84+
font-weight: 300;
85+
font-style: italic;
86+
}
87+
88+
.ibm-plex-mono-regular-italic {
89+
font-family: "IBM Plex Mono", monospace;
90+
font-weight: 400;
91+
font-style: italic;
92+
}
93+
94+
.ibm-plex-mono-medium-italic {
95+
font-family: "IBM Plex Mono", monospace;
96+
font-weight: 500;
97+
font-style: italic;
98+
}
99+
100+
.ibm-plex-mono-semibold-italic {
101+
font-family: "IBM Plex Mono", monospace;
102+
font-weight: 600;
103+
font-style: italic;
104+
}
105+
106+
.ibm-plex-mono-bold-italic {
107+
font-family: "IBM Plex Mono", monospace;
108+
font-weight: 700;
109+
font-style: italic;
110+
}
111+
112+
113+
body {
26114
--c-green: #1beb9e;
27115
--c-black: #1a1a1a;
116+
--c-black-mini-player: #2a2a2a;
117+
--h-header-height: 48px;
118+
119+
font-family: "IBM Plex Mono", monospace;
120+
font-weight: 400;
121+
font-style: normal;
122+
123+
background-color: var(--c-black);
124+
color: var(--c-green);
28125
}
29126

127+
h2 {
128+
font-family: "IBM Plex Mono", monospace;
129+
font-weight: 700;
130+
font-style: normal;
131+
text-align: left;
132+
}
30133

31134
@media (display-mode: standalone) {
32135
body {
@@ -39,43 +142,48 @@
39142
top: 0;
40143
left: 0;
41144
background-color: var(--c-black);
42-
color: var(--c-green);
43145
display: flex;
146+
flex-direction: row;
44147
width: 100vw;
45-
height: 48px;
46-
justify-content: center
148+
height: var(--h-header-height);
149+
justify-content: center;
150+
align-items: center;
151+
justify-content: space-evenly;
152+
}
153+
154+
header :first-child {
155+
margin-right: auto;
156+
padding-left: 2em;
157+
}
158+
159+
header :last-child {
160+
margin-left: auto;
161+
padding-right: 2em;
47162
}
48163

49-
.mini-player {
164+
#mini-player {
50165
position: fixed;
51166
bottom: 0;
52167
left: 0;
53168
width: 100vw;
54-
/* background-color: var(--c-black); */
55-
background-color: #4a4a4a;
56-
color: var(--c-green);
169+
background-color: var(--c-black-mini-player);
57170
display: flex;
58171
flex-direction: column;
59-
padding: 1em;
60-
padding-bottom: 2em;
172+
padding: 2em;
61173
margin: 0;
62174
box-sizing: border-box;
63175
}
64176

65-
/* .mini-player :first-child {
66-
flex-grow: 1;
67-
}
68-
69-
.mini-player :last-child {
70-
width: min-content;
71-
} */
72-
73-
.mini-player-controls {
177+
#mini-player-controls {
74178
display: flex;
75179
flex-direction: row;
76180
justify-content: space-evenly;
77181
}
78182

183+
#mini-player-duration {
184+
padding-bottom: 1em;
185+
}
186+
79187
.player-controls-disabled {
80188
filter: grayscale(1);
81189
opacity: 0.25;
@@ -85,37 +193,81 @@
85193
display: none;
86194
}
87195

88-
.playlist {
196+
.content-container {
89197
display: flex;
90-
padding-top: 48px;
91-
padding-bottom: 224px;
198+
padding-top: var(--h-header-height);
199+
padding-bottom: 238px;
92200
flex-direction: column;
93-
align-items: center;
94-
justify-content: center;
95201
}
96202

97-
.playlist a {
98-
display: block;
203+
.content-container h1,
204+
.content-container h2,
205+
.content-container h3,
206+
.content-container h4 {
207+
padding-left: 2em;
208+
padding-right: 2em;
209+
margin: 0;
210+
}
211+
212+
213+
.content-container p {
214+
padding-left: 2em;
215+
padding-right: 2em;
216+
margin: 0;
217+
}
218+
219+
#playlist a,
220+
#currently-playing-tracks a,
221+
#currently-playing-links a {
99222
box-sizing: border-box;
100223
color: var(--c-green);
101224
text-align: left;
102-
min-height: 56px;
103-
padding-left: 16px;
225+
min-height: 64px;
104226
width: 100vw;
227+
padding-left: 2em;
228+
padding-right: 2em;
105229
display: flex;
106230
align-items: center;
107231
text-decoration: none;
108232
}
233+
234+
/* #playlist a:hover,
235+
#currently-playing-tracks a:hover,
236+
#currently-playing-links a:hover {
237+
background-color: var(--c-green);
238+
color: var(--c-black);
239+
} */
240+
241+
#about p a {
242+
background-color: var(--c-green);
243+
color: var(--c-black);
244+
text-decoration: none;
245+
}
246+
247+
#about p {
248+
padding-bottom: 2em;
249+
padding-left: 2em;
250+
padding-right: 2em;
251+
line-height: 2;
252+
}
253+
254+
.normal-hyperlink a {
255+
background-color: var(--c-green);
256+
color: var(--c-black);
257+
text-decoration: none;
258+
}
109259
</style>
110260
</head>
111261

112262
<body>
113263

114264
<header>
115-
<p>mfp;</p>
265+
<img id="chevron-down" src="chevron_down.svg" style="opacity: 0" alt="Toggle About" width="24" height="24">
266+
<p class="ibm-plex-mono-semibold">mfp;</p>
267+
<img id="eye" src="eye.svg" alt="Toggle About" width="24" height="24">
116268
</header>
117269

118-
<div class="playlist">
270+
<div id="playlist" class="content-container">
119271

120272
<a data-duration="1:32:53" data-links="[&#34;https://datassette.net/&#34;]"
121273
data-tracks="[&#34;Loukeman - Gorgeous Stuff&#34;, &#34;Datassette - Crozon Umbrella 3&#34;, &#34;Zoviet France - Scree Shift&#34;, &#34;Nomadic Ambience - Open Window New York Cityscape (excerpt)&#34;, &#34;Corticyte - \u0394t&#34;, &#34;Agents Of The Culture Industry - The Long Road South&#34;, &#34;BBC Sound Effects - Furnaces, Fire, Foghorns&#34;, &#34;Annie Hogan - Depths Of Disturbances A&#34;, &#34;Mads Emil Nielsen - Installation 2&#34;, &#34;NCW - MP3+4&#34;, &#34;Linnley - Halocline&#34;, &#34;Mad Static - Crying For No Reason (Ovatow Version) (slowed + rained)&#34;, &#34;Stephane Picq - Chanis Eyes (adlib, OPL2) (slowed + verbed)&#34;, &#34;Francis Monkman &amp; Malcolm Ironton - New Dawn (Datashat luxury edit)&#34;, &#34;Datassette - Kingsland Road, Trains, Birds&#34;, &#34;Purelink - We Should Keep Going&#34;, &#34;Datassette - Stair (2:22:22) (excerpt)&#34;, &#34;Datassette - Chicago Window 2&#34;, &#34;Lucinda Chua - I Left The Earth&#34;]" href="https://datashat.net/music_for_programming_75-datassette.mp3">Episode 75: Datassette (1:32:53)</a>
@@ -344,13 +496,43 @@
344496

345497
</div>
346498

499+
<div id="about" class="content-container" style="display: none;">
500+
<h2 style="padding-bottom: 1em;">About</h2>
501+
502+
<p>
503+
mfp; is a PWA remix of
504+
<a href="https://musicforprogramming.net" target="_blank" rel="noopener noreferrer">
505+
musicforprogramming.net
506+
</a>.
507+
All the episode data comes from the <b>musicforprogramming.net</b> RSS feed. Thank you <b>Datassette</b> for all
508+
the
509+
years of amazing music.
510+
</p>
511+
512+
<p>This app is not affiliated with <b>musicforprogramming.net</b>. Please support <a
513+
href="https://musicforprogramming.net/credits" target="_blank" rel="noopener noreferrer">Datassette</a> by
514+
buying his
515+
music on Bandcamp or subscribing to his Patreon.
516+
</p>
517+
518+
<h2 style="padding-bottom: 1em;">Currently Playing</h2>
519+
<h3 id="currently-playing-title" style="padding-bottom: 1em;"></h3>
520+
<div id="currently-playing-tracks" class="ibm-plex-mono-light-italic">
521+
<p>----------</p>
522+
<p>----------</p>
523+
</div>
524+
<div id="currently-playing-links" class="ibm-plex-mono-semibold-italic">
525+
<p>----------</p>
526+
</div>
527+
528+
</div>
347529

348-
<div class="mini-player">
349-
<div class="mini-player-info">
350-
<p id="mini-player-title">---------</p>
530+
<div id="mini-player">
531+
<div id="mini-player-info">
532+
<p id="mini-player-title" class="ibm-plex-mono-semibold">---------</p>
351533
<p id="mini-player-duration">00:00:00</p>
352534
</div>
353-
<div class="mini-player-controls">
535+
<div id="mini-player-controls">
354536
<img id="button-seek-back" class="player-controls-disabled" src="seek_back.svg" alt="Seek back 30s" width="56"
355537
height="56">
356538
<img id="button-play" class="player-controls-disabled" src="play.svg" alt="Play" width="56" height="56">

‎public/chevron_down.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/eye.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎public/seek_back.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎public/seek_forward.svg‎

Lines changed: 1 addition & 1 deletion
Loading

0 commit comments

Comments
 (0)