this repo has no description
mobile responsiveness
+86
-4
+83
app/assets/stylesheets/application.css
+83
app/assets/stylesheets/application.css
···
18
18
*= require_self
19
19
*/
20
20
21
+
@media only screen and (max-width: 50em) {
22
+
.main {
23
+
font-size: 4vw !important;
24
+
width: 100% !important;
25
+
min-height: 100% !important;
26
+
max-height: 100% !important;
27
+
word-wrap: break-word !important;
28
+
padding: 0 !important;
29
+
}
30
+
31
+
.main > * {
32
+
padding: 1rem !important;
33
+
}
34
+
35
+
h1,h2,h3,h4, time {
36
+
font-size: revert !important;
37
+
}
38
+
39
+
div.article_date_text:has(time.article_time) {
40
+
padding-right: 0 !important;
41
+
}
42
+
43
+
span.tag_link {
44
+
padding: 0 !important;
45
+
}
46
+
47
+
#HCB_comment_box #hcb_form textarea {
48
+
min-width: 100% !important;
49
+
}
50
+
51
+
div.article_info {
52
+
padding-block: 0 !important;
53
+
}
54
+
55
+
.main > nav {
56
+
padding: 0 1rem !important;
57
+
}
58
+
}
59
+
60
+
@media only screen and (max-width: 720px) {
61
+
.main {
62
+
font-size: 4vw !important;
63
+
width: 100% !important;
64
+
min-height: 100% !important;
65
+
max-height: 100% !important;
66
+
word-wrap: break-word !important;
67
+
padding: 0 !important;
68
+
}
69
+
70
+
.main > * {
71
+
padding: 1rem !important;
72
+
}
73
+
74
+
h1,h2,h3,h4, time {
75
+
font-size: revert !important;
76
+
}
77
+
78
+
div.article_date_text:has(time.article_time) {
79
+
padding-right: 0 !important;
80
+
}
81
+
82
+
span.tag_link {
83
+
padding: 0 !important;
84
+
}
85
+
86
+
#HCB_comment_box #hcb_form textarea {
87
+
min-width: 100% !important;
88
+
}
89
+
90
+
div.article_info {
91
+
padding-block: 0 !important;
92
+
}
93
+
94
+
.main > nav {
95
+
padding: 0 1rem !important;
96
+
}
97
+
}
98
+
21
99
:root {
22
100
--font-main: "Gudea", sans-serif;
23
101
--font-accent: "Raleway", sans-serif;
···
181
259
font-family: var(--font-main);
182
260
margin-top: 1em;
183
261
font-size: 1.1rem;
262
+
}
263
+
264
+
div.article_info {
265
+
display: block;
266
+
padding-block: 1rem;
184
267
}
185
268
186
269
div.article_date_text:has(time.article_time) {
+3
-4
app/views/articles/show.html.erb
+3
-4
app/views/articles/show.html.erb
···
10
10
<%= image_tag url_for(@article.icon) %>
11
11
<% end %>
12
12
13
-
<p>
13
+
<div class="article_info">
14
14
<div class="article_date_text">
15
15
<time class="article_time dt-published" <%= tag.attributes datetime: @article.created_at.strftime('%Y-%m-%d') %> ><%= @article.created_at.strftime('%Y %b %d') %></time>
16
16
</div>
···
21
21
<span style="color:var(--main-color);">
22
22
<%= @article.body.scan(/[\p{Alpha}\-']+/).size %> words
23
23
</span>
24
-
</span>
25
-
26
-
</p>
24
+
</span>
25
+
</div>
27
26
28
27
<div class="pbody">
29
28
<article>