Skip to content

Commit 0929503

Browse files
jkyberneeesjkyberneees
committed
fix: extract inline styles to style.css to comply with default-src 'self' CSP
1 parent 24a093f commit 0929503

3 files changed

Lines changed: 192 additions & 285 deletions

File tree

‎public/404.html‎

Lines changed: 4 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -4,140 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>404 — Not Found</title>
7-
<style>
8-
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
9-
10-
:root {
11-
--bg: #0d1117;
12-
--surface: #161b22;
13-
--border: #30363d;
14-
--text: #e6edf3;
15-
--muted: #7d8590;
16-
--red: #f85149;
17-
--cyan: #79c0ff;
18-
--mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
19-
}
20-
21-
html, body { height: 100%; }
22-
23-
body {
24-
font-family: var(--mono);
25-
background: var(--bg);
26-
color: var(--text);
27-
font-size: 14px;
28-
line-height: 1.6;
29-
padding: 40px 24px;
30-
display: flex;
31-
flex-direction: column;
32-
align-items: flex-start;
33-
justify-content: center;
34-
min-height: 100vh;
35-
max-width: 720px;
36-
margin: 0 auto;
37-
}
38-
39-
.line {
40-
display: flex;
41-
align-items: baseline;
42-
gap: 10px;
43-
min-height: 1.6em;
44-
}
45-
46-
.line + .line { margin-top: 2px; }
47-
.spacer { margin-top: 20px; }
48-
49-
.prompt { color: var(--muted); user-select: none; }
50-
.err { color: var(--red); }
51-
.dim { color: var(--muted); }
52-
53-
.block {
54-
background: var(--surface);
55-
border: 1px solid var(--border);
56-
border-left: 3px solid var(--red);
57-
border-radius: 6px;
58-
padding: 16px 20px;
59-
margin-top: 24px;
60-
width: 100%;
61-
}
62-
63-
.block-title {
64-
color: var(--muted);
65-
font-size: 11px;
66-
letter-spacing: .08em;
67-
text-transform: uppercase;
68-
margin-bottom: 12px;
69-
}
70-
71-
.kv {
72-
display: flex;
73-
gap: 12px;
74-
line-height: 1.9;
75-
}
76-
77-
.key {
78-
color: var(--muted);
79-
flex-shrink: 0;
80-
min-width: 80px;
81-
}
82-
83-
.val { color: var(--text); }
84-
85-
.path-val {
86-
color: var(--red);
87-
word-break: break-all;
88-
}
89-
90-
.actions {
91-
display: flex;
92-
gap: 12px;
93-
flex-wrap: wrap;
94-
margin-top: 24px;
95-
}
96-
97-
.btn {
98-
display: inline-flex;
99-
align-items: center;
100-
gap: 6px;
101-
border: 1px solid var(--border);
102-
border-radius: 6px;
103-
padding: 7px 14px;
104-
font-family: var(--mono);
105-
font-size: 13px;
106-
color: var(--text);
107-
text-decoration: none;
108-
background: var(--surface);
109-
cursor: pointer;
110-
transition: border-color .12s, color .12s;
111-
}
112-
113-
.btn:hover {
114-
border-color: var(--cyan);
115-
color: var(--cyan);
116-
}
117-
118-
.section-divider {
119-
border: none;
120-
border-top: 1px solid var(--border);
121-
margin: 28px 0;
122-
width: 100%;
123-
}
124-
125-
.footer-line {
126-
color: var(--muted);
127-
font-size: 12px;
128-
}
129-
130-
a.plain {
131-
color: var(--cyan);
132-
text-decoration: none;
133-
}
134-
135-
a.plain:hover { text-decoration: underline; }
136-
137-
@media (max-width: 540px) {
138-
body { font-size: 13px; padding: 24px 16px; }
139-
}
140-
</style>
7+
<link rel="stylesheet" href="/style.css" />
1418
</head>
1429
<body>
14310

@@ -151,7 +18,7 @@
15118
<span><strong>404</strong> — resource not found</span>
15219
</div>
15320

154-
<div class="block">
21+
<div class="block block-error">
15522
<div class="block-title">// error details</div>
15623
<div class="kv">
15724
<span class="key">status</span>
@@ -179,10 +46,9 @@
17946
<hr class="section-divider" />
18047

18148
<div class="footer-line">
182-
Powered by <a class="plain" href="https://github.com/BackendStack21/static-web">static-web</a>
183-
&mdash; <a class="plain" href="https://21no.de">BackendStack21</a>
49+
Powered by <a href="https://github.com/BackendStack21/static-web">static-web</a>
50+
&mdash; <a href="https://21no.de">BackendStack21</a>
18451
</div>
18552

186-
18753
</body>
18854
</html>

‎public/index.html‎

