turning readme guidelines into slide deck for teaching. most of the w…

…ay through

course-materials/week5-github-portfolios.qmd

@@ -135,13 +135,20 @@ We'll discuss and practice writing effective GitHub READMEs together today, but
 
 ::: {.grid}
 
-::: {.g-col-12 .g-col-md-6}
+::: {.g-col-12 .g-col-md-4}
 ::: {.center-text}
 [{{< fa file-lines title="A file with lines of text on it" >}} README Guidelines](https://ucsb-meds.github.io/README-guidelines/){.btn role="button" target="_blank"} 
 :::
 :::
 
-::: {.g-col-12 .g-col-md-6}
+::: {.g-col-12 .g-col-md-4}
+::: {.center-text}
+[{{< fa tv title="a TV monitor" >}} README  (slides)](materials/readme-guidelines-slides.qmd){.btn role="button" target="_blank"} 
+:::
+:::
+
+
+::: {.g-col-12 .g-col-md-4}
 ::: {.center-text}
 [{{< fa file-lines title="A file with lines of text on it" >}} Update your GH profile](materials/GH-profile.qmd){.btn role="button" target="_blank"} 
 :::

course-materials/week6-misc-github.qmd

@@ -30,7 +30,7 @@ things to cover:
 
 ## {{< fa box-open title="an open box" >}} Anticipated deliverable(s) {#anticipated-deliverables}
 
-*Coming soon*
+- a configured GitHub Actions (GHA) workflow that rebuilds / redeploys your personal website when changes are pushed to GitHub
 
 ## {{< fa clipboard-list title="a clipboard with a To Do list" >}} Pre-class Prep {#pre-class-prep}
 

docs/course-materials/week5-github-portfolios.html

@@ -355,12 +355,17 @@ <h3 class="anchored" data-anchor-id="d.-have-a-profile-picture-handy">D. Have a
 <h2 class="anchored" data-anchor-id="lecture-materials"><i class="fa-solid fa-person-chalkboard" title="a person pointing at a chalkboard" aria-label="person-chalkboard"></i> Lecture Materials</h2>
 <p>We’ll discuss and practice writing effective GitHub READMEs together today, but you’ll also be asked to refer back to these materials throughout your time in MEDS. Find README guidelines, as well as guidance and instructions for customizing your GitHub profile:</p>
 <div class="grid">
-<div class="g-col-12 g-col-md-6">
+<div class="g-col-12 g-col-md-4">
 <div class="center-text">
 <p><a href="https://ucsb-meds.github.io/README-guidelines/" class="btn" role="button" target="_blank"><i class="fa-solid fa-file-lines" title="A file with lines of text on it" aria-label="file-lines"></i> README Guidelines</a></p>
 </div>
 </div>
-<div class="g-col-12 g-col-md-6">
+<div class="g-col-12 g-col-md-4">
+<div class="center-text">
+<p><a href="../course-materials/materials/readme-guidelines-slides.html" class="btn" role="button" target="_blank"><i class="fa-solid fa-tv" title="a TV monitor" aria-label="tv"></i> README (slides)</a></p>
+</div>
+</div>
+<div class="g-col-12 g-col-md-4">
 <div class="center-text">
 <p><a href="../course-materials/materials/GH-profile.html" class="btn" role="button" target="_blank"><i class="fa-solid fa-file-lines" title="A file with lines of text on it" aria-label="file-lines"></i> Update your GH profile</a></p>
 </div>

docs/course-materials/week6-misc-github.html

@@ -244,7 +244,9 @@ <h2 id="toc-title">On this page</h2>
 </ul>
 <section id="anticipated-deliverables" class="level2">
 <h2 class="anchored" data-anchor-id="anticipated-deliverables"><i class="fa-solid fa-box-open" title="an open box" aria-label="box-open"></i> Anticipated deliverable(s)</h2>
-<p><em>Coming soon</em></p>
+<ul>
+<li>a configured GitHub Actions (GHA) workflow that rebuilds / redeploys your personal website when changes are pushed to GitHub</li>
+</ul>
 </section>
 <section id="pre-class-prep" class="level2">
 <h2 class="anchored" data-anchor-id="pre-class-prep"><i class="fa-solid fa-clipboard-list" title="a clipboard with a To Do list" aria-label="clipboard-list"></i> Pre-class Prep</h2>

docs/site_libs/countdown-0.4.0/countdown.css

@@ -0,0 +1,144 @@
+.countdown {
+  background: inherit;
+  position: absolute;
+  cursor: pointer;
+  font-size: 2em;
+  line-height: 1;
+  border-color: #FFFFFF;
+  border-width: 3px;
+  border-style: solid;
+  border-radius: 15px;
+  box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.4);
+  -webkit-box-shadow: 0px 4px 10px 0px rgba(50, 50, 50, 0.4);
+  margin: 0.6em;
+  padding: 10px 15px;
+  text-align: center;
+  z-index: 10;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+}
+.countdown {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.countdown .countdown-time {
+  background: none;
+  font-size: 100%;
+  padding: 0;
+}
+.countdown-digits {
+  color: #7aa81e;
+}
+.countdown.running {
+  border-color: #6B9606FF;
+  background-color: #7aa81e;
+}
+.countdown.running .countdown-digits {
+  color: #FFFFFF;
+}
+.countdown.finished {
+  border-color: #E98C64FF;
+  background-color: #ffa07a;
+}
+.countdown.finished .countdown-digits {
+  color: #FFFFFF;
+}
+.countdown.running.warning {
+  border-color: #CEAC04FF;
+  background-color: #E6C229;
+}
+.countdown.running.warning .countdown-digits {
+  color: #3A2F02FF;
+}
+
+.countdown.running.blink-colon .countdown-digits.colon {
+  opacity: 0.1;
+}
+
+/* ------ Controls ------ */
+.countdown:not(.running) .countdown-controls {
+  display: none;
+}
+
+.countdown-controls {
+  position: absolute;
+  top: -0.5rem;
+  right: -0.5rem;
+  left: -0.5rem;
+  display: flex;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+}
+
+.countdown-controls > button {
+  font-size: 1.5rem;
+  width: 1rem;
+  height: 1rem;
+  display: inline-block;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-family: monospace;
+  padding: 10px;
+  margin: 0;
+  background: inherit;
+  border: 2px solid;
+  border-radius: 100%;
+  transition: 50ms transform ease-in-out, 150ms opacity ease-in;
+  --countdown-transition-distance: 10px;
+}
+
+.countdown .countdown-controls > button:last-child {
+  transform: translate(calc(-1 * var(--countdown-transition-distance)), var(--countdown-transition-distance));
+  opacity: 0;
+  color: #FFFFFF;
+  background-color: #7aa81e;
+  border-color: #6B9606FF;
+}
+
+.countdown .countdown-controls > button:first-child {
+  transform: translate(var(--countdown-transition-distance), var(--countdown-transition-distance));
+  opacity: 0;
+  color: #FFFFFF;
+  background-color: #ffa07a;
+  border-color: #E98C64FF;
+}
+
+.countdown.running:hover .countdown-controls > button,
+.countdown.running:focus-within .countdown-controls > button{
+  transform: translate(0, 0);
+  opacity: 1;
+}
+
+.countdown.running:hover .countdown-controls > button:hover,
+.countdown.running:focus-within .countdown-controls > button:hover{
+  transform: translate(0, calc(var(--countdown-transition-distance) / -2));
+  box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.4);
+  -webkit-box-shadow: 0px 2px 5px 0px rgba(50, 50, 50, 0.4);
+}
+
+.countdown.running:hover .countdown-controls > button:active,
+.countdown.running:focus-within .countdown-controls > button:active{
+  transform: translate(0, calc(var(--coutndown-transition-distance) / -5));
+}
+
+/* ----- Fullscreen ----- */
+.countdown.countdown-fullscreen {
+  z-index: 0;
+}
+
+.countdown-fullscreen.running .countdown-controls {
+  top: 1rem;
+  left: 0;
+  right: 0;
+  justify-content: center;
+}
+
+.countdown-fullscreen.running .countdown-controls > button + button {
+  margin-left: 1rem;
+}