🔧 Modern responsive website for Base48 hackerspace in Brno, Czech Republic

Base48 is a community-driven hackerspace and maker workshop located in Brno, Czech Republic. This website serves as the digital front door to our physical space, showcasing our facilities, community, and mission to provide a collaborative environment for DIY projects, electronics, 3D printing, and knowledge sharing.

• Retro-futuristic aesthetic with CRT monitor frames and pixel art elements
• Responsive design that works seamlessly on desktop, tablet, and mobile
• Dark/Light theme toggle for optimal viewing experience
• Smooth animations and hover effects for enhanced interactivity
• Accessibility-focused with proper ARIA labels and semantic HTML
• One hand usable all actions are reachable single-handedly

• Interactive visual features that make people remember our website
• Animated satellite sprite with clickable Easter egg explaining the "48" origin
• Interactive photo galleries with lightbox functionality
• CRT-style frame displays showcasing different areas of the hackerspace
• Smooth scrolling navigation between sections
• Status indicator showing current Base48 location status
• Hamburger menu for mobile navigation

• CSS Grid & Flexbox for responsive layouts
• CSS Custom Properties for consistent theming
• Vanilla JavaScript for lightweight interactivity
• WebP images for optimized loading

• HTML5 - Semantic markup with accessibility features
• CSS3 - Modern styling with CSS Grid, Flexbox, and custom properties
• Vanilla JavaScript - Lightweight, dependency-free interactions
• WebP Images - Modern image format for optimal performance
• Font Awesome - Icon library for consistent iconography
• No Build - Or advanced optimisation for sake of transparency
• Hosting (server) directives - Not included in this repository

├── index.html             # Main HTML file
├── api/                   # Cached HA API JSON responses
│   ├── base_status.json    # Base status indicator provided by HA.
├── css/                   # Stylesheets
│   ├── main.css            # Main CSS imports
│   ├── variables.css       # CSS custom properties
│   ├── base.css            # Base styles and resets
│   ├── layout.css          # Layout and grid systems
│   ├── components.css      # Reusable component styles
│   ├── responsive.css      # Media queries and responsive design
│   ├── animations.css      # CSS animations and transitions
│   ├── buttons.css         # Button component styles
│   ├── lightbox.css        # Image lightbox functionality
│   ├── crt-effect.css      # Retro CRT monitor effects
│   ├── satellite.css       # Animated satellite sprite
│   ├── fonts.css           # Font declarations
│   └── utilities.css       # Utility classes
├── js/                    # JavaScript files
│   └── main.js             # Main JavaScript functionality
├── img/                   # Images and assets
│   ├── logo/               # Base48 logos
│   ├── gallery/            # Photo gallery images
│   ├── screen/             # CRT screen content images
│   ├── frame/              # CRT frame images
│   └── og/                 # Open Graph images
└── vendor/                # Third-party assets
    └── fa/                 # Font Awesome icons

• A modern web browser
• Local web server (optional, for development)

1. Clone the repository

   git clone https://github.com/Thebys/base48.git
   cd base48

2. Open in browser Open index.html directly.

• Mobile-first approach
• Flexible grid systems
• Adaptive typography and spacing
• Touch-friendly interactive elements

• Optimized WebP images with fallbacks
• Efficient CSS organization
• Minimal JavaScript footprint
• Lazy loading for gallery images

We welcome contributions to improve the website! Please:

1. Submit a pull request

• Follow existing code style and organization
• Maintain accessibility standards
• Test responsive design on multiple devices
• Optimize images before adding to the repository
• Document any new features or changes

©left Base48, z.s. Some rights reserved.

Made with ❤️ by the Base48 community

prepared by Tomáš "Thebys" Biheler