coursecode 0.1.0

package/framework/css/layouts/article.css

@@ -0,0 +1,258 @@
+/* ============================================================================
+   ARTICLE LAYOUT - Modern web-page feel
+   ============================================================================
+   
+   PURPOSE: Documentation-style layout with:
+   - Minimal header (branding only, sidebar toggle optional)
+   - OPTIONAL sidebar (controlled by navigation.sidebar.enabled)
+   - Content-focused, scrollable main area
+   - Floating footer with compact navigation
+   
+   BEST FOR: Modern "readable" courses, documentation-style content
+   
+   ============================================================================ */
+
+/* Sidebar visibility controlled by data attribute (JS sets from config) */
+/* Hide sidebar toggle when sidebar is disabled */
+[data-layout="article"]:not([data-sidebar-enabled="true"]) #sidebar-toggle {
+    display: none;
+}
+
+/* Show sidebar toggle when enabled - style as part of header */
+[data-layout="article"][data-sidebar-enabled="true"] #sidebar-toggle {
+    display: flex;
+    color: var(--header-control-text);
+}
+
+[data-layout="article"][data-sidebar-enabled="true"] #sidebar-toggle:hover {
+    background: var(--header-control-bg-hover);
+}
+
+/* Show accessibility button as the unified menu (when sidebar is disabled) */
+[data-layout="article"]:not([data-sidebar-enabled="true"]) #accessibility-button {
+    display: flex;
+    color: var(--header-control-text);
+}
+
+[data-layout="article"]:not([data-sidebar-enabled="true"]) #accessibility-button:hover {
+    background: var(--header-control-bg-hover);
+}
+
+/* When sidebar is enabled, hide the standalone accessibility button (settings in sidebar) */
+[data-layout="article"][data-sidebar-enabled="true"] #accessibility-button {
+    display: none;
+}
+
+/* Hide sidebar when disabled */
+[data-layout="article"]:not([data-sidebar-enabled="true"]) .sidebar {
+    display: none !important;
+}
+
+[data-layout="article"]:not([data-sidebar-enabled="true"]) #sidebar-backdrop {
+    display: none !important;
+}
+
+/* Minimal header styling */
+[data-layout="article"] .course-header {
+    background: var(--header-bg);
+    border-bottom: 1px solid var(--header-border);
+    box-shadow: var(--shadow-sm);
+    --header-text: var(--color-primary);
+    --header-bg: var(--bg-surface);
+    --header-border: var(--border-default);
+    --header-control-bg: transparent;
+    --header-control-bg-hover: var(--color-primary-alpha-10);
+    --header-control-bg-active: var(--color-primary-alpha-20);
+    --header-control-text: var(--header-text);
+    --header-control-focus: var(--header-text);
+}
+
+/* Use brand color for logo, title, and icon */
+[data-layout="article"] .course-header h1,
+[data-layout="article"] .course-header .brand-title,
+[data-layout="article"] .course-header #brand,
+[data-layout="article"] .course-header #brand span.logo {
+    color: var(--header-text);
+}
+
+[data-layout="article"] .course-header #brand svg,
+[data-layout="article"] .course-header #brand img {
+    filter: none;
+    /* Don't invert logo on light background */
+}
+
+/* Content area - centered, article-width */
+[data-layout="article"] main#content {
+    max-width: 100%;
+    padding: var(--space-8) var(--space-6);
+}
+
+[data-layout="article"] main#content>section {
+    /* Width controlled by slideDefaults.contentWidth config via auto-wrapping */
+    border: none;
+    box-shadow: none;
+    background: transparent;
+    padding: 0;
+}
+
+/* Slide container inherits article width */
+[data-layout="article"] #slide-container {
+    /* Width controlled by slideDefaults.contentWidth config via auto-wrapping */
+    margin: 0 auto;
+}
+
+/* Footer styling moved to components/footer.css - DATA-LAYOUT VARIANTS section */
+
+/* Audio player styling moved to components/audio-player.css - DATA-LAYOUT VARIANTS section */
+
+/* Button styling moved to components/buttons.css - DATA-LAYOUT VARIANTS section */
+/* Engagement/gating styling moved to components/engagement.css - DATA-LAYOUT VARIANTS section */
+
+/* Breadcrumbs visibility now controlled by navigation.breadcrumbs.enabled config */
+
+/* Article layout sidebar - add left padding so nav item accent isn't flush with edge */
+[data-layout="article"] .sidebar nav#menu {
+    padding-left: var(--space-2);
+}
+
+/* ============================================================================
+   ARTICLE LAYOUT SIDEBAR FOOTER - Horizontal status bar
+   ============================================================================ */
+
+/* Show sidebar footer in article layout when sidebar is enabled */
+[data-layout="article"][data-sidebar-enabled="true"] .nav-sidebar-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: auto;
+    padding: var(--space-3) var(--space-4);
+    border-top: 1px solid var(--sidebar-border);
+    background: var(--sidebar-bg);
+}
+
+/* Exit link - subtle text link style */
+[data-layout="article"] .sidebar-exit-link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-xs);
+    color: var(--sidebar-text);
+    opacity: 0.72;
+    cursor: pointer;
+    transition: opacity var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
+}
+
+[data-layout="article"] .sidebar-exit-link:hover {
+    opacity: 1;
+    color: var(--color-danger);
+    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
+}
+
+[data-layout="article"] .sidebar-exit-link:focus-visible {
+    opacity: 1;
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+[data-layout="article"] .sidebar-exit-link svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* Settings icon buttons - compact row */
+[data-layout="article"] .sidebar-settings-icons {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+
+[data-layout="article"] .sidebar-icon-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    background: color-mix(in srgb, var(--sidebar-text) 6%, transparent);
+    border: 1px solid color-mix(in srgb, var(--sidebar-text) 16%, transparent);
+    border-radius: var(--radius-md);
+    color: var(--sidebar-text);
+    opacity: 0.78;
+    cursor: pointer;
+    transition: opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-interactive);
+}
+
+[data-layout="article"] .sidebar-icon-btn:hover {
+    opacity: 1;
+    background: var(--sidebar-hover-bg);
+    border-color: color-mix(in srgb, var(--sidebar-active-text) 32%, transparent);
+    transform: translateY(var(--motion-lift-sm));
+}
+
+[data-layout="article"] .sidebar-icon-btn:active {
+    transform: scale(var(--motion-press-scale));
+}
+
+[data-layout="article"] .sidebar-icon-btn:focus-visible {
+    opacity: 1;
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+    border-color: color-mix(in srgb, var(--sidebar-active-text) 36%, transparent);
+}
+
+[data-layout="article"] .sidebar-icon-btn svg {
+    width: 16px;
+    height: 16px;
+}
+
+[data-layout="article"] .sidebar-icon-btn .icon-text {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+}
+
+/* ============================================================================
+   MOBILE RESPONSIVE - Compact unified footer
+   ============================================================================
+   On mobile, use a single full-width compact footer bar at bottom.
+   Audio left, nav right in one unified bar. Shorter header.
+   Structure: footer > nav-controls > [nav-nav-buttons, audio-player, nav-exit-button]
+   ============================================================================ */
+
+/* Mobile breakpoint - 767px and below */
+
+/* Compact header - reduce height */
+html.bp-max-mobile-landscape[data-layout="article"] .course-header {
+    padding: var(--space-2) var(--space-3);
+}
+
+html.bp-max-mobile-landscape[data-layout="article"] .course-header #brand img.logo {
+    height: 28px;
+}
+
+html.bp-max-mobile-landscape[data-layout="article"] .course-header .brand-title {
+    font-size: var(--font-size-sm);
+}
+
+/* Sidebar should end above the fixed footer */
+html.bp-max-mobile-landscape[data-layout="article"] .sidebar {
+    height: calc(100% - 52px);
+}
+
+/* Mobile footer styling moved to components/footer.css - DATA-LAYOUT VARIANTS section */
+
+/* Mobile audio player order moved to components/audio-player.css - DATA-LAYOUT VARIANTS section */
+
+
+
+/* Mobile button styling moved to components/buttons.css - DATA-LAYOUT VARIANTS section */
+
+
+
+/* Add bottom padding to content */
+html.bp-max-mobile-landscape[data-layout="article"] main#content {
+    padding-bottom: calc(var(--space-8) + 52px);
+}

