quote design changes / cleaning up CSS / continue nestor fixes
This commit is contained in:
Nasir Anthony Montalvo
@@ -1,70 +1,368 @@
|
||||
{% if page.layout == "home-infographic" and site.data.theme.featured-image %}
|
||||
{% if page.layout == "home-infographic" %}
|
||||
|
||||
{%- comment -%}
|
||||
Carousel Banner: rotates through random collection items
|
||||
Always shows starlacoll033 first, then shuffles other items
|
||||
{%- endcomment -%}
|
||||
|
||||
{%- assign carousel_items = "" | split: "" -%}
|
||||
|
||||
{%- comment -%} Get specific items in order {%- endcomment -%}
|
||||
{%- assign wanted_ids = "starlacoll033,garycoll009,garycoll005,starlacoll019,starlacoll008,tishacoll028" | split: "," -%}
|
||||
|
||||
{%- for wanted_id in wanted_ids -%}
|
||||
{%- for item in site.data[site.metadata] -%}
|
||||
{%- if item.objectid == wanted_id -%}
|
||||
{%- assign carousel_items = carousel_items | push: item -%}
|
||||
{%- break -%}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endfor -%}
|
||||
|
||||
<style>
|
||||
#home-banner {
|
||||
background-image: url('{{ site.data.featured_item.src | relative_url }}');
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: {{ site.data.theme.home-banner-image-position | default: 'center' }};
|
||||
#home-banner-carousel {
|
||||
position: relative;
|
||||
min-height: 380px;
|
||||
max-height: 580px;
|
||||
background-color: #000;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.carousel-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 800ms ease-in-out;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.carousel-slide.active {
|
||||
opacity: 1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#home-title-box {
|
||||
padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
|
||||
padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-top: {{ site.data.theme.home-title-y-padding | default: '5em' }};
|
||||
padding-bottom: {{ site.data.theme.home-title-y-padding | default: '5em' }};
|
||||
}
|
||||
|
||||
@media screen and (max-width: 576px) {
|
||||
#home-title-box {
|
||||
padding-top: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
|
||||
padding-bottom: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
|
||||
}
|
||||
#home-title-box {
|
||||
padding-top: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
|
||||
padding-bottom: min({{ site.data.theme.home-title-y-padding | default: '5em' }}, 32vh);
|
||||
}
|
||||
}
|
||||
|
||||
.carousel-controls {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1.25rem;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.carousel-btn {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
border: 1px solid rgba(255, 255, 255, 0.35);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 200ms ease;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.carousel-btn:hover {
|
||||
color: #ffffff;
|
||||
border-color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.carousel-btn svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.carousel-dots {
|
||||
display: flex;
|
||||
gap: 0.35rem;
|
||||
padding: 0.35rem 0.6rem;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
border: 1px solid rgba(255, 255, 255, 0.35);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.carousel-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.carousel-dot:hover {
|
||||
background: rgba(255, 255, 255, 0.65);
|
||||
}
|
||||
|
||||
.carousel-dot.active {
|
||||
background: #ffffff;
|
||||
width: 18px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.carousel-controls {
|
||||
top: 0.75rem;
|
||||
left: 0.75rem;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.carousel-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.carousel-btn svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.carousel-dots {
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.featured-image-label {
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1.25rem;
|
||||
z-index: 10;
|
||||
padding: 0.35rem 0.6rem;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
border: 1px solid rgba(255, 255, 255, 0.35);
|
||||
border-radius: 4px;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.featured-image-label:hover {
|
||||
border-color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.featured-image-label a {
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.featured-image-label:hover a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
@media (max-width: 575px) {
|
||||
.featured-image-label {
|
||||
bottom: 0.75rem;
|
||||
right: 0.75rem;
|
||||
padding: 0.3rem 0.5rem;
|
||||
}
|
||||
|
||||
.featured-image-label a {
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="home-banner" class="container-fluid mb-0 p-0">
|
||||
<div id="home-banner-carousel" class="container-fluid mb-0 p-0">
|
||||
<a class="portfolio-site-link"
|
||||
href="https://1800nasi.net/category/bqkc/"
|
||||
title="Main domain to view exhibitions, programs and media features of {B/qKC}">
|
||||
VIEW THE ARCHIVE IN PRACTICE →
|
||||
</a>
|
||||
href="https://1800nasi.net/category/bqkc/"
|
||||
title="Main domain to view exhibitions, programs and media features of {B/qKC}">
|
||||
VIEW THE ARCHIVE IN PRACTICE →
|
||||
</a>
|
||||
|
||||
{%- comment -%} Carousel slides {%- endcomment -%}
|
||||
{%- for item in carousel_items -%}
|
||||
<div class="carousel-slide{% if forloop.first %} active{% endif %}"
|
||||
data-slide="{{ forloop.index0 }}"
|
||||
style="background-image: url('{{ item.image_small | relative_url }}');">
|
||||
</div>
|
||||
{%- endfor -%}
|
||||
|
||||
<div id="home-title-box" class="position-relative">
|
||||
<div class="p-2 text-white bg-dark bg-opacity-75 d-inline-block">
|
||||
{% if site.organization-logo-nav %}
|
||||
<a class="d-none d-md-block" href="{{ site.organization-link }}">
|
||||
<img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name | escape }} home">
|
||||
</a>
|
||||
<a class="d-none d-md-block" href="{{ site.organization-link }}">
|
||||
<img id="home-banner-logo" src="{{ site.organization-logo-nav | relative_url }}" alt="{{ site.organization-name | escape }} home">
|
||||
</a>
|
||||
{% endif %}
|
||||
<h1 class="display-4 m-0">{{ site.title }}</h1>
|
||||
{% if site.tagline %}<p class="mb-0">{{ site.tagline }}</p>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% unless site.data.theme.featured-image contains '/' %}
|
||||
<div class="featured-image-label">
|
||||
<a href="{{ site.data.featured_item.link | relative_url }}"
|
||||
title="{{ site.data.featured_item.alt | escape }}">
|
||||
Featured Image
|
||||
</a>
|
||||
{%- comment -%} Carousel controls {%- endcomment -%}
|
||||
<div class="carousel-controls">
|
||||
<button class="carousel-btn" id="carousel-prev" aria-label="Previous slide">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div class="carousel-dots">
|
||||
{%- for item in carousel_items -%}
|
||||
<div class="carousel-dot{% if forloop.first %} active{% endif %}" data-slide="{{ forloop.index0 }}"></div>
|
||||
{%- endfor -%}
|
||||
</div>
|
||||
|
||||
<button class="carousel-btn" id="carousel-next" aria-label="Next slide">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{%- comment -%} Featured image label (for current slide) {%- endcomment -%}
|
||||
<div class="featured-image-label">
|
||||
<a href="#" id="carousel-item-link" title="">Featured Image</a>
|
||||
</div>
|
||||
{% endunless %}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
const slides = document.querySelectorAll('.carousel-slide');
|
||||
const dots = document.querySelectorAll('.carousel-dot');
|
||||
const prevBtn = document.getElementById('carousel-prev');
|
||||
const nextBtn = document.getElementById('carousel-next');
|
||||
const itemLink = document.getElementById('carousel-item-link');
|
||||
|
||||
let currentSlide = 0;
|
||||
let autoplayInterval;
|
||||
|
||||
let itemData = [
|
||||
{%- for item in carousel_items -%}
|
||||
{
|
||||
objectid: "{{ item.objectid }}",
|
||||
title: "{{ item.title | escape }}",
|
||||
image: "{{ item.image_small | relative_url }}"
|
||||
}{% unless forloop.last %},{% endunless %}
|
||||
{%- endfor -%}
|
||||
];
|
||||
|
||||
// Shuffle function
|
||||
function shuffle(array) {
|
||||
for (let i = array.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[array[i], array[j]] = [array[j], array[i]];
|
||||
}
|
||||
return array;
|
||||
}
|
||||
|
||||
// Shuffle the data on load
|
||||
itemData = shuffle(itemData);
|
||||
|
||||
// Apply shuffled images to slides
|
||||
slides.forEach((slide, index) => {
|
||||
if (itemData[index]) {
|
||||
slide.style.backgroundImage = `url('${itemData[index].image}')`;
|
||||
}
|
||||
});
|
||||
|
||||
function showSlide(index) {
|
||||
slides.forEach(s => s.classList.remove('active'));
|
||||
dots.forEach(d => d.classList.remove('active'));
|
||||
|
||||
currentSlide = (index + slides.length) % slides.length;
|
||||
|
||||
slides[currentSlide].classList.add('active');
|
||||
dots[currentSlide].classList.add('active');
|
||||
|
||||
// Update featured image link
|
||||
const baseUrl = '{{ "/" | relative_url }}';
|
||||
itemLink.href = baseUrl + 'items/' + itemData[currentSlide].objectid + '.html';
|
||||
itemLink.title = itemData[currentSlide].title;
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
showSlide(currentSlide + 1);
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
showSlide(currentSlide - 1);
|
||||
}
|
||||
|
||||
function startAutoplay() {
|
||||
autoplayInterval = setInterval(nextSlide, 5000); // 5 seconds
|
||||
}
|
||||
|
||||
function stopAutoplay() {
|
||||
clearInterval(autoplayInterval);
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
prevBtn.addEventListener('click', () => {
|
||||
stopAutoplay();
|
||||
prevSlide();
|
||||
startAutoplay();
|
||||
});
|
||||
|
||||
nextBtn.addEventListener('click', () => {
|
||||
stopAutoplay();
|
||||
nextSlide();
|
||||
startAutoplay();
|
||||
});
|
||||
|
||||
dots.forEach((dot, index) => {
|
||||
dot.addEventListener('click', () => {
|
||||
stopAutoplay();
|
||||
showSlide(index);
|
||||
startAutoplay();
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize
|
||||
showSlide(0);
|
||||
startAutoplay();
|
||||
})();
|
||||
</script>
|
||||
|
||||
{%- else -%}
|
||||
<div class="container">
|
||||
<div class="container position-relative">
|
||||
<a class="portfolio-site-link"
|
||||
href="https://1800nasi.net/category/bqkc/"
|
||||
title="Main domain to view exhibitions, programs and media features of {B/qKC}">
|
||||
ARCHIVE IN PRACTICE →
|
||||
</a>
|
||||
{%- comment -%} Non-carousel version for other pages {%- endcomment -%}
|
||||
<div class="container">
|
||||
<div class="container position-relative">
|
||||
<a class="portfolio-site-link"
|
||||
href="https://1800nasi.net/category/bqkc/"
|
||||
title="Main domain to view exhibitions, programs and media features of {B/qKC}">
|
||||
ARCHIVE IN PRACTICE →
|
||||
</a>
|
||||
<div class="row align-items-center">
|
||||
<div id="title" class="{% if site.organization-logo-banner %}col-md-9{% else %}col-12{% endif %}">
|
||||
<h1 class="mt-2"><a class="text-dark" href="{{ '/' | relative_url }}">{{ site.title }}</a></h1>
|
||||
{% if site.tagline %}<p>{{ site.tagline }}</p>{% endif %}
|
||||
</div>
|
||||
{% if site.organization-logo-banner %}
|
||||
<div class="col-md-3 d-none d-lg-block text-end">
|
||||
<a class="btn btn-outline-light" href="{{ site.organization-link }}">
|
||||
<img class="img-fluid" src="{{ site.organization-logo-banner | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name | escape }} home">
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 d-none d-lg-block text-end">
|
||||
<a class="btn btn-outline-light" href="{{ site.organization-link }}">
|
||||
<img class="img-fluid" src="{{ site.organization-logo-banner | relative_url }}" title="{{ site.organization-name }}" alt="{{ site.organization-name | escape }} home">
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{%- endif -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
Reference in New Issue
Block a user