Refactor CSS to add new styles for Jupyter Notebook images

letsdodigital · Oct 15, 2024 · f1d0ff1 · f1d0ff1
1 parent 8b0b4b5
commit f1d0ff1
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 217 deletions.
diff --git a/conferences/2024/index.qmd b/conferences/2024/index.qmd
@@ -10,6 +10,13 @@ description: "Thursday 24th October"
 ```
 \
 
+## How to attend on the day
+
+*Information about virtual attendance will be updated here on the day. If you do not see information about a link to the YouTube live stream, please refresh your browser (F5 will do it). In person information can be found on the [maps](maps.qmd) page*
+
+
+## What is Let's Talk Digital?
+
 This year's key theme is **open**. That is **open source**, **open standards**, **open learning** and **open data**. But we are not talking socks, sandles and hippee like outfits. We are talking linux, internet and best solutions for an ever growing array of digital technologies used across the NHS and further a field. And we are looking for innovation at the clinical frontline. Please do join us either in person or virtually for a jam packed event on Thursday the 24th of October 2024 at Cheltenham General Hospital. This will be a great event for networking, collaborating and working with like minded people in digital healthcare.
 
 ## Line up
@@ -84,9 +91,9 @@ Click on the coffee cup or napkin to get a ticket. This is a hybrid event, so yo
 </div>
 ```
 
-## Call for abstracts
+## View the abstracts
 
-If you wish to submit an abstract to the conference, please email [[email protected]](mailto:[email protected]) with a 250-300 word abstract of a digital healthcare intervention. Successful abstracts will be show cased on the Let's Do Digital Website and prizes will be awarded for the best posters. Closing date is the 8th of October.
+This year we have asked our abstract authors to provide a short video to accompany their abstract. Think of these as `Vosters` (video posters). You can view these on the [2024 conference playlist](https://www.youtube.com/playlist?list=PLv5yR6DkBB8rM84AOb8H6crZB0sXeIBig).
 
 ## Want to give a presentation?
 

diff --git a/learn/learn-python/module-3/2-jupyter-notebook-and-markdown.ipynb b/learn/learn-python/module-3/2-jupyter-notebook-and-markdown.ipynb
diff --git a/learn/learn-python/module-3/2-jupyter-notebook-and-markdown.qmd b/learn/learn-python/module-3/2-jupyter-notebook-and-markdown.qmd
@@ -62,10 +62,25 @@ title-slide-attributes:
 * PDF, HTML, or slides.
 
 
-# Common Jupyter Notebook Tasks
+## Common Jupyter Notebook Tasks
+
+* Run a cell: Press the `Play` button.
+
+```{=html}
+<div class="image-container-play">
+ <img src="/media/jupyter-play-all-button.png">
+ or 
+ <img src="/media/jupyter-play-button.png">
+</div>
+```
+
+
+## Common Jupyter Notebook Tasks
 
-* Run a cell: Select it and press `Shift + Enter`.
 * Add text: Use Markdown in a new cell and change it to 'Markdown' mode.
+
+![](/media/jupyter-to-markdown.png){.half-width}
+
 * View results instantly: Print or plot results directly in the notebook.
 * Save your work: Notebooks are saved as `.ipynb` files.
 

diff --git a/media/jupyter-play-all-button.png b/media/jupyter-play-all-button.png
diff --git a/media/jupyter-play-button.png b/media/jupyter-play-button.png
diff --git a/media/jupyter-to-markdown.png b/media/jupyter-to-markdown.png
diff --git a/slides.css b/slides.css
@@ -142,4 +142,22 @@
 .bordered-image {
  border: 1px solid black;
  border-radius: 10px;
+}
+
+.image-container-play {
+ display: flex;
+ justify-content: center;
+}
+
+.image-container-play img {
+ height: 100px; 
+ margin: 0 5px;
+ object-fit: cover;
+}
+
+.half-width {
+ width: 50% !important;
+ max-width: 50%;
+ height: auto !important;
+ justify-content: center;
 }
diff --git a/styles.css b/styles.css
@@ -128,4 +128,5 @@
 
 .padded-image {
  padding: 10px;
- }
+ }
+