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.

Sign up for GitHub

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

Jump to bottom

:customcss: attribute for easy per-presentation CSS #85

Merged
merged 6 commits into from
Sep 8, 2016
Merged

:customcss: attribute for easy per-presentation CSS #85

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a73eae2
Implemented :linkcss: which loads asciidoctor-revealjs.css
obilodeau Aug 29, 2016
8b58a88
Documented the :linkcss: attribute
obilodeau Aug 29, 2016
9d62b54
One sentence per line fixes (related to #85's changes)
obilodeau Sep 5, 2016
b8bab33
Now :customcss: instead of :linkcss: and allowed to specify filename/URL
obilodeau Sep 7, 2016
f1d87a1
Test case: :customcss: attribute
obilodeau Sep 7, 2016
2bf8e9d
:customcss: Tighter ruby (Thanks Dan!)
obilodeau Sep 7, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions README.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -258,6 +258,28 @@ Detailed view diagram
----


=== CSS override

If you use the `:customcss:` document attribute, a CSS file of the name given in the attribute is added to the list of CSS resources loaded by the rendered HTML.
Doing so, you can then easily override specific elements of your theme per presentation.

For example, to do proper position-independent text placement of a title slide with a specific background you can use:

----
.reveal section.title h1 {
margin-top: 2.3em;
}

.reveal section.title small {
margin-top: 15.3em;
font-weight: bold;
color: white;
}
----

If the `:customcss:` attribute value is empty then `asciidoctor-revealjs.css` is the CSS resource that the presentation is linked to.


== About Jade Templates

`/templates/jade` directory contains jade template files they are ported from `/templates/slim` templates. These templates were written to support reveal.js backend for Asciidoctor.js environment that is currently using in https://github.com/asciidocfx/AsciidocFX[AsciidocFX] editor. You can look at the https://github.com/asciidocfx/asciidoctor.js-reveal-demo[demo].
Expand Down
4 changes: 4 additions & 0 deletions templates/slim/document.html.slim
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@ html lang=(attr :lang, 'en' unless attr? :nolang)
document.write( '<link rel="stylesheet" href="#{revealjsdir}/css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
- unless (docinfo_content = docinfo :header, '.html').empty?
=docinfo_content
- if attr? :customcss and (attr :customcss).empty?
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's my preferred way of writing this:

- if attr? :customcss
  link rel='stylesheet' href=((customcss = attr :customcss).empty? ? 'asciidoctor-revealjs.css' : customcss)

I'd also be open to:

- if attr? :customcss
  - if (customcss = attr :customcss).empty?
    link rel='stylesheet' href='asciidoctor-revealjs.css'
  - else
    link rel='stylesheet' href=customcss

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I noticed that you love the ternary operator :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The test/assignment is very interesting, I'll try to remember that trick!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love it to death. It helps cut down on a lot of lines of code and useless assignments. Combined with the assignment in the conditional, I can express meaning much more succinctly.

link rel='stylesheet' href='asciidoctor-revealjs.css'
- elsif attr? :customcss
link rel='stylesheet' href='#{attr :customcss}'
body
.reveal
/ Any section element inside of this container is displayed as a slide
Expand Down
5 changes: 5 additions & 0 deletions test/customcss.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
= Custom CSS
Author
:customcss: customcss.css

== Slide 1
8 changes: 8 additions & 0 deletions test/customcss.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
.reveal section h1 {
font-family: cursive;
}

.reveal section small {
margin-top: 15.3em;
font-family: fantasy;
}