Enhance default theme with proper content centering and 2-content-blocks layout

- Update default theme CSS for proper content centering and aspect ratio integration
- Add text-align: center to base slide styling for consistent centering
- Implement specific alignment for title, subtitle, and text slots
- Add aspect ratio specific adjustments (different padding and max-width per ratio)
- Create new 2-content-blocks layout with side-by-side equal spacing
- Use CSS Grid for 50/50 split with proper gap and visual separation
- Add responsive design for mobile devices (stacks vertically)
- Include subtle styling to distinguish content blocks
- Improve typography scaling for two-column layout

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

public/themes-manifest.json

@@ -4,6 +4,7 @@
       "id": "default",
       "cssFile": "style.css",
       "layouts": [
+        "2-content-blocks",
         "content-slide",
         "image-slide",
         "title-slide"
@@ -11,5 +12,5 @@
       "hasMasterSlide": true
     }
   },
-  "generated": "2025-08-20T19:28:24.594Z"
+  "generated": "2025-08-20T22:06:06.798Z"
 }

public/themes/default/layouts/2-content-blocks.html

@@ -0,0 +1,13 @@
+<div class="slide layout-2-content-blocks">
+    <h1 class="slot title-slot" data-slot="title" data-placeholder="Slide Title" data-required>
+        {{title}}
+    </h1>
+    <div class="content-blocks-container">
+        <div class="slot content-slot" data-slot="content1" data-placeholder="First content block" data-required>
+            {{content1}}
+        </div>
+        <div class="slot content-slot" data-slot="content2" data-placeholder="Second content block" data-required>
+            {{content2}}
+        </div>
+    </div>
+</div>

public/themes/default/style.css

@@ -17,15 +17,15 @@
   --theme-font-body: 'Inter', system-ui, sans-serif;
   --theme-font-code: 'JetBrains Mono', 'Consolas', monospace;
   
-  --slide-width: 100vw;
+  --slide-padding: 5%;
-  --slide-height: 100vh;
+  --content-max-width: 90%;
-  --slide-padding: 2rem;
 }
 
-/* Base slide container */
+/* Base slide styling - works with global .slide-container classes */
+.slide-container .slide-content,
 .slide {
-  width: var(--slide-width);
+  width: 100%;
-  height: var(--slide-height);
+  height: 100%;
   background: var(--theme-background);
   color: var(--theme-text);
   font-family: var(--theme-font-body);
@@ -35,6 +35,10 @@
   flex-direction: column;
   position: relative;
   overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  /* Ensure content is properly centered within container */
+  text-align: center;
 }
 
 /* Master slide elements */
@@ -59,6 +63,11 @@
   border: 2px dashed transparent;
   min-height: 2rem;
   transition: border-color 0.2s ease;
+  width: 100%;
+  max-width: var(--content-max-width);
+  margin: 0 auto;
+  /* Ensure slot content inherits proper centering */
+  text-align: inherit;
 }
 
 .slot:hover,
@@ -86,16 +95,23 @@
   font-family: var(--theme-font-heading);
   font-weight: bold;
   line-height: 1.2;
+  text-align: center;
 }
 
 .slot[data-type="subtitle"] {
   font-family: var(--theme-font-heading);
   line-height: 1.4;
   opacity: 0.8;
+  text-align: center;
+}
+.content-slot {
+  color: var(--theme-text-secondary);
+  background-color: var(--theme-background);
 }
-
 .slot[data-type="text"] {
   line-height: 1.6;
+  /* Text content can be left-aligned for readability */
+  text-align: left;
 }
 
 /* Image slots */
@@ -117,62 +133,176 @@
 /* Layout-specific styles */
 
 /* Title slide layout */
