Merge pull request idaholab#18586 from crswong888/integrate-slides-18519

Integrate slide sets with main website

framework/doc/content/css/moose.css

@@ -69,6 +69,11 @@ main {
     vertical-align:bottom;
 }
 
+.moose-tight-inline-icon {
+    font-size:inherit;
+    line-height:inherit;
+}
+
 .tabs .tab a:hover, .tabs .tab a.active {
 	background-color: transparent;
   color: var(--inl-blue);
@@ -191,6 +196,10 @@ html, body {
   height: 100%;
 }
 
+.moose-video-div video.moose-video {
+  display: block;
+}
+
 img.moose-image{
     padding:5px;
 }
@@ -813,19 +822,20 @@ li p {
 
 
 /*https://coderwall.com/p/ovxeha/fit-to-container-video-image-in-css-aspect-ratio-friendly*/
-.moose-card div.card-image{
+.moose-card div.card-image,
+.moose-card div.card-image div.moose-video-div{
     height:420px;
     text-align:center;
 }
-.moose-card div.card-image:before{
+.moose-card div.card-image div.moose-video-div:before{
     content:"";
     width:1px;
     height:100%;
     display:inline-block;
     vertical-align:middle;
     margin-left:-1px;
 }
-.moose-card div.card-image video,
+.moose-card div.card-image div.moose-video-div video.moose-video,
 .moose-card div.card-image div.material-placeholder{
     max-width:100%;
     max-height:100%;
@@ -940,60 +950,6 @@ span.badge.new.pass{
   list-style-type: none;
 }
 
-.reveal .slides{
-  position: relative;
-  text-align: left;
-}
-
-.reveal .slides not(.overview){
-  overflow: scroll;
-}
-
-.reveal h1 {
-    font-size:3rem;
-    font-weight:600;
-}
-
-.reveal h2 {
-    font-size:2.5rem;
-    font-weight:300;
-}
-
-.reveal h3 {
-    font-size:2.0rem;
-    font-weight:300;
-}
-
-.reveal h4 {
-    font-size:1.5rem;
-    font-weight:300;
-}
-
-.reveal p, .reveal a, .reveal li{
-    font-size:1.5rem;
-}
-
-.reveal pre{
-  font-size: 1.0rem;
-  line-height: normal;
-  width: 100%;
-}
-
-.reveal ul:not(.browser-default) li{
-  list-style-type: disc;
-}
-
-.reveal section img{
-  border: none;
-  box-shadow: none;
-}
-
-.reveal .moose-copy-button{
-    bottom: 0;
-    left: 0;
-}
-
-
 /* COLLAPSIBLE SECTIONS */
 summary {
   display: block;

framework/doc/content/css/reveal_moose.css

@@ -1,3 +1,7 @@
+:root{
+    --object-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+}
+
 /* fallback */
 @font-face {
   font-family: 'Material Icons';
@@ -6,8 +10,11 @@
   src: url('../contrib/fonts/material-icons/material-icons.woff2') format('woff2');
 }
 
-
-.material-icons {
+/*
+  Do we even do anything with material icons in MooseDocs slidesets? The '!icon' command only
+  works for Materialize renderers. [crswong888]
+*/
+.material-icons{
   font-family: 'Material Icons';
   font-weight: normal;
   font-style: normal;
@@ -56,13 +63,23 @@
 .reveal{
     font-family: 'Roboto', sans-serif;
     font-weight:300;
-    font-size:18pt;
+    font-size:16pt;
+}
+
+.reveal .slides{
+    text-align:left;
 }
 
 .reveal .katex{
     font-family: KaTeX_Main;
 }
 
+.reveal .moose-katex-block-equation{
+  display: flex;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+
 .reveal strong{
     font-weight: 500;
 }
@@ -111,34 +128,51 @@
     margin-top:0;
 }
 
-
-.reveal section img{
+.reveal section img,
+.reveal section iframe{
+    background: none;
     border: none;
-    box-shadow: none;
+    box-shadow: var(--object-shadow);
 }
 
-.reveal .moose-katex-equation,
-{
-    padding-top:10px;
-    padding-bottom:10px;
+/*
+  Copying the width/height constraints from the simple reveal theme for the video containter.
+  Padding is added so that the video controls render properly in the presence of a box-shadow.
+*/
+.reveal section .moose-video-div{
+    padding: 1%;
+    max-width: 95%;
+    max-height: 95%;
 }
 
-.reveal .slides{
-    text-align: left;
+/* Unsetting max-width/height here since the div container already enforces it. */
+.reveal section .moose-video-div video.moose-video{
+    display: block;
+    max-width: unset;
+    max-height: unset;
+    box-shadow: var(--object-shadow);
 }
 
 .reveal pre code{
     max-height:500px;
 }
 
 .reveal .moose-bibliography{
-    overflow:scroll;
-    height:40vh;
+    overflow-y:scroll;
+    height:45vh;
+    background-color: rgba(0, 88, 151, 0.1);
+    box-shadow: var(--object-shadow);
 }
 
 .reveal .moose-bibliography li{
     font-size:medium;
     font-weight:100;
+    margin-right: 2em;
+}
+
+.reveal .moose-table-div table{
+    background-color: white;
+    box-shadow: var(--object-shadow);
 }
 
 .reveal .moose-syntax-list-item-syntax{

modules/doc/content/getting_started.menu.md

@@ -23,7 +23,7 @@
 - [getting_started/examples_and_tutorials/tutorial01_app_development/index.md]
 - [getting_started/examples_and_tutorials/tutorial02_multiapps/index.md]
 - [getting_started/examples_and_tutorials/tutorial03_verification/index.md]
-- [Workshop Slides](https://www.mooseframework.org/workshop)
+- [Workshop Slides](workshop/index.md alternative=missing_config.md)
 - [Workshop Video](https://www.youtube.com/watch?v=2tJwBsYaLaI)
 !col-end!
 

modules/doc/content/getting_started/examples_and_tutorials/index.md

@@ -1,4 +1,4 @@
-!config navigation collapsible-sections=[None, None, None, None, None, 'close']
+!config navigation collapsible-sections=[None, None, None, None, 'close', None]
 
 # Examples and Tutorials
 
@@ -41,27 +41,27 @@ demonstrates and how to use it is provided here:
 
 Example problems are provided for some of the individual [modules/index.md]. A comprehensive list of all that are available is given below. Simply expand the example set under a module header and follow their links.
 
-###### Contact
+##### Contact
 
 !include modules/contact/contact_examples.md
 
-###### Geochemistry
+##### Geochemistry
 
 - [modules/geochemistry/tests_and_examples/index.md]
 
-###### Level Set
+##### Level Set
 
 !include modules/level_set/level_set_examples.md
 
-###### Porous Flow
+##### Porous Flow
 
 !include modules/porous_flow/porous_flow_examples.md
 
-###### Reconstructed Discontinuous Galerkin
+##### Reconstructed Discontinuous Galerkin
 
 - [modules/rdg/index.md#example]
 
-###### Stochastic Tools
+##### Stochastic Tools
 
 !include modules/stochastic_tools/stochastic_tools_examples.md
 
@@ -91,10 +91,10 @@ This tutorial guides the user through some commonly-used aspects of the [Porous
 
 The [!ac](MOOSE) development team at [!ac](INL) occasionally hosts live training. Registration is typically open for all who wish to attend, although space is usually limited. Below are links to the training presentation, a recent video recording of the training, and other targeted more advanced workshop presentations.
 
-- [MOOSE Training Workshop](https://www.mooseframework.org/workshop)
+- [MOOSE Training Workshop](workshop/index.md alternative=missing_config.md)
 - [MOOSE Training Workshop (Summer 2020)](https://www.youtube.com/watch?v=2tJwBsYaLaI)
-- [MOOSE MultiApp Workshop](https://www.mooseframework.org/workshop/multiapps)
-- [MOOSE Verification Workshop](https://www.mooseframework.org/workshop/verification)
+- [MOOSE MultiApps Workshop](tutorial02_multiapps/presentation/index.md alternative=missing_config.md)
+- [MOOSE Verification Workshop](tutorial03_verification/presentation/index.md alternative=missing_config.md)
 
 MOOSE training events will typically be announced on the [home page](index.md exact=true), but be sure to join the [mailing list](help/contact_us.md) for further updates!
 

modules/doc/content/getting_started/examples_and_tutorials/tutorial02_multiapps/index.md

@@ -4,4 +4,5 @@ In this tutorial the [Multiapp](MultiApps/index.md) and [Transfer](Transfers/ind
 used to couple multiphysics applications together across differing time or length scales. This
 tutorial is currently a stand-alone slide set as linked below.
 
-[Tutorial 2: MOOSE MultiApps](https://mooseframework.org/workshop/multiapps)
+!style halign=center fontsize=150%
+[Tutorial 2: MultiApps Presentation](tutorial02_multiapps/presentation/index.md alternative=missing_config.md)

modules/doc/content/getting_started/examples_and_tutorials/tutorial03_verification/index.md

@@ -4,7 +4,7 @@ In this tutorial the use of analytical solutions and the [!ac](MMS) are presente
 code verification methods.
 
 !style halign=center fontsize=150%
-[Tutorial 3: Code Verification Presentation](https://mooseframework.inl.gov/workshop/verification)
+[Tutorial 3: Code Verification Presentation](tutorial03_verification/presentation/index.md alternative=missing_config.md)
 
 ## Tutorial Contents id=contents
 

modules/doc/content/newsletter/2019_07.md

@@ -2,7 +2,7 @@
 
 ## MOOSE Workshop
 
-The MOOSE workshop slides have been updated: [MOOSE Workshop](https://mooseframework.org/workshop).
+The MOOSE workshop slides have been updated: [MOOSE Workshop](workshop/index.md alternative=missing_config.md).
 
 ## Automatic Scaling