Go to file
k dda55f87e2
feat: change the page vertical scrollbar styles (#227)
* fix: take out [data-scheme="dark"] from :root

Taking out the [data-scheme="dark"] from :root allows us to fix the
precedence of CSS when the [data-scheme="dark"] is placed in the <html>
tag. This is needed in order to make the dark styles accesible from the
<html> elment, this will allow us to change the vertical scrollbar
styles following the dark and light schemes.

* change document.body.dataset.scheme to document.documentElement.dataset.scheme

When the dark mode is on or when the light mode is on, the
[data-scheme="light"] or [data-scheme="dark"], respectively, will be
placed in the <html> tag. Allowing us to access the dark and light color
schemes from the <html> to change the vertical scrollbar styles
according to the current color scheme.

* feat: change the page vertical scrollbar styles

This change will make the vertical scrollbar styles to follow the dark
and light color scheme modes. Also, this change will make the vertical
scrollbar to look consistent in both, Chromium and Firefox.

* make the scrollbar-track background-color transparent

The body has this transition: 'transition: background-color 0.3s ease
0s'. Making the scrollbar-track background-color transparent allow us to
appreciate that transition in the scrollbar-track when switching the
background-color.

* Move [data-scheme=dark] back to :root block

* fix(comment/waline): detect dark mode from html tag

* feat: apply custom scrollbar style to all elements

Co-authored-by: Jimmy Cai <jimmehcai@gmail.com>
2021-06-20 15:49:35 +02:00
.github chore(github): update bug report template 2021-04-04 12:38:28 +02:00
archetypes feat: add archetypes (#145) 2021-02-13 15:55:56 +01:00
assets feat: change the page vertical scrollbar styles (#227) 2021-06-20 15:49:35 +02:00
data feat: add data/external.yaml (#140) 2021-02-12 13:21:43 +01:00
exampleSite feat(comment): add Waline (#200) 2021-06-14 21:05:27 +02:00
i18n fix(i18n): Japanese translating (#212) 2021-06-12 09:28:43 +02:00
images doc: add screenshots 2020-09-13 12:24:07 +02:00
layouts feat: change the page vertical scrollbar styles (#227) 2021-06-20 15:49:35 +02:00
resources/_gen/assets/scss/scss release: 2.3.0 2021-03-27 23:39:29 +01:00
LICENSE 🎉 Initial commit 2020-08-22 13:20:08 +02:00
netlify.toml ci: upgrade Hugo version to 0.79.0 (#56) 2020-12-04 16:28:42 +01:00
README.md doc: update README 2020-12-23 22:37:21 +01:00
theme.toml Bump required Hugo version to 0.78.0 2020-12-23 19:17:17 +01:00

Stack

Hugo Theme Stack

Card-style Hugo theme designed for bloggers.

Demo

Example Site

Netlify Status

Documentation & more information

Documentation | 中文文档

Introduction

Stack is a simple card-style Hugo theme designed for bloggers, some of its features are:

  • Responsive images support
  • Lazy load images
  • Dark mode
  • Local search
  • PhotoSwipe integration
  • Archive page template
  • Full native JavaScript, no jQuery or any other frameworks are used
  • No CSS framework, keep it simple and minimal
  • Properly cropped thumbnails
  • Subsection support

Requirements

It's necessary to use Hugo ≥ 0.78.0.

Use Hugo Extended version (recommended) if you want to:

  • Use the latest feature/fix from master branch
  • Edit SCSS files

Compiled CSS are updated once per release.

Installation

Clone / Download this repository to theme folder, and edit your site config following exampleSite/config.toml.

Check documentation for more details.

Licensed under the GNU General Public License v3.0

Please do not remove the "Theme Stack designed by Jimmy" text and link.

If you want to port this theme to another blogging platform, please let me know🙏.

Sponsoring

If you like this theme, give it a star, and consider supporting its development:

ko-fi

Your support is greatly appreciated :)

Thanks to