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 }}
{{ block "footer" . }}{{ end }} </main>
</div>
{{ block "footer" . }}{{ end }}
</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 }}
{{ with .Resources.ByType "image" }}
{{ $image := index . 1 }}
{{ range . }}
{{ if eq .Name "images/cover.png" }}
{{ $image = . }}
{{ else if eq .Name "images/cover.jpg" }}
{{ $image = . }}
{{ else if eq .Name "images/cover.jpeg" }}
{{ $image = . }}
{{ end }}
{{ end }}
</ul> <div class="cover">
<img src="{{ $image.RelPermalink }}" alt="{{ $title }}">
<h1>old</h1> </div>
<ul id="post-list">
{{ range where .Paginator.Pages "Params.hidden" "ne" "true" }}
{{ $url := replace .Permalink .Site.BaseURL "" }}
{{ if ne $url "about/" }}
<li>
<aside class="dates">{{ .Date.Format "Jan 2" }}</aside>
<a href='{{ .Permalink }}'>
{{ .Title }}
{{ if .Site.Params.enableSummary }}
{{ if .Site.Params.useDescriptionReplaceSummary }}
<h2>{{ .Description | plainify }}</h2>
{{ else }}
<h2>{{ .Summary | plainify | htmlUnescape }}</h2>
{{ end }}
{{ end }}
</a>
</li>
{{ end }} {{ end }}
{{ end }}
</ul> </section>
</section> {{ end }}
</div>
{{ end }} {{ end }}

@ -1,16 +1,15 @@
<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" />
</a> </a>
{{ else }} {{ else }}
<img class="avatar" alt="avatar" src="{{ .Site.BaseURL }}images/avatar.png" /> <img class="avatar" alt="avatar" src="{{ .Site.BaseURL }}images/avatar.png" />
{{ end }} {{ end }}
<h1>{{ .Site.Title }}</h1> <h1>{{ .Site.Title }}</h1>
{{ with .Site.Params.Bio }}
<h2>{{ . | markdownify }}</h2> {{ with .Site.Params.Bio }}
{{ end }} <h2>{{ . | markdownify }}</h2>
</section> {{ end }}
</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