thuliteio/doks

Is full width still possible with Doks 1.0?

Yvand opened this issue · 11 comments

Yvand commented

I'm upgrading my site to @hyas/doks-core 1.0.5.
One thing I cannot do is to show my site with full width.
This was introduced in #636

I tried to enable it in my config/_default/hugo.toml but it doesn't help:

[options]
  fullWidth = true

Am I doing something wrong?

Side note: your links in https://github.com/h-enk/doks/issues/new/choose are broken, so I had to open a blank issue.

h-enk commented

Thx. You're right — I will re-add this (soon)

  • ❤️1
h-enk commented

Fixed — see also @hyas/doks-core v1.0.6

  1. In your project directory, run npm i @hyas/doks-core@latest
  2. In config/_default/hyas/doks.toml set containerBreakpoint = "fluid"
  3. In config/_default/params.yml add mainSections: [docs]
Yvand commented

Thank you, I tested and it works, but not as in previous Doks versions:
The width of the text in the middle column did not increase.

To illustrate, here is a screenshot before setting this config:
image

After applying this config:
image

My goal for the full width is that the extra space benefits mostly to the text in the middle column, similar to here (which still uses Doks 0.5.0).
Can I apply a config to do this?

h-enk commented

Not a config setting (yet), but you can override the fixed width in your _custom.scss:

.container-fw {
  // max-width: 1200px;
  max-width: 100%;

  .docs-toc {
    margin-left: 3rem;
  }
}
Yvand commented

Ok, I created assets/scss/_custom.scss copied your content inside, deleted dir resources/_gen/assets/scss, ran npm run dev but it has no effect, I guess my scss is just not used.
Do I need to reference my new _custom.scss somewhere?
Sorry if I ask dumb questions, my knowledge on Hugo / UI design is very low

h-enk commented

In config/_default/module.toml make sure you have:

[[mounts]]
  source = "node_modules/@hyas/doks-core/assets"
  target = "assets"
  excludeFiles = "scss/common/_custom.scss"
h-enk commented

And assets/scss/_custom.scss s/b assets/scss/common/_custom.scss

Yvand commented

Hmm, still no luck, I think I do not understand correctly your last message.
I will try again later, FYI I made all the changes in this commit, maybe you can see quickly my mistake.

h-enk commented

You've placed your _custom.scss in assets/scss/

But you should place it in assets/scss/common/ to be picked up

h-enk commented

Also, in your package.json bump "@hyas/doks-core": "^1.0.6" to "@hyas/doks-core": "^1.0.7"

Yvand commented

Yes it uses it successfully now ! Thank you !

  • 🎉1