feat: update index page styles

feature/cover-image
nodejh 4 years ago
parent 2b1fc63ec0
commit 180c9c61d6

@ -10,10 +10,10 @@
<body> <body>
{{ partial "navigation.html" . }} {{ partial "navigation.html" . }}
<div class="main"> <main class="main">
{{ block "header" . }}{{ end }}
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</main>
{{ block "footer" . }}{{ end }} {{ block "footer" . }}{{ end }}
</div>
</body> </body>
</html> </html>

@ -1,46 +1,41 @@
{{ define "main" }} {{ define "main" }}
{{ partial "profile.html" . }} {{ partial "profile.html" . }}
<section id="wrapper"> <div id="list-page">
<ul id="post-list">
{{ $pages := where .Site.RegularPages "Params.hidden" "ne" "true" }} {{ $pages := where .Site.RegularPages "Params.hidden" "ne" "true" }}
{{ $paginator := .Paginate ($pages) }} {{ $paginator := .Paginate ($pages) }}
{{ range $paginator.Pages }} {{ range $paginator.Pages }}
<li> {{ $title := .Title }}
{{ $summary := .Summary }}
<section class="item">
<div> <div>
<h1 class="title"><a href='{{ .RelPermalink }}'>{{ .Title }}</a></h1> <h1 class="title"><a href='{{ .RelPermalink }}'>{{ $title }}</a></h1>
<div class="dates">{{ .Date.Format "Jan 2" }}</div> <div class="date">{{ .Date.Format "Jan 2" }}</div>
</div> </div>
<div>{{ .Summary | plainify | htmlUnescape }}</div> <div class="summary">{{ $summary | plainify | htmlUnescape }}</div>
</li>
{{ end }}
</ul> {{ with .Resources.ByType "image" }}
{{ $image := index . 1 }}
<h1>old</h1> {{ range . }}
<ul id="post-list"> {{ if eq .Name "images/cover.png" }}
{{ range where .Paginator.Pages "Params.hidden" "ne" "true" }} {{ $image = . }}
{{ $url := replace .Permalink .Site.BaseURL "" }} {{ else if eq .Name "images/cover.jpg" }}
{{ if ne $url "about/" }} {{ $image = . }}
<li> {{ else if eq .Name "images/cover.jpeg" }}
<aside class="dates">{{ .Date.Format "Jan 2" }}</aside> {{ $image = . }}
<a href='{{ .Permalink }}'>
{{ .Title }}
{{ if .Site.Params.enableSummary }}
{{ if .Site.Params.useDescriptionReplaceSummary }}
<h2>{{ .Description | plainify }}</h2>
{{ else }}
<h2>{{ .Summary | plainify | htmlUnescape }}</h2>
{{ end }} {{ end }}
{{ end }} {{ end }}
</a>
</li> <div class="cover">
<img src="{{ $image.RelPermalink }}" alt="{{ $title }}">
</div>
{{ end }} {{ end }}
</section>
{{ end }} {{ end }}
</ul>
</section> </div>
{{ end }} {{ end }}

@ -1,5 +1,4 @@
<header class="profile"> <header class="profile">
<section class="wrapper">
{{ if .Site.Params.avatarLink }} {{ if .Site.Params.avatarLink }}
<a href="{{ .Site.Params.avatarLink }}"> <a href="{{ .Site.Params.avatarLink }}">
<img class="avatar" alt="avatar" src="{{ .Site.BaseURL }}images/avatar.png" /> <img class="avatar" alt="avatar" src="{{ .Site.BaseURL }}images/avatar.png" />
@ -9,8 +8,8 @@
{{ end }} {{ end }}
<h1>{{ .Site.Title }}</h1> <h1>{{ .Site.Title }}</h1>
{{ with .Site.Params.Bio }} {{ with .Site.Params.Bio }}
<h2>{{ . | markdownify }}</h2> <h2>{{ . | markdownify }}</h2>
{{ end }} {{ end }}
</section>
</header> </header>

@ -120,11 +120,11 @@ table {
a { a {
text-decoration: none; text-decoration: none;
color: #5694f1; color: #5badf0;
} }
a:hover { a:hover {
color: #5badf0; color: #0366d6;
} }
@ -148,6 +148,9 @@ nav.navigation a {
line-height: 1.35; line-height: 1.35;
border-radius: 3px; border-radius: 3px;
} }
nav.navigation a:hover {
color: #0366d6;
}
nav.navigation a.button { nav.navigation a.button {
background: #5badf0; background: #5badf0;
@ -191,7 +194,7 @@ nav.navigation a.button {
/* profile */ /* profile */
.profile .wrapper { .profile {
margin: 60px auto 0 auto; margin: 60px auto 0 auto;
text-align: center; text-align: center;
} }
@ -202,7 +205,6 @@ nav.navigation a.button {
width: 80px; width: 80px;
height: 80px; height: 80px;
border-radius: 50%; border-radius: 50%;
margin-bottom: 20px;
} }
.profile h1 { .profile h1 {
@ -210,6 +212,7 @@ nav.navigation a.button {
letter-spacing: 0px; letter-spacing: 0px;
font-size: 20px; font-size: 20px;
color: #222; color: #222;
margin-top: 12px;
} }
.profile h2 { .profile h2 {
@ -217,7 +220,49 @@ nav.navigation a.button {
font-weight: 300; font-weight: 300;
color: #aaa; color: #aaa;
margin-top: 10px; margin-top: 10px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-style: normal;
} }
/* index post list */
#list-page .item {
margin: 48px 0 0 0;
}
#list-page .title {
display: inline-block;
color: #333;
font-size: 20px;
font-weight: 400;
}
#list-page .title a {
color: #333;
display: block;
}
#list-page .title a:hover {
color: #0366d6;
}
#list-page .date {
float: right;
position: relative;
top: 1px;
color: #bbb;
}
#list-page .summary {
color: #6a737d;
margin-top: 12px;
}
#list-page .cover {
width: 100px;
height: 100px;
background: #fff;
}
#list-page .cover img {
width: 100%;
text-align: center;
}
Loading…
Cancel
Save