style: brand new index.html

author: Wang Chucheng <ccwangchn@gmail.com> 2020-05-17 17:58:10 +0300
committer: Wang Chucheng <ccwangchn@gmail.com> 2020-05-17 17:58:10 +0300
commit: 3ff2c0ccac34e3df2b5c801f94abed2a3c45307d (patch)
tree: 11d72b804e8da48fb651a6db23b3ce32ef039be5
parent: 5c64e901e1f0b6443968f95a07fb55a54ea2c226 (diff)
10 files changed, 151 insertions, 31 deletions
diff --git a/README.md b/README.md
index 8949bc1..118c7a7 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,44 @@
-# hugo-eureka
-Eureka is a theme for Hugo.
+# Hugo Eureka
+
+Eureka is a elegant and powerful theme for [Hugo](https://gohugo.io/). Eureka is committed to providing an elegant, feature-rich and highly customizable theme.
+
+## Get Started
+
+### Prerequisites
+
+-   [Git](https://git-scm.com/)
+-   [Hugo Extended v0.65.0+](https://gohugo.io/getting-started/installing/)
+
+Eureka uses [Hugo Pipes](https://gohugo.io/hugo-pipes/introduction/) to process PostCSS, so customizing assets in Eureka requires an extended version of Hugo. If you are new to Hugo, you can read Hugo's [quick start](https://gohugo.io/getting-started/quick-start/).
+
+### Installation
+
+```shell
+cd your_hugo_site
+git init
+git submodule add https://github.com/wangchucheng/hugo-eureka.git themes/eureka
+```
+
+Then, add the theme to the site configuration.
+
+```
+theme = "eureka"
+```
+
+## Usage
+
+Copy the `config.toml` in Eureka's `exampleSite` folder to the root folder of your Hugo site. Feel free to change it.
+
+Then you can add some content in your blog:
+
+```shell
+hugo new post/hello-world.md
+```
+
+After that, you can preview it in the browser:
+
+```shell
+hugo server
+```
+
+For more usage, please refer to Hugo's [basic usage](https://gohugo.io/getting-started/usage/).
diff --git a/assets/css/markdown.css b/assets/css/markdown.css
index 495ed9e..f6f62eb 100644
--- a/assets/css/markdown.css
+++ b/assets/css/markdown.css
@@ -28,10 +28,6 @@
   @apply text-eureka;
 }
 
-.content a:focus {
-  @apply text-eureka underline;
-}
-
 .content a:hover {
   @apply text-eureka underline;
 }
diff --git a/assets/css/site.css b/assets/css/site.css
index 47e6f9b..da53d46 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -15,10 +15,6 @@
   @apply text-eureka;
 }
 
-.sticky-toc a:focus {
-  @apply text-eureka;
-}
-
 .sticky-toc ul {
   @apply text-base pl-8 list-disc;
 }
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 4fd1a67..993113a 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -3,7 +3,7 @@
 {{- partial "head.html" . -}}
 
 <body>
-    <header class="fixed w-full h-16 z-50 bg-secondary-bg">
+    <header class="fixed w-full h-16 z-50 bg-secondary-bg shadow-sm">
         <div class="container mx-auto">
             <div class="max-w-screen-xl">
                 {{- partial "header.html" . -}}
@@ -12,12 +12,17 @@
     </header>
 
     <main class="min-h-screen pt-16">
+        {{ if .IsHome }}
+        {{- partial "dev-size-indicator.html" . -}}
+        {{- block "main" . }}{{- end }}
+        {{ else }}
         <div class="container mx-auto ">
             <div class="max-w-screen-xl pt-12 lg:px-4 xl:px-8">
                 {{- partial "dev-size-indicator.html" . -}}
                 {{- block "main" . }}{{- end }}
             </div>
         </div>
+        {{ end }}
     </main>
 
     <footer>
diff --git a/layouts/_default/section.html b/layouts/_default/section.html
index 200f09f..a9fe8cb 100644
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@@ -8,14 +8,9 @@
     {{ end }}
 </article>
 {{ range .Paginator.Pages }}
-<article class="bg-secondary-bg px-6 pt-8 pb-4 mb-8">
-    <h1 class="font-bold text-3xl text-primary-text"><a href="{{ .Permalink }}"
-            class="hover:text-eureka">{{ .Title }}</a></h1>
-    <div class="content">
-        {{ .Summary }}
-    </div>
-    {{ partial "post_metadata.html" . }}
-</article>
+<div class="mb-8">
+    {{ partial "summary.html" . }}
+</div>
 {{ end }}
 {{ template "_internal/pagination.html" . }}
 {{ end }}
 \ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
index 1930029..53a279e 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -3,4 +3,82 @@
     <h1 class="font-serif font-thin text-5xl text-gray-500">{{ .Title }}</h1>
     {{ .Content }}
 </article>
+
+<div class="w-full bg-secondary-bg">
+    <div class="container mx-auto">
+        <div class="max-w-screen-xl pt-12 pb-1 mx-8 overflow-hidden">
+            <div class="grid grid-cols-8 grid-rows-6 xl:grid-rows-4 bg-cover bg-fixed -mx-8 -mt-12"
+                style="height: calc(100vh - 4rem); background-image: url(foo.jpg)">
+                <div class="col-span-2 row-start-1 row-span-2 xl:row-span-1 bg-secondary-bg -m-1"></div>
+                <div class="col-start-3 col-span-6 xl:col-span-4 row-start-1 row-span-1 bg-secondary-bg -m-1"></div>
+                <div class="col-start-1 md:col-start-3 col-span-8 md:col-span-4 row-start-3 md:row-start-2 row-span-2 md:row-span-4 xl:row-span-2 bg-secondary-bg p-16 -m-1">
+                    <div class="flex flex-col items-center justify-center min-h-full">
+                        <span class="font-bold text-3xl">靡不有初</span>
+                        <span class="font-bold text-3xl">鲜克有终</span>
+                    </div>
+                </div>
+                <div class="col-start-1 xl:col-start-3 col-span-6 xl:col-span-4 row-start-6 xl:row-start-4 row-span-1 bg-secondary-bg -m-1"></div>
+                <div class="col-start-7 col-span-2 row-start-5 xl:row-start-4 row-span-2 xl:row-span-1 bg-secondary-bg -m-1"></div>
+            </div>
+        </div>
+        
+    </div>
+</div>
+
+
+<div class="container mx-auto ">
+    <div class="max-w-screen-xl pt-12 lg:px-4 xl:px-8">
+        <div class="">
+            <div class="flex flex-row items-center justify-between">
+                <h2 class=" font-bold text-3xl my-4">Recent Posts</h2>
+                {{ $post := .Site.GetPage "section" "post" }}
+                <h1 class="font-semibold text-lg text-primary-text"><a href="{{ $post.Permalink }}"
+                        class="hover:text-eureka">阅读全部</a>
+                </h1>
+            </div>
+
+            <div class="masonry grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
+                {{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
+                {{ range first 10 $pages }}
+                <div class="item">
+                    <div class="grid-content">
+                        {{ partial "summary.html" . }}
+                    </div>
+                </div>
+                {{ end }}
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<script>
+    function resizeGridItem(item) {
+        grid = document.getElementsByClassName("masonry")[0];
+        rowHeight = 0;
+        rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap'));
+        rowSpan = Math.ceil((item.querySelector('.grid-content').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap));
+        item.style.gridRowEnd = "span " + rowSpan;
+    }
+
+    function resizeAllGridItems() {
+        allItems = document.getElementsByClassName("item");
+        for (x = 0; x < allItems.length; x++) {
+            resizeGridItem(allItems[x]);
+        }
+    }
+
+    function resizeInstance(instance) {
+        item = instance.elements[0];
+        resizeGridItem(item);
+    }
+
+    window.onload = resizeAllGridItems();
+    window.addEventListener("resize", resizeAllGridItems);
+
+    allItems = document.getElementsByClassName("item");
+    for (x = 0; x < allItems.length; x++) {
+        imagesLoaded(allItems[x], resizeInstance);
+    }
+</script>
 {{ end }}
 \ No newline at end of file
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index bf5ba83..129fa75 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,3 +1,3 @@
 <footer class="w-full text-center border-t border-gray-200 p-4 pin-b text-sm text-tertiary-text">
-    <p>&copy; 2020 C. Wang and R. Ma &middot; Powered by the Eureka theme for <a href="https://gohugo.io" class="hover:text-eureka">Hugo</a></p>
+    <p>{{ with .Site.Copyright }}{{ replace . "{year}" now.Year | markdownify}} &middot; {{ end }} Powered by the Eureka theme for <a href="https://gohugo.io" class="hover:text-eureka">Hugo</a></p>
 </footer>
 \ No newline at end of file
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index ccf8080..708da83 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -1,8 +1,8 @@
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
-<title>{{ block "title" . }}
-    {{- .Title }} - {{ .Site.Title -}}
-    {{ end }}</title>
+<title>
+    {{ block "title" . }}{{ with .Params.Title }}{{ . }} | {{ end }}{{ .Site.Title }}{{ end }}
+</title>
 {{ if .Description }}
 <meta name="description" content="{{ .Description }}" />
 {{ end }}
@@ -23,7 +23,7 @@
 <link rel="stylesheet" href="{{ $styles.Permalink }}" integrity="{{ $styles.Data.Integrity }}">
 {{ end }}
 <link
-    href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Serif+SC:wght@400;500;700&family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+    href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600;700&family=Noto+Serif+SC:wght@400;600;700&display=swap"
     rel="stylesheet">
 <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.0.3/build/styles/solarized-light.min.css">
diff --git a/layouts/partials/post_metadata.html b/layouts/partials/post_metadata.html
index 120c536..44d225f 100644
--- a/layouts/partials/post_metadata.html
+++ b/layouts/partials/post_metadata.html
@@ -1,20 +1,20 @@
 <div class="flex flex-wrap flex-row items-center my-2 text-tertiary-text">
-    <div class="mr-2 my-2">
+    <div class="mr-4 my-2">
         <i class="fas fa-calendar"></i>
         <span>{{ dateFormat "Jan 2, 2006" .Date }}</span>
     </div>
-    <div class="mx-2 my-2">
+    <div class="mr-4 my-2">
         <span>&middot;</span>
     </div>
-    <div class="mx-2 my-2">
+    <div class="mr-4 my-2">
         <i class="fas fa-clock"></i>
         <span>{{ .ReadingTime }} min read</span>
     </div>
     {{ with .GetTerms "categories" }}
-    <div class="mx-2 my-2">
+    <div class="mr-4 my-2">
         <span>&middot;</span>
     </div>
-    <div class="mx-2 my-2">
+    <div class="mr-4 my-2">
         <i class="fas fa-folder"></i>
         {{ range $index, $value := . }}
         {{ if gt $index 0 }}
@@ -26,10 +26,10 @@
     {{ end }}
 
     {{ with .GetTerms "series" }}
-    <div class="mx-2 my-2">
+    <div class="mr-4 my-2">
         <span>&middot;</span>
     </div>
-    <div class="mx-2 my-2">
+    <div class="mr-4 my-2">
         <i class="fas fa-th-list"></i>
         {{ range $index, $value := . }}
         {{ if gt $index 0 }}
diff --git a/layouts/partials/summary.html b/layouts/partials/summary.html
new file mode 100644
index 0000000..339d9cc
--- /dev/null
+++ b/layouts/partials/summary.html
@@ -0,0 +1,8 @@
+<article class="bg-secondary-bg px-6 pt-8 pb-4">
+    <h1 class="font-bold text-3xl text-primary-text"><a href="{{ .Permalink }}"
+            class="hover:text-eureka">{{ .Title }}</a></h1>
+    <div class="content">
+        {{ .Summary }}
+    </div>
+    {{ partial "post_metadata.html" . }}
+</article>
+\ No newline at end of file
author	Wang Chucheng <ccwangchn@gmail.com>	2020-05-17 17:58:10 +0300
committer	Wang Chucheng <ccwangchn@gmail.com>	2020-05-17 17:58:10 +0300
commit	3ff2c0ccac34e3df2b5c801f94abed2a3c45307d (patch)
tree	11d72b804e8da48fb651a6db23b3ce32ef039be5
parent	5c64e901e1f0b6443968f95a07fb55a54ea2c226 (diff)