css: custom style - Githubissues

premAI-io / state-of-open-source-ai

:closed_book: Clarity in the current fast-paced mess of Open Source innovation

https://book.premai.io/state-of-open-source-ai

Other

1.52k stars 89 forks source link

css: custom style #70

Closed casperdcl closed 1 year ago

casperdcl commented 1 year ago

this seems to work fine for me.

p {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

before	after

this PR's build artefact can be downloaded if you want to check locally: github-pages.zip

tips

inspect page elements in your browser console to find out their classes so you can target them in CSS
vis https://jupyterbook.org/en/stable/advanced/html.html#custom-css-or-javascript

you could always upload more woff fonts if you want...

@font-face{
font-family: "SomeKewlFont";
src:
  local("SomeKewlFont"),
  url("/_static/SomeKewlFont.woff2") format("woff2"),
  Arial, Helvetica;
}

p {
font-family: "SomeKewlFont", sans-serif;
}

Janaka-Steph commented 1 year ago

It is not clear. You want Georgia, 'Times New Roman', Times, serif on all paragraphs? But then why do you say inspect page elements in your browser console to find out their classes so you can target them in CSS. I don't need classes in this case.

casperdcl commented 1 year ago

No I don't want Georgia on all paras :sweat_smile:

Context:

aim: style site to look more like premai.io (mostly fonts & colours IMO, lemme know if you think differently)
@johnsBeharry mentioned he struggled to get css working in this repo, so I opened this PR as a PoC to demonstrate it working

In practice I guess we need something like

.some-sidebar-class {
  font-family: "someCustomFont";
}

etc...

Janaka-Steph commented 1 year ago

Ha ok. Prem App uses a font called Pretendard on both titles and paragraphs. We can do the same.