kiosk css

css/components/sdu_kiosk.css

@@ -0,0 +1,9 @@
+.kiosk {
+	div#page-wrapper {
+		max-width: 100%;
+	}
+
+
+
+
+}

olivessdu.libraries.yml

@@ -53,6 +53,7 @@ global-styling:
       css/components/wide-image.css: {}
       css/components/unsorted.css: {}
       css/components/islandora_mods.css: {}
+      css/components/sdu_kiosk.css: {}
 
   js:
     js/checkbox.js: {}

olivessdu.theme

@@ -698,6 +698,21 @@ function _olivessdu_hex_to_hsl(string $hex_string) {
   return [$h, $s, $l];
 }
 
+/**
+ * Implements hook_theme_suggestions_page_alter().
+ */
+function olivessdu_theme_suggestions_page_alter(array &$suggestions, array $variables) {
+  // Check if the current route is a node page.
+  if ($node = \Drupal::routeMatch()->getParameter('node')) {
+    // Ensure it's a node object and get the content type.
+    if ($node instanceof \Drupal\node\NodeInterface) {
+      $content_type = $node->getType();
+      // Add a template suggestion like page--node--[content-type].html.twig
+      $suggestions[] = 'page__node__' . $content_type;
+    }
+  }
+}
+
 /*
 function olivessdu_preprocess_mirador(&$variables) {
   $block = \Drupal::service('plugin.manager.block')->createInstance($viewer . 'mirador_block', [

templates/kiosk/page--node--kiosk-image-slideshow.html.twig

@@ -0,0 +1,84 @@
+<div id="page-wrapper" class="page-wrapper">
+  <div id="page">
+
+    {% if page.header or page.primary_menu or page.secondary_menu %}
+      <header id="header" class="site-header" data-drupal-selector="site-header" role="banner">
+
+        {# Gets fixed by JavaScript at wide widths. #}
+        <div class="site-header__fixable" data-drupal-selector="site-header-fixable">
+          <div class="site-header__initial">
+            <button class="sticky-header-toggle" data-drupal-selector="sticky-header-toggle" role="switch" aria-controls="site-header__inner" aria-label="{{ 'Sticky header'|t }}" aria-checked="false">
+              <span class="sticky-header-toggle__icon">
+                <span></span>
+                <span></span>
+                <span></span>
+              </span>
+            </button>
+          </div>
+
+          {# Needs to extend full width so box shadow will also extend. #}
+          <div id="site-header__inner" class="site-header__inner" data-drupal-selector="site-header-inner">
+            <div class="container site-header__inner__container">
+
+              {{ page.header }}
+
+              {% if page.primary_menu or page.secondary_menu %}
+                <div class="mobile-buttons" data-drupal-selector="mobile-buttons">
+                  <button class="mobile-nav-button" data-drupal-selector="mobile-nav-button" aria-label="{{ 'Main Menu'|t }}" aria-controls="header-nav" aria-expanded="false">
+                    <span class="mobile-nav-button__label">{{ 'Menu'|t }}</span>
+                    <span class="mobile-nav-button__icon"></span>
+                  </button>
+                </div>
+
+                <div id="header-nav" class="header-nav" data-drupal-selector="header-nav">
+                  {{ page.primary_menu }}
+                  {{ page.secondary_menu }}
+                </div>
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      </header>
+    {% endif %}
+
+    <div id="main-wrapper" class="layout-main-wrapper layout-container">
+      <div id="main" class="layout-main">
+        <div class="main-content">
+          <a id="main-content" tabindex="-1"></a>
+          {{ page.hero }}
+          <div class="main-content__container container">
+            {{ page.highlighted }}
+            {{ page.breadcrumb }}
+
+            {% if page.sidebar %}
+              <div class="sidebar-grid grid-full">
+                <main role="main" class="site-main">
+                  {{ page.content_above }}
+                  {{ page.content }}
+                </main>
+
+                {{ page.sidebar }}
+              </div>
+            {% else %}
+              <main role="main">
+                {{ page.content_above }}
+                {{ page.content }}
+              </main>
+            {% endif %}
+            {{ page.content_below }}
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="site-footer">
+      <div class="site-footer__inner container">
+        {{ page.footer_top }}
+        {{ page.footer_bottom }}
+      </div>
+    </footer>
+
+    <div class="overlay" data-drupal-selector="overlay"></div>
+
+  </div>
+</div>