madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madebydanny.uk
html
css
javascript
added stuff
+249
-185
+1
.well-known/atproto-did
+1
.well-known/atproto-did
···
1
+
did:plc:l37td5yhxl2irrzrgvei4qay
-26
.well-known/did.json
-26
.well-known/did.json
···
1
-
{
2
-
"@context": [
3
-
"https://www.w3.org/ns/did/v1",
4
-
"https://w3id.org/security/multikey/v1",
5
-
"https://w3id.org/security/suites/secp256k1-2019/v1"
6
-
],
7
-
"id": "did:web:madebyda",
8
-
"alsoKnownAs": [
9
-
"at://danielweb.pds.madebydanny.uk"
10
-
],
11
-
"verificationMethod": [
12
-
{
13
-
"id": "did:web:madebyda#atproto",
14
-
"type": "Multikey",
15
-
"controller": "did:web:madebydanny.uk",
16
-
"publicKeyMultibase": "zQ3shvTiQkygYvBcUGPxBF2SuZ7VURddsFr6exLHfZg8c3EWV"
17
-
}
18
-
],
19
-
"service": [
20
-
{
21
-
"id": "#atproto_pds",
22
-
"type": "AtprotoPersonalDataServer",
23
-
"serviceEndpoint": "https://pds.madebydanny.uk"
24
-
}
25
-
]
26
-
}
+190
css/index.css
+190
css/index.css
···
1
+
/* --- THEME VARIABLES --- */
2
+
:root {
3
+
--bsky-card-bg: #4a2b32;
4
+
--bsky-post-bg: #1e1e1e;
5
+
--bsky-text-color: #ffffff;
6
+
--bsky-subtext-color: #dcbaba;
7
+
--bsky-link-color: #ffcccc;
8
+
--bsky-border: rgba(255,255,255,0.1);
9
+
}
10
+
11
+
body {
12
+
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
13
+
background-color: #121212;
14
+
color: white;
15
+
padding: 20px;
16
+
line-height: 1.5;
17
+
margin: auto;
18
+
text-align: center;
19
+
max-width: 600px;
20
+
}
21
+
22
+
/* --- CARD STYLING --- */
23
+
#music-status-card, #latest-post-card {
24
+
background-color: var(--bsky-card-bg);
25
+
color: var(--bsky-text-color);
26
+
border-radius: 12px;
27
+
padding: 16px;
28
+
margin: 20px auto;
29
+
display: none;
30
+
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
31
+
max-width: 500px;
32
+
border: 1px solid var(--bsky-border);
33
+
text-align: center;
34
+
}
35
+
36
+
.bsky-header {
37
+
font-size: 0.75rem;
38
+
text-transform: uppercase;
39
+
letter-spacing: 0.05em;
40
+
color: var(--bsky-subtext-color);
41
+
margin-bottom: 12px;
42
+
display: flex;
43
+
justify-content: center;
44
+
align-items: center;
45
+
gap: 8px;
46
+
}
47
+
48
+
.bsky-header a {
49
+
color: var(--bsky-subtext-color);
50
+
text-decoration: none;
51
+
}
52
+
53
+
.bsky-content-body {
54
+
margin-bottom: 12px;
55
+
word-wrap: break-word;
56
+
text-align: center;
57
+
}
58
+
59
+
/* --- POST IMAGE STYLING --- */
60
+
.post-image {
61
+
width: 100%;
62
+
border-radius: 8px;
63
+
margin: 10px auto 0 auto;
64
+
border: 1px solid var(--bsky-border);
65
+
display: block;
66
+
}
67
+
68
+
.bsky-trackname {
69
+
font-weight: 700;
70
+
font-size: 1.1rem;
71
+
display: block;
72
+
color: var(--bsky-text-color);
73
+
text-decoration: none;
74
+
margin-bottom: 2px;
75
+
}
76
+
77
+
.bsky-artist {
78
+
color: var(--bsky-subtext-color);
79
+
font-size: 0.95rem;
80
+
}
81
+
82
+
.bsky-footer {
83
+
border-top: 1px solid var(--bsky-border);
84
+
padding-top: 10px;
85
+
margin-top: 12px;
86
+
font-size: 0.8rem;
87
+
color: var(--bsky-subtext-color);
88
+
display: flex;
89
+
align-items: center;
90
+
justify-content: center;
91
+
gap: 8px;
92
+
}
93
+
94
+
a { color: var(--bsky-link-color); }
95
+
96
+
.error-msg {
97
+
color: #ff6b6b;
98
+
font-size: 0.9rem;
99
+
}
100
+
101
+
hr {
102
+
border: none;
103
+
border-top: 1px solid var(--bsky-border);
104
+
margin: 20px 0;
105
+
}
106
+
107
+
/* Social button row */
108
+
.social-row {
109
+
display: flex;
110
+
gap: 10px;
111
+
flex-wrap: wrap;
112
+
margin: 12px 0 20px 0;
113
+
justify-content: center;
114
+
}
115
+
116
+
.social-btn {
117
+
display: inline-flex;
118
+
align-items: center;
119
+
justify-content: center;
120
+
gap: 8px;
121
+
padding: 8px;
122
+
border-radius: 999px;
123
+
background: rgba(255,255,255,0.04);
124
+
color: var(--bsky-text-color);
125
+
text-decoration: none;
126
+
border: 1px solid var(--bsky-border);
127
+
font-size: 0.95rem;
128
+
transition: padding 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
129
+
flex: 0 0 auto; /* don't stretch; allow pushing */
130
+
min-width: 44px;
131
+
}
132
+
133
+
.social-btn i {
134
+
width: 1.1em;
135
+
text-align: center;
136
+
font-size: 1.05em;
137
+
}
138
+
139
+
/* label hidden by default, revealed on hover */
140
+
.social-btn .label {
141
+
display: inline-block;
142
+
opacity: 0;
143
+
transform: translateX(-6px);
144
+
transition: opacity 160ms ease, transform 160ms ease, max-width 180ms ease, margin-left 160ms ease;
145
+
margin-left: 0;
146
+
white-space: nowrap;
147
+
pointer-events: none;
148
+
color: inherit;
149
+
font-weight: 600;
150
+
font-size: 0.95rem;
151
+
max-width: 0;
152
+
overflow: hidden;
153
+
vertical-align: middle;
154
+
}
155
+
156
+
/* expand on hover: show label and add brand color */
157
+
.social-btn:hover {
158
+
padding: 8px 14px;
159
+
transform: translateZ(0);
160
+
}
161
+
162
+
.social-btn:hover .label {
163
+
opacity: 1;
164
+
transform: translateX(0);
165
+
margin-left: 8px;
166
+
max-width: 180px;
167
+
}
168
+
169
+
/* brand color variables per button */
170
+
.btn-bluesky { --btn-bg: #0077ff; --btn-border: rgba(0,119,255,0.6); }
171
+
.btn-instagram { --btn-bg: #E1306C; --btn-border: rgba(225,48,108,0.5); }
172
+
.btn-tangled { --btn-bg: #000000; --btn-border: rgba(107,114,128,0.4); }
173
+
.btn-threads { --btn-bg: #000000; --btn-border: rgba(17,24,39,0.4); }
174
+
.btn-mastodon { --btn-bg: #6364FF; --btn-border: rgba(48,136,212,0.4); }
175
+
176
+
/* apply brand color on hover */
177
+
.btn-bluesky:hover { background: var(--btn-bg); border-color: var(--btn-border); color: #fff; }
178
+
.btn-instagram:hover { background: var(--btn-bg); border-color: var(--btn-border); color: #fff; }
179
+
.btn-tangled:hover { background: var(--btn-bg); border-color: var(--btn-border); color: #fff; }
180
+
.btn-threads:hover { background: var(--btn-bg); border-color: var(--btn-border); color: #fff; }
181
+
.btn-mastodon:hover { background: var(--btn-bg); border-color: var(--btn-border); color: #fff; }
182
+
183
+
/* Screen-reader only text (keep for accessibility) */
184
+
.sr-only {
185
+
position: absolute !important;
186
+
height: 1px; width: 1px;
187
+
overflow: hidden;
188
+
clip: rect(1px, 1px, 1px, 1px);
189
+
white-space: nowrap;
190
+
}
-49
css/style.css
-49
css/style.css
···
1
-
/* Base Styles */
2
-
body {
3
-
background-color: #1a1a1a;
4
-
color: #ffffff;
5
-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
6
-
font-size: 16px;
7
-
margin: 0;
8
-
padding: 40px 20px;
9
-
line-height: 1.6;
10
-
max-width: 500px;
11
-
margin: auto;
12
-
}
13
-
14
-
/* Headings */
15
-
h1 {
16
-
font-size: 28px;
17
-
margin: 0 0 20px 0;
18
-
color: #ffffff;
19
-
}
20
-
21
-
/* Paragraphs */
22
-
p {
23
-
margin: 10px 0;
24
-
color: #ffffff;
25
-
}
26
-
27
-
/* Emphasis */
28
-
i {
29
-
color: #f4871b;
30
-
}
31
-
32
-
a {
33
-
color: #ff9933;
34
-
text-decoration: none;
35
-
}
36
-
b {
37
-
font-weight: bold;
38
-
color: #ffffff;
39
-
}
40
-
a:hover {
41
-
text-decoration: underline;
42
-
color: white;
43
-
}
44
-
hr {
45
-
border: 0;
46
-
height: 1px;
47
-
background: #333333;
48
-
margin: 20px 0;
49
-
}
+32
-110
index.html
+32
-110
index.html
···
3
3
<head>
4
4
<meta charset="UTF-8">
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
-
<title>madebydanny.uk</title>
7
-
<link rel="icon" id="favicon" href="https://imrs.madebydanny.uk/?url=https://cloudflareisawesome.madebydanny.uk/madebydanny.uk/seo/favicon.webp">
6
+
<title>Daniel Morrisey - nadebydanny.uk</title>
7
+
<script src="https://kit.fontawesome.com/0ca27f8db1.js" crossorigin="anonymous"></script> <link rel="icon" id="favicon" href="https://imrs.madebydanny.uk/?url=https://cloudflareisawesome.madebydanny.uk/madebydanny.uk/seo/favicon.webp">
8
8
<meta name="description" id="meta-description" content="Posting everything into the endless jet stream of posts">
9
9
<meta property="og:title" content="madebydanny.uk">
10
10
<meta property="og:description" id="og-description" content="Posting everything into the endless jet stream of posts">
11
11
<meta property="og:type" content="website">
12
12
<meta property="og:url" content="https://madebydanny.uk/">
13
13
<meta property="og:image" id="og-image" content="/media/ogimg.png">
14
-
<style>
15
-
/* --- THEME VARIABLES --- */
16
-
:root {
17
-
--bsky-card-bg: #4a2b32;
18
-
--bsky-post-bg: #1e1e1e;
19
-
--bsky-text-color: #ffffff;
20
-
--bsky-subtext-color: #dcbaba;
21
-
--bsky-link-color: #ffcccc;
22
-
--bsky-border: rgba(255,255,255,0.1);
23
-
}
24
-
25
-
body {
26
-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
27
-
background-color: #121212;
28
-
color: white;
29
-
padding: 20px;
30
-
line-height: 1.5;
31
-
}
32
-
33
-
/* --- CARD STYLING --- */
34
-
#music-status-card, #latest-post-card {
35
-
background-color: var(--bsky-card-bg);
36
-
color: var(--bsky-text-color);
37
-
border-radius: 12px;
38
-
padding: 16px;
39
-
margin: 20px 0;
40
-
display: none;
41
-
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
42
-
max-width: 500px;
43
-
border: 1px solid var(--bsky-border);
44
-
}
45
-
46
-
.bsky-header {
47
-
font-size: 0.75rem;
48
-
text-transform: uppercase;
49
-
letter-spacing: 0.05em;
50
-
color: var(--bsky-subtext-color);
51
-
margin-bottom: 12px;
52
-
display: flex;
53
-
justify-content: space-between;
54
-
align-items: center;
55
-
}
56
-
57
-
.bsky-header a {
58
-
color: var(--bsky-subtext-color);
59
-
text-decoration: none;
60
-
}
61
-
62
-
.bsky-content-body {
63
-
margin-bottom: 12px;
64
-
word-wrap: break-word;
65
-
}
66
-
67
-
/* --- POST IMAGE STYLING --- */
68
-
.post-image {
69
-
width: 100%;
70
-
border-radius: 8px;
71
-
margin-top: 10px;
72
-
border: 1px solid var(--bsky-border);
73
-
display: block;
74
-
}
75
-
76
-
.bsky-trackname {
77
-
font-weight: 700;
78
-
font-size: 1.1rem;
79
-
display: block;
80
-
color: var(--bsky-text-color);
81
-
text-decoration: none;
82
-
margin-bottom: 2px;
83
-
}
84
-
85
-
.bsky-artist {
86
-
color: var(--bsky-subtext-color);
87
-
font-size: 0.95rem;
88
-
}
89
-
90
-
.bsky-footer {
91
-
border-top: 1px solid var(--bsky-border);
92
-
padding-top: 10px;
93
-
margin-top: 12px;
94
-
font-size: 0.8rem;
95
-
color: var(--bsky-subtext-color);
96
-
display: flex;
97
-
align-items: center;
98
-
}
99
-
100
-
a { color: var(--bsky-link-color); }
101
-
102
-
.error-msg {
103
-
color: #ff6b6b;
104
-
font-size: 0.9rem;
105
-
}
106
-
107
-
hr {
108
-
border: none;
109
-
border-top: 1px solid var(--bsky-border);
110
-
margin: 20px 0;
111
-
}
112
-
</style>
14
+
<link rel="stylesheet" href="/css/index.css">
113
15
</head>
114
16
<body>
115
17
<h1>Hi, I'm Daniel Morrisey</h1>
116
-
<p>I like to listen to Music <i>(Mainly Tate McRae and Taylor Swift)</i>, and post on Bluesky.</p>
18
+
<p>I like to listen to Music <i>(Mainly Tate McRae and Taylor Swift)</i>, and post on Bluesky</p>
19
+
<p>I'm also on <a>Threads</a> and <a>Mastodon</a>, but active on <a>Bluesky</a>, becuase it's the best social media platform</p>
117
20
<div id="music-status-card">
118
21
<div class="bsky-header">
119
22
<span>Recently played</span>
···
138
41
</div>
139
42
<hr>
140
43
<p><b>Social Links:</b></p>
141
-
<ul>
142
-
<li><a href="/followonbsky.html?did=madebydanny.uk">Bluesky</a></li>
143
-
<li><a href="https://instagram.com/madebydanny.uk" target="_blank">Instagram</a></li>
144
-
<li><a href="https://tangled.org/madebydannyuk" target="_blank">Tangled</a></li>
145
-
<li><a href="https://threads.net/@madebydanny.uk" target="_blank">Threads</a></li>
146
-
<li><a href="https://mastodon.social/@danielmorrisey" target="_blank">Mastodon</a></li>
147
-
</ul>
44
+
<div class="social-row" role="list">
45
+
<a class="social-btn btn-bluesky" role="listitem" href="/followonbsky.html?did=did:plc:l37td5yhxl2irrzrgvei4qay" aria-label="Bluesky">
46
+
<i class="fa-brands fa-bluesky"></i>
47
+
<span class="label">Bluesky</span>
48
+
</a>
49
+
50
+
<a class="social-btn btn-instagram" role="listitem" href="https://instagram.com/madebydanny.uk" target="_blank" rel="noopener noreferrer" aria-label="Instagram">
51
+
<i class="fa-brands fa-instagram"></i>
52
+
<span class="label">Instagram</span>
53
+
</a>
54
+
55
+
<a class="social-btn btn-tangled" role="listitem" href="https://tangled.org/madebydannyuk" target="_blank" rel="noopener noreferrer" aria-label="Tangled">
56
+
<i class="fa-brands fa-git-alt"></i>
57
+
<span class="label">Tangled</span>
58
+
</a>
59
+
60
+
<a class="social-btn btn-threads" role="listitem" href="https://threads.net/@madebydanny.uk" target="_blank" rel="noopener noreferrer" aria-label="Threads">
61
+
<i class="fa-brands fa-threads"></i>
62
+
<span class="label">Threads</span>
63
+
</a>
64
+
65
+
<a class="social-btn btn-mastodon" role="listitem" href="https://mastodon.social/@danielmorrisey" target="_blank" rel="noopener noreferrer" aria-label="Mastodon">
66
+
<i class="fa-brands fa-mastodon"></i>
67
+
<span class="label">Mastodon</span>
68
+
</a>
69
+
</div>
148
70
<hr>
149
-
<p>© 2024-2026 Daniel Morrisey by <a href="/followonbsky.html?did=madebydanny.uk">@madebydanny.uk</a></p>
71
+
<p>© 2024-2026 Daniel Morrisey by <a href="/followonbsky.html?did=did:plc:l37td5yhxl2irrzrgvei4qay">@madebydanny.uk</a></p>
150
72
151
73
<script>
152
74
const BLUESKY_DID = 'did:plc:4qjpcixqrc3b2qmbce76sm7k';
+26
lexicons/uk.madebydanny.my.accounts.json
+26
lexicons/uk.madebydanny.my.accounts.json
···
1
+
{
2
+
"lexicon": 1,
3
+
"id": "uk.madebydanny.my.accounts",
4
+
"defs": {
5
+
"main": {
6
+
"type": "record",
7
+
"description": "A list of associated AT Protocol accounts owned by the user.",
8
+
"record": {
9
+
"type": "object",
10
+
"required": ["accounts"],
11
+
"properties": {
12
+
"accounts": {
13
+
"type": "array",
14
+
"items": { "type": "string", "format": "did" },
15
+
"description": "A list of DIDs belonging to the same user."
16
+
},
17
+
"description": {
18
+
"type": "string",
19
+
"maxGraphemes": 300,
20
+
"description": "A brief explanation of these account links."
21
+
}
22
+
}
23
+
}
24
+
}
25
+
}
26
+
}
media/ogimg.png
media/ogimg.png
This is a binary file and will not be displayed.