/* * Coding Club Slides - Base Styles * Chrome Dino themed reveal.js presentation styles * * Usage: Include this CSS in your slide deck's : * */ /* ============================================================================ CSS Variables (Theme Configuration) ============================================================================ */ :root { /* Core colors */ --dino-gray: #535353; --bg-cream: #f7f7f7; --cloud-gray: #b5b5b5; /* Scratch block colors */ --scratch-motion: #4C97FF; --scratch-looks: #9966FF; --scratch-sound: #CF63CF; --scratch-events: #FFBF00; --scratch-control: #FFAB19; --scratch-sensing: #5CB1D6; --scratch-operators: #59C059; --scratch-variables: #FF8C1A; --scratch-myblocks: #FF6680; } /* ============================================================================ Base Reveal.js Overrides ============================================================================ */ .reveal { font-family: 'Press Start 2P', monospace; background: var(--bg-cream); } .reveal .slides { text-align: center; } .reveal h1, .reveal h2, .reveal h3 { font-family: 'Press Start 2P', monospace; color: var(--dino-gray); text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.4; } .reveal p { font-family: 'Press Start 2P', monospace; color: var(--dino-gray); letter-spacing: 0.2em; } /* ============================================================================ Title Slide ============================================================================ */ .title-slide { position: relative; width: 100%; height: 100%; } .title-slide h1 { font-size: 2em; margin-bottom: 0.2em; } .title-slide .subtitle { font-size: 0.5em; color: var(--cloud-gray); letter-spacing: 0.15em; } .week-badge { font-size: 0.6em; color: var(--cloud-gray); letter-spacing: 0.2em; margin-bottom: 0.5em; } /* ============================================================================ Content Slide ============================================================================ */ .content-slide { position: relative; width: 100%; height: 100%; } .content-slide h2 { font-size: 1.5em; margin-bottom: 0.3em; } .content-slide .tagline { font-size: 0.55em; color: var(--dino-gray); margin-bottom: 1em; } /* Content area - above ground */ .slide-content { position: relative; z-index: 10; padding: 10% 0; } /* ============================================================================ Sprite Decorations ============================================================================ */ .dino-sprite { position: absolute; bottom: 79px; left: 3%; width: 120px; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; } .cactus-sprite { position: absolute; bottom: 70px; right: 6%; width: 80px; height: 24%; image-rendering: pixelated; image-rendering: crisp-edges; } .cloud-sprite { position: absolute; width: 100px; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; opacity: 0.7; } .cloud-1 { top: 15%; left: 15%; width: 150px; } .cloud-2 { top: 22%; right: 12%; width: 150px; } /* Cloud positions for content slides */ .content-slide .cloud-1 { top: 8%; left: 8%; } .content-slide .cloud-2 { top: 5%; right: 5%; } .ground-line { position: absolute; bottom: 100px; left: 0; width: 100%; height: 30px; background-image: url('assets/ground.png'); background-repeat: repeat-x; background-size: auto 100%; image-rendering: pixelated; image-rendering: crisp-edges; } /* ============================================================================ Pixel Box (Content Boxes) ============================================================================ */ .pixel-box { display: inline-block; border: 3px solid var(--dino-gray); padding: 0.5em 0.7em; margin: 0 0.2em; background: transparent; vertical-align: top; width: 180px; text-align: center; } .pixel-box p { margin: 0; font-size: 0.3em; line-height: 1.5; letter-spacing: 0.05em; } .boxes-container { display: flex; justify-content: center; gap: 0.1em; margin: 0.5em 0 2.5em; } /* Script stack for connected blocks */ .script-stack { display: flex; flex-direction: column; align-items: center; gap: 0.2em; margin-top: 0.5em; } .script-stack .pixel-box { margin: 0; } /* Two column layout */ .two-columns { display: flex; justify-content: center; gap: 2em; align-items: flex-start; } .two-columns .boxes-container { margin: 0; } .two-columns .script-stack { margin-top: 0; } /* Hint text */ .hint { font-size: 0.35em; color: var(--cloud-gray); margin-top: 0.8em; letter-spacing: 0.1em; } /* ============================================================================ Scratch Block Colors ============================================================================ */ /* Motion (Blue) */ .scratch-motion { background: var(--scratch-motion); border-color: var(--scratch-motion); } .scratch-motion p { color: white; } /* Looks (Purple) */ .scratch-looks { background: var(--scratch-looks); border-color: var(--scratch-looks); } .scratch-looks p { color: white; } /* Sound (Pink) */ .scratch-sound { background: var(--scratch-sound); border-color: var(--scratch-sound); } .scratch-sound p { color: white; } /* Events (Yellow) */ .scratch-events { background: var(--scratch-events); border-color: var(--scratch-events); } .scratch-events p { color: #333; } /* Control (Orange) */ .scratch-control { background: var(--scratch-control); border-color: var(--scratch-control); } .scratch-control p { color: #333; } /* Sensing (Light Blue) */ .scratch-sensing { background: var(--scratch-sensing); border-color: var(--scratch-sensing); } .scratch-sensing p { color: white; } /* Operators (Green) */ .scratch-operators { background: var(--scratch-operators); border-color: var(--scratch-operators); } .scratch-operators p { color: white; } /* Variables (Dark Orange) */ .scratch-variables { background: var(--scratch-variables); border-color: var(--scratch-variables); } .scratch-variables p { color: white; } /* My Blocks (Pink-Red) */ .scratch-myblocks { background: var(--scratch-myblocks); border-color: var(--scratch-myblocks); } .scratch-myblocks p { color: white; } /* ============================================================================ Animations ============================================================================ */ /* Floating clouds */ @keyframes float-cloud { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(15px); } } .cloud-1 { animation: float-cloud 8s ease-in-out infinite; } .cloud-2 { animation: float-cloud 10s ease-in-out infinite; animation-delay: -3s; } /* Box entrance */ @keyframes box-pop-in { 0% { opacity: 0; transform: scale(0.8) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .reveal .boxes-container .pixel-box, .reveal .script-stack .pixel-box { opacity: 0; animation: box-pop-in 0.4s ease-out forwards; } .reveal .boxes-container .pixel-box:nth-child(1), .reveal .script-stack .pixel-box:nth-child(1) { animation-delay: 0.2s; } .reveal .boxes-container .pixel-box:nth-child(2), .reveal .script-stack .pixel-box:nth-child(2) { animation-delay: 0.35s; } .reveal .boxes-container .pixel-box:nth-child(3), .reveal .script-stack .pixel-box:nth-child(3) { animation-delay: 0.5s; } .reveal .boxes-container .pixel-box:nth-child(4), .reveal .script-stack .pixel-box:nth-child(4) { animation-delay: 0.65s; } .reveal .boxes-container .pixel-box:nth-child(5), .reveal .script-stack .pixel-box:nth-child(5) { animation-delay: 0.8s; } /* Title text entrance */ @keyframes title-slide-in { 0% { opacity: 0; transform: translateY(-30px); } 100% { opacity: 1; transform: translateY(0); } } .reveal section.present h1, .reveal section.present h2 { animation: title-slide-in 0.5s ease-out forwards; } .reveal section.present .tagline, .reveal section.present .subtitle, .reveal section.present .week-badge { animation: title-slide-in 0.5s ease-out 0.15s forwards; opacity: 0; } .reveal section.present .hint { animation: title-slide-in 0.4s ease-out 0.7s forwards; opacity: 0; } /* Ground line slide in */ @keyframes ground-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(0); } } .reveal section.present .ground-line { animation: ground-slide 0.6s ease-out forwards; }