From d0e4cfc449ba3637e09bb2fbf695f9f3a21dd9b5 Mon Sep 17 00:00:00 2001
From: HouTeng Chan <ht-chen21@mails.tsinghua.edu.cn>
Date: Mon, 30 Sep 2024 10:11:44 +0000
Subject: [PATCH] Update file layout.html
---
wiki/layout.html | 202 +++++++++++++++++++++++------------------------
1 file changed, 97 insertions(+), 105 deletions(-)
diff --git a/wiki/layout.html b/wiki/layout.html
index 46034848..a7ea6c64 100644
--- a/wiki/layout.html
+++ b/wiki/layout.html
@@ -4,7 +4,7 @@
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
- <link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
+ <link rel="icon" type="image/x-icon" href="https://static.igem.wiki/teams/5187/art/icon.png">
<link rel="license" href="https://creativecommons.org/licenses/by/4.0/"/>
<!-- Bootstrap CSS -->
@@ -24,19 +24,18 @@
position: relative;
overflow: hidden;
}
-
.image-container {
display: flex;
justify-content: center;
padding: 20px;
- }
-
- .shadowed-image {
- max-width: 100%;
- height: auto;
- width: 50%;
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
- }
+ }
+ .shadowed-image {
+ max-width: 100%;
+ height: auto;
+ width: 50%;
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ }
+
.content-wrapper {
position: absolute;
@@ -50,31 +49,18 @@
align-items: center;
justify-content: center;
}
-
.floral-border {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
- background-image: url('https://static.igem.wiki/teams/5187/art/flower.jpg');
- background-size: cover;
+ border: 40px solid transparent;
+ border-image: url('https://static.igem.wiki/teams/5187/art/flower.jpg') 60 round;
border-radius: 50px;
pointer-events: none;
}
-
- .floral-border::before {
- content: '';
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- border-radius: 50px;
- background-color: #fa8072;
- opacity: 0.3; /* 控制颜色覆盖层的é€æ˜Žåº¦ */
- }
-
+
.sidebar {
position: fixed;
left: 5px;
@@ -87,17 +73,14 @@
border-radius: 0px;
overflow-y: auto; /* Enable vertical scrolling if content exceeds height */
}
-
.sidebar ul {
list-style: none;
padding: 0;
margin: 0; /* Remove default margin */
}
-
.sidebar ul li {
margin-bottom: 10px; /* Add some space between list items */
}
-
.sidebar ul li a {
display: block;
padding: 10px;
@@ -106,7 +89,6 @@
transition: all 0.3s ease;
border-radius: 20px;
}
-
.sidebar ul li a:hover {
background-color: #fa8072;
color: #ffffff;
@@ -183,13 +165,11 @@
overflow: hidden;
z-index: 10;
}
-
.team-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
-
.text-size-toggle {
position: fixed;
right: 10px;
@@ -212,27 +192,26 @@
.large-text {
font-size: 140%;
}
-
.loader-container {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: #ffffff;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- z-index: 9999;
- }
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #ffffff;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ z-index: 9999;
+ }
- .loader-gif {
- width: 150px;
- height: 150px;
- }
-
- .font-toggle {
+ .loader-gif {
+ width: 150px;
+ height: 150px;
+ }
+
+ .font-toggle {
position: fixed;
right: 70px;
bottom: 30px;
@@ -258,13 +237,16 @@
</style>
</head>
+</head>
+
<body>
<div class="loader-container">
<img src="https://static.igem.wiki/teams/5187/art/loading.gif" alt="Loading" class="loader-gif">
- </div>
+</div>
<!-- Navigation -->
{% include 'menu.html' %}
+
<!-- Header -->
<header class="bg-hero py-2 mb-4">
<div class="floral-border"></div>
@@ -284,7 +266,6 @@
<div class="container">
{% block page_content %}{% endblock %}
</div>
-
<button id="textSizeToggle" class="text-size-toggle">L</button>
<button id="fontToggle" class="font-toggle">D</button>
@@ -316,6 +297,7 @@
var scrolled = (winScroll / height) * 100;
setProgress(scrolled);
+ // Show or hide the back to top button
if (winScroll > 300) {
backToTopButton.classList.add('show');
} else {
@@ -325,6 +307,7 @@
window.addEventListener('scroll', handleScroll);
+ // Back to top functionality
backToTopButton.addEventListener('click', function() {
window.scrollTo({
top: 0,
@@ -332,64 +315,73 @@
});
});
});
+ // Existing script content
+
+ // Add new script for text size toggle functionality
+ document.addEventListener('DOMContentLoaded', function() {
+ var textSizeToggle = document.getElementById('textSizeToggle');
+ var body = document.body;
+ var isLarge = false;
+
+ textSizeToggle.addEventListener('click', function() {
+ if (isLarge) {
+ body.classList.remove('large-text');
+ textSizeToggle.textContent = 'L';
+ } else {
+ body.classList.add('large-text');
+ textSizeToggle.textContent = 'S';
+ }
+ isLarge = !isLarge;
+
+ // Store the current state in localStorage
+ localStorage.setItem('largeTextEnabled', isLarge);
+ });
- document.addEventListener('DOMContentLoaded', function() {
- var textSizeToggle = document.getElementById('textSizeToggle');
- var body = document.body;
- var isLarge = false;
-
- textSizeToggle.addEventListener('click', function() {
- if (isLarge) {
- body.classList.remove('large-text');
- textSizeToggle.textContent = 'L';
- } else {
+ // Check localStorage on page load
+ if (localStorage.getItem('largeTextEnabled') === 'true') {
body.classList.add('large-text');
textSizeToggle.textContent = 'S';
+ isLarge = true;
}
- isLarge = !isLarge;
- localStorage.setItem('largeTextEnabled', isLarge);
});
- if (localStorage.getItem('largeTextEnabled') === 'true') {
- body.classList.add('large-text');
- textSizeToggle.textContent = 'S';
- isLarge = true;
- }
- });
-
window.addEventListener('load', function() {
- const loaderContainer = document.querySelector('.loader-container');
- setTimeout(function() {
- loaderContainer.style.opacity = '0';
- loaderContainer.style.transition = 'opacity 0.5s ease';
- setTimeout(() => {
- loaderContainer.style.display = 'none';
- }, 500);
- }, 2000);
-
- var fontToggle = document.getElementById('fontToggle');
- var body = document.body;
- var isDyslexiaFont = false;
-
- fontToggle.addEventListener('click', function() {
- if (isDyslexiaFont) {
- body.classList.remove('dyslexia-font');
- fontToggle.textContent = 'D';
- } else {
- body.classList.add('dyslexia-font');
- fontToggle.textContent = 'O';
- }
- isDyslexiaFont = !isDyslexiaFont;
- localStorage.setItem('dyslexiaFontEnabled', isDyslexiaFont);
- });
-
- if (localStorage.getItem('dyslexiaFontEnabled') === 'true') {
- body.classList.add('dyslexia-font');
- fontToggle.textContent = 'O';
- isDyslexiaFont = true;
- }
- });
- </script>
+ const loaderContainer = document.querySelector('.loader-container');
+ setTimeout(function() {
+ loaderContainer.style.opacity = '0';
+ loaderContainer.style.transition = 'opacity 0.5s ease';
+ setTimeout(() => {
+ loaderContainer.style.display = 'none';
+ }, 500);
+ }, 2000); // Hide after 2 seconds (adjust as needed)
+ var fontToggle = document.getElementById('fontToggle');
+ var body = document.body;
+ var isDyslexiaFont = false;
+
+ fontToggle.addEventListener('click', function() {
+ if (isDyslexiaFont) {
+ body.classList.remove('dyslexia-font');
+ fontToggle.textContent = 'D';
+ } else {
+ body.classList.add('dyslexia-font');
+ fontToggle.textContent = 'O';
+ }
+ isDyslexiaFont = !isDyslexiaFont;
+
+ // Store the current state in localStorage
+ localStorage.setItem('dyslexiaFontEnabled', isDyslexiaFont);
+ });
+
+ // Check localStorage on page load
+ if (localStorage.getItem('dyslexiaFontEnabled') === 'true') {
+ body.classList.add('dyslexia-font');
+ fontToggle.textContent = 'O';
+ isDyslexiaFont = true;
+ }
+ });
+
+</script>
</body>
-</html>
\ No newline at end of file
+</html>
+
--
GitLab