package/framework/css/layouts/base.css

@@ -0,0 +1,30 @@
+/* ============================================================================
+   LAYOUT BASE - Shared tokens and base structure for all layouts
+   ============================================================================
+   
+   PURPOSE: Common layout tokens and utilities used by all layout modes.
+   
+   PATTERN: Each layout applies a `data-layout` attribute to <html>, then uses
+   CSS selectors like `[data-layout="X"]` to control visibility and positioning.
+   
+   ============================================================================ */
+
+:root {
+    /* Layout tokens - can be overridden per layout */
+    --layout-header-height: var(--header-height, 60px);
+    --layout-footer-height: var(--footer-height, 60px);
+    --layout-sidebar-width: var(--sidebar-width, 280px);
+
+    /* Floating nav tokens */
+    --layout-floating-nav-radius: var(--radius-xl);
+    --layout-floating-nav-padding: var(--space-2);
+    --layout-floating-nav-bg: var(--footer-floating-bg);
+    --layout-floating-nav-border: 1px solid var(--footer-floating-border);
+    --layout-floating-nav-shadow: var(--footer-floating-shadow);
+}
+
+/* Default layout is traditional if not specified */
+html:not([data-layout]),
+[data-layout="traditional"] {
+    --layout-mode: traditional;
+}

package/framework/css/layouts/canvas.css

