Initial commit: Teilzeitladen WordPress Theme
- Custom Theme mit WooCommerce Support - Responsive Design - Notice Banner (Admin-gesteuert) - Google Fonts Integration - Platz für Unikate-Präsentation Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Christoph Emsenhuber
49
.gitignore
vendored
Normal file
49
.gitignore
vendored
Normal file
@@ -0,0 +1,49 @@
|
||||
# WordPress Core (wird nicht benötigt)
|
||||
/wp-admin/
|
||||
/wp-content/uploads/
|
||||
/wp-includes/
|
||||
/wp-*.php
|
||||
/index.php
|
||||
/license.txt
|
||||
/readme.html
|
||||
/xmlrpc.php
|
||||
|
||||
# Config mit Secrets
|
||||
wp-config.php
|
||||
|
||||
# Logs
|
||||
*.log
|
||||
error_log
|
||||
access_log
|
||||
|
||||
# OS Files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# IDE
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
|
||||
# Dependencies
|
||||
node_modules/
|
||||
vendor/
|
||||
|
||||
# Uploads (wir nutzen diese nicht im Repo)
|
||||
wp-content/uploads/*
|
||||
|
||||
# Cache
|
||||
wp-content/cache/*
|
||||
wp-content/upgrade/
|
||||
wp-content/backup-db/
|
||||
wp-content/advanced-cache.php
|
||||
wp-content/wp-cache-config.php
|
||||
|
||||
# Plugins (werden separat gemanagt)
|
||||
wp-content/plugins/*
|
||||
!wp-content/plugins/custom/
|
||||
|
||||
# Themes (nur unser Theme)
|
||||
wp-content/themes/*
|
||||
!wp-content/themes/teilzeitladen-theme/
|
||||
48
README.md
Normal file
48
README.md
Normal file
@@ -0,0 +1,48 @@
|
||||
# Teilzeitladen Webshop
|
||||
|
||||
Handgemachte Unikate - Blumentexte mit coolen Sprüchen und Figuren aus Bastelbeton.
|
||||
|
||||
## 🎨 Projekt
|
||||
|
||||
- **URL**: https://my.teilzeitladen.xyz
|
||||
- **Stack**: WordPress + WooCommerce + Billbee
|
||||
- **Hosting**: Hostinger
|
||||
- **Git**: Gitea (christoph/teilzeitladen-webshop)
|
||||
|
||||
## 📁 Struktur
|
||||
|
||||
```
|
||||
wp-content/themes/teilzeitladen-theme/
|
||||
├── style.css # Theme Styles
|
||||
├── functions.php # Theme Functions
|
||||
├── index.php # Blog-Übersicht
|
||||
├── header.php # Header Template
|
||||
├── footer.php # Footer Template
|
||||
├── css/ # Zusätzliche CSS
|
||||
├── js/ # JavaScript
|
||||
├── img/ # Theme-Bilder
|
||||
└── template-parts/ # Template-Teile
|
||||
```
|
||||
|
||||
## 🚀 Deployment
|
||||
|
||||
1. Änderungen entwickeln
|
||||
2. `git commit -am "Beschreibung"`
|
||||
3. `git push origin main`
|
||||
4. Auf Hostinger via FTP oder Git-Deploy
|
||||
|
||||
## 🎨 Theme Features
|
||||
|
||||
- Responsive Design
|
||||
- WooCommerce Integration
|
||||
- Custom Notice Banner (Admin-gesteuert)
|
||||
- Google Fonts (Playfair Display + Open Sans)
|
||||
- SEO-optimiert
|
||||
|
||||
## 📋 Todo
|
||||
|
||||
- [ ] Frontpage Template erstellen
|
||||
- [ ] WooCommerce Template Overrides
|
||||
- [ ] Produkte importieren
|
||||
- [ ] Bilder optimieren
|
||||
- [ ] SEO-Texte schreiben
|
||||
20
setup-gitea-repo.sh
Executable file
20
setup-gitea-repo.sh
Executable file
@@ -0,0 +1,20 @@
|
||||
#!/bin/bash
|
||||
# Gitea Repository Setup - Manuelle Schritte
|
||||
|
||||
echo "=== Gitea Repo 'teilzeitladen-webshop' erstellen ==="
|
||||
echo ""
|
||||
echo "1. Browser öffnen: http://10.40.41.149:3000/repo/create"
|
||||
echo ""
|
||||
echo "2. Formular ausfüllen:"
|
||||
echo " - Repository Name: teilzeitladen-webshop"
|
||||
echo " - Description: WordPress Theme und Custom Code"
|
||||
echo " - Visibility: Public"
|
||||
echo " - README: ✅ initialisieren"
|
||||
echo " - .gitignore: WordPress"
|
||||
echo ""
|
||||
echo "3. Lokales Repo initialisieren:"
|
||||
echo " cd ~/homelab/teilzeitladen-webshop-dev"
|
||||
echo " git remote add origin http://10.40.41.149:3000/christoph/teilzeitladen-webshop.git"
|
||||
echo " git add ."
|
||||
echo " git commit -m 'Initial commit'"
|
||||
echo " git push -u origin main"
|
||||
19
setup-wordpress.sh
Executable file
19
setup-wordpress.sh
Executable file
@@ -0,0 +1,19 @@
|
||||
#!/bin/bash
|
||||
# WordPress Setup für Teilzeitladen
|
||||
# Ausführen auf Hostinger via SSH
|
||||
|
||||
echo "=== WordPress Installation auf my.teilzeitladen.xyz ==="
|
||||
echo ""
|
||||
echo "Dieses Skript muss auf dem Hostinger-Server ausgeführt werden:"
|
||||
echo "ssh u250441928@premium188.web-hosting.com"
|
||||
echo ""
|
||||
echo "ODER via Hostinger hPanel:"
|
||||
echo "1. https://hpanel.hostinger.com"
|
||||
echo "2. Websites → Auto-Installer"
|
||||
echo "3. WordPress auswählen"
|
||||
echo "4. Domain: my.teilzeitladen.xyz"
|
||||
echo ""
|
||||
echo "Nach Installation:"
|
||||
echo "- Admin URL: https://my.teilzeitladen.xyz/wp-admin"
|
||||
echo "- Plugins installieren: WooCommerce"
|
||||
echo "- Theme: Custom Theme aus Gitea-Repo"
|
||||
55
wp-content/themes/teilzeitladen-theme/footer.php
Normal file
55
wp-content/themes/teilzeitladen-theme/footer.php
Normal file
@@ -0,0 +1,55 @@
|
||||
<?php
|
||||
/**
|
||||
* The footer template
|
||||
*
|
||||
* @package Teilzeitladen
|
||||
*/
|
||||
|
||||
?\>
|
||||
|
||||
</footer> <!-- site-content -->
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-widgets">
|
||||
<div class="footer-widget">
|
||||
<h3><?php _e( 'Teilzeitladen', 'teilzeitladen' ); ?\></h3>
|
||||
<p>
|
||||
<?php _e( 'Handgemachte Unikate mit Liebe. Jedes Stück einzigartig.', 'teilzeitladen' ); ?\>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="footer-widget">
|
||||
<h3><?php _e( 'Kontakt', 'teilzeitladen' ); ?\></h3>
|
||||
<?php if ( get_theme_mod( 'teilzeitladen_address' ) ) : ?\>
|
||||
<p><?php echo nl2br( esc_html( get_theme_mod( 'teilzeitladen_address' ) ) ); ?\></p>
|
||||
<?php endif; ?\>
|
||||
</div>
|
||||
|
||||
<div class="footer-widget">
|
||||
<h3><?php _e( 'Rechtliches', 'teilzeitladen' ); ?\></h3>
|
||||
<nav class="footer-navigation">
|
||||
<?php
|
||||
wp_nav_menu( array(
|
||||
'theme_location' => 'footer',
|
||||
'menu_id' => 'footer-menu',
|
||||
'container' => false,
|
||||
) );
|
||||
?\>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>
|
||||
<?php echo date( 'Y' ); ?\> <?php bloginfo( 'name' ); ?\> |
|
||||
<?php _e( 'Mit ❤️ handgemacht', 'teilzeitladen' ); ?\>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<?php wp_footer(); ?\>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
166
wp-content/themes/teilzeitladen-theme/functions.php
Normal file
166
wp-content/themes/teilzeitladen-theme/functions.php
Normal file
@@ -0,0 +1,166 @@
|
||||
<?php
|
||||
/**
|
||||
* Teilzeitladen Theme Functions
|
||||
*
|
||||
* @package Teilzeitladen
|
||||
*/
|
||||
|
||||
// Prevent direct access
|
||||
if ( ! defined( 'ABSPATH' ) ) {
|
||||
exit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Theme version
|
||||
*/
|
||||
define( 'TEILZEITLADEN_VERSION', '1.0.0' );
|
||||
|
||||
/**
|
||||
* Enqueue scripts and styles
|
||||
*/
|
||||
function teilzeitladen_scripts() {
|
||||
// Google Fonts
|
||||
wp_enqueue_style(
|
||||
'teilzeitladen-fonts',
|
||||
'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Playfair+Display:wght@400;600&display=swap',
|
||||
array(),
|
||||
null
|
||||
);
|
||||
|
||||
// Theme stylesheet
|
||||
wp_enqueue_style(
|
||||
'teilzeitladen-style',
|
||||
get_stylesheet_uri(),
|
||||
array(),
|
||||
TEILZEITLADEN_VERSION
|
||||
);
|
||||
|
||||
// Custom scripts
|
||||
wp_enqueue_script(
|
||||
'teilzeitladen-scripts',
|
||||
get_template_directory_uri() . '/js/main.js',
|
||||
array('jquery'),
|
||||
TEILZEITLADEN_VERSION,
|
||||
true
|
||||
);
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'teilzeitladen_scripts' );
|
||||
|
||||
/**
|
||||
* Theme setup
|
||||
*/
|
||||
function teilzeitladen_setup() {
|
||||
// Add theme support
|
||||
add_theme_support( 'title-tag' );
|
||||
add_theme_support( 'post-thumbnails' );
|
||||
add_theme_support( 'woocommerce' );
|
||||
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
|
||||
|
||||
// Register menus
|
||||
register_nav_menus( array(
|
||||
'primary' => __( 'Primary Menu', 'teilzeitladen' ),
|
||||
'footer' => __( 'Footer Menu', 'teilzeitladen' ),
|
||||
) );
|
||||
|
||||
// Image sizes
|
||||
add_image_size( 'product-card', 400, 400, true );
|
||||
add_image_size( 'hero', 1920, 600, true );
|
||||
}
|
||||
add_action( 'after_setup_theme', 'teilzeitladen_setup' );
|
||||
|
||||
/**
|
||||
* WooCommerce support
|
||||
*/
|
||||
function teilzeitladen_woocommerce_setup() {
|
||||
add_theme_support( 'woocommerce' );
|
||||
add_theme_support( 'wc-product-gallery-zoom' );
|
||||
add_theme_support( 'wc-product-gallery-lightbox' );
|
||||
add_theme_support( 'wc-product-gallery-slider' );
|
||||
}
|
||||
add_action( 'after_setup_theme', 'teilzeitladen_woocommerce_setup' );
|
||||
|
||||
/**
|
||||
* Custom excerpt length
|
||||
*/
|
||||
function teilzeitladen_excerpt_length( $length ) {
|
||||
return 20;
|
||||
}
|
||||
add_filter( 'excerpt_length', 'teilzeitladen_excerpt_length', 999 );
|
||||
|
||||
/**
|
||||
* Notice Banner (Admin controlled)
|
||||
*/
|
||||
function teilzeitladen_notice_banner() {
|
||||
$notice_text = get_theme_mod( 'teilzeitladen_notice_text', '' );
|
||||
$notice_link = get_theme_mod( 'teilzeitladen_notice_link', '' );
|
||||
$notice_enabled = get_theme_mod( 'teilzeitladen_notice_enabled', false );
|
||||
|
||||
if ( $notice_enabled && ! empty( $notice_text ) ) :
|
||||
?>
|
||||
<div class="notice-banner">
|
||||
<div class="container">
|
||||
<?php if ( ! empty( $notice_link ) ) : ?>
|
||||
<a href="<?php echo esc_url( $notice_link ); ?>"><?php echo esc_html( $notice_text ); ?></a>
|
||||
<?php else : ?>
|
||||
<?php echo esc_html( $notice_text ); ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
endif;
|
||||
}
|
||||
|
||||
/**
|
||||
* Customizer settings
|
||||
*/
|
||||
function teilzeitladen_customize_register( $wp_customize ) {
|
||||
// Notice Banner Section
|
||||
$wp_customize->add_section( 'teilzeitladen_notice', array(
|
||||
'title' => __( 'Notice Banner', 'teilzeitladen' ),
|
||||
'priority' => 30,
|
||||
) );
|
||||
|
||||
$wp_customize->add_setting( 'teilzeitladen_notice_enabled', array(
|
||||
'default' => false,
|
||||
'sanitize_callback' => 'wp_validate_boolean',
|
||||
) );
|
||||
|
||||
$wp_customize->add_control( 'teilzeitladen_notice_enabled', array(
|
||||
'label' => __( 'Enable Notice Banner', 'teilzeitladen' ),
|
||||
'section' => 'teilzeitladen_notice',
|
||||
'type' => 'checkbox',
|
||||
) );
|
||||
|
||||
$wp_customize->add_setting( 'teilzeitladen_notice_text', array(
|
||||
'default' => '',
|
||||
'sanitize_callback' => 'sanitize_text_field',
|
||||
) );
|
||||
|
||||
$wp_customize->add_control( 'teilzeitladen_notice_text', array(
|
||||
'label' => __( 'Notice Text', 'teilzeitladen' ),
|
||||
'section' => 'teilzeitladen_notice',
|
||||
'type' => 'text',
|
||||
) );
|
||||
|
||||
$wp_customize->add_setting( 'teilzeitladen_notice_link', array(
|
||||
'default' => '',
|
||||
'sanitize_callback' => 'esc_url_raw',
|
||||
) );
|
||||
|
||||
$wp_customize->add_control( 'teilzeitladen_notice_link', array(
|
||||
'label' => __( 'Notice Link (optional)', 'teilzeitladen' ),
|
||||
'section' => 'teilzeitladen_notice',
|
||||
'type' => 'url',
|
||||
) );
|
||||
}
|
||||
add_action( 'customize_register', 'teilzeitladen_customize_register' );
|
||||
|
||||
/**
|
||||
* Disable admin bar for non-admins
|
||||
*/
|
||||
function teilzeitladen_disable_admin_bar() {
|
||||
if ( ! current_user_can( 'administrator' ) && ! is_admin() ) {
|
||||
show_admin_bar( false );
|
||||
}
|
||||
}
|
||||
add_action( 'after_setup_theme', 'teilzeitladen_disable_admin_bar' );
|
||||
65
wp-content/themes/teilzeitladen-theme/header.php
Normal file
65
wp-content/themes/teilzeitladen-theme/header.php
Normal file
@@ -0,0 +1,65 @@
|
||||
<?php
|
||||
/**
|
||||
* The header template
|
||||
*
|
||||
* @package Teilzeitladen
|
||||
*/
|
||||
|
||||
?\>
|
||||
<!DOCTYPE html>
|
||||
<html <?php language_attributes(); ?\>>
|
||||
<head>
|
||||
<meta charset="<?php bloginfo( 'charset' ); ?\>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<?php wp_head(); ?\>
|
||||
</head>
|
||||
|
||||
<body <?php body_class(); ?\>>
|
||||
<?php wp_body_open(); ?\>
|
||||
|
||||
<?php teilzeitladen_notice_banner(); ?\>
|
||||
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<div class="site-branding">
|
||||
<?php if ( has_custom_logo() ) : ?\>
|
||||
<?php the_custom_logo(); ?\>
|
||||
<?php else : ?\>
|
||||
<h1 class="site-title">
|
||||
<a href="<?php echo esc_url( home_url( '/' ) ); ?\>">
|
||||
<?php bloginfo( 'name' ); ?\>
|
||||
</a>
|
||||
</h1>
|
||||
<?php if ( get_bloginfo( 'description' ) ) : ?\>
|
||||
<p class="site-description">
|
||||
<?php bloginfo( 'description' ); ?\>
|
||||
</p>
|
||||
<?php endif; ?\>
|
||||
<?php endif; ?\>
|
||||
</div>
|
||||
|
||||
<nav class="main-navigation">
|
||||
<?php
|
||||
wp_nav_menu( array(
|
||||
'theme_location' => 'primary',
|
||||
'menu_id' => 'primary-menu',
|
||||
'container' => false,
|
||||
'fallback_cb' => false,
|
||||
) );
|
||||
?\>
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<?php if ( class_exists( 'WooCommerce' ) ) : ?\>
|
||||
<a href="<?php echo esc_url( wc_get_cart_url() ); ?\>" class="cart-link">
|
||||
<span class="cart-icon">🛒</span>
|
||||
<span class="cart-count">
|
||||
<?php echo WC()->cart->get_cart_contents_count(); ?\>
|
||||
</span>
|
||||
</a>
|
||||
<?php endif; ?\>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="content" class="site-content">
|
||||
60
wp-content/themes/teilzeitladen-theme/index.php
Normal file
60
wp-content/themes/teilzeitladen-theme/index.php
Normal file
@@ -0,0 +1,60 @@
|
||||
<?php
|
||||
/**
|
||||
* The main template file
|
||||
*
|
||||
* @package Teilzeitladen
|
||||
*/
|
||||
|
||||
get_header();
|
||||
?>
|
||||
|
||||
<main id="primary" class="site-main">
|
||||
<div class="container">
|
||||
|
||||
<?php if ( is_home() && ! is_front_page() ) : ?>
|
||||
<header class="page-header">
|
||||
<h1 class="page-title"><?php single_post_title(); ?></h1>
|
||||
</header>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( have_posts() ) : ?>
|
||||
<div class="posts-grid">
|
||||
<?php while ( have_posts() ) : the_post(); ?>
|
||||
<article id="post-<?php the_ID(); ?>" <?php post_class( 'post-card' ); ?>>
|
||||
<?php if ( has_post_thumbnail() ) : ?>
|
||||
<a href="<?php the_permalink(); ?>" class="post-thumbnail">
|
||||
<?php the_post_thumbnail( 'product-card' ); ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<div class="post-content">
|
||||
<h2 class="entry-title">
|
||||
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
|
||||
</h2>
|
||||
|
||||
<div class="entry-meta">
|
||||
<?php echo get_the_date(); ?>
|
||||
</div>
|
||||
|
||||
<div class="entry-excerpt">
|
||||
<?php the_excerpt(); ?>
|
||||
</div>
|
||||
|
||||
<a href="<?php the_permalink(); ?>" class="btn">
|
||||
<?php _e( 'Weiterlesen', 'teilzeitladen' ); ?>
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<?php endwhile; ?>
|
||||
</div>
|
||||
|
||||
<?php the_posts_navigation(); ?>
|
||||
|
||||
<?php else : ?
|
||||
<p><?php _e( 'Keine Beiträge gefunden.', 'teilzeitladen' ); ?></p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<?php get_footer(); ?>
|
||||
2
wp-content/themes/teilzeitladen-theme/screenshot.png
Normal file
2
wp-content/themes/teilzeitladen-theme/screenshot.png
Normal file
@@ -0,0 +1,2 @@
|
||||
# Platzhalter - echtes Screenshot erstellen nach Installation
|
||||
# Empfohlene Größe: 1200x900px
|
||||
227
wp-content/themes/teilzeitladen-theme/style.css
Normal file
227
wp-content/themes/teilzeitladen-theme/style.css
Normal file
@@ -0,0 +1,227 @@
|
||||
/*
|
||||
Theme Name: Teilzeitladen
|
||||
Theme URI: https://my.teilzeitladen.xyz
|
||||
Author: Christoph Emsenhuber
|
||||
Author URI: https://emsenhuber.net
|
||||
Description: Custom Theme für Teilzeitladen - Unikate aus Blumentexten und Bastelbeton
|
||||
Version: 1.0.0
|
||||
License: GPL v2
|
||||
License URI: https://www.gnu.org/licenses/gpl-2.0.html
|
||||
Text Domain: teilzeitladen
|
||||
Tags: e-commerce, woocommerce, custom, handmade, unique
|
||||
|
||||
Teilzeitladen WordPress Theme © 2026 Christoph Emsenhuber
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
Teilzeitladen - Custom Styles
|
||||
======================================== */
|
||||
|
||||
:root {
|
||||
--primary-color: #8B7355;
|
||||
--secondary-color: #D4C5B9;
|
||||
--accent-color: #E07B39;
|
||||
--text-color: #3C3633;
|
||||
--bg-color: #FDF8F3;
|
||||
--font-heading: 'Playfair Display', Georgia, serif;
|
||||
--font-body: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
color: var(--text-color);
|
||||
background-color: var(--bg-color);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.site-header {
|
||||
background: linear-gradient(135deg, var(--bg-color) 0%, var(--secondary-color) 100%);
|
||||
padding: 1rem 0;
|
||||
border-bottom: 3px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-description {
|
||||
color: var(--text-color);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.main-navigation {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.main-navigation a {
|
||||
color: #fff;
|
||||
padding: 1rem 1.5rem;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.main-navigation a:hover {
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Hero Banner */
|
||||
.hero-banner {
|
||||
background: linear-gradient(rgba(139, 115, 85, 0.7), rgba(139, 115, 85, 0.7)),
|
||||
url('assets/images/hero-bg.jpg') center/cover;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 6rem 2rem;
|
||||
}
|
||||
|
||||
.hero-banner h1 {
|
||||
color: #fff;
|
||||
font-size: 3.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.hero-banner .tagline {
|
||||
font-size: 1.5rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Product Grid */
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
padding: 3rem 0;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 25px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.product-card img {
|
||||
width: 100%;
|
||||
height: 280px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.product-card .product-info {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.product-card h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.product-card .price {
|
||||
color: var(--accent-color);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.product-card .unique-badge {
|
||||
display: inline-block;
|
||||
background-color: var(--accent-color);
|
||||
color: #fff;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 2rem;
|
||||
background-color: var(--accent-color);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.site-footer {
|
||||
background-color: var(--primary-color);
|
||||
color: #fff;
|
||||
padding: 3rem 0 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-footer a {
|
||||
color: var(--secondary-color);
|
||||
}
|
||||
|
||||
/* WooCommerce Customizations */
|
||||
.woocommerce .products .product {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.woocommerce .products .product h2 {
|
||||
font-family: var(--font-heading);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.woocommerce .price {
|
||||
color: var(--accent-color) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Notice Banner */
|
||||
.notice-banner {
|
||||
background-color: var(--accent-color);
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.notice-banner a {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.site-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.hero-banner h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-banner .tagline {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user