update project statuses, move TILs into regular posts with tag, revamp site colors to kimber base16 palette
This commit is contained in:
@@ -56,16 +56,4 @@
|
||||
|
||||
{{ end }}
|
||||
|
||||
{{/* TILs Section */}}
|
||||
{{ $tils := where .Site.Pages "Params.type" "tils" }}
|
||||
{{ $tilsToShow := $tils.ByDate.Reverse | first (or .Site.Params.NumberTilsOnHomePage 3) }}
|
||||
{{ if gt (len $tilsToShow) 0 }}
|
||||
<div class="home-posts list-posts">
|
||||
<h2>Recent TILs</h2>
|
||||
{{ range $tilsToShow }}
|
||||
{{- partial "list-posts.html" . -}}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
@@ -0,0 +1,124 @@
|
||||
<style>
|
||||
.post-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.post-image img {
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid var(--light-secondary-color);
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-caption p {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Mobile - small images fit better */
|
||||
@media (max-width: 480px) {
|
||||
.post-image img {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet - medium size */
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.post-image img {
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop - larger but not overwhelming */
|
||||
@media (min-width: 769px) {
|
||||
.post-image img {
|
||||
width: 60%;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="post container">
|
||||
<div class="post-header-section">
|
||||
<h1>{{ .Title | markdownify }}</h1>
|
||||
|
||||
{{/* Determine whether to display the date & description based on tags */}}
|
||||
|
||||
{{ $displayDate := true }}
|
||||
{{ $displayDescription := true }}
|
||||
{{ $postTags := or .Params.Tags slice }}
|
||||
{{ $hiddenTags := or .Site.Params.Hidden.Tags slice }}
|
||||
{{ $tagsHidePostDate := or .Site.Params.Hidden.TagsPostDate slice }}
|
||||
{{ $tagsHidePostDescription := or .Site.Params.Hidden.TagsPostDescription slice }}
|
||||
|
||||
{{ if gt ($tagsHidePostDate | intersect $postTags | len) 0 }}
|
||||
{{ $displayDate = false }}
|
||||
{{ end }}
|
||||
|
||||
{{ if gt ($tagsHidePostDescription | intersect $postTags | len) 0 }}
|
||||
{{ $displayDescription = false }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $displayDescription }}
|
||||
<small role="doc-subtitle">{{ .Description }}</small>
|
||||
{{ end }}
|
||||
|
||||
{{ if $displayDate }}
|
||||
<p class="post-date">{{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Date}}
|
||||
{{ if lt .Date .Lastmod }} | Updated {{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Lastmod }}{{ end }}
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
<ul class="post-tags">
|
||||
{{ range $tag := $postTags }}
|
||||
{{ if not (in $hiddenTags $tag) }}
|
||||
<li class="post-tag"><a href="{{ "tags/" | absLangURL }}{{ . | urlize }}">{{ . }}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{/* Display image if present in front matter */}}
|
||||
{{ if .Params.image }}
|
||||
<div class="post-image">
|
||||
<img src="{{ .Params.image | absURL }}" alt="{{ .Params.image_alt | default .Title }}">
|
||||
</div>
|
||||
{{ with .Params.image_caption }}
|
||||
<div class="image-caption">
|
||||
<p>{{ . }}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<div class="post-content">
|
||||
{{ .Content }}
|
||||
{{ if .Site.Config.Services.Disqus.Shortname }}
|
||||
<div class="post-comments">
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="prev-next">
|
||||
{{ if eq .Site.Params.TogglePreviousAndNextButtons "true" }}
|
||||
{{ if or .PrevInSection .NextInSection }}
|
||||
{{ partial "prev-next.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Back to top button -->
|
||||
{{ if .Site.Params.ShowBackToTopButton }}
|
||||
{{ partial "back-to-top.html" . }}
|
||||
{{ end }}
|
||||
{{ if .Site.Params.CustomCommentHTML }}
|
||||
<div id="comments">
|
||||
{{ .Site.Params.CustomCommentHTML | safeHTML }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
@@ -10,17 +10,6 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background-color: rgba(76, 175, 80, 0.15);
|
||||
color: #4caf50;
|
||||
border: 1px solid #4caf50;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background-color: rgba(158, 158, 158, 0.15);
|
||||
color: #9e9e9e;
|
||||
border: 1px solid #9e9e9e;
|
||||
}
|
||||
|
||||
.project-date {
|
||||
font-size: 0.85rem;
|
||||
@@ -40,10 +29,10 @@
|
||||
<header class="entry-header">
|
||||
<h3 class="entry-title">
|
||||
<a href="{{ .Permalink }}" rel="bookmark">{{ .Title }}</a>
|
||||
{{ if .Params.active }}
|
||||
<span class="status-badge status-active">Active</span>
|
||||
{{ else }}
|
||||
<span class="status-badge status-inactive">Inactive</span>
|
||||
{{ $page := . }}
|
||||
{{ with .Params.status }}
|
||||
{{ $color := $page.Params.statusColor | default "#9e9e9e" }}
|
||||
<span class="status-badge" style="color: {{ $color }}; border: 1px solid {{ $color }}; background-color: {{ $color }}20;">{{ . }}</span>
|
||||
{{ end }}
|
||||
<span class="project-date">Updated {{ .Lastmod.Format "Jan 2, 2006" }}</span>
|
||||
</h3>
|
||||
|
||||
@@ -11,17 +11,6 @@
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.status-active {
|
||||
background-color: rgba(76, 175, 80, 0.15);
|
||||
color: #4caf50;
|
||||
border: 1px solid #4caf50;
|
||||
}
|
||||
|
||||
.status-inactive {
|
||||
background-color: rgba(158, 158, 158, 0.15);
|
||||
color: #9e9e9e;
|
||||
border: 1px solid #9e9e9e;
|
||||
}
|
||||
|
||||
.post-image {
|
||||
display: flex;
|
||||
@@ -68,10 +57,9 @@
|
||||
<div class="post-header-section">
|
||||
<h1>
|
||||
{{ .Title | markdownify }}
|
||||
{{ if .Params.active }}
|
||||
<span class="status-badge status-active">Active</span>
|
||||
{{ else }}
|
||||
<span class="status-badge status-inactive">Inactive</span>
|
||||
{{ with .Params.status }}
|
||||
{{ $color := $.Params.statusColor | default "#9e9e9e" }}
|
||||
<span class="status-badge" style="color: {{ $color }}; border: 1px solid {{ $color }}; background-color: {{ $color }}20;">{{ . }}</span>
|
||||
{{ end }}
|
||||
</h1>
|
||||
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
{{ define "main" }}
|
||||
<div class="container">
|
||||
<h1>Today I Learned</h1>
|
||||
|
||||
<p>Debug Info:</p>
|
||||
<ul>
|
||||
<li>Total Pages: {{ len .Pages }}</li>
|
||||
<li>Is Section: {{ .IsSection }}</li>
|
||||
<li>Section Name: {{ .Section }}</li>
|
||||
</ul>
|
||||
|
||||
{{ range .Pages }}
|
||||
<article>
|
||||
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
|
||||
<p>Date: {{ .Date.Format "January 2, 2006" }}</p>
|
||||
{{ with .Description }}
|
||||
<p>{{ . }}</p>
|
||||
{{ end }}
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
{{ if eq (len .Pages) 0 }}
|
||||
<p>No TIL posts found.</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -1,31 +0,0 @@
|
||||
{{ define "main" }}
|
||||
<div class="container">
|
||||
<h1 class="page-title">{{ .Title }}</h1>
|
||||
|
||||
{{ .Content }}
|
||||
|
||||
<div class="posts-list">
|
||||
{{ range .Pages }}
|
||||
<article class="post-entry">
|
||||
<header class="entry-header">
|
||||
<h2 class="entry-title">
|
||||
<a href="{{ .Permalink }}" rel="bookmark">
|
||||
{{ .Date.Format "Jan 2, 2006" }} - {{ .Title }}
|
||||
</a>
|
||||
</h2>
|
||||
</header>
|
||||
|
||||
{{ with .Description }}
|
||||
<div class="entry-summary">
|
||||
{{ . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</article>
|
||||
{{ end }}
|
||||
|
||||
{{ if eq (len .Pages) 0 }}
|
||||
<p>No TIL posts yet.</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
@@ -1,129 +0,0 @@
|
||||
{{ define "main" }}
|
||||
|
||||
<style>
|
||||
.post-image {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.post-image img {
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
border: 1.5px solid var(--light-secondary-color);
|
||||
box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-caption p {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Mobile - small images fit better */
|
||||
@media (max-width: 480px) {
|
||||
.post-image img {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Tablet - medium size */
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.post-image img {
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop - larger but not overwhelming */
|
||||
@media (min-width: 769px) {
|
||||
.post-image img {
|
||||
width: 60%;
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="post container">
|
||||
<div class="post-header-section">
|
||||
<h1>{{ .Title | markdownify }}</h1>
|
||||
|
||||
{{/* Determine whether to display the date & description based on tags */}}
|
||||
|
||||
{{ $displayDate := true }}
|
||||
{{ $displayDescription := true }}
|
||||
{{ $postTags := or .Params.Tags slice }}
|
||||
{{ $hiddenTags := or .Site.Params.Hidden.Tags slice }}
|
||||
{{ $tagsHidePostDate := or .Site.Params.Hidden.TagsPostDate slice }}
|
||||
{{ $tagsHidePostDescription := or .Site.Params.Hidden.TagsPostDescription slice }}
|
||||
|
||||
{{ if gt ($tagsHidePostDate | intersect $postTags | len) 0 }}
|
||||
{{ $displayDate = false }}
|
||||
{{ end }}
|
||||
|
||||
{{ if gt ($tagsHidePostDescription | intersect $postTags | len) 0 }}
|
||||
{{ $displayDescription = false }}
|
||||
{{ end }}
|
||||
|
||||
{{ if $displayDescription }}
|
||||
<small role="doc-subtitle">{{ .Description }}</small>
|
||||
{{ end }}
|
||||
|
||||
{{ if $displayDate }}
|
||||
<p class="post-date">{{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Date}}
|
||||
{{ if lt .Date .Lastmod }} | Updated {{ dateFormat (or .Site.Params.dateFormat "January 2, 2006") .Lastmod }}{{
|
||||
end }}
|
||||
</p>
|
||||
{{ end }}
|
||||
|
||||
<ul class="post-tags">
|
||||
{{ range $tag := $postTags }}
|
||||
{{ if not (in $hiddenTags $tag) }}
|
||||
<li class="post-tag"><a href="{{ " tags/" | absLangURL }}{{ . | urlize }}">{{ . }}</a></li>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{{/* Display image if present in front matter */}}
|
||||
{{ if .Params.image }}
|
||||
<div class="post-image">
|
||||
<img src="{{ .Params.image | absURL }}" alt="{{ .Params.image_alt | default .Title }}">
|
||||
</div>
|
||||
<div class="image-caption">
|
||||
<p>{{ .Params.image_caption}}</p>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
<div class="post-content">
|
||||
{{ .Content }}
|
||||
{{ if .Site.Config.Services.Disqus.Shortname }}
|
||||
<div class="post-comments">
|
||||
{{ template "_internal/disqus.html" . }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div class="prev-next">
|
||||
{{ if eq .Site.Params.TogglePreviousAndNextButtons "true" }}
|
||||
{{ if or .PrevInSection .NextInSection }}
|
||||
{{ partial "prev-next.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<!-- Back to top button -->
|
||||
{{ if .Site.Params.ShowBackToTopButton }}
|
||||
{{ partial "back-to-top.html" . }}
|
||||
{{ end }}
|
||||
{{ if .Site.Params.CustomCommentHTML }}
|
||||
<div id="comments">
|
||||
{{ .Site.Params.CustomCommentHTML | safeHTML }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
{{- partial "toc.html" . -}}
|
||||
|
||||
{{ end }}
|
||||
Reference in New Issue
Block a user