Skip to content

Commit 3c59f28

Browse files
hegwinhegwin
committed
[#184243043] Adjust styles for post show page
1 parent c3d40da commit 3c59f28

File tree

10 files changed

+122
-63
lines changed

10 files changed

+122
-63
lines changed

‎app/assets/javascripts/posts.js.coffee

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,3 +24,10 @@ $ ->
2424
submenu.fadeIn()
2525
), ->
2626
$(this).find('.submenu').fadeOut()
27+
28+
$('.post-entry').on('mouseenter', ->
29+
$(this).find('h2 a').addClass('hover');
30+
)
31+
$('.post-entry').on('mouseleave', ->
32+
$(this).find('h2 a').removeClass('hover');
33+
)

‎app/assets/stylesheets/layout.css.scss

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
$color-coral: #FC5645;
2+
13
body {
24
font-family: Roboto, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
35
background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0) 60px);
@@ -19,10 +21,10 @@ a {
1921

2022
h1, h2, h3 {
2123
a {
22-
transition: 0.2s all;
24+
transition: 0.5s color, 0.2s text-shadow;
2325

24-
&:hover {
25-
text-shadow: 0 0 4px #CCC;
26+
&:hover, &.hover {
27+
color: $color-coral;
2628
}
2729
}
2830
}
@@ -32,6 +34,10 @@ h1, h2, h3 {
3234
h1 {
3335
margin-top: 60px;
3436
font-size: 70px;
37+
a:hover {
38+
color: var(--bs-gray-dark);
39+
text-shadow: 0 0 4px #CCC;
40+
}
3541
}
3642
p.random {
3743
display: inline-block;
@@ -44,6 +50,8 @@ aside {
4450
.sidebar {
4551
margin-top: 2rem;
4652
text-align: center;
53+
position: sticky;
54+
top: 2rem;
4755

4856
.avatar {
4957
width: 180px;
@@ -119,14 +127,6 @@ aside {
119127
}
120128
}
121129

122-
#pagination {
123-
margin-top: 3em;
124-
padding: 0 2em;
125-
a {
126-
color: #222222;
127-
}
128-
}
129-
130130
.footer {
131131
margin: 2em auto 30px;
132132
padding-top: 30px;
@@ -136,3 +136,22 @@ aside {
136136
color: #222222;
137137
}
138138
}
139+
140+
@media (max-width: 767.98px) {
141+
body {
142+
background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0) 40px);
143+
}
144+
145+
.header {
146+
h1 {
147+
margin-top: 40px;
148+
font-size: 60px;
149+
}
150+
p.random {
151+
display: inline-block;
152+
font-size: 14px;
153+
margin: 16px auto 32px;
154+
max-width: 360px;
155+
}
156+
}
157+
}

‎app/assets/stylesheets/posts.css.scss

Lines changed: 63 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,26 @@
44

55
$meta-opacity: 0.6;
66

7+
@mixin link {
8+
opacity: $meta-opacity;
9+
display: inline-block;
10+
transition: 0.2s opacity;
11+
12+
&:hover {
13+
opacity: 1;
14+
}
15+
}
16+
17+
@mixin gray-block-link {
18+
@include link;
19+
background-color: var(--bs-gray-dark);
20+
color: white;
21+
padding: 4px 8px;
22+
border-radius: 4px;
23+
}
24+
725
.post-entry {
8-
padding-left: 2em;
26+
padding-left: 1.5em;
927
padding-right: 2em;
1028
margin-bottom: 4rem;
1129

@@ -27,27 +45,51 @@ $meta-opacity: 0.6;
2745
}
2846

2947
.post {
30-
padding: 0.5em 2em;
48+
padding-left: 1.5rem;
49+
padding-right: 2rem;
50+
margin-top: 2rem;
51+
3152
h1 {
32-
margin-bottom: 40px;
53+
font-size: 30px;
54+
&.subtitle {
55+
font-size: 22px;
56+
}
57+
}
58+
h2 {
59+
font-size: 24px;
60+
margin: 28px auto;
61+
}
62+
h3 {
63+
font-size: 20px;
64+
margin: 24px auto;
65+
}
66+
h4 {
67+
font-size: 16px;
68+
margin: 20px auto;
69+
}
70+
71+
ol, ul {
72+
li {
73+
margin-top: 0.5em;
74+
margin-bottom: 0.5em;
75+
}
76+
}
77+
78+
.back-link {
79+
margin-top: 24px;
80+
@include gray-block-link;
3381
}
3482
}
3583

3684
.post-meta {
37-
margin: 12px 0 16px 1px;
85+
margin: 12px 0 24px 1px;
3886

3987
.post-tags {
4088
padding: 0;
4189

4290
a.tag-link {
91+
@include link;
4392
margin-right: 4px;
44-
opacity: $meta-opacity;
45-
display: inline-block;
46-
47-
&:hover {
48-
text-decoration: none;
49-
opacity: 1;
50-
};
5193

5294
span.badge {
5395
padding: 4px 12px;
@@ -79,6 +121,14 @@ $meta-opacity: 0.6;
79121
}
80122
}
81123

124+
.pagination {
125+
margin-top: 3em;
126+
padding: 0 2em 0 1.5em;
127+
a {
128+
@include gray-block-link;
129+
}
130+
}
131+
82132
code, pre {
83133
font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
84134
}
@@ -106,8 +156,8 @@ pre code {
106156

107157
pre {
108158
padding: 9.5px;
109-
margin: 0 0 10px;
110-
line-height: 20px;
159+
margin: 20px 0 20px;
160+
line-height: 24px;
111161
word-break: break-all;
112162
word-wrap: break-word;
113163
white-space: pre-wrap;
@@ -121,23 +171,6 @@ pre {
121171
}
122172

123173
@media (max-width: 767.98px) {
124-
body {
125-
background-image: linear-gradient(rgba(0, 0, 0, 0.22), rgba(255, 255, 255, 0) 40px);
126-
}
127-
128-
.header {
129-
h1 {
130-
margin-top: 40px;
131-
font-size: 60px;
132-
}
133-
p.random {
134-
display: inline-block;
135-
font-size: 14px;
136-
margin: 16px auto 32px;
137-
max-width: 360px;
138-
}
139-
}
140-
141174
.post-entry {
142175
padding: 12px 6px;
143176
}

‎app/helpers/posts_helper.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ module PostsHelper
33

44
def degrade_head(html, descend_level=1)
55
(1..6-descend_level).to_a.reverse.each do |head|
6-
html = html.gsub(/<h#{head}>/, "<h#{head+descend_level}>").gsub(/<\/h#{head}>/, "</h#{head+descend_level}>")
6+
html = html.gsub(/<h#{head} /, "<h#{head+descend_level} ").gsub(/<\/h#{head}>/, "</h#{head+descend_level}>")
77
end
88
html
99
end

‎app/views/layouts/_footer.html.erb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="footer">
1+
<footer class="footer">
22
<p>
33
© 2013 - 2023 Hegwin | Version: <%= link_to '1.1.0', 'https://github.com/hegwin/blog/releases/tag/v1.1.0', target: 'blank', rel: 'noopener noreferrer nofollow' %> | <%= link_to '鄂ICP备13013177号', 'http://www.beian.miit.gov.cn', target: '_blank', rel: 'noopener noreferrer nofollow' %></p>
4-
</div>
4+
</footer>

‎app/views/layouts/_header.html.erb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="header">
1+
<header class="header">
22
<h1><%= link_to 'Hegwin.Me', '/' %></h1>
33
<p class="random"><%= random_poem %></p>
4-
</div>
4+
</header>

‎app/views/layouts/_sidebar.html.erb

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,23 @@
44
<p class="signature">Hegwin</p>
55
<% end %>
66
<div class="sns">
7-
<%= link_to 'https://github.com/hegwin', target: '_blank' do %>
7+
<%= link_to 'https://github.com/hegwin', target: '_blank', rel: 'me' do %>
88
<%= image_tag 'sidebar/github.png', alt: 'Github' %>
99
<% end %>
1010

11-
<%= link_to 'https://www.linkedin.com/in/hegwin-wang-b649836a', target: '_blank' do %>
11+
<%= link_to 'https://www.linkedin.com/in/hegwin-wang-b649836a', target: '_blank', rel: 'me' do %>
1212
<%= image_tag 'sidebar/linkedin.png', alt: 'Github' %>
1313
<% end %>
1414

15-
<%= link_to 'https://weibo.com/hegwin/', target: '_blank' do %>
15+
<%= link_to 'https://weibo.com/hegwin/', target: '_blank', rel: 'me' do %>
1616
<%= image_tag 'sidebar/weibo.png', alt: 'Github' %>
1717
<% end %>
1818

19-
<%= mail_to 'hegwin@hegwin.me', target: '_blank' do %>
19+
<%= mail_to 'hegwin@hegwin.me', target: '_blank', rel: 'me' do %>
2020
<%= image_tag 'sidebar/email.png', alt: 'Github' %>
2121
<% end %>
2222

23-
<%= link_to 'https://www.facebook.com/hegwin.wang', target: '_blank' do %>
23+
<%= link_to 'https://www.facebook.com/hegwin.wang', target: '_blank', rel: 'me' do %>
2424
<%= image_tag 'sidebar/facebook.png', alt: 'Github' %>
2525
<% end %>
2626
</div>

‎app/views/posts/index.html.erb

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,16 @@
1414
<% end %>
1515

1616

17-
<div id="pagination" class="d-flex justify-content-between">
17+
<div class="pagination d-flex justify-content-between">
1818
<div>
1919
<% if !@posts.first_page? %>
20-
<%= link_to 'Prev Page', root_path(page: @posts.prev_page) %>
20+
<%= link_to '< Prev Page', root_path(page: @posts.prev_page) %>
2121
<% end %>
2222
</div>
2323

2424
<div>
2525
<% if !@posts.last_page? %>
26-
<%= link_to 'Next Page', root_path(page: @posts.next_page) %>
26+
<%= link_to 'Next Page >', root_path(page: @posts.next_page) %>
2727
<% end %>
2828
</div>
2929
</div>

‎app/views/posts/show.html.erb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,5 +13,5 @@
1313
<%= degrade_head(Redcarpet::Markdown.new(Redcarpet::Render::HTML.new(with_toc_data: true), fenced_code_blocks: true).render(@post.body), 1).html_safe %>
1414
</div>
1515

16-
<%= link_to 'Back', :back %>
16+
<%= link_to '< Back', :back, class: 'back-link' %>
1717
</div>

‎spec/helpers/posts_helper_spec.rb

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,21 @@
1717
<html>
1818
<head><title></title></head>
1919
<body>
20-
<h1>Header 1</h1>
21-
<h2>Header 2</h2>
22-
<h3>Header 3</h3>
23-
<h4>Header 4</h4>
20+
<h1 id="1">Header 1</h1>
21+
<h2 id="2">Header 2</h2>
22+
<h3 id="header-3">Header 3</h3>
23+
<h4 id="header-4">Header 4</h4>
2424
</body>
2525
</html>
2626
]
2727
expected_html = %q[
2828
<html>
2929
<head><title></title></head>
3030
<body>
31-
<h3>Header 1</h3>
32-
<h4>Header 2</h4>
33-
<h5>Header 3</h5>
34-
<h6>Header 4</h6>
31+
<h3 id="1">Header 1</h3>
32+
<h4 id="2">Header 2</h4>
33+
<h5 id="header-3">Header 3</h5>
34+
<h6 id="header-4">Header 4</h6>
3535
</body>
3636
</html>
3737
]

0 commit comments

Comments
 (0)