feat: update index page styles

4 years ago · 180c9c61d6
parent 2b1fc63ec0
commit 180c9c61d6
4 changed files with 90 additions and 51 deletions
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@ -10,10 +10,10 @@
  <body>
    {{ partial "navigation.html" . }}

-    <div class="main">
-      {{ block "header" . }}{{ end }}
+    <main class="main">
      {{ block "main" . }}{{ end }}
-      {{ block "footer" . }}{{ end }}
-    </div>
+    </main>
+    
+    {{ block "footer" . }}{{ end }}
  </body>
 </html>
--- a/layouts/index.html
+++ b/layouts/index.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>
+


+          {{ 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>
-
-  <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>
-                          {{ end }}
-                      {{ end }}
-                  </a>
-              </li>
+            <div class="cover">
+              <img src="{{ $image.RelPermalink }}" alt="{{ $title }}">
+            </div>
          {{ end }}
-      {{ end }}
-  </ul>
-</section>
+
+        </section>
+    {{ end }}
+
+</div>
 {{ end }}
--- a/layouts/partials/profile.html
+++ b/layouts/partials/profile.html
@ -1,16 +1,15 @@
 <header class="profile">
-  <section class="wrapper">
-      {{ if .Site.Params.avatarLink }}
+    {{ if .Site.Params.avatarLink }}
        <a href="{{ .Site.Params.avatarLink }}">
          <img class="avatar" alt="avatar" src="{{ .Site.BaseURL }}images/avatar.png" />
        </a>
-      {{ else }}
+    {{ else }}
        <img class="avatar" alt="avatar" src="{{ .Site.BaseURL }}images/avatar.png" />
-      {{ end }}
+    {{ end }}

-      <h1>{{ .Site.Title }}</h1>
-      {{ with .Site.Params.Bio }}
-        <h2>{{ . | markdownify }}</h2>
-      {{ end }}
-  </section>
+    <h1>{{ .Site.Title }}</h1>
+    
+    {{ with .Site.Params.Bio }}
+      <h2>{{ . | markdownify }}</h2>
+    {{ end }}
 </header>
--- a/static/css/style.css
+++ b/static/css/style.css
@ -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;
+}