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

bug: no way to express font fallbacks in SCSS themes? #81

Open
jason-s opened this issue Jul 8, 2016 · 6 comments
Open

bug: no way to express font fallbacks in SCSS themes? #81

jason-s opened this issue Jul 8, 2016 · 6 comments

Comments

@jason-s
Copy link

jason-s commented Jul 8, 2016

There appears to be no way to express font fallbacks in the SCSS themes. The normal CSS is

 body { font-family: Arial, Tahoma; }

but if you use this in the SCSS it tries to find a font-family of "Arial, Tahoma"; I've tried using an array but it fails and gives me the error nbpresent.deps.min.js:55 Uncaught TypeError: n[e].split is not a function

here are notebooks demonstrating this:

fallback-fonts-fail.zip

@bollwyvl
Copy link
Contributor

bollwyvl commented Jul 8, 2016

Sorry, to which themes are you referring? The nbpresent build chain is based on less...

Also, instead of attaching notebooks as zips, please consider publishing them as gists and using nbviewer :) This lets us conveniently reference them. Actually, for this purpose, an anonymous gist is ideal, as it is immutable, and links will always work :)

@jason-s
Copy link
Author

jason-s commented Jul 8, 2016

oh -- ok, I'll do that. Coming up....

@jason-s
Copy link
Author

jason-s commented Jul 8, 2016

here you go

https://gist.github.com/jason-s/a3c00bcaa362359c7c87ea48f7fe986d

It doesn't show the slideshow in nbviewer, however. You have to run them from a Jupyter instance to use the slideshow features.

These are themes based on reveal.js "Simple" theme (using the "import from reveal.js" ipython notebook) and tweaked by hand to change the main font-family.

@jason-s
Copy link
Author

jason-s commented Jul 8, 2016

one of them looks like this:

    "theme": {
     "simple-by-revealjs-3.3.0": {
      "backgrounds": {
       "backgroundColor": {
        "background-color": "backgroundColor",
        "id": "backgroundColor"
       }
      },
      "id": "simple-by-revealjs-3.3.0",
      "palette": {
       "backgroundColor": {
        "id": "backgroundColor",
        "rgb": [
         255,
         255,
         255
        ]
       },
       "headingColor": {
        "id": "headingColor",
        "rgb": [
         0,
         0,
         0
        ]
       },
       "linkColor": {
        "id": "linkColor",
        "rgb": [
         0,
         0,
         139
        ]
       },
       "mainColor": {
        "id": "mainColor",
        "rgb": [
         0,
         0,
         0
        ]
       }
      },
      "rules": {
       "a": {
        "color": "linkColor"
       },
       "h1": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 7
       },
       "h2": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 5
       },
       "h3": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 3.75
       },
       "h4": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 3
       },
       "h5": {
        "color": "headingColor",
        "font-family": "News Cycle"
       },
       "h6": {
        "color": "headingColor",
        "font-family": "News Cycle"
       },
       "h7": {
        "color": "headingColor",
        "font-family": "News Cycle"
       },
       "li": {
        "color": "mainColor",
        "font-family": "Tahoma, Arial",
        "font-size": 5
       },
       "p": {
        "color": "mainColor",
        "font-family": "Tahoma, Arial",
        "font-size": 5
       }
      },
      "text-base": {
       "color": "mainColor",
       "font-family": "Tahoma, Arial",
       "font-size": 5
      }
     }
    },

@jason-s
Copy link
Author

jason-s commented Jul 8, 2016

The other one contains

      "text-base": {
       "color": "mainColor",
       "font-family": ["Tahoma", "Arial"],
       "font-size": 5
      }

in a vain attempt to figure out how to get font fallbacks to work.

@bollwyvl
Copy link
Contributor

bollwyvl commented Jul 8, 2016

Ok, that makes more sense.

nbpresent doesn't presently handle font fallback chains. Indeed, we're considering how to embed actual fonts, again on the archival output goal.

Again, if you are already very comfortable with these kinds of concepts, you may have more success working directly with the reveal.js/RISE approach!

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