More CSS

class: title

<div class="scene f2 absolute top-0 left-0 w-10 bg-red bg-blue">8</div>
<h1>More CSS</h1>
<div class="conf-logo"></div>
<div class="talk-meta">
<p class="talk-author">Garrick Aden-Buie & Silvia Canelón</p>
<p class="talk-date">
<a href="https://presentable-user2021.netlify.app" class="underline f-lato" style="color: var(--text-light); text-underline-offset: 7px;">Professional, Polished, Presentable</a>
</p>
</div>

---
layout: true

# Identifying Elements with CSS

.f6.code.center[
&lt;.red.bg-washed-red[div] class=".dark-blue.bg-washed-blue[special]" id=".dark-green.bg-washed-green[slide-facts]"&gt;
]

---

class: 
background-image: url('assets/img/08/css-selectors/css-selectors-1.jpg')
background-size: contain
background-position: top left

---

class: 
background-image: url('assets/img/08/css-selectors/css-selectors-2.jpg')
background-size: contain
background-position: top left

---

class: 
background-image: url('assets/img/08/css-selectors/css-selectors-3.jpg')
background-size: contain
background-position: top left

---

class: 
background-image: url('assets/img/08/css-selectors/css-selectors-4.jpg')
background-size: contain
background-position: top left

---

class: 
background-image: url('assets/img/08/css-selectors/css-selectors-5.jpg')
background-size: contain
background-position: top left

---

class: 
background-image: url('assets/img/08/css-selectors/css-selectors-6.jpg')
background-size: contain
background-position: top left

---

class: 
background-image: url('assets/img/08/css-selectors/css-selectors-7.jpg')
background-size: contain
background-position: top left

---

class: 
background-image: url('assets/img/08/css-selectors/css-selectors-8.jpg')
background-size: contain
background-position: top left

---
layout: true

# Selecting Elements with CSS

.f6.code.w-70.mh-auto.lh-copy.mb4[
&nbsp;&nbsp;&lt;.red.bg-washed-red[div]&nbsp;class=".dark-blue.bg-washed-blue[pull-right]&nbsp;.dark-green.bg-washed-green[fact]"&gt;<br>
<br>
&nbsp;&nbsp;&lt;/div&gt;
]

---

## What are some ways to identify this element?

.flex.code.f6.tc[
.w-third[
.red.bg-washed-red[div]
]
.w-third[
.dark-blue.bg-washed-blue[.pull-right]
]
.w-third[
.dark-green.bg-washed-green[.fact]
]
]

---

## What are some ways to identify this element?

.code.f6.w-max-content.mh-auto[
.red.bg-washed-red[div].dark-blue.bg-washed-blue[.pull-right].dark-green.bg-washed-green[.fact]
]

---

## What are some ways to identify this element?

.code.f6.w-max-content.mh-auto[
.dark-blue.bg-washed-blue[.pull-right].dark-green.bg-washed-green[.fact]
]

---

## What are some ways to identify this element?

.code.f6.w-max-content.mh-auto[
.dark-blue.bg-washed-blue[.pull-right].dark-green.bg-washed-green[.fact][<br>
.silver[... content ...]<br>
]
]

---
layout: true

# Selecting Elements with CSS

.f6.code.w-70.mh-auto.lh-copy[
&nbsp;&nbsp;&lt;.red.bg-washed-red[div]&nbsp;class=".dark-blue.bg-washed-blue[pull-right]&nbsp;.dark-green.bg-washed-green[fact]"&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;.gold.ph1.bg-washed-yellow[p]&gt;(lives&nbsp;in&nbsp;trees)&lt;/p&gt;<br>
&nbsp;&nbsp;&lt;/div&gt;
]

---

## What are some ways to identify the .gold.ph1.bg-washed-yellow[paragraph]?

.code.f6.tc[
.gold.ph1.bg-washed-yellow[p]
]

---

## What are some ways to identify the .gold.ph1.bg-washed-yellow[paragraph]?

.code.f6.tc[
.dark-green.bg-washed-green[.fact] .gold.ph1.bg-washed-yellow[p]
]

---
layout: false
name: interactive
class: fullscreen

<button class="smallest link dim ba pa1 mb1 ml1 dib mid-gray absolute bottom-0 left-0 pointer" id="interactive-reset" title="Reset">Reset</button>

.flex.h-100[
.w-third.pl2.flex.items-center[
<style id="style-can-edit" class="code can-edit" style="display: block; white-space: pre;">.fact {
  
}

.special {
  
}
</style>
]

.w-two-thirds.ph2.h-100[
.panelset.h-100[
.panel[.panel-name[Markdown]

```
---
name: facts
class: special

# Interesting Lemur Facts

Lemurs are .fact[arboreal]

.fact.pull-right[
Note about arboreal
]

Lemurs are .fact[diurnal]
```
]

.panel[.panel-name[HTML]
```html
<div id="slide-facts" class="remark-slide-content special">
  <h1 id="interesting-lemur-facts">
    Interesting Lemur Facts
  </h1>
  <p>
    Lemurs are <span class="fact">arboreal</span>
  </p>
  <div class="fact pull-right">
    <p>(lives in trees)</p>
  </div>
  <p>
    Lemurs are <span class="fact">diurnal</span>
  </p>
  <div class="remark-slide-number">22</div>
</div>
```
]

.panel[.panel-name[Slide]

<div id="slide-facts" class="special w-100 ph2 pt1 pb4 ba bw1 b--light-gray relative">
  <h1 id="interesting-lemur-facts">
    Interesting Lemur Facts
  </h1>
  <p>
    Lemurs are <span class="fact">arboreal</span>
  </p>
  <div class="pull-right fact">
    <p>(lives in trees)</p>
  </div>
  <p>
    Lemurs are <span class="fact">diurnal</span>
  </p>
  <div class="remark-slide-number">22</div>
</div>

]

]

]

]

---
name: facts
class: special

# Interesting Lemur Facts

Lemurs are .fact[arboreal]

.fact.pull-right[
(lives in trees)
]

Lemurs are .fact[diurnal]

---
layout: false
class: break break-blue-pink center middle

# CSS Variables

---
class: middle big

```css
:root {
  --hot-pink: #ff41b4;
}

.fact {
  color: var(--hot-pink);
}
```

.absolute.bottom-0.right-1[<div class="f4 ma0 pa0 hover-show o-40 pointer absolute right-1 bottom-1">
<a href="#interactive">&#x23ED;</a>
</div>]

---
background-image: url(assets/img/08/xaringnthemer-style-duo-accent-arguments.png)
background-size: cover
background-position: top center

---
background-image: url(assets/img/08/xaringnthemer-style-duo-accent-arguments-hl.jpg)
background-size: cover
background-position: top center

---

# xaringanthemer CSS Color Variables

