Skip to content
Permalink
Browse files
More Theme Tweaks and Slides Template Done (#9)
  • Loading branch information
@aa9863
aa9863 committed Aug 3, 2023
1 parent a848830 commit 371bdff72dd033a39752ea3178025169d691dd5f
Show file tree
Hide file tree
Showing 5 changed files with 373 additions and 3 deletions.
2 docs/assets/stylesheets/custom.css
View file
@@ -27,8 +27,6 @@
background-color: #f44336;
} /* Red */



:root {
--md-admonition-icon--task: url('../images/HoodieHacker.svg')
}
3 docs/assets/stylesheets/local_fonts.css
View file
@@ -45,7 +45,8 @@ https://google-webfonts-helper.herokuapp.com../fonts/source-code-pro?subsets=lat


[data-md-color-scheme="stan"] {
--md-text-font: "Comic Neue", -apple-system, Helvetica, Arial, sans-serif;
--md-text-font: "Comic Neue", -apple-system, Helvetica, Arial, sans-serif;
--md-default-bg-color: #fdf6e3;
}

[data-md-color-scheme="stan-dark"] {
357 docs/example.html
View file
@@ -0,0 +1,357 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="generator" content="pandoc">
<meta name="author" content="Dan Goldsmith">
<title>New Reveal Testing / Demo</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="https://github.coventry.ac.uk/pages/aa9863/RevealTemplate/reveal.js/dist/reset.css">
<link rel="stylesheet" href="https://github.coventry.ac.uk/pages/aa9863/RevealTemplate/reveal.js/dist/reveal.css">

<!-- DG for Source code Highlighting -->
<link rel="stylesheet" href="https://github.coventry.ac.uk/pages/aa9863/RevealTemplate/reveal.js/plugin/highlight/monokai.css">
<style>
.reveal .sourceCode { /* see #7635 */
overflow: visible;
}
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1.6em;
vertical-align: middle;
}
.display.math{display: block; text-align: center; margin: 0.5rem auto;}
</style>
<link rel="stylesheet" href="https://github.coventry.ac.uk/pages/aa9863/RevealTemplate/reveal.js/dist/theme/solarized.css" id="theme">
</head>
<body>
<div class="reveal">
<div class="slides">

<section id="title-slide">
<h1 class="title">New Reveal Testing / Demo</h1>
<p class="author">Dan Goldsmith</p>
</section>

<section>
<section id="automatic-animation" class="title-slide slide level1">
<h1>Automatic Animation</h1>

</section>
<section id="slide-1" class="slide level2 " data-auto-animate>
<h2 class="" data-auto-animate>Slide 1</h2>
<div data-id="box" style="height: 50px; background: salmon;">

</div>
</section>
<section id="slide-2" class="slide level2 " data-auto-animate>
<h2 class="" data-auto-animate>Slide 2</h2>
<div data-id="box" style="height: 200px; background: blue;">

</div>
</section></section>
<section>
<section id="what-about-code" class="title-slide slide level1">
<h1>What about Code?</h1>

