Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
I've been playing with the asciidoctor-stylesheet-factory to create a CSS file for my document. In my experimentation, I haven't found a variable that allows me to set
body { font-family: whatever } in the final CSS. I've tried $body-font-family, but that sets font-family only in the #content class, which isn't used for default text. I took a quick look through the generated CSS files included with the stylesheet-factory project, and I wasn't able to find one that demonstrated this capability. Is there such a variable? |
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
Have you tried $body-font-family? It's in the typography foundation scss file. On Sat, Sep 14, 2013 at 7:05 PM, neontapir [via Asciidoctor :: Discussion] <[hidden email]> wrote: I've been playing with the asciidoctor-stylesheet-factory to create a CSS file for my document. In my experimentation, I haven't found a variable that allows me to set ... [show rest of quote] |
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
Yrs, with no success. On Sep 15, 2013 12:15 AM, "LightGuardjp [via Asciidoctor :: Discussion]" <[hidden email]> wrote:
... [show rest of quote] If you reply to this email, your message will be added to the discussion below:
http://discuss.asciidoctor.org/asciidoctor-stylesheet-factory-specify-default-font-tp615p616.html
|
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
Belay that. I was putting the variable declaration in the _xxx.scss file, not the xxx.scss file. I have it working now in the xxx.scss.
Thank you! |
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
Administrator
|
I'm glad to hear it! How I have the themes setup is definitely documentation that needs to be updated and more complete. In the meantime, I'll correct it here for those following along. To create a theme, where <theme> is the name of your theme: . create the file sass/<theme>.scss . populate sass/<theme>.scss file with: + ```scss
@import "settings/<theme>"; @import "components/asciidoc"; @import "components/awesome-icons"; ``` . create the file sass/settings/_<theme>.scss (note the leading underscore!)
. populate sass/settings/_<theme>.scss with: + ```scss @import "defaults"; // uncomment to set the body font // $body-font-family: Arial, serif;
// uncomment to set the main color, which is used for links // $primary-color: #FF0000; // see sass/settings/_defaults.scss and // sass/settings/_settings.scss.dist to find out // what other variables can be set ``` . compile using $ compass compile . Find your stylesheet at stylesheets/<theme>.css It's important to add the `import "defaults";` line at the top of the settings/_<theme>.scss file to make it all work. I hope that helps! On Sun, Sep 15, 2013 at 11:32 AM, neontapir [via Asciidoctor :: Discussion] <[hidden email]> wrote: Belay that. I was putting the variable declaration in the _xxx.scss file, not the xxx.scss file. I have it working now in the xxx.scss. -- Dan Allen | http://google.com/profiles/dan.j.allen |
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
Administrator
|
In reply to this post by neontapir
I forgot the final piece. Most of the styles come from the sass/components/_asciidoc.scss file. If there is something defined in that file that doesn't jive with your theme, or you want to customize, then you add overrides in the sass/<theme>.scss file *below* the imports. -DanOn Mon, Sep 16, 2013 at 8:35 PM, Dan Allen <[hidden email]> wrote:
... [show rest of quote] -- Dan Allen | http://google.com/profiles/dan.j.allen |
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
In reply to this post by neontapir
I'm new to asciidoctor and have found a behaviour that puzzles me.
If I run: asciidoctor sample.adoc the resultant HTML has a different look to it than when I run asciidoctor -a stylesheet=asciidoctor.css (copied from the stylesheets folder) or even asciidoctor -a stylesheet=asciidoctor-default.css I like the font from the first one better, but I need to use different icons from font-awesome for the admonition blocks, so I have been editing a copy of the asciidoctor-default.css file. However, the resultant body text is smaller than when no stylesheet is specified. Can you point me to what I'm missing here? Thanks. :-) |
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
Update
I noticed the following difference in the HTML generated by the two invocations of asciidoctor. When I DON'T specificy a stylesheet: asciidoctor sample.adoc Then the HTML contains the following line: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic|Noto+Serif:400,400italic,700,700italic|Droid+Sans+Mono:400"> When I DO specifiy a style sheet: asciidoctor -a stylesheet=asciidoctor.css then the HTML doesn't contain that line. I assume, because I don't have Noto Serif installed on my system that the the line in question is dynamically loading it from google whilst the second version defaults to Times. Is this a default that could be added to the stylesheet generator? How would you add it so that generated themes would create this line of HTML? |
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
Nevermind, I figured it out. I created scss files in the fonts folder for the three missing fonts and then put import directives into my custom theme scss.
Sorry to spam up your thread! |
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
Hi Paul,
it’s actually not spam! I also wondered why the font import //@import "fonts/metro"; is commented out in the "sass/asciidoctor.scss” file. The "sass/fonts/_metro.scss” contains exactly what you are searching for. @Dan Is there a reason this line is commented out at the moment? Cheers Alex |
Loading... |
Reply to author |
Edit post |
Move post |
Delete this post |
Delete this post and replies |
Change post date |
Print post |
Permalink |
Raw mail |
Administrator
|
I agree wholeheartedly, this question is not spam at all. It's a great question that needs to be documented. With the switch to custom fonts, I wanted to provide a way for people to disable the the remote import, just like we do with all remote assets we put into the document. In order to do that, I had to take the import statement out of the stylesheet and load it instead using a <link> element. This element is only added when you are using the default stylesheet, as you can see here:
It's also disabled if you explicitly unset the webfonts attribute: :webfonts!: You can also use the webfonts to load your own set of fonts, which is another possible solution here when you are using a customized version of the default stylesheet:
:webfonts: Open+Sans:300,300italic,400,400italic,600,600italic|Noto+Serif:400,400italic,700,700italic|Droid+Sans+Mono:400 Since this issue is probably going to come up a lot, what I've done is add the @import statement to the top of the default stylesheet inside comments. That way, you can quickly enable them if you are using the stylesheet outside of Asciidoctor or as a custom stylesheet. See:
If you are using the stylesheet factory to build the default Asciidoctor stylesheet, I recommend the advice that Alex gave of uncommenting the font import in sass/asciidoctor.scss. -Dan On Sat, Aug 9, 2014 at 6:45 PM, aheusingfeld [via Asciidoctor :: Discussion] <[hidden email]> wrote: Hi Paul, ... [show rest of quote] Dan Allen | http://google.com/profiles/dan.j.allen
|
Free forum by Nabble | Edit this page |