I am adding incremental bullet points inside a div and it doesn't seem to work.
pres.Rmd
---
title: "Incremental in Div"
output:
xaringan::moon_reader:
encoding: 'UTF-8'
self_contained: false
css: ['default','styles.css']
---
## No div
- Point 1
--
- Point 2
---
## Div direct
Div style is defined directly in HTML/CSS.
<div style="width: 49%;float: left;margin-right: 0.5%;margin-left: 0.5%;">
- Point 1
--
- Point 2
</div>
--
<div style="width: 49%;float: right;margin-right: 0.5%;margin-left: 0.5%;">
- Point 1
--
- Point 2
</div>
---
## Div styles
Div style is defined through classes in the styles.css file.
.pull-left-50[
- Point 1
--
- Point 2
]
--
.pull-right-50[
- Point 1
--
- Point 2
]
styles.css
.pull-right-50 {
width: 49%;
float: right;
margin-right: 0.5%;
margin-left: 0.5%;
}
.pull-left-50 {
width: 49%;
float: left;
margin-right: 0.5%;
margin-left: 0.5%;
}
Try this:
---
title: "Incremental in Div"
output:
xaringan::moon_reader:
encoding: 'UTF-8'
self_contained: false
css: ['default', "style.css"]
---
.pull-left-50[
- Point 1
{{content}}
]
--
- Point 2
{{content}}
--
- Point 3
{{content}}
--
- Point 4
{{content}}
--
- Point 5
--
.pull-right-50[
- Point 6
{{content}}
]
--
- Point 7
{{content}}
--
- Point 8
{{content}}
--
- Point 9
{{content}}
--
- Point 10
Related
I have encountered an issue with the size of banner title as in the following picture.
It is two-line title, which does not fit into the banner.
Is there any way to make the banner size bigger (vertically increased) or to make font size of title smaller.
I would appreciate it if you could show me both ways. Thanks.
My code is
---
title: "Lecture"
subtitle: "subtitle"
author: "Instructor"
institute: "University"
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts, "styles.css"]
lib_dir: libs
seal: false
nature:
highlightStyle: arta
highlightLines: true
countIncrementalSlides: false
titleSlideClass: [top, left]
---
class: title-slide, top, left, inverse
background-image: url(aaa.jpeg)
background-size: cover
# *`r rmarkdown::metadata$title`*
## *`r rmarkdown::metadata$subtitle`*
### `r rmarkdown::metadata$author`
### `r rmarkdown::metadata$institute`
### `r rmarkdown::metadata$date`
### `r Sys.Date()`
```{css, echo=FALSE}
<style>
.remark-slide-content.hljs-default {
border-top: 40px solid #23373B;
}
.remark-slide-content > h1 {
font-size: 35px;
margin-top: -85px;
}
</style>
```
```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```
---
# Why people are constantly switching jobs, causing frictional unemployment?
---
The updated version of problematic page is written in the following way:
---
class: custom
```{css, echo=FALSE}
.remark-slide-content .hljs-default {
border-top: 40px solid #23373B;
}
.remark-slide-content > h1 {
font-size: 35px;
margin-top: -85px;
}
.custom h1 {
font-size: 24px;
}
```
# Causes of unemployment: Why people are constantly switching jobs, causing frictional unemployment?
### .my-style1[Sectoral shifts]
### .my-style1[Structural shifts]
### Seasonal changes
### Taste shocks
---
To define CSS rule for a specific slide (It might be to change the title font size of that specific slide or to do anything), define a class: your-class-name just after creating a new slide with the ---.
So to change the title font size of that single slide, we write class: custom just after --- and then define CSS rule in css chunk for .custom to reduce the font-size.
---
title: "Lecture"
subtitle: "subtitle"
author: "Instructor"
institute: "University"
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts, "styles.css"]
lib_dir: libs
seal: false
nature:
highlightStyle: arta
highlightLines: true
countIncrementalSlides: false
---
class: title-slide, top, left, inverse
background-image: url(lights.jpg)
background-size: cover
# *`r rmarkdown::metadata$title`*
## *`r rmarkdown::metadata$subtitle`*
### `r rmarkdown::metadata$author`
### `r rmarkdown::metadata$institute`
### `r Sys.Date()`
```{css, echo=FALSE}
.remark-slide-content .hljs-default {
border-top: 40px solid #23373B;
}
.remark-slide-content > h1 {
font-size: 35px;
margin-top: -85px;
}
.custom h1 {
font-size: 24px;
}
```
---
class: custom
# Why people are constantly switching jobs, causing frictional unemployment?
---
# Heres another slide title
I'm trying to convert a set of slides written in Rmarkdown and outputted in HTML with xaringan::moon_reader into PDF, and I used pagedown::chrome_print() to convert to PDF.
The issue is, the converted PDF has its title page missing as well as random pages throughout the slides. I tried to manually print the HTML file with Chrome and other browsers in an attempt to save to PDF, but they have the same missing pages.
I'm open to any advice on how to export to PDF without any pages missing. It doesn't have to be chrome_print() as long as the slides can be exported in PDF successfully.
Here's a reproducible pseudocode of the slides:
---
title: document_title
author: author_name
output:
xaringan::moon_reader:
css: [default, metropolis, metropolis-fonts]
lib_dir: libs
nature:
ratio: '4:3'
highlightStyle: github
highlightLines: true
countIncrementalSlides: false
editor_options:
chunk_output_type: console
---
count: false
<style>
.center2 {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
pre.sourceCode {
max-height: 200px;
overflow-y: auto;
}
/*
.remark-slide-number {
position: inherit;
}
.remark-slide-number .progress-bar-container {
position: absolute;
bottom: 0;
height: 4px;
display: block;
left: 0;
right: 0;
}
.remark-slide-number .progress-bar {
height: 100%;
background-color: blue;
}
*/
</style>
# only using two backticks for codechunks in rmd to escape ending the codeblock on stackoverflow
``{css, echo=FALSE}
#media print {
.has-continuation {
display: block !important;
}
}
``
``{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
library(knitr)
opts_chunk$set(
fig.align="center",
fig.height=4,
dpi=300,
cache=T ,
echo=F
)
library(tidyverse)
library(hrbrthemes)
library(fontawesome)
``
count: true
# Slide 1
</br>
.font130[
1. Content 1
2. Content 2
]
---
count: false
# Slide 2
</br>
.font130[
Content for slide 2
]
---
``{r gen_pdf, include = FALSE, cache = FALSE, eval = TRUE}
pagedown::chrome_print("slides.html", output = "slides.pdf")
``
We have count:true and count: false throughout the documents but it doesn't seem to relate to whether the page is missing or not.
Thank you so much in advance!
I've figured out what went wrong with my slides for anyone having the same issue:
So in the end it does have something to do with count: true or count: false
count: true indicates the start of a page, but count: false adds on new information on the same page on html format, but all the intermediate results are covered by whichever section that is your last count: false section.
An example would be :
---
count: true
Content 1
---
count: false
Content 2
---
count: false
Content 3
In this case Content 1 would be the start of a new page and everything will show up fine in .html, but on the pdf it was converted to, only Content 3 will show up, and not Content 1 or 2.
Title page was set to count: true automatically, but if you have a count: false section right after it, it will not show up.
Hopefully this explains it!
Does anyone know how to increase the width of a floating table of content in rmarkdown so that it can show all titles in one line with no break.
Here is an example:
---
title: "Title"
author: "Author "
date: '`r format(Sys.Date(), "%B %d, %Y")`'
output:
html_document:
toc_float: true
toc: true
number_sections: true
code_folding: show
theme: lumen
editor_options:
chunk_output_type: console
---
# A loooooooooooooooooooooooong title
Thanks
What did the trick for me was to change the CSS style of the floating TOC. You can use a CSS code chunk to embed the CSS rules directly in your Rmd document. For example, like this:
title: "XY"
author: "XX"
date: '`r format(Sys.Date(), "%B %d, %Y")`'
output:
html_document:
toc: true
theme: united
toc_depth: 4
toc_float: true
.tocify .tocify-header {
position: fixed;
top: 50px;
left: 50px;
width: 500px;
height: 200px;
}
Or you can include this in a custom stylesheet:
output:
html_document:
css: "style.css"
I'm aware of how to work with the grid in:
https://ionicframework.com/docs/theming/responsive-grid/
But what I don't understand is how to structure it - for landscape vs portrait ?
I'm looking for a way to do this, but col-[xs|sm|md] has no affect ( only on devices it has affect - i.e: phone vs tablet )
Portrait
Landscape
You should edit you .scss and use css media queries to get what you want.
If you want to apply this for whole apps you can edit app.scss or else you can edit your-page.scss file.
#media (orientation: landscape) {
.col {
flex: 0 0 50%;
width: 50%;
max-width: 50%;
}
}
further more, you may read this https://developer.mozilla.org/id/docs/Web/Guide/CSS/Media_queries
Edited
If your columns are dynamic, it can't be done automatically, you need to add class to your ion-col, e.g.
<ion-col class="col-class-1">This text 1</ion-col>
<ion-col class="col-class-2">This text 2</ion-col>
and edit your scss
#media (orientation: landscape) {
.col.col-class-1 {
flex: 0 0 50%;
width: 50%;
max-width: 50%;
}
.col.col-class-2 {
flex: 0 0 100px;
width: 100px;
max-width: 100px;
}
}
Try with:
<div class="row responsive-sm">
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Documentation: https://ionicframework.com/docs/v1/components/#grid-responsive
Found the issue,
Regular grid of Ionic 2 does covert this, but the thing was that iPhone 5 for example has:
Landscape, W: 568px, H: 320px
Portrait , W: 320px, H: 568px
But the Ionic 2 defaults is:
xs 0
sm 576px <= Landscape width (568px) still less than that
So I've edited the file:
variables.scss
$grid-breakpoints: (
xs: 0,
sm: 420px, <= Lowered the value
md: 768px,
lg: 1024px
);
Which made the columns in the grid to work out of the box
<ion-grid>
<ion-row>
<ion-col col-12 col-sm-6 *ngFor="let card of cards">
Card X
</ion-col>
</ion-row>
</ion-grid>
Portrait: will show a single card in a "row" (stacked cards, col-12 )
Landscape: will show two cards in a "row" (12/col-6 = 2 columns in a row)
My CSS on my production deployment different than my local run.
Diff between /static/css/mezzanine.css on local and PROD
/* Navigation */
2 - body {padding-top:45px;}
3 - #media (max-width:979px){
4 - body {padding-top:0;} .brand {padding-right:20px !important;}}
2 + #media (max-width:979px){.brand {padding-right:20px !important;}}
5 3 .navbar {z-index:500;}
6 - .navbar .btn {margin:7px 0;}
7 4 .navbar-inner {border-radius:0;}
8 - .navbar-search * {margin:0 2px !important;}
9 - .navbar-search .search-query {width:120px; border-radius:3px}
5 + .navbar-search {margin-left:10px; margin-top:4px;}
6 + .navbar-search * {border-radius:4px !important; margin:0 2px !important;}
10 7 .navbar-search select {width:auto;}
11 - .navbar-text {float:left; font-size:12px; font-style:italic; margin:0; opacity:.6;}
8 + .navbar-search .btn {margin-top:1px !important; margin-left:4px !important;}
9 + .tagline {float:left; font-size:12px; font-style:italic; margin:9px 5px 0 -4px; color:#fff; opacity:.5;}
12 10 .breadcrumb {margin:20px 0 25px 0;}
13 11 .breadcrumb .divider {margin:0 5px;}
14 12 .breadcrumb strong {color:#333;}
15 13 ul.nav li.dropdown:hover ul.dropdown-menu {display:block;}
16 14 .pull-right .dropdown-menu a {text-align:right;}
17 15 .tree {padding:8px;}
18 16 .tree li {margin:3px 0;}
19 17 footer {background:rgba(220,220,220, 0.1); padding:30px 0; text- align:center; margin-top:40px;}
20 18 footer .container {text-align:left; display:inline-block; width:auto;}
21 19 footer li {float:left; list-style-type:none;}
22 20 footer li li {float:none; clear:both; width:120px; padding:10px 0; margin-right:30px;}
23 21 footer p {margin-top:40px; text-align:center; font-size:12px;}
24 22 footer .separator {opacity:0.3; margin:0 10px;}
25 23 #media (max-width: 979px) {footer .separator {display:block; visibility:hidden; width:1px; height:1px;}}
26 24 .pagination {margin:40px 0;}
27 25 .pagination p {float:left;}
28 - .alert {margin-top:15px;}
Here is my test site.
http://ec2-54-227-129-183.compute-1.amazonaws.com/
It looks like it's cached in your browser, the version being served is your modified one. Try a full refresh or viewing in a private/incognito browser session to quickly check.
To help with upgrades you could create a custom CSS file in your site's app that overrides the Mezzanine defaults. You'll inherit Mezzanine's default styles as they change with newer versions:
(templates/base.html)
{% compress css %}
...
<link rel="stylesheet" href="{{ STATIC_URL }}css/mezzanine.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/mysite.css">
...
{% block extra_css %}{% endblock %}
{% endcompress %}