coursecode 0.1.0

package/framework/css/components/images.css

@@ -0,0 +1,528 @@
+/* ============================================================================
+   IMAGES - Image component styles with captions, links, and utilities
+   ============================================================================
+   
+   WHAT: Reusable image components for displaying images with optional
+         captions, subtitles, credits, and link overlays
+   
+   INCLUDES:
+   - Figure container with caption support (.figure)
+   - Image caption styles (.figure-caption, .image-caption)
+   - Image credit/source attribution (.image-credit)
+   - Linked image with hover effects (.image-link)
+   - Image sizing utilities (.img-fluid, .img-cover, .img-contain)
+   - Aspect ratio containers (.aspect-16-9, .aspect-4-3, .aspect-1-1)
+   - Image shape modifiers (.img-rounded, .img-circle)
+   - Image gallery grid (.image-gallery)
+   
+   DEPENDENCIES:
+   - design-tokens.css (--color-*, --space-*, --shadow-*, --transition-*)
+   
+   USED BY:
+   - Content slides with images
+   - Image galleries
+   - Screenshots with captions
+   - Attributed/credited images
+   
+   AI DEBUGGING TIPS:
+   - Image not scaling? Add .img-fluid for responsive sizing
+   - Caption not visible? Ensure it's inside .figure container
+   - Link overlay not working? Check z-index and position:relative on parent
+   - Aspect ratio breaking? Don't set explicit height on .aspect-* containers
+   - Circle image not round? Ensure source image is square or use .aspect-1-1
+   
+   STRUCTURE:
+   1. Figure & caption base styles
+   2. Image credit/source attribution
+   3. Linked image effects
+   4. Image sizing utilities
+   5. Aspect ratio containers
+   6. Image shape modifiers
+   7. Image gallery grid
+   
+   LAST UPDATED: 2024-12-09
+   ============================================================================ */
+
+/* ============================================================================
+   FIGURE & CAPTION BASE STYLES
+   ============================================================================ */
+
+/* Figure container - wraps image with optional caption */
+.figure {
+  display: inline-block;
+  margin: 0;
+  position: relative;
+  max-width: 100%;
+}
+
+/* Full-width figure variant */
+.figure-full {
+  display: block;
+  width: 100%;
+}
+
+/* Figure image - ensure responsive within container */
+.figure img,
+.figure-img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--radius-md);
+}
+
+/* Figure caption - below image */
+.figure-caption,
+.image-caption {
+  display: block;
+  margin-top: var(--space-2);
+  font-size: var(--font-size-sm);
+  color: var(--color-gray-600);
+  line-height: var(--line-height-normal);
+}
+
+/* Caption alignment variants */
+.figure-caption-center,
+.image-caption-center {
+  text-align: center;
+}
+
+.figure-caption-right,
+.image-caption-right {
+  text-align: right;
+}
+
+/* Caption with background overlay (positioned over image) */
+.figure-caption-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: var(--space-4);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
+  color: var(--color-white);
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+  margin-top: 0;
+}
+
+.figure-caption-overlay h4,
+.figure-caption-overlay p {
+  color: var(--color-white);
+  margin: 0;
+}
+
+.figure-caption-overlay h4 {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  margin-bottom: var(--space-1);
+}
+
+.figure-caption-overlay p {
+  font-size: var(--font-size-sm);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* ============================================================================
+   IMAGE CREDIT / SOURCE ATTRIBUTION
+   ============================================================================ */
+
+/* Credit line - small attribution text */
+.image-credit {
+  display: block;
+  margin-top: var(--space-1);
+  font-size: var(--font-size-xs);
+  color: var(--color-gray-500);
+  font-style: italic;
+}
+
+/* Credit with link styling */
+.image-credit a {
+  color: var(--color-gray-500);
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 2px;
+}
+
+.image-credit a:hover {
+  color: var(--color-primary);
+  text-decoration-style: solid;
+}
+
+/* Credit positioned inside figure (bottom-right corner) */
+.image-credit-overlay {
+  position: absolute;
+  bottom: var(--space-2);
+  right: var(--space-2);
+  padding: var(--space-1) var(--space-2);
+  background: rgba(0, 0, 0, 0.6);
+  color: var(--color-white);
+  font-size: var(--font-size-xs);
+  border-radius: var(--radius-sm);
+  font-style: normal;
+  margin-top: 0;
+}
+
+.image-credit-overlay a {
+  color: var(--color-white);
+}
+
+.image-credit-overlay a:hover {
+  color: var(--color-gray-200);
+}
+
+/* ============================================================================
+   LINKED IMAGE EFFECTS
+   ============================================================================ */
+
+/* Image link wrapper - clickable image with hover effects
+   Default: shadow on hover (clean, no cropping)
+   Use .image-link-zoom for contained zoom effect
+   Use .image-link-lift for lift + shadow effect
+*/
+.image-link {
+  display: inline-block;
+  position: relative;
+  border-radius: var(--radius-md);
+  transition: box-shadow var(--transition-normal), transform var(--transition-normal);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.image-link img {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: inherit;
+  transition: filter var(--transition-normal), box-shadow var(--transition-normal);
+}
+
+/* Default hover: subtle brightness boost + enhanced shadow */
+.image-link:hover {
+  box-shadow: var(--shadow-lg);
+}
+
+.image-link:hover img {
+  filter: brightness(1.03);
+}
+
+/* Focus state for keyboard accessibility only */
+.image-link:focus {
+  outline: none;
+}
+
+.image-link:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Variant: Lift effect (rises up with shadow) */
+.image-link-lift:hover {
+  transform: translateY(-3px);
+  box-shadow: var(--shadow-lg);
+}
+
+/* Variant: Zoom effect (image zooms inside container) */
+.image-link-zoom {
+  overflow: hidden;
+}
+
+.image-link-zoom img {
+  transition: transform var(--transition-normal);
+}
+
+.image-link-zoom:hover img {
+  transform: scale(1.05);
+}
+
+/* Variant: Border highlight on hover */
+.image-link-border {
+  border: 2px solid transparent;
+}
+
+.image-link-border:hover {
+  border-color: var(--color-primary);
+  box-shadow: none;
+}
+
+/* ============================================================================
+   IMAGE SIZING UTILITIES
+   ============================================================================ */
+
+/* Fluid image - scales with container, never exceeds original size */
+.img-fluid {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Full-width image - always fills container width */
+.img-full {
+  width: 100%;
+  height: auto;
+}
+
+/* Object-fit utilities for images in fixed containers */
+.img-cover {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.img-contain {
+  object-fit: contain;
+  width: 100%;
+  height: 100%;
+}
+
+.img-fill {
+  object-fit: fill;
+  width: 100%;
+  height: 100%;
+}
+
+/* Object position utilities */
+.img-top {
+  object-position: top;
+}
+
+.img-bottom {
+  object-position: bottom;
+}
+
+.img-left {
+  object-position: left;
+}
+
+.img-right {
+  object-position: right;
+}
+
+.img-center {
+  object-position: center;
+}
+
+/* ============================================================================
+   ASPECT RATIO CONTAINERS
+   ============================================================================ */
+
+/* Base aspect ratio container */
+[class*="aspect-"] {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+
+[class*="aspect-"]>img,
+[class*="aspect-"]>video,
+[class*="aspect-"]>iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Common aspect ratios */
+.aspect-16-9 {
+  aspect-ratio: 16 / 9;
+}
+
+.aspect-4-3 {
+  aspect-ratio: 4 / 3;
+}
+
+.aspect-3-2 {
+  aspect-ratio: 3 / 2;
+}
+
+.aspect-1-1 {
+  aspect-ratio: 1 / 1;
+}
+
+.aspect-2-1 {
+  aspect-ratio: 2 / 1;
+}
+
+.aspect-21-9 {
+  aspect-ratio: 21 / 9;
+}
+
+/* Portrait orientations */
+.aspect-9-16 {
+  aspect-ratio: 9 / 16;
+}
+
+.aspect-3-4 {
+  aspect-ratio: 3 / 4;
+}
+
+.aspect-2-3 {
+  aspect-ratio: 2 / 3;
+}
+
+/* ============================================================================
+   IMAGE SHAPE MODIFIERS
+   ============================================================================ */
+
+/* Rounded corners */
+.img-rounded {
+  border-radius: var(--radius-lg);
+}
+
+.img-rounded-sm {
+  border-radius: var(--radius-sm);
+}
+
+.img-rounded-xl {
+  border-radius: var(--radius-xl);
+}
+
+/* Circular image (best with square source or aspect-1-1) */
+.img-circle {
+  border-radius: 50%;
+}
+
+/* Image with border */
+.img-bordered {
+  border: var(--border-width-md) solid var(--color-gray-200);
+}
+
+.img-bordered-primary {
+  border: var(--border-width-md) solid var(--color-primary);
+}
+
+.img-bordered-thick {
+  border: 4px solid var(--color-gray-200);
+}
+
+/* Image with shadow */
+.img-shadow {
+  box-shadow: var(--shadow-md);
+}
+
+.img-shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.img-shadow-xl {
+  box-shadow: var(--shadow-xl);
+}
+
+/* ============================================================================
+   IMAGE GALLERY GRID
+   ============================================================================ */
+
+/* Responsive image gallery */
+.image-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--space-4);
+}
+
+/* Fixed column gallery variants */
+.image-gallery-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--space-4);
+}
+
+.image-gallery-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--space-4);
+}
+
+.image-gallery-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-4);
+}
+
+/* Gallery item wrapper */
+.image-gallery .figure,
+.image-gallery .image-link,
+.image-gallery-item {
+  width: 100%;
+}
+
+.image-gallery img {
+  width: 100%;
+  height: auto;
+  border-radius: var(--radius-md);
+}
+
+/* Gallery with uniform aspect ratio */
+.image-gallery-uniform img {
+  aspect-ratio: 1 / 1;
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
+.image-gallery-uniform-16-9 img {
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  height: 100%;
+  width: 100%;
+}
+
+/* Masonry-style gallery (requires JS for true masonry) */
+.image-gallery-masonry {
+  columns: 3;
+  column-gap: var(--space-4);
+}
+
+.image-gallery-masonry .figure,
+.image-gallery-masonry .image-link,
+.image-gallery-masonry-item {
+  break-inside: avoid;
+  margin-bottom: var(--space-4);
+}
+
+/* ============================================================================
+   RESPONSIVE ADJUSTMENTS
+   ============================================================================ */
+
+@media (max-width: 768px) {
+
+  .image-gallery-3,
+  .image-gallery-4 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .image-gallery-masonry {
+    columns: 2;
+  }
+}
+
+@media (max-width: 480px) {
+
+  .image-gallery-2,
+  .image-gallery-3,
+  .image-gallery-4 {
+    grid-template-columns: 1fr;
+  }
+
+  .image-gallery-masonry {
+    columns: 1;
+  }
+}
+
+/* ============================================================================
+   ACCESSIBILITY
+   ============================================================================ */
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .image-link:hover img {
+    transform: none;
+  }
+
+  .image-link:hover {
+    transform: none;
+  }
+
+  .image-link-overlay svg,
+  .image-link-overlay .icon {
+    transition: none;
+  }
+}