Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is full width still possible with Doks 1.0? #1091

Closed
Yvand opened this issue Sep 12, 2023 · 11 comments
Closed

Is full width still possible with Doks 1.0? #1091

Yvand opened this issue Sep 12, 2023 · 11 comments
Assignees

Comments

@Yvand
Copy link

Yvand commented Sep 12, 2023

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 h-enk self-assigned this Sep 12, 2023
@h-enk
Copy link
Member

h-enk commented Sep 12, 2023

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

@h-enk
Copy link
Member

h-enk commented Sep 14, 2023

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
Copy link
Author

Yvand commented Sep 15, 2023

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
Copy link
Member

h-enk commented Sep 15, 2023

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
Copy link
Author

Yvand commented Sep 15, 2023

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
Copy link
Member

h-enk commented Sep 15, 2023

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
Copy link
Member

h-enk commented Sep 15, 2023

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

@Yvand
Copy link
Author

Yvand commented Sep 15, 2023

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
Copy link
Member

h-enk commented Sep 15, 2023

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

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

@h-enk
Copy link
Member

h-enk commented Sep 15, 2023

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

@Yvand
Copy link
Author

Yvand commented Sep 15, 2023

Yes it uses it successfully now ! Thank you !

@Yvand Yvand closed this as completed Sep 28, 2023
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants