Code Snippets for Slides

Title Page

html

<section data-transition="fade" data-background="#000">
  <h2 class="title">{{ page.title }}</h2>
  <br>&nbsp;<br>
  <p class="title">
  Murat Kahveci (@iMuratKahveci)
  <br>
  Loyola University Chicago
  <br>
  {{ page.date | date: "%-d %b %Y" }}
  <br>
  {{ page.event }}
  <br>
  {{ page.venue }}
  </section>

Content Page

html

<section>
  <h3>Theoretical Framework</h3>
    <p>
      Development of the Original STPD Scale (Southerland et al., 2012)
      <ul>
        <li>Item 1</li>
      </ul>
    </p>
    <img class="stretch" data-src="/images/talks/liv/01.jpg">
    <div class="citation">
      <a href="/dgq">kahveci.pw/dgq</a>
    </div>
</section>

Adding an Image

Image Type:
- Photos: Generally, JPG is a good choice for photographs due to its smaller file size.
- Graphics, logos, and images with text: PNG is preferred for its lossless compression and transparency support.
Aspect Ratio:
- Standard Screens: Most screens these days are widescreen (16:9 aspect ratio). Aim for images that fit this nicely to avoid black bars or distortion.
- Presentation Environment: If you know the exact screen size where your presentation will be displayed, you can tailor your image dimensions to perfectly match.
Resolution:
- High Resolution is Key: Use images with a resolution of at least 1920x1080 pixels. This ensures your visuals look sharp on large screens.
- Avoid Upscaling: Don’t enlarge small images, as they’ll become pixelated and blurry.
- Commandline Tools: Use the following scaling for consistency.

bash

     
     sips -Z 1920 *.jpg

bash

     
     sips -Z 1920 *.png

Stretched Image

html

<section>
	<h3>Theoretical Framework: Development of the Original STPD Scale</h3>
	<img class="stretch" data-src="/images/talks/liv/01.jpg">
	<div class="citation">
		<a href="/dgq">kahveci.pw/dgq</a>
	</div>
</section>

Regular Image

html

<section>
	<h3>Theoretical Framework: Development of the Original STPD Scale</h3>
	<img data-src="/images/talks/liv/01.jpg">
	<div class="citation">
		<a href="/dgq">kahveci.pw/dgq</a>
	</div>
</section>

Citations

html

	<div class="citation">
		<a href="/dgq">kahveci.pw/dgq</a>
	</div>

Math Equations

html

<section>
  <h3>Math Expressions</h3>
  <p>Yes, Reveal.js can beautifully render LaTeX equations!</p>
  <p>$E = mc^2 $</p>
</section>

Page with table

html

<section>
  <h3>Strain fitness estimated from viral attributes</h3>
  <p>The fitness $f$ of strain $i$ is estimated as</p>
  <p>$$f_i = \beta^\mathrm{A} \, f_i^\mathrm{A} + \beta^\mathrm{B} \, f_i^\mathrm{B} + \ldots$$</p>
  <p>where $f^A$, $f^B$, etc... are different standardized viral attributes and
    $\beta^A$, $\beta^B$, etc... coefficients are trained based on historical evolution</p>
  <br>
  <table>
    <thead>
      <tr>
        <th width="28%">Antigenic drift</th>
        <th width="38%">Intrinsic fitness</th>
        <th width="33%">Recent growth</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>epitope mutations</td>
        <td>non-epitope mutations</td>
        <td>local branching index</td>
      </tr>
      <tr>
        <td>HI titers</td>
        <td>DMS data (via Bloom lab)</td>
        <td>delta frequency</td>
      </tr>
    </tbody>
  </table>
</section>

Acknowledgements

html

<section>
	<h3>Acknowledgements</h3>
	<p class="even-smaller">
		<b>Research team</b>
	</p>
	<p class="tiny"><b>Kahveci Nexus</b>:
		<span class="nobreak"><img width=35 class="img-avatar" src="/images/team/murat-kahveci.jpg"> Murat Kahveci,</span> &hairsp;
		<span class="nobreak"><img width=35 class="img-avatar" src="/images/team/ajda-kahveci.png"> Ajda Kahveci,</span> &hairsp;
		<span class="nobreak"><img width=35 class="img-avatar" src="/images/team/nasser-mansour.jpg"> Nasser Mansour,</span> &hairsp;
		<span class="nobreak"><img width=35 class="img-avatar" src="/images/team/maher-alarfaj.jpg"> Maher Mohammed Alarfaj
	</p>

	<div class="pull-right" style="vertical-align: bottom; display: table-cell;">
		<img height="75px" data-src="/images/logo-pub/narst.png">&nbsp; &nbsp;
		<img height="75px" data-src="/images/logo.png">
	</div>
</section>

Color Ramp

To maintain a consistent and eye-catching color scheme throughout your slides, consider using a color ramp based on your website’s primary color, #7F00FF, and gray, #555. Here’s an example of how you might incorporate these colors into your slides:

1. Background Color:

Use a lighter shade of your primary color or gray for the background. This could be achieved by adding white to the hex code, such as #E6D1FF (light purple) or #CCCCCC (light gray).

2. Heading Colors:

Use your primary color (#7F00FF) for main headings (h2).
Use a slightly darker shade of purple or your gray color (#555) for subheadings (h3).

3. Text Color:

Use your gray color (#555) for the main body text. This provides good contrast against a lighter background.

4. Highlight Color:

Use your primary color (#7F00FF) to highlight key words or phrases. This helps draw attention to important information.

5. Link Color:

Use your primary color (#7F00FF) for links. This helps them stand out from the main text.

6. Table Colors:

Use alternating light shades of your primary color and gray for table rows to improve readability. For example, use #E6D1FF for odd rows and #CCCCCC for even rows.