Skip to content

Commit

Permalink
feat: tailwindcss 升级为 2.0 && 支持深色模式手动切换
Browse files Browse the repository at this point in the history
  • Loading branch information
forecho committed Apr 2, 2021
1 parent 8449807 commit d774e14
Show file tree
Hide file tree
Showing 24 changed files with 3,622 additions and 228 deletions.
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
.DS_Store
.idea/
.idea/
node_modules
9 changes: 9 additions & 0 deletions assets/css/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
const themeDir = __dirname + '/../../';

module.exports = {
plugins: [
require('postcss-import')({ path: [themeDir] }),
require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'),
require('autoprefixer')(),
]
}
162 changes: 162 additions & 0 deletions assets/css/site.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
.post-content {
line-height: 1.625;
color: #424242;
}

.post-content h2 {
font-size: 140%;
}

.post-content h3 {
font-size: 120%;
}

.post-content h2,
.post-content h3 {
margin: 2rem 0 0.3rem;
font-weight: 700;
}

.post-content h2:target,
.post-content h3:target {
padding-top: 5rem;
}

.post-content ul,
.post-content ol {
list-style-type: initial;
padding: 0.5rem 0 1rem 1.5rem;
}

.post-content ul.list-none {
padding: 0 0 0 1rem;
}

.post-content ul ul {
list-style-type: circle;
padding-left: 1.5rem;
}

.post-content ul ul ul {
list-style-type: square;
margin-bottom: 0px;
}

.post-content ul.list-none {
list-style-type: none;
}

.post-content p code,
.post-content li code {
background-color: #f0f3f3;
padding: 0.1rem 0.4rem;
border-radius: 3px;
color: #805ad5;
}

.post-content p {
margin: 0.5rem 0 1rem;
}

.post-content img {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
margin: 1.5rem auto;
}

.post-content a {
color: #0e7490;
text-decoration: none;
font-weight: 500;
box-shadow: inset 0 -0.125em 0 0 #fff, inset 0 -0.375em 0 0 rgb(165 243 252 / 40%);
}

.post-content a:hover {
color: #0b4657;
}

.dark .post-content a:hover {
color: #0e7490;
}

.dark .post-content a {
color: #2fbfe7;
box-shadow: inset 0 -0.125em 0 0 #000, inset 0 -0.375em 0 0 rgb(165 243 252 / 40%);
}

.post-content blockquote {
color: #9e9e9e;
padding-left: 1rem;
border-left-width: 4px;
border-color: #9e9e9e;
font-style: italic;
}

.post-content pre,
.post-content .highlight {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 0.875rem;
}

::selection {
background: #e9d8fd;
color: #202684;
/* WebKit/Blink Browsers */
}

::-moz-selection {
background: #e9d8fd;
color: #202684;
/* Gecko Browsers */
}

a:focus {
outline: none;
background: #e9d8fd;
}

.dark a:focus {
outline: none;
background: #000000;
}


/* 侧边导航 */

#menu-content > ul {
padding: none;
}

#TableOfContents > ul {
list-style-type: none;
padding-left: 0;
}

#TableOfContents li {
padding-top: 0.5em;
}

#TableOfContents > ul > li ul {
list-style-type: none;
padding-left: 1.5em;
}

#TableOfContents a {
transition: all 0.2s ease !important;
}
#TableOfContents a:hover {
color: #1a202c !important;
transform: translateX(2px) !important;
}

.dark #TableOfContents a:hover {
color: #fdfdfd !important;
transform: translateX(2px) !important;
}

