katproto.girlonthemoon.xyz
+101
-6
app/assets/stylesheets/application.css
+101
-6
app/assets/stylesheets/application.css
···
70
70
color: var(--main-color-darker);
71
71
}
72
72
73
+
dl {
74
+
display: grid;
75
+
grid-template-columns: 15ch auto;
76
+
column-gap: 0;
77
+
}
78
+
79
+
dt {
80
+
grid-column-start: 1;
81
+
margin-bottom: .5em;
82
+
}
83
+
84
+
dt:before {
85
+
content: "○";
86
+
margin: 0 10px 0 0;
87
+
}
88
+
89
+
dd {
90
+
grid-column-start: 2;
91
+
}
92
+
73
93
ul {
74
94
padding: 0;
75
95
margin-top: .5em;
···
151
171
margin: 1em 0 1em 0;
152
172
}
153
173
154
-
div.article_date {
174
+
div.article_date, time {
155
175
/* color: #4f6599; */
156
176
font-family: var(--font-main);
157
177
margin-top: 1em;
158
178
font-size: 1.1rem;
159
179
}
160
180
161
-
div.article_date_text {
181
+
div.article_date_text:has(time.article_time) {
182
+
display: inline;
183
+
}
184
+
185
+
div.article_date_text, time {
162
186
color: var(--main-color);
163
-
display: inline-block;
164
187
font-family: var(--font-main);
165
188
}
166
189
···
202
225
}
203
226
204
227
.pbody blockquote {
205
-
margin-left: 1.5rem;
206
-
border-left: 1px solid var(--main-color);
207
-
padding-left: 1rem;
228
+
padding-inline-start: 1em;
229
+
border-inline-start: 1px solid var(--main-color);
230
+
margin-left: 1rem;
208
231
}
209
232
210
233
span.tag_link {
···
248
271
border: 0 !important;
249
272
outline: 0 !important;
250
273
width: fit-content;
274
+
}
275
+
276
+
label {
277
+
display: unset !important;
278
+
margin-inline-start: 0;
279
+
font-weight: bold;
280
+
color: var(--accent-color);
281
+
font-family: var(--font-accent);
282
+
font-size: 1.1em;
283
+
text-transform: lowercase;
284
+
}
285
+
286
+
label ~ input, label ~ select {
287
+
display: block;
288
+
margin: .8em 0 .8em 0;
289
+
}
290
+
291
+
label[for="article_title"] {
292
+
display: block;
293
+
float: left;
294
+
text-align: right;
295
+
margin-right: 15px;
296
+
}
297
+
298
+
label[for="article_body"] {
299
+
display: block !important;
300
+
}
301
+
302
+
textarea:not([rows]) {
303
+
min-height: 10em
304
+
}
305
+
306
+
textarea {
307
+
min-width: 50ch;
308
+
min-height: 50ch;
309
+
margin: .8em .8em .8em 0;
310
+
}
311
+
312
+
input {
313
+
text-transform: lowercase;
314
+
}
315
+
316
+
input[type="submit"] {
317
+
margin: .5em 0 .5em 0;
318
+
font-family: var(--font-main);
319
+
background-color: var(--accent-color);
320
+
color: white;
321
+
text-decoration: none;
322
+
text-shadow: none;
323
+
box-shadow: none;
324
+
font-size: 1.1rem;
325
+
padding: .3em;
326
+
font-weight: 500;
327
+
border-radius: 0;
328
+
border: 0 !important;
329
+
outline: 0 !important;
330
+
width: fit-content;
331
+
}
332
+
333
+
input, button,
334
+
textarea, select {
335
+
font-family: inherit;
336
+
font-size: inherit;
337
+
line-height: 1.1;
338
+
}
339
+
340
+
button, select {
341
+
margin: .5rem 0 .8rem 0;
342
+
}
343
+
344
+
.test2 select, .test2 button {
345
+
margin: 0 !important;
251
346
}
252
347
253
348
/* HTML comment box */
+6
-6
app/views/articles/_form.html.erb
+6
-6
app/views/articles/_form.html.erb
···
1
1
<%= form_with model: article do |form| %>
2
2
<div>
3
-
<%= form.label :title %><br>
3
+
<%= form.label :title %>
4
4
<%= form.text_field :title %>
5
5
<% article.errors.full_messages_for(:title).each do |message| %>
6
6
<div><%= message %></div>
···
8
8
</div>
9
9
10
10
<div>
11
-
<%= form.label :body %><br>
12
-
<%= form.text_area :body, style: "width: 100%; height: 50vh;", rows: 8 %><br>
11
+
<%= form.label :body %>
12
+
<%= form.text_area :body, rows: 8 %>
13
13
<% article.errors.full_messages_for(:body).each do |message| %>
14
14
<div><%= message %></div>
15
15
<% end %>
16
16
</div>
17
17
18
18
<div>
19
-
<%= form.label :status %><br>
19
+
<%= form.label :status %>
20
20
<%= form.select :status, Visible::VALID_STATUSES, selected: article.status || 'public' %>
21
21
</div>
22
22
23
23
<div>
24
-
<%= form.label :icon %><br />
24
+
<%= form.label :icon %>
25
25
<%= form.file_field :icon %>
26
26
</div>
27
27
28
28
<div>
29
-
<%= form.label :tags %><br>
29
+
<%= form.label :tags %>
30
30
<%= form.collection_select :tag_id, Tag.all, :id, :name %>
31
31
</div>
32
32
+23
-16
app/views/articles/index.html.erb
+23
-16
app/views/articles/index.html.erb
···
13
13
<div class="test2">
14
14
<% if user_signed_in? %>
15
15
<div> welcome <%= current_user.email %> </div>
16
-
<%= button_to "log out", destroy_user_session_path, method: :delete, style: 'margin-left: .5em' %>
16
+
<%= button_to "log out", destroy_user_session_path, method: :delete, style: 'margin-left: .5em !important' %>
17
17
<% else %>
18
18
<div> i'm kat! </div>
19
19
<%= button_to "log in if you're me", new_user_session_path, style: 'margin-left: .5em' %>
···
41
41
42
42
<p><%= link_to "tags", tags_path %> | <a href="https://subscribeopenly.net/subscribe/?url=https%3A%2F%2Fbubblegum.girlonthemoon.xyz%2Farticles.rss">feed</a> | <a href="https://bytes.4-walls.net/kat/bubblegum">source</a> | <%= Article.public_count %> total posts </p>
43
43
44
-
<h4>2025</h4>
44
+
<h4>2025</h4>
45
45
46
-
<ul>
47
-
<% Article.where(created_at: Date.parse("2025-01-01")..Date.parse("2025-12-31")).reverse.each do |article| %>
48
-
<% unless article.archived? %>
49
-
<li>
50
-
<div class="article_date_text"><%= article.created_at.strftime('%Y %b %d') %></div>: <%= link_to article.title, article %>
51
-
</li>
52
-
<% end %>
53
-
<% end %>
54
-
</ul>
46
+
<dl>
47
+
<% Article.where(created_at: Date.parse("2025-01-01")..Date.parse("2025-12-31")).reverse.each do |article| %>
48
+
<% unless article.archived? %>
49
+
<dt>
50
+
<time <%= tag.attributes datetime: article.created_at.strftime('%Y-%m-%d') %> ><%= article.created_at.strftime('%Y %b %d') %></time>
51
+
</dt>
52
+
<dd>
53
+
<%= link_to article.title, article %>
54
+
</dd>
55
+
56
+
<% end %>
57
+
<% end %>
58
+
</dl>
55
59
56
60
<h4>2024</h4>
57
61
58
-
<ul>
62
+
<dl>
59
63
<% Article.where(created_at: Date.parse("2024-01-01")..Date.parse("2024-12-31")).reverse.each do |article| %>
60
64
<% unless article.archived? %>
61
-
<li>
62
-
<div class="article_date_text"><%= article.created_at.strftime('%Y %b %d') %></div>: <%= link_to article.title, article %>
63
-
</li>
65
+
<dt>
66
+
<time <%= tag.attributes datetime: article.created_at.strftime('%Y-%m-%d') %> ><%= article.created_at.strftime('%Y %b %d') %></time>
67
+
</dt>
68
+
<dd>
69
+
<%= link_to article.title, article %>
70
+
</dd>
64
71
<% end %>
65
72
<% end %>
66
-
</ul>
73
+
</dl>
67
74
68
75
</div>
+1
-1
app/views/articles/show.html.erb
+1
-1
app/views/articles/show.html.erb
···
12
12
13
13
<p>
14
14
<div class="article_date_text">
15
-
<time <%= tag.attributes datetime: @article.created_at.strftime('%Y-%m-%d') %> ><%= @article.created_at.strftime('%Y %b %d') %></time>
15
+
<time class="article_time" <%= tag.attributes datetime: @article.created_at.strftime('%Y-%m-%d') %> ><%= @article.created_at.strftime('%Y %b %d') %></time>
16
16
</div>
17
17
<span class="tag_link"><span aria-hidden="true">|</span> <%= link_to @article.tag.name, @article.tag %></span>
18
18
</p>
+2
-2
app/views/layouts/application.html.erb
+2
-2
app/views/layouts/application.html.erb
···
20
20
21
21
<meta property="og:title" content="<% if defined?(@article.title) %> <%= @article.title %> <% end %>">
22
22
<meta property="og:description" content="<% if defined?(@article.body) %> <%= truncate(@article.body, length: 27, separator: /\s/) %> <% end %>">
23
-
<meta property="og:image" content="<% if defined?(@article.slug) %> <%= article_url(@article.slug, format: :png) %> <% end %>">
23
+
<meta property="og:image" content="<% if defined?(@article.slug) && !(@article.slug).nil? %> <%= article_url(@article.slug, format: :png) %> <% end %>">
24
24
<meta property="og:type" content="website">
25
-
<meta property="og:url" content="<% if defined?(@article.slug) %> <%= article_url(@article.slug) %> <% end %>">
25
+
<meta property="og:url" content="<% if defined?(@article.slug) && !(@article.slug).nil? %> <%= article_url(@article.slug) %> <% end %>">
26
26
27
27
<%= csrf_meta_tags %>
28
28
<%= csp_meta_tag %>