https://getdoks.org/ CSS for dotted lines and adding custom fonts?

[raqueeb]

I know it really look nice for having the dotted line in the landing page of https://getdoks.org/. It's out of the world!

I have seen that is coming from --

element.style {
}
.bg-dots {
background-image: radial-gradient(#dee2e6 15%, transparent 15%);
background-position: 0 0;
background-size: 1rem 1rem;
-webkit-mask: linear-gradient(to top, #fff, transparent);
mask: linear-gradient(to top, #fff, transparent);
width: 100%;
height: 9rem;
margin-top: -10rem;
z-index: -1;
}

If I need to create this css, where should I able to add? Can I add it to assets/scss/common/_global.scss?

And for fonts, should I add it to assets/scss/common/_fonts.scss file?

Thank you.

[h-enk]

Hello @raqueeb, thanks!

The ./assets/scss/ folder is (hopefully) structured in a logical way 😉 The ./assets/scss/app.scss file is the one that pulls in all the separate scss files.

I would put the dots scss in /assets/scss/layouts/_pages.scss (since the're used on a page), but you could put it in somewhere else if that makes more sense to you.

Yes, fonts then in /assets/scss/common/_font.scss

[raqueeb]

Thank you so much for the help. Since I don't have access to getdoks.org gh-pages, I don't seem to understand how do I create dots scss?

Is it possible to share the dots scss content? Only the dots scss portion.

I believe it is becoming a great docs site! Keep up the good work!

[epogrebnyak]

Thank you so much for the help. Since I don't have access to getdoks.org gh-pages, I don't seem to understand how do I create dots scss?

Please check https://github.com/h-enk/getdoks.org - the source is there

[raqueeb]

Many thanks indeed! I'm little new to this scss thing. I went to the source, looked into all the scss files specially, getdoks.org/assets/scss/layouts/_pages.scss which is in https://github.com/h-enk/getdoks.org/blob/master/assets/scss/layouts/_pages.scss but can't seem to find the dots scss, which is responsible for the dotted lines like the photo attached.

Thank you once again.

[raqueeb]

I believe it is in getdoks.org/assets/scss/common/_global.scss.

Thank you.