style: change details page

author: malechiMLC <3054487172@qq.com> 2020-05-15 14:36:53 +0300
committer: malechiMLC <3054487172@qq.com> 2020-05-15 14:36:53 +0300
commit: f9e7c7846c0fc4923f1a05e814354be443985541 (patch)
tree: 198f23e68a226a29be47ddf6845d3ad1ceb29512
parent: bca29aba530e8dd97bc93302b59b1fc7286b305b (diff)
parent: e753af0c7a75770ea5c931cdef2e0034bac889af (diff)
12 files changed, 226 insertions, 134 deletions
diff --git a/assets/css/markdown.css b/assets/css/markdown.css
index 05222d3..cc02c11 100644
--- a/assets/css/markdown.css
+++ b/assets/css/markdown.css
@@ -4,99 +4,99 @@
   padding-bottom: 0.125rem;
 }
 
-.markdown {
+.content {
   @apply text-gray-900 leading-normal break-words;
 }
 
-.markdown > * + * {
+.content > * + * {
   @apply mt-0 mb-4;
 }
 
-.markdown li + li {
+.content li + li {
   @apply mt-1;
 }
 
-.markdown li > p + p {
+.content li > p + p {
   @apply mt-6;
 }
 
-.markdown strong {
+.content strong {
   @apply font-semibold;
 }
 
-.markdown a {
+.content a {
   @apply font-semibold;
 }
 
-.markdown strong a {
+.content strong a {
   @apply font-bold;
 }
 
-.markdown h1 {
+.content h1 {
   @apply leading-tight border-b text-4xl font-semibold mb-4 mt-6 pb-2;
 }
 
-.markdown h2 {
+.content h2 {
   @apply leading-tight border-b text-2xl font-semibold mb-4 mt-6 pb-2;
 }
 
-.markdown h3 {
+.content h3 {
   @apply leading-snug text-lg font-semibold mb-4 mt-6;
 }
 
-.markdown h4 {
+.content h4 {
   @apply leading-none text-base font-semibold mb-4 mt-6;
 }
 
-.markdown h5 {
+.content h5 {
   @apply leading-tight text-sm font-semibold mb-4 mt-6;
 }
 
-.markdown h6 {
+.content h6 {
   @apply leading-tight text-sm font-semibold text-gray-600 mb-4 mt-6;
 }
 
-.markdown blockquote {
+.content blockquote {
   @apply text-base border-l-4 border-gray-300 pl-4 pr-4 text-gray-600;
 }
 
-.markdown code {
+.content code {
   @apply font-mono text-sm inline bg-gray-200 rounded px-1 py-05;
 }
 
-.markdown pre {
+.content pre {
   @apply bg-gray-100 rounded p-4;
 }
 
-.markdown pre code {
+.content pre code {
   @apply block bg-transparent p-0 overflow-auto rounded-none;
 }
 
-.markdown ul {
+.content ul {
   @apply text-base pl-8 list-disc;
 }
 
-.markdown ol {
+.content ol {
   @apply text-base pl-8 list-decimal;
 }
 
-.markdown kbd {
+.content kbd {
   @apply text-xs inline-block rounded border px-1 py-05 align-middle font-normal font-mono shadow;
 }
 
-.markdown table {
+.content table {
   @apply text-base border-gray-600;
 }
 
-.markdown th {
+.content th {
   @apply border py-1 px-3;
 }
 
-.markdown td {
+.content td {
   @apply border py-1 px-3;
 }
 
 /* Override pygments style background color. */
-/* .markdown .highlight pre {
+/* .content .highlight pre {
   @apply bg-gray-100 !important;
 } */
diff --git a/assets/css/site.css b/assets/css/site.css
index 801cef5..16fd2b6 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -3,21 +3,22 @@
 }
 
 .sticky-title {
-  @apply sticky top-0
+  @apply sticky top-16 z-10 bg-tertiary;
 }
 
 .sticky-toc {
-  @apply sticky top-0
+  @apply sticky z-0;
+  top: 8rem;
 }
 
-.sticky-toc a {
+/* .sticky-toc a {
   @apply text-gray-100
-}
+} */
 
 .sticky-toc a:hover, a:focus {
-  @apply text-red-900
+  @apply text-primary;
 }
 
-.important-text {
-  @apply text-red-900 !important
-}
+.object-contain {
+    object-fit: contain !important;
+}
+\ No newline at end of file
diff --git a/assets/css/tailwind.config.js b/assets/css/tailwind.config.js
index 2f2b890..dfb9473 100644
--- a/assets/css/tailwind.config.js
+++ b/assets/css/tailwind.config.js
@@ -2,6 +2,9 @@ module.exports = {
   important: true,
   theme: {
     extend: {
+      inset: {
+        '16': '4rem',
+      },
       colors: {
         primary: 'var(--color-primary)',
         secondary: 'var(--color-secondary)',
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 5bc8277..f86414c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -1,13 +1,34 @@
 <!DOCTYPE html>
 <html lang='{{ .Site.LanguageCode }}'>
-    {{- partial "head.html" . -}}
-    <body class="flex flex-col min-h-screen">
-        {{- partial "dev-size-indicator.html" . -}}
-        {{- partial "header.html" . -}}
-        <main class="flex-1 mx-4 md:mx-12 lg:mx-24 mt-4 sm:mt-16">
-        {{- block "main" . }}{{- end }}
-        </main>
-        {{- partial "dev-parameters.html" . -}}
-        {{- partial "footer.html" . -}}
-    </body>
-</html>
+{{- partial "head.html" . -}}
+
+<body>
+    <header class="fixed w-full h-16 z-50 bg-secondary">
+        <div class="container mx-auto">
+            <div class="max-w-screen-xl">
+                {{- partial "header.html" . -}}
+            </div>
+        </div>
+    </header>
+
+    <main class="min-h-screen pt-16">
+        <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>
+    </main>
+
+    <footer>
+        <div class="container mx-auto">
+            <div class="max-w-screen-xl">
+                {{- partial "dev-parameters.html" . -}}
+                {{- partial "footer.html" . -}}
+            </div>
+        </div>
+    </footer>
+
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 8e68b62..93cd7f6 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,16 +1,16 @@
 {{ define "main" }}
 {{ $hasToc := and (in .TableOfContents "<li>" ) (.Params.toc) }}
 {{ $hasSidebar := or ($hasToc) (.Params.series) }}
-<article class="text-gray-700 sm:mx-12">
-</article>
-<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
-    <div class="col-span-1 md:col-span-3">
+<div class="grid grid-cols-2 lg:grid-cols-8 gap-4">
+    <div class="col-span-2 {{ if not $hasSidebar }} {{- print "lg:col-start-2" -}} {{ end }} lg:col-span-6 bg-secondary px-6 py-8">
         <h1 class="font-bold text-3xl text-gray-700">{{ .Title }}</h1>
-        <div class="markdown">
+        {{ partial "post_metadata.html" . }}
+        <div class="content">
             {{ .Content}}
         </div>
     </div>
-    <div class="col-span-1">
+    {{ if $hasSidebar}}
+    <div class="col-span-2">
         {{ if .Params.series }}
         {{ partial "post_series.html" . }}
         {{ end }}
@@ -18,11 +18,13 @@
         {{ partial "post_toc.html" . }}
         {{ end }}
     </div>
+    {{ end }}
+    
     {{ $related := .Site.RegularPages.Related . | first 5 }}
     {{ with $related }}
-    <div class="col-span-1">
+    <div class="col-span-2 {{ if not $hasSidebar }} {{- print "lg:col-start-2" -}} {{ end }} lg:col-span-6 bg-secondary p-6">
         <h2 class="subtitle">See Also</h2>
-        <div class="markdown">
+        <div class="content">
             {{ range . }}
             <a href="{{ .RelPermalink }}">{{ .Title }}</a>
             {{ end }}
@@ -39,7 +41,7 @@
                 if (entry.intersectionRatio > 0) {
                     if (delay == true) {
                         let element = document.querySelector('.sticky-toc li.active')
-                        element.firstChild.classList.remove('text-red-900');
+                        element.firstChild.classList.remove('text-primary');
                         element.classList.remove('active');
                         delay = false;
                         updatePosAndColor();
@@ -51,7 +53,7 @@
                         delay = true;
                     } else {
                         let element = document.querySelector(`.sticky-toc li a[href="#${id}"]`)
-                        element.classList.remove('text-red-900');
+                        element.classList.remove('text-primary');
                         element.parentElement.classList.remove('active');
                         updatePosAndColor();
                     }
@@ -67,39 +69,39 @@
             let len = elements.length
             if (len != 0) {
                 let firstElement = elements[0]
-                firstElement.firstChild.classList.add('text-red-900')
+                firstElement.firstChild.classList.add('text-primary')
                 let offset = firstElement.offsetTop - targetPos;
                 if (offset > 0) {
-                    document.querySelector(`.sticky-toc`).style.top = `calc( 4rem - ${offset}px)`
+                    document.querySelector(`.sticky-toc`).style.top = `calc( 7rem - ${offset}px)`
                 } else {
                     document.querySelector(`.sticky-toc`).removeAttribute("style");
                 }
                 for (let i = 1; i < len; i++) {
-                    elements[i].firstChild.classList.remove('text-red-900')
+                    elements[i].firstChild.classList.remove('text-primary')
                 }
             }
         }
 
         // Track all sections that have an `id` applied
-        document.querySelectorAll('.markdown h1[id]').forEach((section) => {
+        document.querySelectorAll('.content h1[id]').forEach((section) => {
             observer.observe(section);
         });
-        document.querySelectorAll('.markdown h2[id]').forEach((section) => {
+        document.querySelectorAll('.content h2[id]').forEach((section) => {
             observer.observe(section);
         });
-        document.querySelectorAll('.markdown h3[id]').forEach((section) => {
+        document.querySelectorAll('.content h3[id]').forEach((section) => {
             observer.observe(section);
         });
 
-        document.querySelectorAll('.markdown h4[id]').forEach((section) => {
+        document.querySelectorAll('.content h4[id]').forEach((section) => {
             observer.observe(section);
         });
 
-        document.querySelectorAll('.markdown h5[id]').forEach((section) => {
+        document.querySelectorAll('.content h5[id]').forEach((section) => {
             observer.observe(section);
         });
 
-        document.querySelectorAll('.markdown h6[id]').forEach((section) => {
+        document.querySelectorAll('.content h6[id]').forEach((section) => {
             observer.observe(section);
         });
     });
diff --git a/layouts/authors/list.html b/layouts/authors/list.html
index 207db38..628f731 100644
--- a/layouts/authors/list.html
+++ b/layouts/authors/list.html
@@ -1,5 +1,6 @@
 {{ define "main" }}
-{{ partial "widgets/about.html" .  }}
-{{ partial "widgets/details.html" .  }}
-
+<div class="bg-secondary">
+    {{ partial "widgets/about.html" .  }}
+    {{ partial "widgets/details.html" .  }}
+</div>
 {{ end }}
 \ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 3680d76..3db9b39 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,27 +1,26 @@
-<header>
-    <nav class="flex items-center justify-between flex-wrap bg-secondary p-4">
-        <div class="flex items-center flex-shrink-0 text-primary hover:text-black mr-6">
-            <a href="/" class="font-semibold text-xl tracking-tight">{{ .Site.Title }}</a>
+<nav class="flex items-center justify-between flex-wrap p-4">
+    <div class="flex items-center flex-shrink-0 text-primary hover:text-black mr-6">
+        <a href="/" class="font-semibold text-xl tracking-tight">{{ .Site.Title }}</a>
+    </div>
+    <div class="block md:hidden">
+        <button
+            class="flex items-center px-3 py-2 border rounded text-black border-black hover:text-primary hover:border-primary">
+            <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <title>Menu</title>
+                <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+            </svg>
+        </button>
+    </div>
+    <div class="w-full block flex-grow md:flex md:items-center md:w-auto">
+        <div class="text-sm md:flex-grow">
+            {{ range .Site.Menus.main }}
+            <a href="{{ .URL }}"
+                class="block mt-4 md:inline-block md:mt-0 text-black hover:text-primary mr-4">{{ .Name }}</a>
+            {{ end }}
         </div>
-        <div class="block md:hidden">
-            <button
-                class="flex items-center px-3 py-2 border rounded text-black border-black hover:text-primary hover:border-primary">
-                <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-                    <title>Menu</title>
-                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
-                </svg>
-            </button>
+        <div>
+            <a href="#"
+                class="inline-block text-sm px-4 py-2 leading-none border rounded text-black border-black hover:border-transparent hover:text-white hover:bg-primary mt-4 md:mt-0">Download</a>
         </div>
-        <div class="w-full block flex-grow md:flex md:items-center md:w-auto">
-            <div class="text-sm md:flex-grow">
-                {{ range .Site.Menus.main }}
-                <a href="{{ .URL }}" class="block mt-4 md:inline-block md:mt-0 text-black hover:text-primary mr-4">{{ .Name }}</a>
-                {{ end }}
-            </div>
-            <div>
-                <a href="#"
-                    class="inline-block text-sm px-4 py-2 leading-none border rounded text-black border-black hover:border-transparent hover:text-white hover:bg-primary mt-4 md:mt-0">Download</a>
-            </div>
-        </div>
-    </nav>
-</header>
-\ No newline at end of file
+    </div>
+</nav>
+\ No newline at end of file
diff --git a/layouts/partials/post_metadata.html b/layouts/partials/post_metadata.html
new file mode 100644
index 0000000..9c0574c
--- /dev/null
+++ b/layouts/partials/post_metadata.html
@@ -0,0 +1,68 @@
+<div class="flex flex-row bg-gray-200">
+    <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
+        <i class="fas fa-calendar"></i>
+        <span>{{ dateFormat "Jan 2, 2006" .Date }}</span>
+    </div>
+    <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
+        <i class="fas fa-clock"></i>
+        <span>{{ .ReadingTime }} min read</span>
+    </div>
+    <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
+        <i class="fas fa-calendar"></i>
+        <span>{{ dateFormat "Jan 2, 2006" .Date }}</span>
+    </div>
+    <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
+        <i class="fas fa-calendar"></i>
+        <span>{{ dateFormat "Jan 2, 2006" .Date }}</span>
+    </div>
+</div>
+
+<div class="columns is-variable is-2 is-vertical-2-mobile is-multiline has-text-grey">
+    <div class="column is-narrow">
+        <span class="icon is-inline">
+            <i class="fas fa-calendar"></i>
+        </span>
+        <span>{{ dateFormat "Jan 2, 2006" .Date }}</span>
+    </div>
+    <div class="column is-narrow is-hidden-mobile">
+        <span>&middot;</span>
+    </div>
+    <div class="column is-narrow">
+        <span class="icon is-inline">
+            <i class="fas fa-clock"></i>
+        </span>
+        <span>{{ .ReadingTime }} min read</span>
+    </div>
+    <div class="column is-narrow is-hidden-mobile">
+        {{ with .GetTerms "categories" }}
+        <span>&middot;</span>
+    </div>
+    <div class="column is-narrow">
+        <span class="icon is-inline">
+            <i class="fas fa-folder"></i>
+        </span>
+        {{ range $index, $value := . }}
+        {{ if gt $index 0 }}
+        <span>, </span>
+        {{ end -}}
+        <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+        {{ end }}
+        {{ end }}
+    </div>
+    <div class="column is-narrow is-hidden-mobile">
+        {{ with .GetTerms "series" }}
+        <span>&middot;</span>
+    </div>
+    <div class="column is-narrow">
+        <span class="icon is-inline">
+            <i class="fas fa-th-list"></i>
+        </span>
+        {{ range $index, $value := . }}
+        {{ if gt $index 0 }}
+        <span>, </span>
+        {{ end -}}
+        <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
+        {{ end }}
+        {{ end }}
+    </div>
+</div>
+\ No newline at end of file
diff --git a/layouts/partials/post_series.html b/layouts/partials/post_series.html
index a3e6d49..7d3d49e 100644
--- a/layouts/partials/post_series.html
+++ b/layouts/partials/post_series.html
@@ -1,11 +1,13 @@
 {{ $series := .Site.Taxonomies.series}}
-<h2 class="subtitle">系列文章</h2>
-<div class="markdown">
-    {{range .Params.series }}
-    {{ $key := . | urlize}}
-    {{ $value := index $series $key }}
-    {{ range $value}}
-    <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a>
-    {{end}}
-    {{end}}
+<div class="bg-secondary p-6">
+    <h2 class="subtitle">系列文章</h2>
+    <div class="content">
+        {{range .Params.series }}
+        {{ $key := . | urlize}}
+        {{ $value := index $series $key }}
+        {{ range $value}}
+        <a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a>
+        {{end}}
+        {{end}}
+    </div>
 </div>
 \ No newline at end of file
diff --git a/layouts/partials/post_toc.html b/layouts/partials/post_toc.html
index e60921f..b4910d2 100644
--- a/layouts/partials/post_toc.html
+++ b/layouts/partials/post_toc.html
@@ -1,9 +1,8 @@
-<div class="sticky-title">
+<div class="sticky-title hidden lg:block px-6 py-4">
     <h2 class="subtitle">目录</h2>
 </div>
-<div class="sticky-toc is-hidden-mobile">
-
-    <div class="markdown">
+<div class="sticky-toc hidden lg:block px-6 pb-6">
+    <div class="content">
         {{ .TableOfContents }}
     </div>
 </div>
 \ No newline at end of file
diff --git a/layouts/partials/widgets/about.html b/layouts/partials/widgets/about.html
index 5c9666f..eda58f1 100644
--- a/layouts/partials/widgets/about.html
+++ b/layouts/partials/widgets/about.html
@@ -1,37 +1,33 @@
-<div class="bg-secondary">
-
-    <div class="grid grid-cols-12 gap-4 flex content-center justify-center pt-12 pb-12">
-        <div
-            class="col-span-12 md:col-span-12 lg:col-span-4 xl:col-span-4 flex content-center justify-center border-r border-gray-300">
-            {{ with .Resources.ByType "image" }}
-            {{ range . }}
-            <img src='{{ .RelPermalink }}' class="h-auto w-6/12 sm:w-4/12 md:w-4/12 lg:w-11/12 xl:w-8/12" />
-            {{ end }}
-            {{ end }}
-        </div>
+<div class="grid grid-cols-12 gap-4 flex content-center justify-center pt-12 pb-12 pl-32 pr-32">
+    <div
+        class="col-span-12 lg:col-span-4 flex content-center justify-center lg:justify-start lg:border-r border-gray-300">
+        {{ with .Resources.ByType "image" }}
+        {{ range . }}
+        <img src='{{ .RelPermalink }}' class="h-auto w-6/12 sm:w-4/12 lg:w-10/12 object-contain" />
+        {{ end }}
+        {{ end }}
+    </div>
 
-        <div class="col-span-12 lg:col-span-7 xl:col-span-7 pl-5">
-            <div>
-                <div class="text-xs font-medium pb-4 pt-4">ABOUT ME</div>
-                <div class="text-6xl font-medium pb-2">{{ .Title }}</div>
-                <div class="w-3/12 xl:w-2/12 border-b border-gray-400"></div>
-                {{ with $.Param "shortContent" }}
-                <div class="pt-8 text-lg leading-normal font-medium">
-                    {{ . }}
-                </div>
-                {{ end }}
+    <div class="col-span-12 lg:col-span-7 pl-5">
+        <div>
+            <div class="text-xs font-medium pb-4 pt-4">ABOUT ME</div>
+            <div class="text-6xl font-medium pb-2">{{ .Title }}</div>
+            <div class="w-3/12 xl:w-2/12 border-b border-gray-400"></div>
+            {{ with $.Param "shortContent" }}
+            <div class="pt-8 text-lg leading-normal font-medium">
+                {{ . }}
             </div>
+            {{ end }}
         </div>
+    </div>
 
-        <div
-            class="col-span-12 lg:col-span-1 xl:col-span-1 flex lg:flex-col xl:flex-col justify-center  items-end pr-8 ">
-            {{ $brand := $.Param "social"}}
-            {{ range $brand }}
-            {{ $src :=  print .icon_pack " fa-" .icon }}
-            <div class="pb-2 pr-4 lg:pr-0 xl:pr-0">
-                <i class="{{ print $src }}"></i>
-            </div>
-            {{ end }}
+    <div class="col-span-12 lg:col-span-1 flex lg:flex-col justify-center items-end ">
+        {{ $brand := $.Param "social"}}
+        {{ range $brand }}
+        {{ $src :=  print .icon_pack " fa-" .icon }}
+        <div class="pb-2 pr-4 lg:pr-0">
+            <i class="{{ print $src }}"></i>
         </div>
+        {{ end }}
     </div>
 </div>
 \ No newline at end of file
diff --git a/layouts/partials/widgets/details.html b/layouts/partials/widgets/details.html
index 489a7dc..3415967 100644
--- a/layouts/partials/widgets/details.html
+++ b/layouts/partials/widgets/details.html
@@ -1,3 +1,3 @@
-<div class="bg-secondary">
+<div class="content pl-32 pr-32 pb-20">
     {{ .Content }}
 </div>
 \ No newline at end of file
author	malechiMLC <3054487172@qq.com>	2020-05-15 14:36:53 +0300
committer	malechiMLC <3054487172@qq.com>	2020-05-15 14:36:53 +0300
commit	f9e7c7846c0fc4923f1a05e814354be443985541 (patch)
tree	198f23e68a226a29be47ddf6845d3ad1ceb29512
parent	bca29aba530e8dd97bc93302b59b1fc7286b305b (diff)
parent	e753af0c7a75770ea5c931cdef2e0034bac889af (diff)