.panelset[
.panel[.panel-name[xaringanthemer]

```r
library(xaringanthemer)
palette <- c(
  orange      = "#fb5607",
  pink        = "#ff006e",
  blue_violet = "#8338ec",
  zomp        = "#38A88E",
  shadow      = "#87826E"
)

style_duo_accent(colors = palette)
```
]

.panel[.panel-name[Variables]

```css
:root {
  --orange: #fb5607;
  --pink: #ff006e;
  --blue_violet: #8338ec;
  --zomp: #38A88E;
  --shadow: #87826E;
}
```
]

.panel[.panel-name[Classes]

<table>
 <thead>
  <tr>
   <th style="text-align:left;"> Foreground </th>
   <th style="text-align:left;"> Background </th>
  </tr>
 </thead>
<tbody>
  <tr>
   <td style="text-align:left;"> <span class='code'>.orange</span> </td>
   <td style="text-align:left;"> <span class='code'>.bg-orange</span> </td>
  </tr>
  <tr>
   <td style="text-align:left;"> <span class='code'>.pink</span> </td>
   <td style="text-align:left;"> <span class='code'>.bg-pink</span> </td>
  </tr>
  <tr>
   <td style="text-align:left;"> <span class='code'>.blue_violet</span> </td>
   <td style="text-align:left;"> <span class='code'>.bg-blue_violet</span> </td>
  </tr>
  <tr>
   <td style="text-align:left;"> <span class='code'>.zomp</span> </td>
   <td style="text-align:left;"> <span class='code'>.bg-zomp</span> </td>
  </tr>
  <tr>
   <td style="text-align:left;"> <span class='code'>.shadow</span> </td>
   <td style="text-align:left;"> <span class='code'>.bg-shadow</span> </td>
  </tr>
</tbody>
</table>

]

.footnote[[.gray.underline[Colors from coolors]](https://coolors.co/fb5607-ff006e-8338ec-38a88e-87826e)]

---
class: center middle header_background

# Activity Time

.f4[
.blue[<svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M206.86 245.15c-35.88 10.45-59.95 41.2-57.53 74.1 11.4-12.72 28.81-23.7 49.9-30.92l7.63-43.18zM95.81 295L64.08 115.49c-.29-1.62.28-2.62.24-2.65 57.76-32.06 123.12-49.01 189.01-49.01 1.61 0 3.23.17 4.85.19 13.95-13.47 31.73-22.83 51.59-26 18.89-3.02 38.05-4.55 57.18-5.32-9.99-13.95-24.48-24.23-41.77-27C301.27 1.89 277.24 0 253.32 0 176.66 0 101.02 19.42 33.2 57.06 9.03 70.48-3.92 98.48 1.05 126.58l31.73 179.51c14.23 80.52 136.33 142.08 204.45 142.08 3.59 0 6.75-.46 10.01-.8-13.52-17.08-28.94-40.48-39.5-67.58-47.61-12.98-106.06-51.62-111.93-84.79zm97.55-137.46c-.73-4.12-2.23-7.87-4.07-11.4-8.25 8.91-20.67 15.75-35.32 18.32-14.65 2.58-28.67.4-39.48-5.17-.52 3.94-.64 7.98.09 12.1 3.84 21.7 24.58 36.19 46.34 32.37 21.75-3.82 36.28-24.52 32.44-46.22zM606.8 120.9c-88.98-49.38-191.43-67.41-291.98-51.35-27.31 4.36-49.08 26.26-54.04 54.36l-31.73 179.51c-15.39 87.05 95.28 196.27 158.31 207.35 63.03 11.09 204.47-53.79 219.86-140.84l31.73-179.51c4.97-28.11-7.98-56.11-32.15-69.52zm-273.24 96.8c3.84-21.7 24.58-36.19 46.34-32.36 21.76 3.83 36.28 24.52 32.45 46.22-.73 4.12-2.23 7.87-4.07 11.4-8.25-8.91-20.67-15.75-35.32-18.32-14.65-2.58-28.67-.4-39.48 5.17-.53-3.95-.65-7.99.08-12.11zm70.47 198.76c-55.68-9.79-93.52-59.27-89.04-112.9 20.6 25.54 56.21 46.17 99.49 53.78 43.28 7.61 83.82.37 111.93-16.6-14.18 51.94-66.71 85.51-122.38 75.72zm130.3-151.34c-8.25-8.91-20.68-15.75-35.33-18.32-14.65-2.58-28.67-.4-39.48 5.17-.52-3.94-.64-7.98.09-12.1 3.84-21.7 24.58-36.19 46.34-32.37 21.75 3.83 36.28 24.52 32.45 46.22-.73 4.13-2.23 7.88-4.07 11.4z"/></svg>]
[materials/act-03/08-more-css](/materials/act-03/08-more-css/#activity)

Practice using CSS variables and selectors.
]