updated template to include logo on first page and the vertical text

with the university name on the right

lectures/revealjs/course-intro.adoc

@@ -3,7 +3,7 @@
 :icons: font
 
 ++++
-	<!-- img id="main-logo" class="main-logo" src="images/main_logo_eng.png" alt="ntnu logo"/ -->
+	<img id="main-logo" class="main-logo" src="images/main_logo_eng_no_text.png" width="300" alt="ntnu logo"/>
 ++++
 
 [.smaller-80]
@@ -136,17 +136,29 @@ image::../images/teamwork.png[canvas, size=contain]
 
 ++++
  <div id="footer" class="footer">
-     <span class="element"><a href="www.ntnu.no"><img id="footer-logo" class="footer-logo" src="images/logo_ntnu.png" alt="ntnu logo"/></a></span>
+     <span class="element"><a href="www.ntnu.no"><img id="footer-logo" class="footer-logo" src="images/logo_ntnu.png" alt="ntnu logo" height="28"/></a></span>
      <span class="element">| IT1901 </span>
      <span class="element">| Course Introduction </span>
      <span class="element">&nbsp;&nbsp;&nbsp;&nbsp;</span>
  </div>
  
+ <div id="vertical-ntnu-name" class="vertical-ntnu-name">
+ 	<span class="helper"></span>
+ 	<img src="images/vertical-ntnu-name.jpg" alt="Norwegian University of Science and Technology" />
+ </div>
+ 
  <script type="text/javascript">
      window.addEventListener("load", function() {
          revealDiv = document.querySelector("body div.reveal")
          footer = document.getElementById("footer");
          revealDiv.appendChild(footer);
+         
+         titleSlideDiv = document.querySelector("div.slides section.title")
+         mainLogo = document.getElementById("main-logo");
+         titleSlideDiv.prepend(mainLogo);
+         
+         vertName =  document.getElementById("vertical-ntnu-name");
+         revealDiv.appendChild(vertName);
      } );
  </script>
 ++++
\ No newline at end of file

lectures/revealjs/slides.css

@@ -180,40 +180,67 @@ section h2 {
 
 /* solution for footer based on http://blog.schauderhaft.de/2018/07/23/footer-in-revealjs-from-asciidoc/ */
  .footer {
-   position: absolute;
-   display: table;
-   width: 100%;
-   bottom: 0;
-   background-color: #0000AA;
+	position: absolute;
+   	display: table;
+   	width: 100%;
+   	bottom: 0;
+   	height: 40px;
+   	background-color: #0000AA;
  }
     
  .footer span {
-   display: table-cell;
-   color: #FFFFFF;
-   padding: 0px 15px 5px;
-    
-   text-align: center;
-   font-family: "Verdana", sans-serif;
-   font-size: 70%;
+   	display: table-cell;
+   	color: #FFFFFF;
+   	padding: 0px 15px 5px;
+   	 
+   	text-align: center;
+   	font-family: "Verdana", sans-serif;
+   	font-size: 55%;
+	vertical-align: middle;
  }
     
  .footer span:nth-of-type(1) {
-   text-align: left;
+   	text-align: left;
  }
 
  .footer span:nth-last-child(1) {
-   text-align: right;
+   	text-align: right;
  }
 
 .footer-logo{
 	vertical-align: middle;
+	    margin-top: 5px;
 }
 
 
 .main-logo{
-	position: absolute;
+	position: relative;
    	display: block;
-   	width: 300;
-   	top: 10;
-	left:10;
-}
\ No newline at end of file
+    border: none  !important;
+    box-shadow: none  !important;
+}
+
+
+.vertical-ntnu-name {
+	position: absolute;
+	height: 100%;
+	right: 5px;
+	vertical-align: middle; 
+}
+
+.vertical-ntnu-name img {
+	display: inline;
+	vertical-align: middle;
+	border: none !important;
+	box-shadow: none !important;
+}
+
+.helper {
+    display: inline-block;
+    height: 100%;
+    vertical-align: middle;
+}
+
+/* body div.reveal {
+	margin-bottom: 40px !important;
+} */