From efa870f1fd372812d6b0d0ad76a27fd949c282ab Mon Sep 17 00:00:00 2001 From: Yaosanqi137 Date: Thu, 5 Feb 2026 21:54:18 +0800 Subject: [PATCH] =?UTF-8?q?=E7=AE=80=E5=8D=95=E7=BE=8E=E5=8C=96=E4=BA=86?= =?UTF-8?q?=E4=B8=80=E4=B8=8Bfooter=E3=80=81header=E7=9A=84=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- assets/css/main.css | 84 +++++++++++++++++++++++++-------------- assets/js/theme-toggle.js | 12 ++++++ footer.php | 13 ------ functions.php | 2 + header.php | 68 +++++++++++++++++++++++++++---- index.php | 6 +-- resources/head_logo.svg | 6 +-- style.css | 4 ++ 8 files changed, 139 insertions(+), 56 deletions(-) diff --git a/assets/css/main.css b/assets/css/main.css index 25be697..c2a3dd5 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,17 +1,25 @@ .site-header { background-color: var(--header-bg); border-bottom: 1px solid var(--border-color); - position: sticky; + position: absolute; top: 0; + left: 0; + right: 0; z-index: 1000; transition: background-color var(--transition-speed), border-color var(--transition-speed); } +.site-header .container { + max-width: 100%; + padding: 0 40px; +} + .header-content { display: flex; justify-content: space-between; align-items: center; - padding: 1rem 0; + padding: 0.75rem 0; + width: 100%; } .logo-container { @@ -20,14 +28,10 @@ gap: 1rem; } -.logo-it { - height: 40px; - width: auto; -} - -.logo-ouc { - height: 36px; +.logo-main { + height: 60px; width: auto; + color: var(--text-color); } .main-navigation { @@ -61,7 +65,8 @@ } .social-links a, -.theme-toggle { +.theme-toggle, +.lang-toggle { display: flex; align-items: center; justify-content: center; @@ -75,13 +80,21 @@ transition: background-color var(--transition-speed), color var(--transition-speed); } +.lang-toggle { + width: 40px; + font-weight: 600; + font-size: 14px; +} + .social-links a:hover, -.theme-toggle:hover { +.theme-toggle:hover, +.lang-toggle:hover { background-color: var(--gray-200); } [data-theme="dark"] .social-links a:hover, -[data-theme="dark"] .theme-toggle:hover { +[data-theme="dark"] .theme-toggle:hover, +[data-theme="dark"] .lang-toggle:hover { background-color: var(--gray-700); } @@ -155,10 +168,22 @@ color: var(--text-color); } -.subtitle { - font-size: 0.875rem; - color: var(--gray-500); - margin-left: 0.5rem; +body[lang="en"] .nav-menu a::before, +body[lang="en"] h2[data-en]::before { + content: attr(data-en); +} + +body:not([lang="en"]) .nav-menu a::before, +body:not([lang="en"]) h2[data-cn]::before { + content: attr(data-cn); +} + +.nav-menu a { + font-size: 0; +} + +.nav-menu a::before { + font-size: 1rem; } .post-list { @@ -194,6 +219,13 @@ color: var(--gray-500); } +.site-main { + background-color: var(--bg-color); + flex: 1; + min-height: calc(100vh - 100px); + padding-top: 70px; +} + .site-footer { background-color: var(--footer-bg); border-top: 1px solid var(--border-color); @@ -203,7 +235,7 @@ .footer-content { display: grid; - grid-template-columns: repeat(4, 1fr); + grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-bottom: 2rem; } @@ -227,12 +259,6 @@ font-size: 0.9rem; } -.footer-slogan { - font-style: italic; - color: var(--accent-color); - font-weight: 500; -} - .footer-bottom { text-align: center; padding-top: 2rem; @@ -263,6 +289,10 @@ display: flex; } + .site-header .container { + padding: 0 20px; + } + .main-navigation { position: relative; } @@ -304,12 +334,8 @@ } @media (max-width: 480px) { - .logo-it { - height: 32px; - } - - .logo-ouc { - height: 28px; + .logo-main { + height: 50px; } .hero-content h1 { diff --git a/assets/js/theme-toggle.js b/assets/js/theme-toggle.js index 1769624..136e11a 100644 --- a/assets/js/theme-toggle.js +++ b/assets/js/theme-toggle.js @@ -1,6 +1,13 @@ const themeToggle = document.querySelector('.theme-toggle'); const html = document.documentElement; +function updateLogoColor(theme) { + const logoText = document.querySelector('#logo-text-cn'); + if (logoText) { + logoText.setAttribute('fill', theme === 'dark' ? '#ffffff' : '#000000'); + } +} + function getPreferredTheme() { const savedTheme = localStorage.getItem('theme'); if (savedTheme) { @@ -14,6 +21,7 @@ function getPreferredTheme() { function setTheme(theme) { html.setAttribute('data-theme', theme); localStorage.setItem('theme', theme); + updateLogoColor(theme); } const initialTheme = getPreferredTheme(); @@ -33,3 +41,7 @@ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) setTheme(newTheme); } }); + +window.addEventListener('load', () => { + updateLogoColor(html.getAttribute('data-theme') || getPreferredTheme()); +}); diff --git a/footer.php b/footer.php index 1eaa67e..503556a 100644 --- a/footer.php +++ b/footer.php @@ -9,14 +9,6 @@ -
-

- -
-

- -
-

-

-
diff --git a/functions.php b/functions.php index d9926b4..636a9c9 100644 --- a/functions.php +++ b/functions.php @@ -25,6 +25,8 @@ function itstudio_enqueue_scripts() { wp_enqueue_style('itstudio-main', get_template_directory_uri() . '/assets/css/main.css', array(), '1.0.0'); wp_enqueue_script('itstudio-theme-toggle', get_template_directory_uri() . '/assets/js/theme-toggle.js', array(), '1.0.0', true); + wp_enqueue_script('itstudio-lang-toggle', get_template_directory_uri() . '/assets/js/lang-toggle.js', array(), '1.0.0', true); + wp_enqueue_script('itstudio-footer-slide', get_template_directory_uri() . '/assets/js/footer-slide.js', array(), '1.0.0', true); wp_enqueue_script('itstudio-main', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true); } add_action('wp_enqueue_scripts', 'itstudio_enqueue_scripts'); diff --git a/header.php b/header.php index fde5a3b..5c2d15f 100644 --- a/header.php +++ b/header.php @@ -13,8 +13,57 @@
- IT Studio Logo - OUC Logo + + + + + + + + + + + + + + + + + + + + + + 爱特工作室 + IT Studio + +
@@ -26,15 +75,18 @@
    -
    • -
    • -
    • -
    • -
    • -
    • +
    • +
    • +
    • +
    • +
    • +