Skip to content

Commit b6eff3d

Browse files
author
Brandon Green
committed
Fix Blog Index and Detail pages
Updated Style for Blog Index and Detail pages Cut Blog Index title to one line for consistency Blog Index title is full length on Desktop
1 parent e681d40 commit b6eff3d

File tree

2 files changed

+22
-10
lines changed

2 files changed

+22
-10
lines changed

‎_layouts/blog.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<div class="container">
1717
{% for post in posts limit:1 %}
1818
<p class="featured-post">Featured Post</p>
19-
<h1>
19+
<h1 class="blog-index-title">
2020
<a href="{{ site.baseurl }}{{ post.url }}">{{ post.title }}</a>
2121
</h1>
2222
<p class="featured-blog-preview">{{ post.excerpt | remove: '<p>' | remove: '</p>' | truncate: 100 }}</p>

‎_sass/blog.scss

+21-9
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@
1212
}
1313

1414
.main-background {
15-
height: 275px;
16-
15+
height: 290px;
1716
@include desktop {
18-
height: 461px;
17+
height: 485px;
1918
}
2019
}
2120

2221
.blog-detail-background {
22+
height: 300px;
2323
@include desktop {
2424
height: 312px;
2525
}
@@ -119,8 +119,9 @@
119119
}
120120

121121
.jumbotron {
122+
top: rem(105px);
122123
@include desktop {
123-
height: 405px;
124+
height: rem(405px);
124125
}
125126

126127
.container {
@@ -129,26 +130,38 @@
129130
}
130131
}
131132

133+
.blog-index-title {
134+
overflow: hidden;
135+
white-space: nowrap;
136+
text-overflow: ellipsis;
137+
color: white;
138+
@include desktop {
139+
overflow: unset;
140+
white-space: unset;
141+
text-overflow: unset;
142+
}
143+
}
144+
132145
h1 {
133146
letter-spacing: -1.65px;
134147
font-size: rem(56px);
135148
line-height: rem(60px);
136149
text-transform: none;
137-
138150
a {
139151
color: $white;
140152
word-wrap: break-word;
141153
}
142154
}
143155

144156
.blog-title {
157+
display: inline-flex;
145158
&:hover {
146159
color: $white;
147160
}
148161
}
149162

150163
.blog-detail-container {
151-
padding-top: 5rem;
164+
padding-top: 4rem;
152165
@include desktop {
153166
padding-top: rem(174px);
154167
}
@@ -177,8 +190,10 @@
177190
}
178191

179192
.blog-detail-jumbotron {
193+
top: 45px;
180194
@include desktop {
181195
height: 107px;
196+
top: 75px;
182197
}
183198
}
184199

@@ -224,9 +239,6 @@
224239
line-height: rem(40px);
225240
}
226241
}
227-
p {
228-
line-height: rem(20px);
229-
}
230242
}
231243

232244
.main-content-wrapper {

0 commit comments

Comments
 (0)