feat: add slideshow functionality and styles to enhance image display

This commit is contained in:
Billy Wang
2025-04-21 18:00:53 +08:00
parent 0235166cec
commit 04f7f840aa
3 changed files with 194 additions and 15 deletions

View File

@@ -1054,3 +1054,83 @@
width: 100%; /* Set a base width */ width: 100%; /* Set a base width */
aspect-ratio: 4 / 1; /* Maintain the aspect ratio */ aspect-ratio: 4 / 1; /* Maintain the aspect ratio */
} }
/* Slideshow styles */
.slideshow-container {
max-width: 100%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.slideshow-wrapper {
width: 100%;
position: relative;
}
.slides {
display: none;
width: 100%;
}
.slides img {
width: 100%;
height: auto;
display: block;
max-height: 500px;
object-fit: contain;
}
/* Update to fix slideshow image sizing */
.slides img {
width: auto;
max-width: 100%;
height: auto;
max-height: 400px;
margin: 0 auto;
object-fit: contain;
}
.slideshow-text {
width: 100%;
padding: 15px;
text-align: center;
color: #333; /* Dark color for text */
}
.slideshow-text p {
margin: 0;
padding: 0;
}
.more-link {
margin-top: 8px;
font-size: 0.9rem;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* Responsive styling for slideshow */
@media screen and (max-width: 768px) {
.slideshow-text {
padding: 10px;
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
.slideshow-text {
padding: 8px;
font-size: 12px;
}
}

View File

@@ -6,6 +6,7 @@
} }
.md-typeset { .md-typeset {
.admonition.frequent-question, .admonition.frequent-question,
details.frequent-question, details.frequent-question,
.admonition.faq, .admonition.faq,
@@ -14,24 +15,24 @@
} }
.frequent-question, .faq { .frequent-question, .faq {
& > .admonition-title, & > summary { &>.admonition-title, &>summary {
background-color: var(--admonition-bg-color-base); background-color: var(--admonition-bg-color-base);
} }
& > .admonition-title::before, & > summary::before { &>.admonition-title::before, &>summary::before {
background-color: var(--admonition-border-color); background-color: var(--admonition-border-color);
} }
} }
.frequent-question { .frequent-question {
& > .admonition-title::before, & > summary::before { &>.admonition-title::before, &>summary::before {
-webkit-mask-image: var(--icon-frequent-question); -webkit-mask-image: var(--icon-frequent-question);
mask-image: var(--icon-frequent-question); mask-image: var(--icon-frequent-question);
} }
} }
.faq { .faq {
& > .admonition-title::before, & > summary::before { &>.admonition-title::before, &>summary::before {
-webkit-mask-image: var(--icon-faq); -webkit-mask-image: var(--icon-faq);
mask-image: var(--icon-faq); mask-image: var(--icon-faq);
} }
@@ -39,7 +40,8 @@
} }
mark.state1 { mark.state1 {
background-color: #ffd699; /* A somewhat orange color */ background-color: #ffd699;
/* A somewhat orange color */
} }
mark.state2 { mark.state2 {
@@ -61,3 +63,73 @@ mark.state4 {
.faq { .faq {
color: #FF8D1A color: #FF8D1A
} }
.slideshow-container {
max-width: 100%;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
.slideshow-wrapper {
width: 100%;
position: relative;
}
.slides {
display: none;
width: 100%;
}
.slides img {
width: 100%;
height: auto;
display: block;
max-height: 500px;
object-fit: contain;
}
.slideshow-text {
width: 100%;
padding: 15px;
text-align: center;
color: #333;
/* Dark color for text */
}
.slideshow-text p {
margin: 0;
padding: 0;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* Responsive styling */
@media screen and (max-width: 768px) {
.slideshow-text {
padding: 10px;
font-size: 14px;
}
}
@media screen and (max-width: 480px) {
.slideshow-text {
padding: 8px;
font-size: 12px;
}
}

View File

@@ -1,6 +1,6 @@
window.onload = function() { window.onload = function () {
// Hide the loading message when tweets are loaded // Hide the loading message when tweets are loaded
var hideLoadingMessage = function() { var hideLoadingMessage = function () {
var loadingMessage = document.getElementById('loadingMessage'); var loadingMessage = document.getElementById('loadingMessage');
if (loadingMessage) { if (loadingMessage) {
loadingMessage.style.display = 'none'; loadingMessage.style.display = 'none';
@@ -18,7 +18,7 @@ window.onload = function() {
// Find all twitter tweets and show them // Find all twitter tweets and show them
var tweets = document.querySelectorAll('.twitter-tweet'); var tweets = document.querySelectorAll('.twitter-tweet');
tweets.forEach(function(tweet) { tweets.forEach(function (tweet) {
tweet.classList.add('twitter-tweet-loaded'); tweet.classList.add('twitter-tweet-loaded');
}); });
@@ -65,7 +65,7 @@ window.onload = function() {
setTimeout(initTwitterNavigation, 200); setTimeout(initTwitterNavigation, 200);
}; };
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function () {
const dialogue = document.querySelector('.gibby-dialogue'); const dialogue = document.querySelector('.gibby-dialogue');
function toggleDialogue() { function toggleDialogue() {
@@ -79,3 +79,30 @@ document.addEventListener('DOMContentLoaded', function() {
// Start the cycle after 1 second // Start the cycle after 1 second
setTimeout(toggleDialogue, 1000); setTimeout(toggleDialogue, 1000);
}); });
// Slideshow functionality
document.addEventListener("DOMContentLoaded", function () {
let slideIndex = 0;
showSlides();
function showSlides() {
const slides = document.getElementsByClassName("slides");
// Hide all slides
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
// Increment slide index and reset if needed
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
// Show the current slide
slides[slideIndex - 1].style.display = "block";
// Change slide every 6 seconds
setTimeout(showSlides, 6000);
}
});