@@ -0,0 +1,38 @@
+/**
+ * Canvas Layout
+ * 
+ * A true blank-slate layout. ALL framework CSS is reverted to browser
+ * defaults in the content area. Authors bring their own CSS via theme.css
+ * (which loads after framework.css and naturally wins via cascade order).
+ * 
+ * Authors still get full access to LMS drivers, state, engagement,
+ * navigation, interactions, and all other framework JS infrastructure
+ * via window.CourseCode and course-config.js.
+ */
+
+/* --- Hide all framework chrome --- */
+[data-layout="canvas"] .course-header,
+[data-layout="canvas"] .app-footer,
+[data-layout="canvas"] .sidebar,
+[data-layout="canvas"] #sidebar-backdrop,
+[data-layout="canvas"] #sidebar-toggle,
+[data-layout="canvas"] .nav-floating {
+    display: none !important;
+}
+
+/* --- Content fills viewport with no framework styling --- */
+[data-layout="canvas"] .app-body {
+    padding: 0;
+}
+
+[data-layout="canvas"] main#content {
+    padding: 0;
+    background: none;
+    background-image: none;
+}
+
+/* --- Nuclear reset: revert ALL framework styles in slide content --- */
+[data-layout="canvas"] #slide-container,
+[data-layout="canvas"] #slide-container * {
+    all: revert;
+}

package/framework/css/layouts/focused.css

