danielmorrisey.com
madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madeydanny.uk
html
css
javascript
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 14px; /* keep expanded size by default */
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 flex: 0 0 auto; /* don't stretch; allow pushing */
129 min-width: 44px;
130 transition: all 0.2s ease;
131 }
132
133 .social-btn:hover {
134 background: var(--btn-bg);
135 border-color: var(--btn-border);
136 transform: translateY(-2px);
137 box-shadow: 0 4px 12px rgba(0,0,0,0.3);
138 }
139
140 .social-btn i {
141 width: 1.1em;
142 text-align: center;
143 font-size: 1.05em;
144 }
145
146 /* label hidden by default, revealed on hover */
147 .social-btn .label {
148 display: inline-block;
149 /* always visible (no hover reveal) */
150 opacity: 1;
151 transform: translateX(0);
152 margin-left: 8px;
153 white-space: nowrap;
154 color: inherit;
155 font-weight: 600;
156 font-size: 0.95rem;
157 max-width: 180px;
158 overflow: hidden;
159 vertical-align: middle;
160 }
161
162 /* hover styles removed - buttons are static */
163
164 /* brand color variables per button */
165 .btn-bluesky { --btn-bg: #0077ff; --btn-border: rgba(0,119,255,0.6); }
166 .btn-instagram { --btn-bg: #E1306C; --btn-border: rgba(225,48,108,0.5); }
167 .btn-tangled { --btn-bg: #000000; --btn-border: rgba(107,114,128,0.4); }
168 .btn-threads { --btn-bg: #000000; --btn-border: rgba(17,24,39,0.4); }
169 .btn-mastodon { --btn-bg: #6364FF; --btn-border: rgba(48,136,212,0.4); }
170
171 /* Screen-reader only text (keep for accessibility) */
172 .sr-only {
173 position: absolute !important;
174 height: 1px; width: 1px;
175 overflow: hidden;
176 clip: rect(1px, 1px, 1px, 1px);
177 white-space: nowrap;
178 }