init
This commit is contained in:
@@ -0,0 +1,409 @@
|
||||
/*
|
||||
* SewJoy Theme - Main Stylesheet
|
||||
* Simple reset and base layout
|
||||
*/
|
||||
|
||||
/* ============================================
|
||||
Global Reset
|
||||
============================================ */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
|
||||
margin: 0 0 1em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #d63384;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: #ad1457;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Site Layout
|
||||
============================================ */
|
||||
#page {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#content {
|
||||
flex: 1;
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Site Header
|
||||
============================================ */
|
||||
.site-header {
|
||||
padding: 30px 0 20px;
|
||||
border-bottom: 2px solid #f1f1f1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-branding .site-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 2.25rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.site-branding .site-title a {
|
||||
color: #222;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.site-branding .site-title a:hover {
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.site-description {
|
||||
margin: 0;
|
||||
color: #777;
|
||||
font-style: italic;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Navigation Menu
|
||||
============================================ */
|
||||
.main-navigation {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.main-navigation ul#primary-menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.main-navigation ul#primary-menu li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.main-navigation ul#primary-menu li a {
|
||||
display: inline-block;
|
||||
padding: 8px 16px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
.main-navigation ul#primary-menu li a:hover,
|
||||
.main-navigation ul#primary-menu li.current-menu-item a {
|
||||
background-color: #d63384;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Main Content Area
|
||||
============================================ */
|
||||
.site-main {
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.site-main article {
|
||||
margin-bottom: 40px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.site-main article:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.entry-header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.entry-title a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entry-title a:hover {
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
color: #888;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.entry-content,
|
||||
.entry-summary {
|
||||
font-size: 1rem;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.entry-content p,
|
||||
.entry-summary p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Archive Page Header
|
||||
============================================ */
|
||||
.page-header {
|
||||
margin-bottom: 30px;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 2px solid #f1f1f1;
|
||||
}
|
||||
|
||||
.page-header .page-title {
|
||||
margin: 0;
|
||||
font-size: 1.75rem;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.archive-description {
|
||||
margin-top: 10px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
404 Page
|
||||
============================================ */
|
||||
.error-404 .page-title {
|
||||
font-size: 2rem;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.error-404 .page-content {
|
||||
background-color: #fef5f9;
|
||||
padding: 20px;
|
||||
border-left: 4px solid #d63384;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Sidebar / Widget Area
|
||||
============================================ */
|
||||
.widget-area {
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.widget-area .widget {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.widget-area .widget-title {
|
||||
margin: 0 0 15px;
|
||||
font-size: 1.125rem;
|
||||
color: #222;
|
||||
border-bottom: 1px solid #ddd;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Site Footer
|
||||
============================================ */
|
||||
.site-footer {
|
||||
padding: 20px 0;
|
||||
border-top: 1px solid #eee;
|
||||
text-align: center;
|
||||
color: #777;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.site-footer .site-info p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Page Builder / Customizer
|
||||
============================================ */
|
||||
.builder {
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.builder__title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 1.875rem;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.builder__subtitle {
|
||||
color: #666;
|
||||
margin: 0 0 25px;
|
||||
}
|
||||
|
||||
.builder__components {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.builder-component {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 6px;
|
||||
padding: 15px 20px;
|
||||
margin: 0;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.builder-component__title {
|
||||
font-weight: 600;
|
||||
color: #222;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.builder-component__options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.builder-option {
|
||||
flex: 1 1 auto;
|
||||
min-width: 90px;
|
||||
padding: 10px 18px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
color: #333;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.builder-option:hover {
|
||||
border-color: #d63384;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.builder-option.selected,
|
||||
.builder-option.selected:hover {
|
||||
background-color: #d63384;
|
||||
border-color: #d63384;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.builder__summary {
|
||||
margin: 25px 0;
|
||||
padding: 18px 20px;
|
||||
background-color: #fef5f9;
|
||||
border-left: 4px solid #d63384;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.builder__summary-title {
|
||||
margin: 0 0 10px;
|
||||
font-size: 1.125rem;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.builder__summary-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.builder__summary-list li {
|
||||
padding: 4px 0;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.builder__summary-value {
|
||||
font-weight: 600;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
.builder__actions {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.builder__add-to-cart {
|
||||
padding: 12px 32px;
|
||||
background-color: #d63384;
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.builder__add-to-cart:hover {
|
||||
background-color: #ad1457;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
Responsive
|
||||
============================================ */
|
||||
@media screen and (max-width: 600px) {
|
||||
.site-branding .site-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.entry-title {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.main-navigation ul#primary-menu {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
/*
|
||||
* SewJoy Theme - Page Builder / Customizer Interaction
|
||||
*/
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
$(function () {
|
||||
var $builder = $('.builder');
|
||||
if (!$builder.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle option button clicks.
|
||||
$builder.on('click', '.builder-option', function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
var $button = $(this);
|
||||
var component = $button.data('component');
|
||||
var option = $button.data('option');
|
||||
|
||||
if (!component || !option) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Deselect siblings within the same component group.
|
||||
$builder
|
||||
.find('.builder-component[data-component="' + component + '"] .builder-option')
|
||||
.removeClass('selected');
|
||||
|
||||
// Mark the clicked button as selected.
|
||||
$button.addClass('selected');
|
||||
|
||||
// Update the corresponding summary entry.
|
||||
var $summaryValue = $('#summary-' + component + ' .builder__summary-value');
|
||||
if ($summaryValue.length) {
|
||||
$summaryValue.text(option);
|
||||
}
|
||||
});
|
||||
|
||||
// Optional: Add-to-cart button placeholder behavior.
|
||||
$builder.on('click', '.builder__add-to-cart', function () {
|
||||
var selections = {};
|
||||
$builder.find('.builder-option.selected').each(function () {
|
||||
var $btn = $(this);
|
||||
selections[$btn.data('component')] = $btn.data('option');
|
||||
});
|
||||
|
||||
if (Object.keys(selections).length === 0) {
|
||||
console.warn('SEWJOY THEME: 请先选择组件选项');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('SEWJOY THEME: 加入购物车', selections);
|
||||
});
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,28 @@
|
||||
/*
|
||||
* SewJoy Theme - Main JavaScript
|
||||
*/
|
||||
(function ($) {
|
||||
'use strict';
|
||||
|
||||
// Log on load
|
||||
console.log('SEWJOY THEME 已加载');
|
||||
|
||||
// Document-ready functionality
|
||||
$(function () {
|
||||
// Smooth scroll for in-page anchors
|
||||
$('a[href*="#"]:not([href="#"])').on('click', function (event) {
|
||||
var target = $(this.getAttribute('href'));
|
||||
if (target.length) {
|
||||
event.preventDefault();
|
||||
$('html, body').animate({
|
||||
scrollTop: target.offset().top - 60
|
||||
}, 600);
|
||||
}
|
||||
});
|
||||
|
||||
// Highlight current menu item visually
|
||||
$('.main-navigation li.current-menu-item, .main-navigation li.current_page_item')
|
||||
.addClass('active');
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
Reference in New Issue
Block a user