css modularization

src/components/common/Button.tsx

@@ -1,6 +1,7 @@
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import styles from "@styles/Button.module.css";
+import styles from "@styles/components/Button.module.css";
+import { cn } from "@utils/classNames";
 
 interface ButtonProps {
   icon?: IconDefinition;
@@ -25,36 +26,24 @@ export const Button: React.FC<ButtonProps> = ({
   target,
   rel,
 }) => {
-  const buttonClassName = `${styles.button} ${styles[variant]} ${className || ""}`;
-
-  const buttonContent = (
-    <>
-      {icon && <FontAwesomeIcon icon={icon} />}
+  const ButtonComponent = ({ className }: { className: string }) => (
+    <button
+      className={cn(styles.button, styles[variant], className)}
+      onClick={onClick}
+      aria-label={ariaLabel}
+    >
+      {icon && <FontAwesomeIcon icon={icon} className={styles.icon} />}
       {children}
-    </>
+    </button>
   );
 
   if (href) {
     return (
       <a href={href} target={target} rel={rel} className={styles.link}>
-        <button
-          className={buttonClassName}
-          onClick={onClick}
-          aria-label={ariaLabel}
-        >
-          {buttonContent}
-        </button>
+        <ButtonComponent className={className || ""} />
       </a>
     );
   }
 
-  return (
-    <button
-      className={buttonClassName}
-      onClick={onClick}
-      aria-label={ariaLabel}
-    >
-      {buttonContent}
-    </button>
-  );
+  return <ButtonComponent className={className || ""} />;
 };

src/components/slideshow/Controls.tsx

@@ -1,5 +1,5 @@
 import { faXmark, faDownload } from "@fortawesome/free-solid-svg-icons";
-import styles from "@styles/Slideshow.module.css";
+import styles from "@styles/components/slideshow/Controls.module.css";
 import { Button } from "@components/common/Button";
 
 interface ControlsProps {

src/components/slideshow/FullscreenImage.tsx

@@ -1,5 +1,5 @@
-import styles from "@styles/Slideshow.module.css";
-import animations from "@styles/animations.module.css";
+import styles from "@styles/components/slideshow/FullscreenImage.module.css";
+import { cn } from "@utils/classNames";
 import type { SlideImage } from "@types";
 
 interface FullscreenImageProps {
@@ -19,22 +19,16 @@ export const FullscreenImage: React.FC<FullscreenImageProps> = ({
   onImageError,
   onClick,
 }) => (
-  <div
-    className={`${styles.slide} ${animations.fadeIn}`}
-    style={{ display: isVisible ? "block" : "none" }}
-  >
+  <div className={cn(styles.slide, styles.fadeIn, !isVisible && styles.hidden)}>
     <div
-      className={styles.imageWrapper}
-      style={{
-        transform: `scale(${scale})`,
-        cursor: isFullscreen ? "zoom-in" : "pointer",
-      }}
+      className={cn(styles.imageWrapper, isFullscreen && styles.fullscreen)}
+      style={{ transform: `scale(${scale})` }}
       onClick={onClick}
     >
       <img
         src={image.url}
         alt={image.alt}
-        className={styles.mainImage}
+        className={cn(styles.mainImage)}
         onError={() => onImageError(image.id)}
         onLoad={(e) => e.currentTarget.classList.add(styles.loaded)}
       />

src/components/slideshow/Loading.tsx

@@ -1,4 +1,4 @@
-import styles from "@styles/Slideshow.module.css";
+import styles from "@styles/components/slideshow/Loading.module.css";
 
 export const Loading: React.FC = () => (
   <div className={styles.loading}>Loading images...</div>

src/components/slideshow/Slideshow.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from "react";
 import { preloadImages } from "@utils/imagePreloader";
 import { useSlideshow } from "@hooks/useSlideshow";
-import styles from "@styles/Slideshow.module.css";
+import styles from "@styles/components/slideshow/Slideshow.module.css";
 import type { SlideImage } from "@types";
 import { getImagePath } from "@config/images";
 import { Controls } from "@components/slideshow/Controls";

src/components/slideshow/Thumbnails.tsx

@@ -1,4 +1,4 @@
-import styles from "@styles/Slideshow.module.css";
+import styles from "@styles/components/slideshow/Thumbnails.module.css";
 import type { SlideImage } from "@types";
 
 interface ThumbnailsProps {

src/styles/common/base.css

@@ -0,0 +1,23 @@
+.noInteraction {
+  touch-action: none;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-user-select: none;
+  user-select: none;
+  overscroll-behavior: none;
+}
+
+.image-base {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.button-base {
+  background: var(--color-overlay);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: var(--transition-default);
+}

src/styles/common/global.css

@@ -0,0 +1,20 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background-color: #000;
+  overscroll-behavior-y: none;
+  overflow: hidden;
+}
+
+img {
+  -webkit-user-drag: none;
+  user-select: none;
+}

src/styles/common/variables.css

@@ -0,0 +1,11 @@
+:root {
+  --primary-color: #717171;
+  --secondary-color: #bbb;
+  --background-dark: rgba(0, 0, 0, 0.5);
+  --background-darker: rgba(0, 0, 0, 0.8);
+  --transition-default: all 0.3s ease;
+  --border-radius-sm: 4px;
+  --border-radius-lg: 20px;
+  --spacing-sm: 10px;
+  --spacing-md: 20px;
+}

src/styles/components/Button.module.css

@@ -0,0 +1,50 @@
+.button {
+  composes: button-base from "/src/styles/common/base.css";
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--button-size, 40px);
+  height: var(--button-size, 40px);
+  padding: 0;
+  color: var(--color-text);
+}
+
+.button:hover {
+  opacity: 1;
+  background: var(--color-overlay-dark);
+}
+
+.icon {
+  width: calc(var(--button-size, 40px) * 0.5);
+  height: calc(var(--button-size, 40px) * 0.5);
+}
+
+/* Variants */
+.close,
+.download {
+  --button-size: 40px;
+}
+
+.github {
+  background: none;
+}
+
+.link {
+  text-decoration: none;
+  position: fixed;
+  top: var(--spacing-md);
+  right: var(--spacing-md);
+  z-index: var(--z-controls);
+}
+
+/* Media Queries */
+@media (max-width: var(--mobile-width)) {
+  .button {
+    --button-size: 35px;
+  }
+
+  .link {
+    top: var(--spacing-sm);
+    right: var(--spacing-sm);
+  }
+}