implement presentations for trainings as part of the community portal. see instructions to write presentation at https://gitlab.torproject.org/tpo/web/wiki/-/blob/master/create-a-presentation.md. will-fix: https://gitlab.torproject.org/tpo/community/l10n/-/issues/40010

assets/static/revealjs/dist/theme/tor.css

@@ -23,7 +23,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --heading-color: #683086;
   --heading-line-height: 1.2;
   --heading-letter-spacing: normal;
-  --heading-text-transform: uppercase;
+  --heading-text-transform: none;
   --heading-text-shadow: none;
   --heading-font-weight: 600;
   --heading1-text-shadow: none;
@@ -77,7 +77,7 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   font-weight: 600;
   line-height: 1.2;
   letter-spacing: normal;
-  text-transform: uppercase;
+  text-transform: none;
   text-shadow: none;
   word-wrap: break-word; }
 
@@ -301,14 +301,31 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
  *********************************************/
 @media print {
   .backgrounds {
-    background-color: #fff; } }
+    background-color: #fff; }
+}
 
+.print-pdf .footer {
+  display: none;
+}
 /*********************************************
  * FOOTER
  *********************************************/
 
 .footer {
   background-color: #683086;
+  min-height: 10%;
+}
+
+.footer img {
+  position:relative;
+  min-height: 1.5em;
+  padding: 5px;
+}
+
+.footer a {
+  font-size: 1.5em !important;
+  padding: 5px;
+  top: 10px;
 }
 
 /*********************************************
@@ -325,3 +342,11 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
 hr.dark {
   border: 5px solid #683086;
 }
+
+.order-last {
+  text-align: left !important;
+}
+
+.order-first {
+  text-align: right !important;
+}

flowblocks/slide.ini

@@ -6,6 +6,11 @@ label = Title
 type = markdown
 translate = True
 
+[fields.subtitle]
+label = Subtitle
+type = markdown
+translate = True
+
 [fields.description]
 label = Description
 type = markdown
@@ -15,16 +20,24 @@ translate = True
 label = Image
 type = select
 source = record.attachments.images
+translate = False
 
 [fields.background]
 label = Background color
 type = string
+translate = False
 
-[fields.layout]
+[fields.slide_layout]
 label = Slide layout
 type = string
+translate = False
 
-[fields.background-image]
+[fields.background_image]
 label = Background image
 type = string
 translate = False
+
+[fields.author]
+label = Author
+type = string
+translate = False

models/slideshow.ini

@@ -15,6 +15,7 @@ translate = True
 [fields.author]
 label = Author
 type = string
+translate = False
 
 [fields.subtitle]
 label = Subtitle
@@ -25,16 +26,18 @@ translate = True
 label = Slides
 type = flow
 flow_blocks = slide
-translate = False
 
 [fields.color]
 label = Color
 type = string
+translate = False
 
 [fields.image]
 label = image
 type = string
+translate = False
 
 [fields.background]
 label = background
 type = string
+translate = False

templates/blocks/slide.html

@@ -1,13 +1,20 @@
-{% if this.layout == "title" %}
-<section class="title" data-background-color="white" data-background-image="{{ this.image|asseturl }}" data-background-position="right bottom" data-background-size="3em">
-  <h3>{{ this.title }}</h3>
-  <hr class="dark" />
-  <h4>{{ this.subtitle }}</h4>
-</section>
+{% if this.slide_layout == "title-slide" %}
+  <section class="title" data-background-color="white" {% if this.background_image %} data-background-image="{{ this.background_image|asseturl }}" data-background-position="right bottom" data-background-size="3em" {% endif %} >
+    <h3>{{ this.title }}</h3>
+    <hr class="dark" />
+    {% if this.subtitle %}
+      <h4>{{ this.subtitle }}</h4>
+    {% endif %}
+    {% if this.author %}
+      <h5>{{ this.author }}</h5>
+    {% endif %}
+  </section>
 {% else %}
-<section data-background-color="{{ this.background }}">
-  <h2>{{ this.title }}</h2>
-  {{ this.description }}
-
-</section>
+  <section {% if this.background != "white" %} data-background-color="{{ this.background }}" {% else %} data-background-color="white" {% endif %} >
+    <h2>{{ this.title }}</h2>
+    {{ this.description }}
+    {% if this.image %}
+        <img data-src="{{ this.image }}">
+    {% endif %}
+  </section>
 {% endif %}

templates/slideshow.html

@@ -16,24 +16,26 @@
 	<body>
     <div class="reveal">
 			<!-- Any section element inside of this container is displayed as a slide -->
-			<div class="slides">
-				<section class="title" data-background-color="#683086" data-background-image="{{ this.image|asseturl }}" data-background-position="right bottom" data-background-size="3em">
-				  <h3>{{ this.title }}</h3>
-					<hr />
-				  <h4>{{ this.subtitle }}</h4>
-					<p>{{ this.author }}</p>
+			<div class="slides {{ bag('alternatives', this.alt, 'order') }}">
+				<section>
+					<section class="title" data-background-color="#683086" data-background-image="{{ this.image|asseturl }}" data-background-position="right bottom" data-background-size="3em">
+					  <h3>{{ this.title }}</h3>
+						<hr />
+					  <h4>{{ this.subtitle }}</h4>
+						<p>{{ this.author }}</p>
+					</section>
+
+	        {{ this.slides }}
+
+					<div class="footer">
+						<div class="left">
+							<a href="https://torproject.org">torproject.org</a>
+						</div>
+						<div class="right">
+							<img src="{{ '/static/images/tor-logo/White.png'|asseturl }}">
+						</div>
+					</div>
 				</section>
-
-        {{ this.slides }}
-
-				<div class="footer">
-					<div class="left">
-						<a href="https://torproject.org">torproject.org</a>
-					</div>
-					<div class="right">
-						<img src="{{ '/static/images/tor-logo/White.png'|asseturl }}">
-					</div>
-				</div>
       </div>
 
     </div>