Skip to content

Commit 735d04d

Browse files
aorithaorith
committed
i hate css :)
1 parent cf2c413 commit 735d04d

File tree

8 files changed

+113
-114
lines changed

8 files changed

+113
-114
lines changed

‎assets/css/02_main.css‎

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,30 @@ p {
1313
}
1414

1515
button {
16-
padding: 0.3rem 1.1rem;
17-
border: 1px solid var(--fg-1);
18-
border-radius: 3px;
19-
background: var(--bg-1);
20-
color: var(--fg-1);
21-
font-weight: 600;
16+
padding: 0.4rem 1.2rem;
17+
border: 2px solid var(--fg-1);
18+
border-radius: 0;
19+
background: var(--bg-0);
20+
color: var(--fg-0);
21+
font-family: var(--font-mono);
22+
font-weight: 700;
23+
font-size: 0.9rem;
24+
text-transform: uppercase;
25+
letter-spacing: 0.05em;
2226
cursor: pointer;
23-
transition: all 0.4s ease;
27+
transition: all 0.15s ease;
28+
box-shadow: 3px 3px 0 var(--fg-1);
2429
}
2530

2631
button:hover {
27-
color: var(--accent-hover);
28-
border-color: var(--accent-hover);
29-
background: var(--bg-0);
32+
background: var(--gray-0);
33+
color: var(--bg-0);
34+
transform: translate(-1px, -1px);
35+
}
36+
37+
button:active {
38+
transform: translate(3px, 3px);
39+
box-shadow: 0 0 0 var(--fg-1);
3040
}
3141

3242
abbr {
@@ -126,22 +136,6 @@ pre {
126136
vertical-align: top;
127137
}
128138

129-
.version {
130-
padding: 16px 20px;
131-
display: flex;
132-
flex-direction: row;
133-
justify-content: left;
134-
align-items: stretch;
135-
gap: 0 20px;
136-
& * {
137-
font-size: var(--fsize-xs);
138-
font-style: italic;
139-
}
140-
& #logo {
141-
fill: var(--warm);
142-
}
143-
}
144-
145139
/* HTMX animation after element creation */
146140
.fade-me-in.htmx-added {
147141
opacity: 0;

‎assets/css/03_layout.css‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
body {
22
width: 100%;
3+
min-height: 100dvh;
34

45
display: grid;
56

67
grid-template-areas:
78
"nav"
8-
"content";
9-
grid-template-rows: auto 1fr;
9+
"content"
10+
"footer";
11+
grid-template-rows: auto 1fr auto;
1012
grid-template-columns: 1fr;
1113
}
1214

1315
#content {
1416
grid-area: content;
1517
display: grid;
16-
17-
height: 100dvh;
1818
margin: 0 auto;
1919
}
2020

2121
nav {
2222
grid-area: nav;
2323
display: flex;
24-
gap: 8px;
24+
gap: 6px;
2525
flex-direction: row;
2626
align-content: center; /* vertical align */
2727
align-items: center;
@@ -32,7 +32,25 @@ nav {
3232
border-bottom: 1px solid var(--border);
3333
}
3434

35+
footer {
36+
grid-area: footer;
37+
display: flex;
38+
gap: 18px;
39+
flex-direction: row;
40+
align-content: center; /* vertical align */
41+
align-items: center;
42+
justify-content: center;
43+
justify-items: stretch;
44+
padding: 0.5rem 0.5rem 0.5rem 1rem;
45+
font-size: var(--fsize-xxs);
46+
background-color: var(--bg-1);
47+
border-top: 1px solid var(--border);
48+
font-style: italic;
49+
color: var(--fg-1);
50+
}
51+
3552
nav div {
53+
color: var(--gray-0);
3654
width: var(--view-width);
3755
max-width: var(--view-width);
3856
margin: 0 auto;
@@ -67,16 +85,17 @@ input[type="radio"].nav {
6785
}
6886

6987
.view-content {
88+
width: var(--view-width);
7089
max-width: var(--view-width);
7190
padding: 1rem;
7291
}
7392

74-
#radio-parse:checked ~ nav label[for="radio-parse"],
75-
#radio-overview:checked ~ nav label[for="radio-overview"],
76-
#radio-timings:checked ~ nav label[for="radio-timings"],
77-
#radio-headers:checked ~ nav label[for="radio-headers"],
78-
#radio-vcllogtree:checked ~ nav label[for="radio-vcllogtree"],
79-
#radio-reqbuild:checked ~ nav label[for="radio-reqbuild"] {
93+
#radio-parse:checked ~ nav div label[for="radio-parse"],
94+
#radio-overview:checked ~ nav div label[for="radio-overview"],
95+
#radio-timings:checked ~ nav div label[for="radio-timings"],
96+
#radio-headers:checked ~ nav div label[for="radio-headers"],
97+
#radio-vcllogtree:checked ~ nav div label[for="radio-vcllogtree"],
98+
#radio-reqbuild:checked ~ nav div label[for="radio-reqbuild"] {
8099
color: var(--accent);
81100
text-decoration: underline;
82101
}

‎assets/css/07_forms.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,13 @@
66
}
77

