feat: update index page styles

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

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

@ -1,46 +1,41 @@
{{ define "main" }}
{{ partial "profile.html" . }}
<section id="wrapper">
<ul id="post-list">
<div id="list-page">
{{ $pages := where .Site.RegularPages "Params.hidden" "ne" "true" }}
{{ $paginator := .Paginate ($pages) }}
{{ range $paginator.Pages }}
<li>
{{ $title := .Title }}
{{ $summary := .Summary }}
<section class="item">
<div>
<h1 class="title"><a href='{{ .RelPermalink }}'>{{ .Title }}</a></h1>
<div class="dates">{{ .Date.Format "Jan 2" }}</div>
<h1 class="title"><a href='{{ .RelPermalink }}'>{{ $title }}</a></h1>
<div class="date">{{ .Date.Format "Jan 2" }}</div>
</div>
<div>{{ .Summary | plainify | htmlUnescape }}</div>
</li>
{{ end }}
<div class="summary">{{ $summary | plainify | htmlUnescape }}</div>
</ul>
<h1>old</h1>
<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>
{{ 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 }}
</a>
</li>
{{ end }}
<div class="cover">
<img src="{{ $image.RelPermalink }}" alt="{{ $title }}">
</div>
{{ end }}
</ul>
</section>
{{ end }}
</div>
{{ end }}

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

@ -120,11 +120,11 @@ table {
a {
text-decoration: none;
color: #5694f1;
color: #5badf0;
}
a:hover {
color: #5badf0;
color: #0366d6;
}
@ -148,6 +148,9 @@ nav.navigation a {
line-height: 1.35;
border-radius: 3px;
}
nav.navigation a:hover {
color: #0366d6;
}
nav.navigation a.button {
background: #5badf0;
@ -191,7 +194,7 @@ nav.navigation a.button {
/* profile */
.profile .wrapper {
.profile {
margin: 60px auto 0 auto;
text-align: center;
}
@ -202,7 +205,6 @@ nav.navigation a.button {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 20px;
}
.profile h1 {
@ -210,6 +212,7 @@ nav.navigation a.button {
letter-spacing: 0px;
font-size: 20px;
color: #222;
margin-top: 12px;
}
.profile h2 {
@ -217,7 +220,49 @@ nav.navigation a.button {
font-weight: 300;
color: #aaa;
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