Lines changed: 3 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -4,151 +4,7 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>static-web</title>
7-
<style>
8-
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
9-
10-
:root {
11-
--bg: #0d1117;
12-
--surface: #161b22;
13-
--border: #30363d;
14-
--text: #e6edf3;
15-
--muted: #7d8590;
16-
--green: #3fb950;
17-
--cyan: #79c0ff;
18-
--yellow: #e3b341;
19-
--mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
20-
}
21-
22-
html, body {
23-
height: 100%;
24-
}
25-
26-
body {
27-
font-family: var(--mono);
28-
background: var(--bg);
29-
color: var(--text);
30-
font-size: 14px;
31-
line-height: 1.6;
32-
padding: 40px 24px;
33-
display: flex;
34-
flex-direction: column;
35-
align-items: flex-start;
36-
justify-content: center;
37-
min-height: 100vh;
38-
max-width: 720px;
39-
margin: 0 auto;
40-
}
41-
42-
.prompt {
43-
color: var(--muted);
44-
user-select: none;
45-
}
46-
47-
.line {
48-
display: flex;
49-
align-items: baseline;
50-
gap: 10px;
51-
min-height: 1.6em;
52-
}
53-
54-
.line + .line {
55-
margin-top: 2px;
56-
}
57-
58-
.spacer {
59-
margin-top: 20px;
60-
}
61-
62-
.ok { color: var(--green); }
63-
.info { color: var(--cyan); }
64-
.warn { color: var(--yellow); }
65-
.dim { color: var(--muted); }
66-
67-
.key { color: var(--muted); min-width: 120px; display: inline-block; }
68-
.val { color: var(--text); }
69-
70-
.block {
71-
background: var(--surface);
72-
border: 1px solid var(--border);
73-
border-left: 3px solid var(--border);
74-
border-radius: 6px;
75-
padding: 16px 20px;
76-
margin-top: 24px;
77-
width: 100%;
78-
}
79-
80-
.block-title {
81-
color: var(--muted);
82-
font-size: 11px;
83-
letter-spacing: .08em;
84-
text-transform: uppercase;
85-
margin-bottom: 12px;
86-
}
87-
88-
.kv {
89-
display: flex;
90-
gap: 12px;
91-
line-height: 1.9;
92-
}
93-
94-
.kv .key {
95-
flex-shrink: 0;
96-
}
97-
98-
a {
99-
color: var(--cyan);
100-
text-decoration: none;
101-
}
102-
103-
a:hover {
104-
text-decoration: underline;
105-
}
106-
107-
.tag {
108-
display: inline-block;
109-
background: rgba(63,185,80,.12);
110-
color: var(--green);
111-
border: 1px solid rgba(63,185,80,.25);
112-
border-radius: 4px;
113-
padding: 1px 7px;
114-
font-size: 12px;
115-
vertical-align: middle;
116-
margin-left: 6px;
117-
}
118-
119-
.cursor {
120-
display: inline-block;
121-
width: 9px;
122-
height: 1.1em;
123-
background: var(--green);
124-
vertical-align: text-bottom;
125-
animation: blink 1.1s step-start infinite;
126-
margin-left: 2px;
127-
}
128-
129-
@keyframes blink {
130-
0%, 100% { opacity: 1; }
131-
50% { opacity: 0; }
132-
}
133-
134-
.section-divider {
135-
border: none;
136-
border-top: 1px solid var(--border);
137-
margin: 28px 0;
138-
width: 100%;
139-
}
140-
141-
.footer-line {
142-
color: var(--muted);
143-
font-size: 12px;
144-
margin-top: 28px;
145-
}
146-
147-
@media (max-width: 540px) {
148-
body { font-size: 13px; padding: 24px 16px; }
149-
.key { min-width: 90px; }
150-
}
151-
</style>
7+
<link rel="stylesheet" href="/style.css" />
1528
</head>
1539
<body>
15410

@@ -204,8 +60,8 @@
20460
<div class="kv"><span class="key ok">✓ compress</span> <span class="val dim">gzip on-the-fly + pre-compressed sidecar files</span></div>
20561
<div class="kv"><span class="key ok">✓ tls</span> <span class="val dim">TLS 1.2 / 1.3, HTTP/2 via ALPN</span></div>
20662
<div class="kv"><span class="key ok">✓ headers</span> <span class="val dim">ETag, Cache-Control, CSP, CORS, HSTS</span></div>
207-
<div class="kv"><span class="key ok">✓ security</span> <span class="val dim">dotfile blocking, security headers</span></div>
208-
<div class="kv"><span class="key ok">✓ graceful</span> <span class="val dim">SIGHUP reload · SIGTERM drain &amp; shutdown</span></div>
63+
<div class="kv"><span class="key ok">✓ security</span> <span class="val dim">dotfile blocking, security headers</span></div>
64+
<div class="kv"><span class="key ok">✓ graceful</span> <span class="val dim">SIGHUP reload · SIGTERM drain &amp; shutdown</span></div>
20965
</div>
21066

21167
<hr class="section-divider" />

0 commit comments

Comments
 (0)