diff --git a/public/themes-manifest.json b/public/themes-manifest.json index 543a7c4..301b83d 100644 --- a/public/themes-manifest.json +++ b/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" } \ No newline at end of file diff --git a/public/themes/default/layouts/2-content-blocks.html b/public/themes/default/layouts/2-content-blocks.html new file mode 100644 index 0000000..c910bd5 --- /dev/null +++ b/public/themes/default/layouts/2-content-blocks.html @@ -0,0 +1,13 @@ +
\ No newline at end of file diff --git a/public/themes/default/style.css b/public/themes/default/style.css index 40f9f06..414e1c4 100644 --- a/public/themes/default/style.css +++ b/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-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 */ +}