@@ -0,0 +1,236 @@
+/* ============================================================================
+   FOCUSED LAYOUT - Immersive experience
+   ============================================================================
+   
+   PURPOSE: Minimal-chrome layout with:
+   - Header chrome hidden (no hover reveal)
+   - FAB sidebar toggle in top-left when sidebar is enabled
+   - OPTIONAL sidebar (controlled by navigation.sidebar.enabled)
+   - Content fills viewport, centered
+   - Floating centered footer with navigation
+   
+   BEST FOR: Story-driven courses, multimedia-heavy content, immersive experiences
+   
+   ============================================================================ */
+
+/* Focused: hide header when sidebar disabled */
+[data-layout="focused"]:not([data-sidebar-enabled="true"]) .course-header {
+    display: none !important;
+}
+
+/* Focused with sidebar: keep header in DOM but hide chrome, show only FAB toggle */
+[data-layout="focused"][data-sidebar-enabled="true"] .course-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    overflow: visible;
+    background: transparent !important;
+    box-shadow: none !important;
+    border: none !important;
+}
+
+[data-layout="focused"][data-sidebar-enabled="true"] .course-header > * {
+    visibility: hidden;
+}
+
+[data-layout="focused"][data-sidebar-enabled="true"] .course-header #sidebar-toggle {
+    visibility: visible;
+}
+
+/* Sidebar visibility controlled by data attribute */
+[data-layout="focused"]:not([data-sidebar-enabled="true"]) .sidebar {
+    display: none !important;
+}
+
+[data-layout="focused"]:not([data-sidebar-enabled="true"]) #sidebar-backdrop {
+    display: none !important;
+}
+
+[data-layout="focused"]:not([data-sidebar-enabled="true"]) #sidebar-toggle {
+    display: none !important;
+}
+
+/* FAB toggle button for focused layout - same pattern as presentation */
+[data-layout="focused"][data-sidebar-enabled="true"] #sidebar-toggle {
+    --header-control-bg: var(--nav-edge-bg);
+    --header-control-bg-hover: var(--nav-edge-bg-hover);
+    --header-control-text: var(--text-primary);
+    --header-border: var(--nav-edge-border);
+    position: fixed;
+    top: var(--space-4);
+    left: var(--space-4);
+    z-index: var(--z-fixed);
+    width: var(--nav-edge-control-size);
+    height: var(--nav-edge-control-size);
+    border-radius: var(--radius-full);
+    background: var(--header-control-bg);
+    border: 1px solid var(--header-border);
+    box-shadow: var(--nav-edge-shadow);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: var(--nav-btn-edge-opacity);
+    transition: opacity var(--transition-fast), transform var(--transition-interactive), background var(--transition-fast), box-shadow var(--transition-interactive);
+    color: var(--header-control-text);
+}
+
+[data-layout="focused"][data-sidebar-enabled="true"] #sidebar-toggle:hover {
+    opacity: 1;
+    transform: scale(var(--nav-edge-hover-scale));
+    background: var(--header-control-bg-hover);
+    box-shadow: var(--nav-edge-shadow-hover);
+}
+
+[data-layout="focused"][data-sidebar-enabled="true"] #sidebar-toggle:active {
+    transform: scale(var(--nav-edge-active-scale));
+}
+
+/* App body fills full height (header is absolutely positioned, doesn't take space) */
+[data-layout="focused"] .app-body {
+    height: 100%;
+}
+
+/* Content area - centered, fills viewport */
+[data-layout="focused"] main#content {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-6);
+    height: 100%;
+    box-sizing: border-box;
+}
+
+[data-layout="focused"] main#content>section {
+    max-width: 1000px;
+    width: 100%;
+    border: none;
+    box-shadow: none;
+    background: transparent;
+}
+
+/* Slide container centered */
+[data-layout="focused"] #slide-container {
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+/* Footer styling moved to components/footer.css - DATA-LAYOUT VARIANTS section */
+
+/* Audio player styling moved to components/audio-player.css - DATA-LAYOUT VARIANTS section */
+
+/* Button styling moved to components/buttons.css - DATA-LAYOUT VARIANTS section */
+/* Engagement/gating styling moved to components/engagement.css - DATA-LAYOUT VARIANTS section */
+
+/* Breadcrumbs visibility now controlled by navigation.breadcrumbs.enabled config */
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+    [data-layout="focused"][data-sidebar-enabled="true"] #sidebar-toggle {
+        transition: none;
+    }
+
+    [data-layout="focused"][data-sidebar-enabled="true"] #sidebar-toggle:hover {
+        transform: none;
+    }
+}
+
+/* ============================================================================
+   FOCUSED LAYOUT SIDEBAR FOOTER - Horizontal status bar (same as article)
+   ============================================================================ */
+
+/* Show sidebar footer in focused layout when sidebar is enabled */
+[data-layout="focused"][data-sidebar-enabled="true"] .nav-sidebar-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: auto;
+    padding: var(--space-3) var(--space-4);
+    border-top: 1px solid var(--sidebar-border);
+    background: var(--sidebar-bg);
+}
+
+/* Exit link - subtle text link style */
+[data-layout="focused"] .sidebar-exit-link {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-2);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-xs);
+    color: var(--sidebar-text);
+    opacity: 0.72;
+    cursor: pointer;
+    transition: opacity var(--transition-fast), color var(--transition-fast), background-color var(--transition-fast);
+}
+
+[data-layout="focused"] .sidebar-exit-link:hover {
+    opacity: 1;
+    color: var(--color-danger);
+    background: color-mix(in srgb, var(--color-danger) 8%, transparent);
+}
+
+[data-layout="focused"] .sidebar-exit-link:focus-visible {
+    opacity: 1;
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+[data-layout="focused"] .sidebar-exit-link svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* Settings icon buttons - compact row */
+[data-layout="focused"] .sidebar-settings-icons {
+    display: flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+
+[data-layout="focused"] .sidebar-icon-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    background: color-mix(in srgb, var(--sidebar-text) 6%, transparent);
+    border: 1px solid color-mix(in srgb, var(--sidebar-text) 16%, transparent);
+    border-radius: var(--radius-md);
+    color: var(--sidebar-text);
+    opacity: 0.78;
+    cursor: pointer;
+    transition: opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-interactive);
+}
+
+[data-layout="focused"] .sidebar-icon-btn:hover {
+    opacity: 1;
+    background: var(--sidebar-hover-bg);
+    border-color: color-mix(in srgb, var(--sidebar-active-text) 32%, transparent);
+    transform: translateY(var(--motion-lift-sm));
+}
+
+[data-layout="focused"] .sidebar-icon-btn:active {
+    transform: scale(var(--motion-press-scale));
+}
+
+[data-layout="focused"] .sidebar-icon-btn:focus-visible {
+    opacity: 1;
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+    border-color: color-mix(in srgb, var(--sidebar-active-text) 36%, transparent);
+}
+
+[data-layout="focused"] .sidebar-icon-btn svg {
+    width: 16px;
+    height: 16px;
+}
+
+[data-layout="focused"] .sidebar-icon-btn .icon-text {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-bold);
+}

package/framework/css/layouts/index.css

@@ -0,0 +1,29 @@
+/* ============================================================================
+   LAYOUTS INDEX - Master import file for all layout styles
+   ============================================================================
+   
+   PURPOSE: Central import point for the CourseCode layout system.
+   Layouts control the overall visual structure of the course (header, sidebar,
+   footer, content area positioning).
+   
+   LAYOUTS:
+   - sidebar (default): Traditional LMS layout with slide-out navigation menu
+   - article: Modern web-page feel with minimal chrome and inline progress
+   - focused: Immersive layout with hidden navigation and floating controls
+   - presentation: Full-screen slideshow with edge navigation arrows
+   - canvas: Zero framework CSS — all styles reverted to browser defaults, author BYOs via theme.css
+   
+   USAGE: Set `layout` in course-config.js:
+   export const courseConfig = {
+       layout: 'article',  // 'sidebar' | 'article' | 'focused' | 'presentation' | 'canvas'
+       // ...
+   };
+   
+   ============================================================================ */
+
+@import './base.css';
+@import './traditional.css';
+@import './article.css';
+@import './focused.css';
+@import './presentation.css';
+@import './canvas.css';