.my-iconfont {
font-family: "iconfont" !important;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
8 changes: 8 additions & 0 deletions assets/css/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/* Tailwind base - put variables under: tailwind.config.js */
@import "node_modules/tailwindcss/base";
/* Tailwind component classes registered by plugins*/
@import "node_modules/tailwindcss/components";
/* Site Specific */
@import "assets/css/site";
/* Tailwind's utility classes - generated based on config file */
@import "node_modules/tailwindcss/utilities";
52 changes: 52 additions & 0 deletions assets/css/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
const themeDir = __dirname + '/../../';

module.exports = {
purge: {
content: [
'./layouts/**/*.html',
'./content/**/*.md',
'./content/**/*.html',
themeDir + 'layouts/**/*.html',
themeDir + 'exampleSite/content/**/*.html',
themeDir + 'exampleSite/content/**/*.md',
],
},
theme: {
fontFamily: {
sans: [
'Inter',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Arial',
'Noto Sans',
'sans-serif',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji',
],
serif: [
'Georgia',
'Cambria',
'Times New Roman',
'Times',
'serif',
],
mono: [
'Menlo',
'Monaco',
'Consolas',
'Liberation Mono',
'Courier New',
'monospace'
]
},
},
darkMode: 'class',
variants: {},
plugins: [],
}
8 changes: 4 additions & 4 deletions layouts/404.html
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{{ define "main" }}
<section class="w-full lg:w-3/4 xl:w-3/4">
<div class="p-8 mt-6 lg:mt-0 leading-normal rounded shadow bg-white">
<div class="p-8 mt-6 lg:mt-0 leading-normal rounded shadow bg-white dark:bg-black">
<div class=" text-center pb-2">
<h1 class="error-emoji text-gray-800 text-6xl"></h1>
<p class="text-xl py-5 text-gray-600">/* 404 page not found. */</p>
<h1 class="error-emoji text-6xl"></h1>
<p class="text-xl py-5 text-gray-600 dark:text-gray-400">/* 404 page not found. */</p>
<p class="text-red-400">
<a href="{{ "/posts" | relLangURL }}{{ if $.Site.Params.uglyURLs }}.html{{ else }}/{{ end }}">↑ 文章归档 ↑</a>
</p>
Expand All @@ -17,7 +17,7 @@ <h1 class="error-emoji text-gray-800 text-6xl"></h1>
{{ partial "posts/popular.html" . }}
</section>

<div class="hidden md:block w-full lg:w-1/4 xl:w-1/4 px-6 text-gray-800 leading-normal">
<div class="hidden md:block w-full lg:w-1/4 xl:w-1/4 px-6 leading-normal">

{{ partial "posts/profile.html" . }}

Expand Down
2 changes: 1 addition & 1 deletion layouts/_default/baseof.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

{{ partial "head.html" . }}

<body class="bg-gray-100 text-gray-900 tracking-wider leading-normal">
<body class="bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 tracking-wider leading-normal">

{{ partial "header.html" . }}

Expand Down
30 changes: 16 additions & 14 deletions layouts/_default/list.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@
<section class="w-full lg:w-3/4 xl:w-3/4">

<!--Card-->
<div class="p-8 mt-6 lg:mt-0 leading-normal rounded shadow bg-white">
<div class="p-8 mt-6 lg:mt-0 leading-normal rounded shadow bg-white dark:bg-black">
{{ if .Data.Term }}
<p class="text-gray-900 font-bold text-3xl pb-2">标签: {{.Data.Term}}</p>
<p class="font-bold text-3xl pb-2">标签: {{.Data.Term}}</p>
{{ else }}

<p class="text-gray-900 font-bold text-3xl pb-2">那年今天</p>
<p class="font-bold text-3xl pb-2">那年今天</p>
{{ $review := false }}
{{ range where .Data.Pages "Type" "in" (slice "post" "posts") }}
{{ if eq (.Date.Format "01-02") (now.Format "01-02")}}
<div class="p-1 flex flex-row border-b border-dotted border-gray-400">
<div class="text-gray-600 xl:w-1/10 pr-10 pt-3 hidden xl:inline-block" title="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "01-02"}}</div>
<div class="text-gray-600 dark:text-gray-400 xl:w-1/10 pr-10 pt-3 hidden xl:inline-block" title="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "01-02"}}</div>
<div class="xl:w-auto py-3">
<p class="text-xl">
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</p>
<p class="text-gray-600 text-sm xl:hidden">{{ .Date.Format "2006-01-02 15:04:05 MST" }}</p>
<p class="text-gray-600 text-sm">
<p class="text-gray-600 dark:text-gray-400 text-sm xl:hidden">{{ .Date.Format "2006-01-02 15:04:05 MST" }}</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">
{{ range .Params.tags }}
<a class="pr-2 hover:text-gray-800" href="{{ $.Site.BaseURL }}/tags/{{ . | urlize }}{{ if $.Site.Params.uglyURLs }}.html{{ end }}">#{{ . }}</a>
<a class="pr-2 hover:text-gray-800 dark:hover:text-gray-200" href="{{ $.Site.BaseURL }}/tags/{{ . | urlize }}{{ if $.Site.Params.uglyURLs }}.html{{ end }}">#{{ . }}</a>
{{ end }}
</p>
</div>
Expand All @@ -32,34 +32,36 @@
{{ if not $review }}
<p class="text-gray-600 text-sm"></p>
{{ end }}
<p class="text-gray-900 font-bold text-3xl pb-2 pt-4">文章归档</p>
<p class="font-bold text-3xl pb-2 pt-4">文章归档</p>

{{ end }}

{{ range (where .Data.Pages "Type" "in" (slice "post" "posts")).GroupByDate "2006" -}}
<p class="text-gray-900 font-bold text-2xl hidden xl:inline-block pt-2">{{ .Key }}</p>
<div>
<p class="font-bold text-2xl hidden xl:inline-block bg-white dark:bg-black sticky pt-2" style="top:2em;">{{ .Key }}</p>
{{ range .Pages }}
<div class="p-1 flex flex-row border-b border-dotted border-gray-400">
<div class="text-gray-600 xl:w-1/10 pr-10 pt-3 hidden xl:inline-block" title="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "01-02"}}</div>
<div class="text-gray-600 dark:text-gray-400 xl:w-1/10 pr-10 pt-3 hidden xl:inline-block" title="{{ .Date.Format "2006-01-02 15:04:05 MST" }}">{{ .Date.Format "01-02"}}</div>
<div class="xl:w-auto py-3">
<p class="text-xl">
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
</p>
<p class="text-gray-600 text-sm xl:hidden">{{ .Date.Format "2006-01-02 15:04:05 MST" }}</p>
<p class="text-gray-600 text-sm">
<p class="text-gray-600 dark:text-gray-400 text-sm xl:hidden">{{ .Date.Format "2006-01-02 15:04:05 MST" }}</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">
{{ range .Params.tags }}
<a class="pr-2 hover:text-gray-800" href="{{ $.Site.BaseURL }}/tags/{{ . | urlize }}{{ if $.Site.Params.uglyURLs }}.html{{ end }}">#{{ . }}</a>
<a class="pr-2 hover:text-gray-800 dark:hover:text-gray-200" href="{{ $.Site.BaseURL }}/tags/{{ . | urlize }}{{ if $.Site.Params.uglyURLs }}.html{{ end }}">#{{ . }}</a>
{{ end }}
</p>
</div>
</div>

{{ end }}
</div>
{{ end }}
</div>
</section>

<div class="hidden md:block w-full lg:w-1/4 xl:w-1/4 px-6 text-gray-800 leading-normal">
<div class="hidden md:block w-full lg:w-1/4 xl:w-1/4 px-6 leading-normal">

{{ partial "posts/profile.html" . }}
</div>
Expand Down
12 changes: 6 additions & 6 deletions layouts/index.html
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
{{ define "main" }}
<section class="w-full lg:w-3/4 xl:w-3/4">
<div class="px-8 py-6 mt-6 lg:mt-0 leading-normal rounded shadow bg-white">
<div class="px-8 py-6 mt-6 lg:mt-0 leading-normal rounded shadow bg-white dark:bg-black">

{{- $paginator := .Paginate (where .Site.RegularPages "Type" "in" (slice "post" "posts")) }}
{{ range $index,$data := $paginator.Pages }}
<article >
<!--Title-->
{{ partial "posts/title.html" . }}

<div class="post-content">
<div class="post-content dark:text-white">
{{ .Summary }}
</div>
<p class="text-sm font-semibold pt-5 text-gray-700 ">
<a href="{{ .Permalink }}" class="px-5 py-2 inline-block bg-gray-200 rounded hover:bg-gray-300">阅读全文</a>
<p class="text-sm font-semibold pt-5 text-gray-700 dark:text-gray-300">
<a href="{{ .Permalink }}" class="px-5 py-2 inline-block bg-gray-200 dark:bg-gray-800 rounded hover:bg-gray-300 dark:hover:bg-gray-700">阅读全文</a>
</p>
</article>

<hr class="bg-gray-300 mt-10 mb-6">
{{ end }}
<p class="text-center">
<a class="md:text-xl text-gray-700" href="{{ "/posts" | relLangURL }}{{ if $.Site.Params.uglyURLs }}.html{{ else }}/{{ end }}">↑ 文章归档 ↑</a>
<a class="md:text-xl text-gray-700 dark:text-gray-300" href="{{ "/posts" | relLangURL }}{{ if $.Site.Params.uglyURLs }}.html{{ else }}/{{ end }}">↑ 文章归档 ↑</a>
</p>
</div>
</section>

<div class="hidden md:block w-full lg:w-1/4 xl:w-1/4 px-6 text-gray-800 leading-normal">
<div class="hidden md:block w-full lg:w-1/4 xl:w-1/4 px-6 leading-normal">

{{ partial "posts/profile.html" . }}

Expand Down
Loading

0 comments on commit d774e14

Please sign in to comment.