88
#parse-view textarea {
9-
width: 40dvw;
10-
min-width: 350px;
11-
max-width: 650px;
12-
height: 400px;
9+
width: 600px;
10+
height: 220px;
11+
}
12+
13+
#parse-submit-btn {
14+
width: 610px;
15+
padding: 10px;
1316
}
1417

1518
form {
@@ -84,7 +87,6 @@ form .examples {
8487
margin: 20px 0 10px 0;
8588

8689
button {
87-
background-color: var(--bg-0);
8890
font-size: var(--fsize-xs);
8991
padding: 4px 8px;
9092
margin: 8px 2px;

‎assets/css/10_history.css‎

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,23 @@
1818
vertical-align: middle;
1919
}
2020

21-
& .btn-small {
21+
& .btn-load,
22+
.btn-delete {
23+
display: block;
2224
cursor: pointer;
23-
border-radius: 4px;
24-
padding: 4px 8px;
25-
font-size: var(--fsize-xxs);
26-
margin-right: 2px 4px;
2725
}
2826

29-
& .btn-load {
30-
background-color: #90caf9;
31-
}
32-
33-
& .btn-load:hover {
34-
background-color: #c5e3fc;
27+
.btn-load {
28+
color: var(--accent);
3529
}
3630

37-
& .btn-delete {
38-
background-color: #f99790;
31+
.btn-delete {
32+
color: var(--red-0);
3933
}
4034

41-
& .btn-delete:hover {
42-
background-color: #fcc9c5;
35+
.btn-load:hover,
36+
.btn-delete:hover {
37+
text-decoration: underline;
4338
}
4439

4540
& .name-cell {
@@ -59,15 +54,9 @@
5954
border-radius: 3px;
6055
}
6156

62-
& .hash-cell {
63-
font-family: monospace;
64-
font-size: var(--fsize-xxs);
65-
color: #606060;
66-
}
67-
6857
& .empty-state {
6958
text-align: left;
70-
color: #909090;
59+
color: var(--gray-0);
7160
}
7261

7362
& .note {

‎assets/css/11_tables.css‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,17 @@
11
table {
22
border-collapse: collapse;
3-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
43
margin-bottom: 18px;
5-
border: 2px solid var(--border);
6-
}
7-
8-
thead {
9-
background-color: var(--border);
10-
border-bottom: 2px solid var(--border);
4+
border: none;
115
}
126

137
th {
14-
padding: 8px 12px;
15-
text-align: left;
8+
font-size: var(--fsize-xs);
9+
color: var(--fg-0);
1610
font-weight: 600;
17-
color: #495057;
11+
text-decoration: underline;
12+
padding: 4px 10px;
13+
text-align: left;
1814
text-transform: uppercase;
19-
font-size: 12px;
2015
letter-spacing: 0.5px;
2116
}
2217

‎assets/static/history.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -207,17 +207,16 @@ async function renderHistory(page = 1) {
207207
const paginatedEntries = entries.slice(startIndex, endIndex);
208208

209209
let html =
210-
"<table><thead><tr><th>Name</th><th>Hash</th><th>Created At</th><th>Actions</th></tr></thead><tbody>";
210+
"<table><thead><tr><th>Name</th><th>Created At</th><th>Actions</th></tr></thead><tbody>";
211211

212212
paginatedEntries.forEach((entry) => {
213213
html += `
214214
<tr>
215215
<td class="name-cell" onclick="editName('${entry.hash}')" id="name-${entry.hash}">${entry.name}</td>
216-
<td class="hash-cell"><abbr title="sha-256 digest generated from the logs input: ${entry.hash}">${entry.hash.slice(0, 10)}...</abbr></td>
217216
<td>${entry.created}</td>
218217
<td>
219-
<a class="btn-small btn-load" onclick="loadEntry('${entry.hash}')">Load</a>
220-
<a class="btn-small btn-delete" onclick="deleteEntry('${entry.hash}')">Delete</a>
218+
<a class="btn-load" onclick="loadEntry('${entry.hash}')">Load</a>
219+
<a class="btn-delete" onclick="deleteEntry('${entry.hash}')">Delete</a>
221220
</td>
222221
</tr>
223222
`;

‎assets/templates/layout/main_layout.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,15 @@
2626
<nav>
2727
<div>
2828
<label for="radio-parse">PARSE</label>
29+
|
2930
<label for="radio-overview">Overview</label>
31+
|
3032
<label for="radio-vcllogtree">LogTree</label>
33+
|
3134
<label for="radio-headers">Headers</label>
35+
|
3236
<label for="radio-timings">Timings</label>
37+
|
3338
<label for="radio-reqbuild">ReqBuild</label>
3439
</div>
3540
</nav>
@@ -42,5 +47,18 @@
4247
<!-- Content -->
4348
{{ end }}
4449
</div>
50+
51+
<footer>
52+
<div>Varnishlog Parser</div>
53+
54+
<div>
55+
<a rel="nofollow noopener"
56+
target="_blank"
57+
href="https://github.com/aorith/varnishlog-parser"
58+
>Source code <svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a>
59+
&nbsp;
60+
<abbr title="Version">{{ .Version }}</abbr>
61+
</div>
62+
</footer>
4563
</body>
4664
</html>

‎assets/templates/partials/parse_form_partial.html‎

Lines changed: 18 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<div class="inline-block">
1414
<!-- Sequence settings -->
1515
<fieldset>
16-
<legend>Overview 🡒 Sequence</legend>
16+
<legend>Overview &gt; Sequence</legend>
1717
<label class="form-row">
1818
<input type="checkbox" name="includeCalls" value="yes" {{ if .Sequence.IncludeCalls }}checked{{ end -}}>
1919
Include VCL calls
@@ -28,33 +28,31 @@
2828
</label>
2929

3030
<label class="form-row">
31-
Actor distance
31+
Actor distance:
3232
<input name="distance" type="number" min="50" max="500" value="{{ .Sequence.Distance -}}" step="5">
3333
</label>
3434
<label class="form-row">
35-
Step Height
35+
Step height:
3636
<input name="stepHeight" type="number" min="10" max="120" value="{{ .Sequence.StepHeight -}}" step="2">
3737
</label>
3838
</fieldset>
3939

4040
<!-- Timeline settings -->
41-
<div class="form-row">
42-
<fieldset>
43-
<legend>Timings 🡒 Timeline</legend>
44-
<label class="form-row">
45-
<input type="checkbox" name="sessions" value="yes" {{ if .Timeline.Sessions }}checked{{ end -}}>
46-
Include sessions
47-
</label>
48-
<label class="form-row">
49-
Precision/Width
50-
<input name="precision" type="number" min="100" max="5000" value="{{ .Timeline.Precision -}}" step="4">
51-
</label>
52-
<label class="form-row">
53-
Num Ticks
54-
<input name="ticks" type="number" min="1" max="50" value="{{ .Timeline.Ticks -}}" step="1">
55-
</label>
56-
</fieldset>
57-
</div>
41+
<fieldset>
42+
<legend>Timings &gt; Timeline</legend>
43+
<label class="form-row">
44+
<input type="checkbox" name="sessions" value="yes" {{ if .Timeline.Sessions }}checked{{ end -}}>
45+
Include sessions
46+
</label>
47+
<label class="form-row">
48+
Width:
49+
<input name="precision" type="number" min="100" max="5000" value="{{ .Timeline.Precision -}}" step="4">
50+
</label>
51+
<label class="form-row">
52+
Num ticks:
53+
<input name="ticks" type="number" min="1" max="50" value="{{ .Timeline.Ticks -}}" step="1">
54+
</label>
55+
</fieldset>
5856
</div>
5957

6058
<div class="form-row">
@@ -86,19 +84,4 @@ <h2>Examples</h2>
8684
<button type="submit" name="action" value="eg-streaming-hit">Streaming Hit</button>
8785
</div>
8886
</div>
89-
90-
<div class="about">
91-
<h2>About</h2>
92-
<p>Varnishlog Parser
93-
is a small Go library built to parse and analyze <code>varnishlog</code>
94-
output, just like the name suggests.
95-
It doesn’t rely on any external Go dependencies.</p>
96-
97-
<a rel="nofollow noopener"
98-
target="_blank"
99-
href="https://github.com/aorith/varnishlog-parser"
100-
>Source code <svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_nPIU"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a>
101-
&nbsp;
102-
<abbr title="Version">{{ .Version }}</abbr>
103-
</div>
10487
</form>

0 commit comments

Comments
 (0)