Adjustable Pull

Adjust the widths of .pull-left and .pull-right

Content classes such as .pull-left and .pull-right are very useful to organize material in your slides. They come with a default width that you would change, but it isn’t really worth it to do it globally in your slides.

With the use of changed content classes, you can specify the width of .pull-left and .pull-right on a case-by-case basis. The "widths.css" file contains content classes for different widths using the names w* where * is a percentage. Typing .pull-left.w40 would create a column on the left with a width of 40%. The order doesn’t matter so `.w40.pull-left would work as well.

Note that "widths.css" must be placed after "default" in xaringan::moon_reader: css.

Result

Rmd

---
output:
  xaringan::moon_reader:
    css: ["default", "widths.css"]
    lib_dir: libs
    seal: FALSE
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

# Sample Header

.pull-left.w30[
Duis vel viverra elit, eget hendrerit odio. Curabitur 
cursus elit nec diam vulputate, nec sollicitudin nunc 
ornare. Ut mi lectus, aliquet non ligula sed, 
lobortis vehicula erat. Morbi porttitor orci ut 
semper dapibus. Donec sodales tellus varius tortor 
varius, ornare commodo augue maximus. Vestibulum quis
bibendum mi, sit amet lobortis leo. Morbi vulputate 
orci arcu, ac lobortis sapien gravida eget. Nulla non
interdum orci, nec congue ligula.
]

.w65.pull-right[
Duis vel viverra elit, eget hendrerit odio. Curabitur 
cursus elit nec diam vulputate, nec sollicitudin nunc 
ornare. Ut mi lectus, aliquet non ligula sed, 
lobortis vehicula erat. Morbi porttitor orci ut 
semper dapibus. Donec sodales tellus varius tortor 
varius, ornare commodo augue maximus. Vestibulum quis
bibendum mi, sit amet lobortis leo. Morbi vulputate 
orci arcu, ac lobortis sapien gravida eget. Nulla non
interdum orci, nec congue ligula.
]

width.css

.w00 {width: 00%;}
.w01 {width: 01%;}
.w02 {width: 02%;}
.w03 {width: 03%;}
.w04 {width: 04%;}
.w05 {width: 05%;}
.w06 {width: 06%;}
.w07 {width: 07%;}
.w08 {width: 08%;}
.w09 {width: 09%;}
.w10 {width: 10%;}
.w11 {width: 11%;}
.w12 {width: 12%;}
.w13 {width: 13%;}
.w14 {width: 14%;}
.w15 {width: 15%;}
.w16 {width: 16%;}
.w17 {width: 17%;}
.w18 {width: 18%;}
.w19 {width: 19%;}
.w20 {width: 20%;}
.w21 {width: 21%;}
.w22 {width: 22%;}
.w23 {width: 23%;}
.w24 {width: 24%;}
.w25 {width: 25%;}
.w26 {width: 26%;}
.w27 {width: 27%;}
.w28 {width: 28%;}
.w29 {width: 29%;}
.w30 {width: 30%;}
.w31 {width: 31%;}
.w32 {width: 32%;}
.w33 {width: 33%;}
.w34 {width: 34%;}
.w35 {width: 35%;}
.w36 {width: 36%;}
.w37 {width: 37%;}
.w38 {width: 38%;}
.w39 {width: 39%;}
.w40 {width: 40%;}
.w41 {width: 41%;}
.w42 {width: 42%;}
.w43 {width: 43%;}
.w44 {width: 44%;}
.w45 {width: 45%;}
.w46 {width: 46%;}
.w47 {width: 47%;}
.w48 {width: 48%;}
.w49 {width: 49%;}
.w50 {width: 50%;}
.w51 {width: 51%;}
.w52 {width: 52%;}
.w53 {width: 53%;}
.w54 {width: 54%;}
.w55 {width: 55%;}
.w56 {width: 56%;}
.w57 {width: 57%;}
.w58 {width: 58%;}
.w59 {width: 59%;}
.w60 {width: 60%;}
.w61 {width: 61%;}
.w62 {width: 62%;}
.w63 {width: 63%;}
.w64 {width: 64%;}
.w65 {width: 65%;}
.w66 {width: 66%;}
.w67 {width: 67%;}
.w68 {width: 68%;}
.w69 {width: 69%;}
.w70 {width: 70%;}
.w71 {width: 71%;}
.w72 {width: 72%;}
.w73 {width: 73%;}
.w74 {width: 74%;}
.w75 {width: 75%;}
.w76 {width: 76%;}
.w77 {width: 77%;}
.w78 {width: 78%;}
.w79 {width: 79%;}
.w80 {width: 80%;}
.w81 {width: 81%;}
.w82 {width: 82%;}
.w83 {width: 83%;}
.w84 {width: 84%;}
.w85 {width: 85%;}
.w86 {width: 86%;}
.w87 {width: 87%;}
.w88 {width: 88%;}
.w89 {width: 89%;}
.w90 {width: 90%;}
.w91 {width: 91%;}
.w92 {width: 92%;}
.w93 {width: 93%;}
.w94 {width: 94%;}
.w95 {width: 95%;}
.w96 {width: 96%;}
.w97 {width: 97%;}
.w98 {width: 98%;}
.w99 {width: 99%;}