Skip to content

Change post-index page styles #21

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Oct 7, 2018
Merged

Change post-index page styles #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9d9921d
try using flex
bluenex Sep 20, 2018
69d5857
change url to netlify for demo purpose
bluenex Sep 20, 2018
9966a37
fix cover image style
bluenex Oct 6, 2018
6d42ded
fix spacing and sizing of post card on home screen
bluenex Oct 6, 2018
e9ff075
move size config to post-index only
bluenex Oct 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ words_per_minute: 800
# Your site's domain goes here (eg: https://mmistakes.github.io, http://yourdomain.com, etc)
# When testing locally leave blank or use http://localhost:4000
# url: # comment this when pushing to server
url: https://tupleblog.github.io # comment this when testing locally
url: https://tupleblog.netlify.com # comment this when testing locally

# Owner/author information
owner:
Expand Down Expand Up @@ -58,7 +58,7 @@ gist:
permalink: /:categories/:title/

# Amount of post to show on home page
paginate: 5
paginate: 12

kramdown:
input: GFM
Expand Down
39 changes: 34 additions & 5 deletions _sass/_page.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,14 @@ body {
}
}
}
.entry-title {
line-height: 1em;
margin-block-start: 0.25em;
margin-block-end: 0.25em;
a {
font-size: 1.5rem;
}
}

// Entry Header
// --------------------------------------------------
Expand Down Expand Up @@ -367,12 +375,18 @@ header .entry-meta {
@media #{$medium} {
margin-left: 20px;
margin-right: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
@media #{$large} {
max-width: 800px;
max-width: 1024px;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
}
article {
Expand All @@ -382,15 +396,25 @@ header .entry-meta {
margin-bottom: 20px;
padding: 25px 15px;
@media #{$medium} {
width: 49%;
padding: 30px;
}
@media #{$large} {
width: 32%;
margin-bottom: 30px;
padding: 50px 80px;
padding: 20px;
}
}
.entry-content {
overflow: hidden;
height: 12.5em;
}
}
.entry-image-index {
height: 180px;
overflow: hidden;
position: relative;

margin-top: -25px;
margin-left: -15px;
margin-right: -15px;
Expand All @@ -402,12 +426,17 @@ header .entry-meta {
margin-bottom: 15px;
}
@media #{$large} {
margin-top: -50px;
margin-left: -80px;
margin-right: -80px;
margin-top: -20px;
margin-left: -20px;
margin-right: -20px;
margin-bottom: 20px;
}
img {
position: absolute;
top: 0;
bottom: 0;
margin: auto;

@include border-radius(3px,0,0,3px); // round image corners
}
}
Expand Down
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<span class="entry-date date published updated">
<time datetime="{{ post.date | date_to_xmlschema }}">
<a href="{{ site.url }}{{ post.url }}">
{{ post.date | date: "%B %d, %Y" }}
{{ post.date | date: "%d-%b-%Y" }}
</a>
</time>
</span>
Expand All @@ -35,7 +35,7 @@
<span class="entry-reading-time">
<i class="fa fa-clock-o"></i>
{% assign readtime = post.content | size | minus:8 | divided_by: site.words_per_minute %}
Reading time ~{% if post.read_time %}{{ post.read_time }} minutes{% else %}{% if readtime <= 1 %}1 minute{% else %}{{ readtime }} minutes{% endif %}{% endif %}
&nbsp;~{% if post.read_time %}{{ post.read_time }} min{% else %}{% if readtime <= 1 %}1 min{% else %}{{ readtime }} min{% endif %}{% endif %}
</span><!-- /.entry-reading-time -->
{% endif %}
</div><!-- /.entry-meta -->
Expand Down