Welcome to mirror list, hosted at ThFree Co, Russian Federation.

github.com/wangchucheng/hugo-eureka.git - Unnamed repository; edit this file 'description' to name the repository.
summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorWang Chucheng <ccwangchn@gmail.com>2020-05-15 11:26:07 +0300
committerWang Chucheng <ccwangchn@gmail.com>2020-05-15 11:26:07 +0300
commit864f08c0c12c072d499f71e55b6beb9963042d52 (patch)
tree68965ceff6167d71b6afcf6b671cbddd0adfadc5
parente753af0c7a75770ea5c931cdef2e0034bac889af (diff)
style: add semantic color
Diffstat
-rw-r--r--assets/css/base.css22
-rw-r--r--assets/css/markdown.css2
-rw-r--r--assets/css/site.css4
-rw-r--r--assets/css/tailwind.config.js10
-rw-r--r--layouts/_default/baseof.html2
-rw-r--r--layouts/_default/single.html18
-rw-r--r--layouts/partials/header.html6
-rw-r--r--layouts/partials/post_metadata.html58
-rw-r--r--layouts/partials/post_series.html3
9 files changed, 58 insertions, 67 deletions
diff --git a/assets/css/base.css b/assets/css/base.css
index 3359edc..b871eef 100644
--- a/assets/css/base.css
+++ b/assets/css/base.css
@@ -1,12 +1,20 @@
:root{
- @apply font-serif bg-tertiary;
- --color-primary: #38B2AC;
- --color-secondary: #FBFBFC;
- --color-tertiary: #F2F2F7;
+ @apply font-serif bg-primary-bg text-primary-text;
+ --color-eureka: #38B2AC;
+ --color-primary-bg: rgba(242,242,247,1.00);
+ --color-secondary-bg: rgba(255,255,255,1.00);
+ --color-tertiary-bg: rgba(120,120,128,0.20);
+ --color-primary-text: rgba(0,0,0,0.85);
+ --color-secondary-text: rgba(0,0,0,0.65);
+ --color-tertiary-text: rgba(0,0,0,0.45);
}
.dark {
- --color-primary: #38B2AC;
- --color-secondary: #303030;
- --color-tertiary: #000000;
+ --color-eureka: #38B2AC;
+ --color-primary: rgba(0,0,0,1.00);
+ --color-secondary: rgba(28,28,30,1.00);
+ --color-tertiary: rgba(44,44,46,1.00);
+ --color-primary-text: rgba(255,255,255,0.85);
+ --color-secondary-text: rgba(255,255,255,0.65);
+ --color-tertiary-text: rgba(255,255,255,0.45);
} \ No newline at end of file
diff --git a/assets/css/markdown.css b/assets/css/markdown.css
index cc02c11..e1802aa 100644
--- a/assets/css/markdown.css
+++ b/assets/css/markdown.css
@@ -5,7 +5,7 @@
}
.content {
- @apply text-gray-900 leading-normal break-words;
+ @apply text-primary-text leading-normal break-words;
}
.content > * + * {
diff --git a/assets/css/site.css b/assets/css/site.css
index c34ddda..5623e0f 100644
--- a/assets/css/site.css
+++ b/assets/css/site.css
@@ -3,7 +3,7 @@
}
.sticky-title {
- @apply sticky top-16 z-10 bg-tertiary;
+ @apply sticky top-16 z-10 bg-primary-bg;
}
.sticky-toc {
@@ -16,5 +16,5 @@
} */
.sticky-toc a:hover, a:focus {
- @apply text-primary
+ @apply text-eureka;
} \ No newline at end of file
diff --git a/assets/css/tailwind.config.js b/assets/css/tailwind.config.js
index dfb9473..ed10c1a 100644
--- a/assets/css/tailwind.config.js
+++ b/assets/css/tailwind.config.js
@@ -6,9 +6,13 @@ module.exports = {
'16': '4rem',
},
colors: {
- primary: 'var(--color-primary)',
- secondary: 'var(--color-secondary)',
- tertiary: 'var(--color-tertiary)',
+ 'eureka': 'var(--color-eureka)',
+ 'primary-bg': 'var(--color-primary-bg)',
+ 'secondary-bg': 'var(--color-secondary-bg)',
+ 'tertiary-bg': 'var(--color-tertiary-bg)',
+ 'primary-text': 'var(--color-primary-text)',
+ 'secondary-text': 'var(--color-secondary-text)',
+ 'tertiary-text': 'var(--color-tertiary-text)',
}
}
},
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index f86414c..4fd1a67 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">
+ <header class="fixed w-full h-16 z-50 bg-secondary-bg">
<div class="container mx-auto">
<div class="max-w-screen-xl">
{{- partial "header.html" . -}}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 93cd7f6..3e6725d 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -2,7 +2,8 @@
{{ $hasToc := and (in .TableOfContents "<li>" ) (.Params.toc) }}
{{ $hasSidebar := or ($hasToc) (.Params.series) }}
<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">
+ <div
+ class="col-span-2 {{ if not $hasSidebar }} {{- print "lg:col-start-2" -}} {{ end }} lg:col-span-6 bg-secondary-bg px-6 py-8">
<h1 class="font-bold text-3xl text-gray-700">{{ .Title }}</h1>
{{ partial "post_metadata.html" . }}
<div class="content">
@@ -19,14 +20,16 @@
{{ end }}
</div>
{{ end }}
-
+
{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
- <div class="col-span-2 {{ if not $hasSidebar }} {{- print "lg:col-start-2" -}} {{ end }} lg:col-span-6 bg-secondary p-6">
+ <div
+ class="col-span-2 {{ if not $hasSidebar }} {{- print "lg:col-start-2" -}} {{ end }} lg:col-span-6 bg-secondary-bg p-6">
<h2 class="subtitle">See Also</h2>
<div class="content">
{{ range . }}
<a href="{{ .RelPermalink }}">{{ .Title }}</a>
+ <br />
{{ end }}
</div>
</div>
@@ -41,7 +44,7 @@
if (entry.intersectionRatio > 0) {
if (delay == true) {
let element = document.querySelector('.sticky-toc li.active')
- element.firstChild.classList.remove('text-primary');
+ element.firstChild.classList.remove(textColor);
element.classList.remove('active');
delay = false;
updatePosAndColor();
@@ -53,7 +56,7 @@
delay = true;
} else {
let element = document.querySelector(`.sticky-toc li a[href="#${id}"]`)
- element.classList.remove('text-primary');
+ element.classList.remove(textColor);
element.parentElement.classList.remove('active');
updatePosAndColor();
}
@@ -63,13 +66,14 @@
var delay = false;
var targetPos = window.innerHeight * 0.4
+ var textColor = 'text-eureka'
function updatePosAndColor() {
let elements = document.querySelectorAll('.sticky-toc li.active')
let len = elements.length
if (len != 0) {
let firstElement = elements[0]
- firstElement.firstChild.classList.add('text-primary')
+ firstElement.firstChild.classList.add(textColor)
let offset = firstElement.offsetTop - targetPos;
if (offset > 0) {
document.querySelector(`.sticky-toc`).style.top = `calc( 7rem - ${offset}px)`
@@ -77,7 +81,7 @@
document.querySelector(`.sticky-toc`).removeAttribute("style");
}
for (let i = 1; i < len; i++) {
- elements[i].firstChild.classList.remove('text-primary')
+ elements[i].firstChild.classList.remove(textColor)
}
}
}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 3db9b39..26036fa 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,10 +1,10 @@
<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">
+ <div class="flex items-center flex-shrink-0 text-eureka 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">
+ class="flex items-center px-3 py-2 border rounded text-black border-black hover:text-eureka 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" />
@@ -15,7 +15,7 @@
<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>
+ class="block mt-4 md:inline-block md:mt-0 text-black hover:text-eureka mr-4">{{ .Name }}</a>
{{ end }}
</div>
<div>
diff --git a/layouts/partials/post_metadata.html b/layouts/partials/post_metadata.html
index 9c0574c..39b69bc 100644
--- a/layouts/partials/post_metadata.html
+++ b/layouts/partials/post_metadata.html
@@ -1,68 +1,42 @@
-<div class="flex flex-row bg-gray-200">
- <div class="text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">
+<div class="flex flex-wrap flex-row items-center my-2">
+ <div class="mx-2 my-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">
+ <div class="mx-2 my-2">
<span>&middot;</span>
</div>
- <div class="column is-narrow">
- <span class="icon is-inline">
- <i class="fas fa-clock"></i>
- </span>
+ <div class="mx-2 my-2">
+ <i class="fas fa-clock"></i>
<span>{{ .ReadingTime }} min read</span>
</div>
- <div class="column is-narrow is-hidden-mobile">
- {{ with .GetTerms "categories" }}
+ {{ with .GetTerms "categories" }}
+ <div class="mx-2 my-2">
<span>&middot;</span>
</div>
- <div class="column is-narrow">
- <span class="icon is-inline">
- <i class="fas fa-folder"></i>
- </span>
+ <div class="mx-2 my-2">
+ <i class="fas fa-folder"></i>
{{ 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" }}
+ {{ end }}
+
+ {{ with .GetTerms "series" }}
+ <div class="mx-2 my-2">
<span>&middot;</span>
</div>
- <div class="column is-narrow">
- <span class="icon is-inline">
- <i class="fas fa-th-list"></i>
- </span>
+ <div class="mx-2 my-2">
+ <i class="fas fa-th-list"></i>
{{ range $index, $value := . }}
{{ if gt $index 0 }}
<span>, </span>
{{ end -}}
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
{{ end }}
- {{ end }}
</div>
+ {{ end }}
</div> \ No newline at end of file
diff --git a/layouts/partials/post_series.html b/layouts/partials/post_series.html
index 7d3d49e..062b39a 100644
--- a/layouts/partials/post_series.html
+++ b/layouts/partials/post_series.html
@@ -1,5 +1,5 @@
{{ $series := .Site.Taxonomies.series}}
-<div class="bg-secondary p-6">
+<div class="bg-secondary-bg p-6">
<h2 class="subtitle">系列文章</h2>
<div class="content">
{{range .Params.series }}
@@ -7,6 +7,7 @@
{{ $value := index $series $key }}
{{ range $value}}
<a href="{{ .Page.RelPermalink }}">{{ .Page.Title }}</a>
+ <br />
{{end}}
{{end}}
</div>
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-26 19:52:56 +0300