diff --git a/_data/read_time.yml b/_data/read_time.yml new file mode 100644 index 0000000..0349fea --- /dev/null +++ b/_data/read_time.yml @@ -0,0 +1,7 @@ +# words per minute +wpm: 180 + +# minimum value +min_time: 1 + +prompt: min diff --git a/_includes/read-time.html b/_includes/read-time.html new file mode 100644 index 0000000..c81f4b8 --- /dev/null +++ b/_includes/read-time.html @@ -0,0 +1,15 @@ + +{% assign words = include.content | strip_html | number_of_words: "auto" %} + +{% assign read_time = words | divided_by: site.data.read_time.wpm %} + +{% unless read_time > 0 %} + {% assign read_time = site.data.read_time.min_time %} +{% endunless %} + + + + {{- read_time -}}{{" "}}{{- site.data.read_time.prompt -}} + diff --git a/_layouts/home.html b/_layouts/home.html index 76c66d5..f9c6752 100644 --- a/_layouts/home.html +++ b/_layouts/home.html @@ -65,9 +65,13 @@ layout: page
diff --git a/_layouts/post.html b/_layouts/post.html index 435afc6..faf2d3f 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -18,33 +18,31 @@ layout: default diff --git a/assets/css/home.scss b/assets/css/home.scss index 0cbf7e5..274184e 100644 --- a/assets/css/home.scss +++ b/assets/css/home.scss @@ -29,7 +29,7 @@ i { font-size: 0.73rem; &:not(:first-child) { // post-meta icons on the homepage - margin-left: 1.5rem; + margin-left: 1rem; } } } diff --git a/assets/css/post.scss b/assets/css/post.scss index 774928f..3a05925 100644 --- a/assets/css/post.scss +++ b/assets/css/post.scss @@ -27,6 +27,27 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; border-color: var(--btn-border-color); } +@mixin dot($pl: 0.2rem, $pr: 0.4rem) { + content: "\2022"; + color: rgba(158, 158, 158, 0.8); + padding-left: $pl; + padding-right: $pr; +} + +.post .post-meta { + > div:nth-child(2) { + > span:not(:first-child)::before { + @include dot; + } + } + #pv::after { + content: " views"; + } + .readtime::after { + content: " read"; + } +} + .post-content { > ol, > ul, > dl { padding-left: 2rem; @@ -318,11 +339,7 @@ $prompt-newer: "{{ site.data.label.post.button.next }}"; .post { .post-meta { >div:not(:first-child)::before { - content: "\2022"; - color: rgba(158, 158, 158, 0.8); - font-weight: bold; - padding-left: 0.5rem; - padding-right: 0.3rem; + @include dot(.5rem, .2rem); } &.flex-column { -webkit-box-orient: horizontal!important;