From 5b4a4f8932cb9f777d0280835609f3e4639eb3d2 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Sun, 29 Sep 2024 04:52:22 +0000
Subject: [PATCH] Update 2 files
- /wiki/footer.html
- /wiki/pages/home.html
---
wiki/footer.html | 107 +++++++++++++++++++++++++++++++++++
wiki/pages/home.html | 132 +++++++++++++++++++++----------------------
2 files changed, 171 insertions(+), 68 deletions(-)
diff --git a/wiki/footer.html b/wiki/footer.html
index 111850f3..656b20d1 100644
--- a/wiki/footer.html
+++ b/wiki/footer.html
@@ -80,6 +80,113 @@
align-items: center;
}
}
+ .footer {
+ background-color: #ffe4e1;
+ color: #333;
+ padding: 40px 0;
+ margin-top: 40px;
+ }
+ .footer-content {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 15px;
+ }
+ .social-icons {
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ margin-bottom: 20px;
+ }
+ .social-icons img {
+ width: 30px;
+ height: 30px;
+ transition: transform 0.3s ease;
+ filter: grayscale(100%) brightness(0);
+ }
+ .social-icons img:hover {
+ transform: scale(1.2);
+ }
+ .contact-info {
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ }
+ .contact-item {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ }
+ .contact-item img {
+ width: 20px;
+ height: 20px;
+ }
+ .footer-divider {
+ border-top: 1px solid #ccc;
+ margin: 30px 0;
+ }
+ .footer-text {
+ max-width: 800px;
+ margin: 0 auto;
+ text-align: center;
+ }
+ .footer-text p {
+ margin-bottom: 15px;
+ font-size: 14px;
+ }
+ .subfoot {
+ color: #333;
+ transition: color 0.3s ease;
+ }
+ .subfoot:hover {
+ color: #000;
+ }
+ .logo-images {
+ display: flex;
+ justify-content: center;
+ gap: 20px;
+ }
+ .logo-image {
+ width: 125px;
+ height: 125px;
+ object-fit: contain;
+ }
+ .wechat-container {
+ position: relative;
+ display: inline-block;
+ }
+ .wechat-qr {
+ display: none;
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 10px;
+ background-color: white;
+ border-radius: 10px;
+ box-shadow: 0 0 10px rgba(0,0,0,0.1);
+ }
+ .wechat-container:hover .wechat-qr {
+ display: block;
+ }
+
+ @media (max-width: 768px) {
+ .footer-content {
+ flex-direction: column;
+ align-items: center;
+ }
+ .social-icons {
+ justify-content: center;
+ }
+ .logo-images {
+ flex-direction: column;
+ align-items: center;
+ }
+ }
+
</style>
</head>
<body>
diff --git a/wiki/pages/home.html b/wiki/pages/home.html
index cfb1145c..b16580b4 100644
--- a/wiki/pages/home.html
+++ b/wiki/pages/home.html
@@ -5,27 +5,24 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="https://static.igem.wiki/teams/5187/art/icon1.png" sizes="364x370">
<title>Tsinghua - IGEM 2024</title>
- <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
<style>
body, html {
scroll-behavior: smooth;
- font-family: 'Roboto', sans-serif;
+ font-family: 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
- background-color: #f8f8f8;
}
#menu {
position: fixed;
top: 0;
left: 0;
right: 0;
- background-color: rgba(255, 255, 255, 0.95);
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
- transition: all 0.3s ease-in-out;
+ background-color: rgba(255, 255, 255, 0.9);
+ transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
z-index: 1000;
}
.content-wrapper {
- padding-top: 80px;
+ padding-top: 60px; /* Adjust based on your menu height */
}
.content-block {
min-height: 100vh;
@@ -33,61 +30,45 @@
flex-direction: column;
align-items: center;
justify-content: center;
- transition: all 0.5s ease;
- padding: 40px 20px;
- background-color: #ffffff;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
- margin-bottom: 40px;
- border-radius: 10px;
+ transition: background-color 0.5s;
+ padding: 20px;
}
.content {
display: flex;
align-items: center;
justify-content: space-between;
- width: 90%;
- max-width: 1400px;
+ width: 80%;
+ max-width: 1200px;
flex-wrap: wrap;
}
.text, .image {
flex: 1 1 45%;
- margin: 20px;
+ margin: 10px;
}
img {
max-width: 100%;
height: auto;
- border-radius: 10px;
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
- transition: transform 0.3s ease;
- }
- img:hover {
- transform: scale(1.03);
}
- .text p, .top-text p {
- font-size: 18px;
- line-height: 1.8;
- color: #333;
+ .text p {
+ font-size: 20px;
+ line-height: 1.6;
}
- h1, h2 {
- font-family: 'Playfair Display', serif;
- color: #2c3e50;
- margin-bottom: 20px;
- }
- .content-block:nth-child(even) {
- background-color: #f9f9f9;
+ .top-text p {
+ font-size: 20px;
+ line-height: 1.6;
}
.content-block:nth-child(even) .content {
flex-direction: row-reverse;
}
.footer {
- background-color: #2c3e50;
- color: #ecf0f1;
- padding: 40px 0;
- margin-top: 40px;
+ background-color: #ffe4e1;
+ padding: 20px 0;
+ margin-top: 20px;
}
.footer-content {
display: flex;
flex-wrap: wrap;
- justify-content: space-around;
+ justify-content: center;
align-items: center;
max-width: 1200px;
margin: 0 auto;
@@ -95,22 +76,19 @@
}
.social-icons {
display: flex;
- gap: 20px;
+ gap: 15px;
align-items: center;
- margin-bottom: 20px;
+ margin-right: 20px;
}
.social-icons img {
width: 30px;
height: 30px;
- transition: transform 0.3s ease;
- }
- .social-icons img:hover {
- transform: scale(1.2);
+ filter: grayscale(100%) brightness(0);
}
.contact-info {
display: flex;
flex-direction: column;
- gap: 15px;
+ gap: 10px;
}
.contact-item {
display: flex;
@@ -120,10 +98,11 @@
.contact-item img {
width: 20px;
height: 20px;
+ filter: grayscale(100%) brightness(0);
}
.footer-divider {
- border-top: 1px solid #34495e;
- margin: 30px 0;
+ border-top: 1px solid #dee2e6;
+ margin: 20px 0;
}
.footer-text {
max-width: 800px;
@@ -131,28 +110,26 @@
text-align: center;
}
.footer-text p {
- margin-bottom: 15px;
- font-size: 14px;
+ margin-bottom: 10px;
}
.subfoot {
- color: #3498db;
- transition: color 0.3s ease;
+ text-decoration: underline;
}
- .subfoot:hover {
- color: #2980b9;
+ .contact-info .contact-item span {
+ font-size: 13px;
}
.content-block-text-only .content {
display: block;
text-align: center;
}
.content-block-text-only h2 {
- margin-bottom: 30px;
+ margin-bottom: 20px;
}
.top-text {
text-align: center;
- padding: 30px 0;
+ padding: 20px 0;
width: 80%;
- max-width: 900px;
+ max-width: 800px;
}
.image-only .content {
display: flex;
@@ -160,12 +137,12 @@
align-items: center;
}
.image-only img {
- width: 90%;
- max-width: 1000px;
+ width: 80%;
+ max-width: 800px;
}
#block6 .image img,
#block8 .image img {
- max-width: 70%;
+ max-width: 60%;
}
#block6 .text, #block8 .text {
margin-left: 0px;
@@ -329,35 +306,51 @@
const blocks = document.querySelectorAll('.content-block');
const menu = document.getElementById('menu');
const colors = {
- background: ['#ffffff', '#f9f9f9'],
- text: ['#2c3e50', '#34495e']
+ background: ['#FFFFFF','#f57f7f'],
+ text: ['#FFFFFF','#FF5151']
};
let lastScrollTop = 0;
+ function interpolateColor(color1, color2, factor) {
+ const r1 = parseInt(color1.slice(1, 3), 16);
+ const g1 = parseInt(color1.slice(3, 5), 16);
+ const b1 = parseInt(color1.slice(5, 7), 16);
+ const r2 = parseInt(color2.slice(1, 3), 16);
+ const g2 = parseInt(color2.slice(3, 5), 16);
+ const b2 = parseInt(color2.slice(5, 7), 16);
+
+ const r = Math.round(r1 + factor * (r2 - r1));
+ const g = Math.round(g1 + factor * (g2 - g1));
+ const b = Math.round(b1 + factor * (b2 - b1));
+
+ return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
+ }
+
function updateColors() {
const scrollPosition = window.scrollY;
const windowHeight = window.innerHeight;
blocks.forEach((block, index) => {
- const blockTop = block.offsetTop - 80;
+ const blockTop = block.offsetTop - 60; // Adjust for menu height
const blockHeight = block.offsetHeight;
const blockCenter = blockTop + blockHeight / 2;
const distanceFromCenter = Math.abs(scrollPosition + windowHeight / 2 - blockCenter);
const maxDistance = windowHeight / 2 + blockHeight / 2;
let progress = 1 - Math.min(distanceFromCenter / maxDistance, 1);
+ // Ensure the progress is always between 0 and 1
progress = Math.max(0, Math.min(1, progress));
+ // Set text color based on block index (固定的粉白粉白粉)
const textColor = colors.text[index % 2];
block.style.color = textColor;
- const backgroundColor = colors.background[index % 2];
+ // Interpolate background color
+ const fromColor = colors.background[index % 2];
+ const toColor = colors.background[(index + 1) % 2];
+ const backgroundColor = interpolateColor(fromColor, toColor, progress);
+
block.style.backgroundColor = backgroundColor;
-
- // Add a subtle parallax effect
- const parallaxShift = progress * 30;
- block.style.transform = `translateY(${parallaxShift}px)`;
- block.style.opacity = 0.5 + progress * 0.5;
});
// Menu behavior
@@ -365,12 +358,15 @@
const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (currentScrollTop <= menuHeight) {
+ // At the top of the page
menu.style.transform = 'translateY(0)';
menu.style.opacity = '1';
} else if (currentScrollTop > lastScrollTop) {
+ // Scrolling down
menu.style.transform = `translateY(-${menuHeight}px)`;
menu.style.opacity = '0';
} else {
+ // Scrolling up
menu.style.transform = 'translateY(0)';
menu.style.opacity = '1';
}
--
GitLab