Skip to content

Clean up blog layout #1148

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 1 commit into from
Jun 12, 2019
Merged

Clean up blog layout #1148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
9 changes: 7 additions & 2 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
# Hugo default output directory
/public
# Hugo generated resources directory. Note: if the generated files
# were checked into the repo, could improve build times. But since
# we rebuild as part of CI/CD deployments, we just don't check-in.
/resources

.DS_Store
/resources/
/public/
node_modules
*.map
153 changes: 127 additions & 26 deletions assets/sass/_pulumi-blog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,108 @@
@import "pulumi-constants";

// Styles for the Pulumi blog.
#pul-blog {
// Clear a broad style from the rest of our CSS.
// BUG: Bulleted lists in blog content isn't being displayed.
li:before { display: none; }
ul li { padding-left: 0; }

// .post-list is used whenever the summaries of several blog posts are displayed.
// Such as on the listing page for an author or tag.
.posts-list {
// Separate each post summary.
li {
border: 1px solid purple;
padding-bottom: 16px;
}

.post-header {
padding-bottom: 4px;

small {
font-style: italic;
color: $light-gray;
}

// The blog header's title combines both the
// author images and the title all inside the h3.
h3 {
display: flex;
margin-top: 4px;
margin-bottom: 4px;

align-items: flex-start;

img {
border-radius: 36px;
width: 36px;
height: 36px;

margin-right: 6px;
}

// The first N links are to the post's authors, with each
// image overlapping slightly via negative margins.
a.author {
flex-shrink: 0;
position: relative;
overflow: hidden;
margin-left: -18px;
}
a.author:first-of-type {
margin-left: 0;
}
// The last link, which is to the blog post.
a.author:last-of-type {
margin-left: 4px;
}
}
}

// As part of the post summary, we display the "post's image" inline.
.post-image {
max-width: 150px;
float: right;
margin: 16px;
margin-top: 0;
}
}

// Section at the end of an individual blog post.
.pul-post-ending {
small {
font-style: italic;
color: $light-gray;
}
}

.taxonomy-page-header {
margin-top: 0;
}

// Authors list for a single post. Shows an avatar, title, etc.
.authors {
.author {
display: flex;
display: inline-flex;
margin-right: 16px;

// Don't show the link to the author's posts as a regular link.
a.author-link {
color: $primary;
font-weight: bold;
font-size: 150%;
text-decoration: none;
}

a.author-link:hover {
color: inherit;
text-decoration: none;
}

// When showing the social links under the author, customize
// the "logo-roll" defined elsewhere.
ul.logo-roll.inline-block {
margin-left: 6px;
}

img {
height: 90px;
Expand All @@ -30,50 +117,64 @@
// Author details, the large widget we use on the author-specific listing page.
.author-details {
display: flex;
margin-bottom: 24px;

img {
flex-basis: 180;

height: 180px;
width: 180px;
border-radius: 180px;

margin-right: 16px;
}
}

// The author may provide a free-form bio in HTML.
.author-bio {
font-size: 70%;
color: gray;
}
.profile {
margin-left: 16px;

// The tags listing at the bottom of a post.
.post-tags-list {
display: flex;
h2 {
margin-top: 0;
}
p {
margin-bottom: 0;
}

// When showing the social links under the author, customize
// the "logo-roll" defined elsewhere.
ul.logo-roll.inline-block {
margin-left: 6px;
}
}
}

// Tag lists. Displayed on sidebar and bottom of posts.
.pul-tags-list {
li {
padding: 4px;
margin: 4px;
display: inline-block;
margin: 0;
}

background-color: orange;
border-radius: 6px;
a {
padding: 1px 4px;
border-radius: 4px;

a {
color: white;
}
a:link { text-decoration: none; }
a:hover { text-decoration: none; }
color: white;
background-color: $primary4;

text-decoration: none;
}

a:hover { text-decoration: none; }
}

// The paginator widget.
.paginator {
display: flex;
}

// The sidebar for the blog and content.
.sidebar {
.tags-list {
border: 1px solid yellow;
.pul-sidebar {
padding-right: 24px;

h3 {
margin-top: 0;
}
}
}
2 changes: 2 additions & 0 deletions assets/sass/_pulumi-constants.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,5 @@ $accent1: #f6e5ff; // light purple
$accent2: #e1f6ff; // light blue
$accent3: #3EC2F8; // bright blue
$accent4: #fbe5d7; // light orange

$light-gray: #d3d3d3; // light gray
20 changes: 20 additions & 0 deletions assets/sass/postcss.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
/**
* Configuration file for PostCSS. This is only used as part of the Hugo pipeline
* build process for our Sass files, since we run the resulting CSS through PostCSS
* at the end to do more transformations.
*/
module.exports = {
plugins: {
// Apply vendor prefixes for CSS features that aren't
// fully supported yet.
autoprefixer: {
overrideBrowserslist: [
"last 2 versions"
]
},
// Minify the CSS even further. (It works!)
cssnano: {
preset: "default"
}
}
};
47 changes: 28 additions & 19 deletions layouts/blog/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{ define "main" }}
<section class="content-block border-top">
<section class="content-block">
<div class="container-fluid">
<div id="pul-blog" class="row">

Expand All @@ -8,35 +8,44 @@

{{ partial "blog/sidebar.html" . }}

<div class="col-md-10">
<div class="col-md-7">
<ul class="posts-list">
{{ $paginator := .Paginate (where .Pages "Type" "blog").ByDate.Reverse }}
{{ range $paginator.Pages }}
<li>
<h3>
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h3>
<div>
<div class="post-header">
<small>
Posted <time>{{ .Date.Format "Jan 2, 2006" }}</time>
<time>{{ .Date.Format "Monday, Jan 2, 2006" }}</time>
</small>

{{/* List post authors. Each with a comma prefix, except first. */}}
<small>
By
<h3 class="no-anchor">
{{ range $idx, $authorName := .Param "authors" }}
{{ with $authorPage := $.Site.GetPage (printf "/authors/%s" ($authorName | urlize)) }}
{{ if $idx }}, {{ end }}
<a href="{{ $authorPage.Permalink }}">
{{ $authorData := index $.Site.Data.team.team $authorName }}
{{ $authorData.name }}
</a>
{{ end }}
{{ $authorPage := $.Site.GetPage (printf "/authors/%s" ($authorName | urlize)) }}
{{ $authorData := index $.Site.Data.team.team $authorName }}
<a class="author author-{{ $idx }}" href="{{ $authorPage.Permalink }}">
<img
src="{{ $.Site.BaseURL }}images/team/{{ $authorData.id }}.jpg"
alt="{{ $authorData.name }}" title="{{ $authorData.name }}">
</a>
{{ end }}
</small>
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h3>
</div>
<div>
{{/*
If a general image is associated with the post, display it in-line.
Though we need to do some work to convert a relative image path.
*/}}
{{ if .Param "meta_image" }}
{{ if in .Params.meta_image "RELATIVE_TO_PAGE" }}
{{ $imagePath := replace .Params.meta_image "RELATIVE_TO_PAGE/" "" }}
<img class="post-image" src="{{ .Page.Permalink }}{{ $imagePath }}" alt="{{ .Title }}">
{{ else }}
<img class="post-image" src="{{ .Site.BaseURL }}{{ .Params.meta_image }}" alt="{{ .Title }}">
{{ end }}
{{ end }}

{{ .Render "post-summary" }}
<div class="clearfix"></div>
</div>
</li>
{{ end }}
Expand Down
Loading