bitstarr/grav-theme-chassis

Grav Theme Boilerplate

grav-theme-chassis's Issues

localize

see:
https://learn.getgrav.org/17/content/multi-language
https://github.com/hibbitts-design/grav-theme-quark-open-publishing
https://github.com/getgrav/grav-theme-learn2/blob/develop/languages.yaml
https://github.com/getgrav/grav-theme-quark/blob/develop/languages.yaml

YouTube Embeds with onclick loading

see:

• https://css-tricks.com/little-things-on-my-personal-site/#chill-youtube
• https://www.thomasvantuycom.com/privacy-friendly-video-embeds/

tweak icons for forced color

see https://twitter.com/patrick_h_lauke/status/1572852781161005057

forced-color-adjust: auto

Refactor mobile navigation

maybe we can do this more semantic and accesible
see https://web.dev/building-a-sidenav-component/

make webcomponents

make more from the carousel and turn it into a web component?
https://flackr.github.io/web-demos/carousel/
https://github.com/flackr/web-demos/tree/master/carousel

Also tabs coud be a webcomponent too?

use flow-space pattern at least for .textflow

see https://piccalil.li/quick-tip/flow-css-utility/

add shortcode for proper quotes

add a shortcode for blockquotes with semantic source citation

add info about theme renaming

since there are some places to edit in order to rename the theme, it would be helpful to list all places.

Use menu instead of title in breadcrumbs template

also you can refactor the css a bit

postnav component includes hard coded colors

Collapsibles and Tabs

rethink details and tabs with tiny-ui-toggle

Maybe consider using custom shortcodes.

Blueprints

• Custom navigations (footer)
• Social media channels
• default page and modular

Move away from gulp

Since some dependencies of our gulp automation process already broke in this constellation, we need to find other ways to automate out routine work

evaluate to run and cahin the underlaying tools with npm scripts or a makefile to get some dependencies cut.

refactor hero partial and bullets modular

There are partials that need refactoring or reconsidering.

meta info and share pic

• check if meta data will be included correctly
• integrate share pic logic and fallback

no styles for blockquotes in textflow component

tab component

refactor WIP tab component

improve navigation trigger on narrwo screens

Instead of having the menu trigger in the head, you could have it fixed on the side near the bottom of the screen. So it's always reachable (with the thumb using you smartphone)

Bonus: detect if is smartphone
Bonus 2: provide a switch in nav menu for left handed (place trigger on the left side of screen)

minor improvements

• Add dependency for svg-extension plugin
• add simple shortcodes (e.g. for svg-extension)
  • add "Editor buttons" (plugin dependent, optional)
  • add shortcode default config to kickstart project
  • document available shortcodes
• revisite css reset again (https://piccalil.li/blog/a-modern-css-reset/)
• do something to drop gravatar
• add a source/author field to hero component

Refactoring

• Use new CSS Reset and combine with usefull features from normalize to get a new custom baseline
  • https://css-tricks.com/an-interview-with-elad-shechter-on-the-new-css-reset/
  • https://www.joshwcomeau.com/css/custom-css-reset/
  • https://github.com/csstools/normalize.css/blob/main/normalize.css
  • https://github.com/sindresorhus/modern-normalize/blob/main/modern-normalize.css
• Rethink the design tokens (var.css) to maximize themability and flexibility
  ideas from
  • pollen
  • open props
• new approach on sticky footer
• better focus styles
  • https://twitter.com/realbrothercake/status/1458945330859454473
  • https://www.sarasoueidan.com/blog/focus-indicators/
  • https://css-tricks.com/standardizing-focus-styles-with-css-custom-properties/
• dynamic line-height: line-height: calc(1em + 0.3rem);
• introduce navigation area taxonomy

design tokens idea:

--color-primary-hsl: 123 50% 50%;
--color-primary: hsl( var( --color-primary ) );
--color-on-primary-hsl: 0 0% 0%;
--color-on-primary: hsl( var( --color-on-primary-hsl ) );

optimize font loading

• use font-display: optional
• only provide woff2 (less preloads)
• faux bolds?

see https://simonhearne.com/2021/layout-shifts-webfonts/

start using CSS cascade layers

https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/
https://www.matuzo.at/blog/2022/100daysof-day37/

retire custom form elements (checkbox, radio) in favour of accent-color

Since accent-color has wide browser support now, check if the custom interfaces for radios and checkboxes are still relevant.

https://www.matuzo.at/blog/2023/100daysof-day94/

wrapper grid with rem units

set all units regarding the wrapping graid to rem

could use css custom properties to sense JS support

see https://twitter.com/anatudor/status/1547651043319631880

refactor custom form elements

see https://codepen.io/aaroniker/pen/ZEYoxEY

rethink CSS variables naming

rethink CSS variables naming (again) with some of the ideas from Jonathan Dallas

https://jwdallas.com/posts/namingcssvariables/

complete readme 'dependencies'

there is a @todo, write about it.

favicons will not get transparent background with new workflow

see title

use CSS brightness-fliter for color variations

after dropping LESS, we were searching a replacement for darken() and lighten() functions.
we tried to split the color in hsl values with custom properties, but it's not very intuitive atm.

maybe filter: brightness() is a good replacement.
see https://css-tricks.com/little-things-on-my-personal-site/#filter-trick-for-links