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>
This commit is contained in:
parent
92672f77e3
commit
2a905d50e0
@ -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"
|
||||
}
|
||||
13
public/themes/default/layouts/2-content-blocks.html
Normal file
13
public/themes/default/layouts/2-content-blocks.html
Normal file
@ -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>
|
||||
@ -17,15 +17,15 @@
|
||||
--theme-font-body: 'Inter', system-ui, sans-serif;
|
||||
--theme-font-code: 'JetBrains Mono', 'Consolas', monospace;
|
||||
|
||||
--slide-width: 100vw;
|
||||
--slide-height: 100vh;
|
||||
--slide-padding: 2rem;
|
||||
--slide-padding: 5%;
|
||||
--content-max-width: 90%;
|
||||
}
|
||||
|
||||
/* Base slide container */
|
||||
/* Base slide styling - works with global .slide-container classes */
|
||||
.slide-container .slide-content,
|
||||
.slide {
|
||||
width: var(--slide-width);
|
||||
height: var(--slide-height);
|
||||
width: 100%;
|
||||
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 */
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user