</section>
<section id="this-is-proper-cool"
class="slide level2 " data-auto-animate>
<h2 class="" data-auto-animate>This Is Proper Cool</h2>
<ul>
<li>There is also Auto Animation for code</li>
</ul>
</section>
<section id="this-is-proper-cool-1"
class="slide level2 " data-auto-animate>
<h2 class="" data-auto-animate>This is Proper Cool</h2>
<ul>
<li>There is also Auto Animation for code</li>
<li>We can now expand our code out with animations</li>
<li>And Step through lines</li>
</ul>
</section>
<section id="this-is-proper-cool-2"
class="slide level2 " data-auto-animate>
<h2 class="" data-auto-animate>This is Proper Cool</h2>
<ul>
<li>There is also Auto Animation for code
<ul>
<li>BUT!! We need to use plain reveal syntax</li>
</ul></li>
<li>We can now expand our code out with animations</li>
<li>And Step through lines</li>
</ul>
</section>
<section id="code-example-1" class="slide level2 " data-auto-animate>
<h2 class="" data-auto-animate>Code Example 1</h2>
<pre data-id="code-animation"><code data-trim data-line-numbers>
let planets = [
{ name: 'mars', diameter: 6779 },
]
</code></pre>
</section>
<section id="code-example-2" class="slide level2 " data-auto-animate>
<h2 class="" data-auto-animate>Code Example 2</h2>
<pre data-id="code-animation"><code data-trim data-line-numbers>
let planets = [
{ name: 'mars', diameter: 6779 },
{ name: 'earth', diameter: 12742 },
{ name: 'jupiter', diameter: 139820 }
]
</code></pre>
</section>
<section id="stepping-through-lines" class="slide level2">
<h2>Stepping through Lines</h2>
<pre><code data-line-numbers="3-5|8-10|13-15">
<table>
<tr>
<td>Apples</td>
<td>$1</td>
<td>7</td>
</tr>
<tr>
<td>Oranges</td>
<td>$2</td>
<td>18</td>
</tr>
<tr>
<td>Kiwi</td>
<td>$3</td>
<td>1</td>
</tr>
</table>
</code></pre>
</section></section>
<section>
<section id="traditional-markdown-code"
class="title-slide slide level1">
<h1>Traditional Markdown code</h1>

</section>
<section id="markdown-still-works" class="slide level2">
<h2>Markdown Still works</h2>
<p>Does this work</p>
<pre class=".python"><code>
def foo(bar):
baz
</code></pre>
</section></section>
<section>
<section id="explaining-sql-injection" class="title-slide slide level1">
<h1>Explaining SQL Injection</h1>

</section>
<section id="sql-injection" class="slide level2">
<h2>SQL Injection</h2>
<ul>
<li>The user <em>injects</em> new SQL into the query</li>
<li>Can trick the SQL engine into executing the statement</li>
</ul>
</section>
<section id="our-example-query" class="slide level2 " data-auto-animate>
<h2 class="" data-auto-animate>Our Example Query</h2>
<pre data-id="code-animation-php"><code data-trim data-line-numbers>
SELECT * FROM users WHERE name = "dan";
</code></pre>
</section>
<section id="what-about-in-php" class="slide level2 " data-auto-animate>
<h2 class="" data-auto-animate>What about in PHP</h2>
<pre data-id="code-animation-php"><code data-trim data-line-numbers>
$qry = 'SELECT * FROM users WHERE name = "$input";'
</code></pre>
</section>
<section id="what-about-in-php-1"
class="slide level2 " data-auto-animate>
<h2 class="" data-auto-animate>What about in PHP</h2>
<pre data-id="code-animation-php"><code data-trim data-line-numbers>
$input = 'dan';
$qry = 'SELECT * FROM users WHERE name = "$input";'
</code></pre>
</section></section>
</div>
</div>

<script src="https://github.coventry.ac.uk/pages/aa9863/RevealTemplate/reveal.js/dist/reveal.js"></script>

<!-- reveal.js plugins -->
<script src="https://github.coventry.ac.uk/pages/aa9863/RevealTemplate/reveal.js/plugin/notes/notes.js"></script>
<script src="https://github.coventry.ac.uk/pages/aa9863/RevealTemplate/reveal.js/plugin/search/search.js"></script>
<script src="https://github.coventry.ac.uk/pages/aa9863/RevealTemplate/reveal.js/plugin/zoom/zoom.js"></script>

<!-- Dans Plugins -->
<script src="https://github.coventry.ac.uk/pages/aa9863/RevealTemplate/reveal.js/plugin/highlight/highlight.js"></script>
<script src="https://github.coventry.ac.uk/pages/aa9863/RevealTemplate/reveal.js/plugin/menu/menu.js"></script>


<script>

