ITStudio_OUC/ITStudioMainSite
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

简单美化了一下footer、header的样式

Browse Source
This commit is contained in:
古宇恒
2026-02-05 21:54:18 +08:00
parent 2ceb3cc86a
commit efa870f1fd
8 changed files with 139 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/main.css
+55 -29
View File
@@ -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 {
assets/js/theme-toggle.js
+12
View File
@@ -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());
});
footer.php
-13
View File
@@ -9,14 +9,6 @@
</ul>
</div>
<div class="footer-section">
<h3><?php _e('加入我们', 'itstudio'); ?></h3>
<ul class="footer-links">
<li><a href="<?php echo esc_url(home_url('/join')); ?>"><?php _e('招新信息', 'itstudio'); ?></a></li>
<li><a href="<?php echo esc_url(home_url('/about')); ?>"><?php _e('了解工作室', 'itstudio'); ?></a></li>
</ul>
</div>
<div class="footer-section">
<h3><?php _e('联系我们', 'itstudio'); ?></h3>
<ul class="footer-links">
@@ -24,11 +16,6 @@
<li><a href="https://github.com/itstudio-2002" target="_blank" rel="noopener">GitHub</a></li>
</ul>
</div>
<div class="footer-section">
<h3><?php _e('关于', 'itstudio'); ?></h3>
<p class="footer-slogan"><?php _e('发现人才，培养人才，输送人才', 'itstudio'); ?></p>
</div>
</div>
<div class="footer-bottom">
functions.php
+2
View File
@@ -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');
header.php
+60 -8
View File
@@ -13,8 +13,57 @@
<div class="header-content">
<div class="logo-container">
<a href="<?php echo esc_url(home_url('/')); ?>" class="logo-link">
<img src="<?php echo get_template_directory_uri(); ?>/resources/it_logo_2024.svg" alt="IT Studio Logo" class="logo-it">
<img src="<?php echo get_template_directory_uri(); ?>/resources/ouc-logo.svg" alt="OUC Logo" class="logo-ouc">
<svg class="logo-main" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="260" height="70" viewBox="0 0 260 70">
<defs>
<style>
.cls-1 { fill: #f8d1d9; }
.cls-1, .cls-2, .cls-3 { fill-rule: evenodd; }
.cls-2 { fill: #bab5ec; }
.cls-3 { fill: url(#linear-gradient); }
.text-group {
font-family: "PingFang SC", "Microsoft YaHei", "Heiti SC", sans-serif;
text-anchor: middle;
}
.text-cn {
font-size: 26px;
font-weight: 800;
}
.text-en {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 3px;
fill: #8e88c7;
text-transform: uppercase;
}
.deco-solid-circle { fill: #f1b7bf; }
.deco-hollow-circle { fill: none; stroke: #bab5ec; stroke-width: 2; }
.deco-plus { stroke: #bab5ec; stroke-width: 3; stroke-linecap: round; }
.deco-square { fill: #bab5ec; opacity: 0.8; }
.deco-line { stroke: #f8d1d9; stroke-width: 3; stroke-linecap: round; }
</style>
<linearGradient id="linear-gradient" x1="19.41" y1="66" x2="44.59" y2="12" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#bab5ec"/>
<stop offset="1" stop-color="#f1b7bf"/>
</linearGradient>
</defs>
<g id="decorations">
<rect class="deco-square" x="5" y="8" width="6" height="6" transform="rotate(15 8 11)" />
<path class="deco-plus" d="M78 20 L88 20 M83 15 L83 25" />
<circle class="deco-hollow-circle" cx="245" cy="15" r="5" />
<circle class="deco-solid-circle" cx="235" cy="55" r="4" />
<path class="deco-line" d="M250 60 L256 54" />
</g>
<g id="logo-main" transform="translate(12, 2) scale(0.95)">
<path id="cls-1" class="cls-1" d="M0,17L30,0V39L0,57V17Z"/>
<path id="cls-2" class="cls-2" d="M33,39L62,56V17L33,0V39Z"/>
<path id="cls-3" data-name="cls-3" class="cls-3" d="M18,28L46,12V49L18,66V28Z"/>
</g>
<g class="text-group" transform="translate(165, 0)">
<text y="38" class="text-cn" fill="currentColor">爱特工作室</text>
<text y="56" class="text-en">IT Studio</text>
</g>
</svg>
</a>
</div>
@@ -26,15 +75,18 @@
</button>
<ul class="nav-menu">
<li><a href="<?php echo esc_url(home_url('/')); ?>"><?php _e('首页', 'itstudio'); ?></a></li>
<li><a href="<?php echo esc_url(home_url('/announcements')); ?>"><?php _e('公告通知', 'itstudio'); ?></a></li>
<li><a href="<?php echo esc_url(home_url('/blog')); ?>"><?php _e('技术博客', 'itstudio'); ?></a></li>
<li><a href="<?php echo esc_url(home_url('/services')); ?>"><?php _e('便民服务', 'itstudio'); ?></a></li>
<li><a href="<?php echo esc_url(home_url('/about')); ?>"><?php _e('工作室介绍', 'itstudio'); ?></a></li>
<li><a href="<?php echo esc_url(home_url('/join')); ?>"><?php _e('加入我们', 'itstudio'); ?></a></li>
<li><a href="<?php echo esc_url(home_url('/')); ?>" data-cn="首页" data-en="Home"></a></li>
<li><a href="<?php echo esc_url(home_url('/announcements')); ?>" data-cn="公告通知" data-en="Events"></a></li>
<li><a href="<?php echo esc_url(home_url('/blog')); ?>" data-cn="技术博客" data-en="Blog"></a></li>
<li><a href="<?php echo esc_url(home_url('/services')); ?>" data-cn="便民服务" data-en="Service"></a></li>
<li><a href="<?php echo esc_url(home_url('/about')); ?>" data-cn="工作室介绍" data-en="Introduction"></a></li>
<li><a href="<?php echo esc_url(home_url('/join')); ?>" data-cn="加入我们" data-en="Join"></a></li>
</ul>
<div class="social-links">
<button class="lang-toggle" aria-label="Toggle Language">
<span class="lang-text">EN</span>
</button>
<a href="https://github.com/itstudio-2002" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
index.php
+3 -3
View File
@@ -4,7 +4,7 @@
<section class="hero-section">
<div class="container">
<div class="hero-content">
<h1><?php _e('IT Studio', 'itstudio'); ?></h1>
<h1><?php _e('IT STUDIO', 'itstudio'); ?></h1>
<p class="hero-description">
<?php _e('爱特工作室成立于2002年，致力于发现人才、培养人才、输送人才。现已拥有UI设计、Web开发、程序设计、Android开发、游戏设计、iOS开发六大技术方向，是海大网络技术的中坚力量！', 'itstudio'); ?>
</p>
@@ -16,7 +16,7 @@
<div class="container">
<div class="content-grid">
<div class="announcements-column">
<h2><?php _e('公告通知', 'itstudio'); ?> <span class="subtitle">Announcements</span></h2>
<h2 data-cn="公告通知" data-en="Announcements"></h2>
<div class="post-list">
<?php
$announcements = new WP_Query(array(
@@ -44,7 +44,7 @@
</div>
<div class="blog-column">
<h2><?php _e('技术博客', 'itstudio'); ?> <span class="subtitle">Tech Blog</span></h2>
<h2 data-cn="技术博客" data-en="Tech Blog"></h2>
<div class="post-list">
<?php
$blogs = new WP_Query(array(
resources/head_logo.svg
+3 -3
View File
@@ -15,7 +15,7 @@
.text-cn {
font-size: 26px;
font-weight: 800;
fill: #333333;
fill: currentColor;
}
.text-en {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -66,7 +66,7 @@
<!-- 文字部分 -->
<g class="text-group" transform="translate(165, 0)">
<text y="38" class="text-cn">爱特工作室</text>
<text y="56" class="text-en">IT Studio</text>
<text y="38" id="logo-text-cn" class="text-cn" style="font-family: 'PingFang SC', 'Microsoft YaHei', 'Heiti SC', sans-serif; text-anchor: middle; font-size: 26px; font-weight: 800; fill: currentColor;">爱特工作室</text>
<text y="56" class="text-en" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; text-anchor: middle; font-size: 11px; font-weight: 600; letter-spacing: 3px; fill: #8e88c7; text-transform: uppercase;">IT Studio</text>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

style.css
+4
View File
@@ -56,6 +56,10 @@ body {
color: var(--text-color);
line-height: 1.6;
transition: background-color var(--transition-speed), color var(--transition-speed);
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
}
a {