vbatts/hugo-theme-console
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

home page: add home page with the latest posts and photos

Browse source 
screenshots: update screenshot with new home page
This commit is contained in:
Marcin Mierzejewski 2020-05-03 11:38:44 +02:00
parent 49427a6f50
commit 512902121b
7 changed files with 91 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -26,7 +26,7 @@ theme = "hugo-theme-console"
## Example Site
If you want to run the example site, please run the following command:
To run the example site, please type the following command:
```
makefile hugo-server

1
exampleSite/config.toml
View file

@ -11,7 +11,6 @@ languageCode = "en-us"
[[params.navlinks]]
name = "posts/"
url = "/posts/"
home = true
[[params.navlinks]]
name = "photos/"

BIN
images/screenshot.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 779 KiB

After

Width:  |  Height:  |  Size: 568 KiB

BIN
images/tn.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 332 KiB

After

Width:  |  Height:  |  Size: 246 KiB

6
layouts/_default/list.html
View file

@ -3,12 +3,16 @@
<br/>
{{ .Content }}
<div class="posts-list">
{{ range sort .Data.Pages "Date" "desc" }}
{{ if not .Params.private }}
<div class="post-list-date">{{ .PublishDate.Format "Jan. 2, 2006" }}</div>
<div class="post">
<div class="date">{{ .PublishDate.Format "Jan. 2, 2006" }}</div>
<h1><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a></h1>
{{ .Summary }}
</div>
{{ end }}
{{ end }}
</div>
{{ end }}

43
layouts/index.html
View file

@ -1,7 +1,40 @@
<head>
{{ range .Site.Params.navlinks }}
{{ if .home }}
<meta http-equiv="refresh" content="0; URL={{ .url | absURL }}" />
{{ define "main" }}
<h1>About</h1>
<p>
Console is a minimal, responsive and light theme for Hugo inspired by Linux console. <a href="/about/">(more)</a>
</p>
<br/>
<h1>Latest posts</h1>
<div class="posts-list">
{{ with .Site.GetPage "/posts" }}
{{ range first 3 ((where .Pages ".Params.private" "!=" true) sort .Data.Pages "Date" "desc")}}
<div class="post">
<div class="date">{{ .PublishDate.Format "Jan. 2, 2006" }}</div>
<h1><a href="{{ .Permalink }}" title="{{ .Title }}">{{ .Title }}</a></h1>
{{ .Summary }}
</div>
{{ end }}
{{ end }}
</head>
</div>
<h1>Latest photos</h1>
<div class="image-grid">
{{ with .Site.GetPage "/photos" }}
{{ range first 3 (sort .Data.Pages "Date" "desc")}}
<a href="{{ .Permalink }}" title="{{ .Title }}">
{{ $image := .Page.Resources.GetMatch .Params.image }}
{{ with $image }}
{{ $thumb := .Resize "400x" }}
<img src="{{ $thumb.RelPermalink }}" alt="{{ .Title }}" class="img-responsive">
{{end}}
</a>
{{ end }}
{{ end }}
</div>
{{ end }}

56
static/hugo-theme-console/css/console.css
View file

@ -153,14 +153,6 @@ strong {
margin-right: 30px;
}
.post-list-date {
float: left;
font-weight: bold;
width: 150px;
height: 120px;
margin-top: 21px;
}
figure {
margin-top: 15px;
margin-bottom: 15px;
@ -201,6 +193,28 @@ figure {
margin-bottom: 10px;
}
.posts-list {
position: relative;
padding-left: 150px;
top: 0;
margin-top: 21px;
}
.post h1 {
padding-top: 0;
}
.posts-list .date {
display: inline-block;
position: absolute;
left: 0px;
width: 150px;
height: 100%;
z-index: 400;
font-weight: bold;
padding-top: 3px;
}
@media only screen and (max-width: 850px) {
.site-name {
width: 2ch;
@ -236,11 +250,31 @@ figure {
margin-left: 30px;
margin-right: 30px;
}
.post-list-date {
width: 0;
overflow: hidden;
.posts-list {
position: relative;
padding-left: 0;
top: 0;
margin-top: 21px;
}
.post h1 {
padding-top: 0;
}
.posts-list .date {
display: inline-block;
position: absolute;
left: 0px;
width: 150px;
height: 100%;
z-index: 400;
font-weight: bold;
padding-top: 3px;
display: none;
}
.footer {
margin-top: 50px;
padding-top: 5px;;