// Full list of configuration options available at:
// https://revealjs.com/config/
Reveal.initialize({
// Display controls in the bottom right corner
controls: true,

// Help the user learn the controls by providing hints, for example by
// bouncing the down arrow when they first encounter a vertical slide
controlsTutorial: true,

// Determines where controls appear, "edges" or "bottom-right"
controlsLayout: 'bottom-right',

// Visibility rule for backwards navigation arrows; "faded", "hidden"
// or "visible"
controlsBackArrows: 'faded',

// Display a presentation progress bar
progress: true,

// Display the page number of the current slide
slideNumber: false,

// 'all', 'print', or 'speaker'
showSlideNumber: 'all',

// Add the current slide number to the URL hash so that reloading the
// page/copying the URL will return you to the same slide
hash: true,

// Start with 1 for the hash rather than 0
hashOneBasedIndex: false,

// Flags if we should monitor the hash and change slides accordingly
respondToHashChanges: true,

// Push each slide change to the browser history
history: false,

// Enable keyboard shortcuts for navigation
keyboard: true,

// Enable the slide overview mode
overview: true,

// Disables the default reveal.js slide layout (scaling and centering)
// so that you can use custom CSS layout
disableLayout: false,

// Vertical centering of slides
center: true,

// Enables touch navigation on devices with touch input
touch: true,

// Loop the presentation
loop: false,

// Change the presentation direction to be RTL
rtl: false,

// see https://revealjs.com/vertical-slides/#navigation-mode
navigationMode: 'default',

// Randomizes the order of slides each time the presentation loads
shuffle: false,

// Turns fragments on and off globally
fragments: true,

// Flags whether to include the current fragment in the URL,
// so that reloading brings you to the same fragment position
fragmentInURL: true,

// Flags if the presentation is running in an embedded mode,
// i.e. contained within a limited portion of the screen
embedded: false,

// Flags if we should show a help overlay when the questionmark
// key is pressed
help: true,

// Flags if it should be possible to pause the presentation (blackout)
pause: true,

// Flags if speaker notes should be visible to all viewers
showNotes: false,

// Global override for autoplaying embedded media (null/true/false)
autoPlayMedia: null,

// Global override for preloading lazy-loaded iframes (null/true/false)
preloadIframes: null,

// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
autoSlide: 0,

// Stop auto-sliding after user input
autoSlideStoppable: true,

// Use this method for navigation when auto-sliding
autoSlideMethod: null,

// Specify the average time in seconds that you think you will spend
// presenting each slide. This is used to show a pacing timer in the
// speaker view
defaultTiming: null,

// Enable slide navigation via mouse wheel
mouseWheel: false,

// The display mode that will be used to show slides
display: 'block',

// Hide cursor if inactive
hideInactiveCursor: true,

// Time before the cursor is hidden (in ms)
hideCursorTime: 5000,

// Opens links in an iframe preview overlay
previewLinks: false,

// Transition style (none/fade/slide/convex/concave/zoom)
transition: 'slide',

// Transition speed (default/fast/slow)
transitionSpeed: 'default',

// Transition style for full page slide backgrounds
// (none/fade/slide/convex/concave/zoom)
backgroundTransition: 'fade',

// Number of slides away from the current that are visible
viewDistance: 3,

// Number of slides away from the current that are visible on mobile
// devices. It is advisable to set this to a lower number than
// viewDistance in order to save resources.
mobileViewDistance: 2,

// reveal.js plugins
plugins: [
RevealNotes,
RevealSearch,
RevealZoom,
RevealMenu,
RevealHighlight
],
menu: {
numbers: true,
themes: true,
themesPath: 'https://github.coventry.ac.uk/pages/aa9863/RevealTemplate/reveal.js/dist/theme'
}

});
</script>
</body>
</html>
13 docs/includes.md
View file
@@ -0,0 +1,13 @@
---
template: slides.html
---


# Testings Including Slides

Header Text and some body

<iframe src="../example.html" width="90%" height="400"></iframe>


# Another Section
1 mkdocs.yml
View file
@@ -97,6 +97,7 @@ extra_css:

nav:
- Home: index.md
- Slides: includes.md
- Essentials:
- Module Guide: essentials/moduleguide.md

0 comments on commit 371bdff

Please sign in to comment.