-.layout-title-slide {
+.layout-title-slide,
+.slide-container .layout-title-slide {
   justify-content: center;
   align-items: center;
   text-align: center;
 }
 
 .layout-title-slide .slot[data-slot="title"] {
-  font-size: clamp(2rem, 5vw, 4rem);
+  font-size: clamp(2rem, 8vw, 4rem);
   margin-bottom: 2rem;
-  width: 80%;
+  width: 100%;
-
+  max-width: 80%;
   color: var(--theme-primary);
+  text-align: center;
 }
 
 .layout-title-slide .slot[data-slot="subtitle"] {
-  font-size: clamp(1rem, 2.5vw, 2rem);
+  font-size: clamp(1rem, 4vw, 2rem);
   color: var(--theme-text-secondary);
+  width: 100%;
+  max-width: 80%;
+  text-align: center;
+}
+/* Content slide layout */
+.layout-content-slide,
+.slide-container .layout-content-slide {
+  justify-content: flex-start;
+  align-items: stretch;
+  /* Reset text alignment for content slides */
+  text-align: initial;
 }
 
-/* Content slide layout */
 .layout-content-slide .slot[data-slot="title"] {
-  font-size: clamp(1.5rem, 3vw, 2.5rem);
+  font-size: clamp(1.5rem, 6vw, 2.5rem);
   margin-bottom: 2rem;
   padding-bottom: 1rem;
   border-bottom: 2px solid var(--theme-primary);
+  text-align: center;
+  width: 100%;
+}
+
+.layout-content-slide .slot[data-slot="subtitle"] {
+  font-size: clamp(1rem, 2vw, .5rem);
+  text-align: right;
+  width: 50%;
 }
 
 .layout-content-slide .slot[data-slot="content"] {
-  font-size: clamp(1rem, 1.5vw, 1.25rem);
+  font-size: clamp(1rem, 2.5vw, 1.25rem);
   flex: 1;
+  text-align: left;
+  width: 100%;
+  line-height: 1.6;
+  /* Ensure content doesn't get too wide */
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+/* Two content blocks layout */
+.layout-2-content-blocks,
+.slide-container .layout-2-content-blocks {
+  justify-content: flex-start;
+  align-items: stretch;
+  /* Reset text alignment for two-column slides */
+  text-align: initial;
+}
+
+.layout-2-content-blocks .slot[data-slot="title"] {
+  font-size: clamp(1.5rem, 5vw, 2.5rem);
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid var(--theme-primary);
+  text-align: center;
+  width: 100%;
+}
+
+.content-blocks-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  flex: 1;
+  align-items: stretch;
+  width: 100%;
+}
+
+.layout-2-content-blocks .slot[data-slot="content1"],
+.layout-2-content-blocks .slot[data-slot="content2"] {
+  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
+  text-align: left;
+  width: 100%;
+  line-height: 1.6;
+  padding: 1rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 0.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 /* Image slide layout */
+.layout-image-slide,
+.slide-container .layout-image-slide {
+  justify-content: flex-start;
+  align-items: stretch;
+}
+
 .layout-image-slide .slot[data-slot="title"] {
-  font-size: clamp(1.5rem, 3vw, 2.5rem);
+  font-size: clamp(1.5rem, 6vw, 2.5rem);
   margin-bottom: 2rem;
   text-align: center;
+  width: 100%;
 }
 
 .layout-image-slide .slot[data-slot="image"] {
   flex: 1;
   margin-top: 1rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Aspect ratio specific adjustments */
+.slide-container.aspect-16-9 .slide-content,
+.slide-container.aspect-16-9 .slide {
+  --slide-padding: 4%;
+  --content-max-width: 85%;
+}
+
+.slide-container.aspect-4-3 .slide-content,
+.slide-container.aspect-4-3 .slide {
+  --slide-padding: 6%;
+  --content-max-width: 80%;
+}
+
+.slide-container.aspect-16-10 .slide-content,
+.slide-container.aspect-16-10 .slide {
+  --slide-padding: 5%;
+  --content-max-width: 85%;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
   :root {
-    --slide-padding: 1rem;
+    --slide-padding: 3%;
+    --content-max-width: 95%;
   }
   
   .layout-title-slide .slot[data-slot="title"] {
     margin-bottom: 1rem;
+    font-size: clamp(1.5rem, 6vw, 3rem);
   }
   
   .layout-content-slide .slot[data-slot="title"] {
     margin-bottom: 1rem;
+    font-size: clamp(1.2rem, 5vw, 2rem);
+  }
+  
+  .layout-image-slide .slot[data-slot="title"] {
+    font-size: clamp(1.2rem, 5vw, 2rem);
+  }
+  
+  /* Two content blocks responsive adjustments */
+  .content-blocks-container {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+  
+  .layout-2-content-blocks .slot[data-slot="content1"],
+  .layout-2-content-blocks .slot[data-slot="content2"] {
+    font-size: clamp(0.8rem, 2vw, 1rem);
+    padding: 0.75rem;
   }
 }
 
@@ -191,4 +321,4 @@
   .slot.empty::before {
     display: none;
   }
-}/* Test change Wed Aug 20 13:55:27 CDT 2025 */
+}