Skip to content

Commit

Permalink
updated case index.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@Elhamyali
Elhamyali committed Sep 2, 2024
1 parent 915c1dd commit c555e3c
Show file tree
Hide file tree
Showing 4 changed files with 611 additions and 23 deletions.
171 changes: 159 additions & 12 deletions docs/featured-work/bridge-to-home/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,10 +38,12 @@
<script src="../../site_libs/quarto-html/tippy.umd.min.js"></script>
<script src="../../site_libs/quarto-html/anchor.min.js"></script>
<link href="../../site_libs/quarto-html/tippy.css" rel="stylesheet">
<link href="../../site_libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<link href="../../site_libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" class="quarto-color-scheme" id="quarto-text-highlighting-styles">
<link href="../../site_libs/quarto-html/quarto-syntax-highlighting-dark.css" rel="prefetch" class="quarto-color-scheme quarto-color-alternate" id="quarto-text-highlighting-styles">
<script src="../../site_libs/bootstrap/bootstrap.min.js"></script>
<link href="../../site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="../../site_libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
<link href="../../site_libs/bootstrap/bootstrap.min.css" rel="stylesheet" class="quarto-color-scheme" id="quarto-bootstrap" data-mode="light">
<link href="../../site_libs/bootstrap/bootstrap-dark.min.css" rel="prefetch" class="quarto-color-scheme quarto-color-alternate" id="quarto-bootstrap" data-mode="dark">
<script src="../../site_libs/quarto-contrib/glightbox/glightbox.min.js"></script>
<link href="../../site_libs/quarto-contrib/glightbox/glightbox.min.css" rel="stylesheet">
<link href="../../site_libs/quarto-contrib/glightbox/lightbox.css" rel="stylesheet">
Expand Down Expand Up @@ -111,7 +113,7 @@
<span class="menu-text">Fun</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="../../about.html">
<a class="nav-link" href="../../about/index.html">
<span class="menu-text">About</span></a>
</li>
<li class="nav-item compact">
Expand All @@ -137,6 +139,7 @@
</ul>
</div> <!-- /navcollapse -->
<div class="quarto-navbar-tools">
<a href="" class="quarto-color-scheme-toggle quarto-navigation-tool px-1" onclick="window.quartoToggleColorScheme(); return false;" title="Toggle dark mode"><i class="bi"></i></a>
</div>
</div> <!-- /container-fluid -->
</nav>
Expand Down Expand Up @@ -219,15 +222,15 @@ <h2 class="anchored" data-anchor-id="results">Results</h2>
<div class="quarto-layout-cell" style="flex-basis: 50.0%;justify-content: flex-start;">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><a href="1-bridgehome.webp" class="lightbox" data-glightbox="description: .lightbox-desc-1" data-gallery="gallery" title="Compelling facts and figures"><img src="1-bridgehome.webp" class="img-fluid figure-img" alt="Compelling facts and figures"></a></p>
<p><a href="1-bridgehome.webp" class="lightbox" data-gallery="gallery" data-glightbox="description: .lightbox-desc-1" title="Compelling facts and figures"><img src="1-bridgehome.webp" class="img-fluid figure-img" alt="Compelling facts and figures"></a></p>
<figcaption>Compelling facts and figures</figcaption>
</figure>
</div>
</div>
<div class="quarto-layout-cell" style="flex-basis: 50.0%;justify-content: flex-start;">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><a href="2-bridgehome.webp" class="lightbox" data-glightbox="description: .lightbox-desc-2" data-gallery="gallery" title="Client story post"><img src="2-bridgehome.webp" class="img-fluid figure-img" alt="Client story post"></a></p>
<p><a href="2-bridgehome.webp" class="lightbox" data-gallery="gallery" data-glightbox="description: .lightbox-desc-2" title="Client story post"><img src="2-bridgehome.webp" class="img-fluid figure-img" alt="Client story post"></a></p>
<figcaption>Client story post</figcaption>
</figure>
</div>
Expand All @@ -237,15 +240,15 @@ <h2 class="anchored" data-anchor-id="results">Results</h2>
<div class="quarto-layout-cell" style="flex-basis: 50.0%;justify-content: flex-start;">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><a href="3-bridgehome.webp" class="lightbox" data-glightbox="description: .lightbox-desc-3" data-gallery="gallery" title="News article highlight of the chili cookout fundraisere"><img src="3-bridgehome.webp" class="img-fluid figure-img" alt="News article highlight of the chili cookout fundraisere"></a></p>
<p><a href="3-bridgehome.webp" class="lightbox" data-gallery="gallery" data-glightbox="description: .lightbox-desc-3" title="News article highlight of the chili cookout fundraisere"><img src="3-bridgehome.webp" class="img-fluid figure-img" alt="News article highlight of the chili cookout fundraisere"></a></p>
<figcaption>News article highlight of the chili cookout fundraisere</figcaption>
</figure>
</div>
</div>
<div class="quarto-layout-cell" style="flex-basis: 50.0%;justify-content: flex-start;">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><a href="4-bridgehome.webp" class="lightbox" data-glightbox="description: .lightbox-desc-4" data-gallery="gallery" title="Social media with of local news partnerships"><img src="4-bridgehome.webp" class="img-fluid figure-img" alt="Social media with of local news partnerships"></a></p>
<p><a href="4-bridgehome.webp" class="lightbox" data-gallery="gallery" data-glightbox="description: .lightbox-desc-4" title="Social media with of local news partnerships"><img src="4-bridgehome.webp" class="img-fluid figure-img" alt="Social media with of local news partnerships"></a></p>
<figcaption>Social media with of local news partnerships</figcaption>
</figure>
</div>
Expand All @@ -255,15 +258,15 @@ <h2 class="anchored" data-anchor-id="results">Results</h2>
<div class="quarto-layout-cell" style="flex-basis: 50.0%;justify-content: flex-start;">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><a href="5-bridgehome.webp" class="lightbox" data-glightbox="description: .lightbox-desc-5" data-gallery="gallery" title="Social media post event sponsors promotional"><img src="5-bridgehome.webp" class="img-fluid figure-img" alt="Social media post event sponsors promotional"></a></p>
<p><a href="5-bridgehome.webp" class="lightbox" data-gallery="gallery" data-glightbox="description: .lightbox-desc-5" title="Social media post event sponsors promotional"><img src="5-bridgehome.webp" class="img-fluid figure-img" alt="Social media post event sponsors promotional"></a></p>
<figcaption>Social media post event sponsors promotional</figcaption>
</figure>
</div>
</div>
<div class="quarto-layout-cell" style="flex-basis: 50.0%;justify-content: flex-start;">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><a href="6-bridgehome.webp" class="lightbox" data-glightbox="description: .lightbox-desc-6" data-gallery="gallery" title="Website copy of the chili cookout fundraiser"><img src="6-bridgehome.webp" class="img-fluid figure-img" alt="Website copy of the chili cookout fundraiser"></a></p>
<p><a href="6-bridgehome.webp" class="lightbox" data-gallery="gallery" data-glightbox="description: .lightbox-desc-6" title="Website copy of the chili cookout fundraiser"><img src="6-bridgehome.webp" class="img-fluid figure-img" alt="Website copy of the chili cookout fundraiser"></a></p>
<figcaption>Website copy of the chili cookout fundraiser</figcaption>
</figure>
</div>
Expand All @@ -273,15 +276,15 @@ <h2 class="anchored" data-anchor-id="results">Results</h2>
<div class="quarto-layout-cell" style="flex-basis: 50.0%;justify-content: flex-start;">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><a href="7-bridgehome.webp" class="lightbox" data-glightbox="description: .lightbox-desc-7" data-gallery="gallery" title="Fundraising event website copy"><img src="7-bridgehome.webp" class="img-fluid figure-img" alt="Fundraising event website copy"></a></p>
<p><a href="7-bridgehome.webp" class="lightbox" data-gallery="gallery" data-glightbox="description: .lightbox-desc-7" title="Fundraising event website copy"><img src="7-bridgehome.webp" class="img-fluid figure-img" alt="Fundraising event website copy"></a></p>
<figcaption>Fundraising event website copy</figcaption>
</figure>
</div>
</div>
<div class="quarto-layout-cell" style="flex-basis: 50.0%;justify-content: flex-start;">
<div class="quarto-figure quarto-figure-center">
<figure class="figure">
<p><a href="8-bridgehome.webp" class="lightbox" data-glightbox="description: .lightbox-desc-8" data-gallery="gallery" title="Sponsorship website copy"><img src="8-bridgehome.webp" class="img-fluid figure-img" alt="Sponsorship website copy"></a></p>
<p><a href="8-bridgehome.webp" class="lightbox" data-gallery="gallery" data-glightbox="description: .lightbox-desc-8" title="Sponsorship website copy"><img src="8-bridgehome.webp" class="img-fluid figure-img" alt="Sponsorship website copy"></a></p>
<figcaption>Sponsorship website copy</figcaption>
</figure>
</div>
Expand Down Expand Up @@ -336,6 +339,150 @@ <h2 class="anchored" data-anchor-id="results">Results</h2>
}
}
toggleBodyColorPrimary();
const disableStylesheet = (stylesheets) => {
for (let i=0; i < stylesheets.length; i++) {
const stylesheet = stylesheets[i];
stylesheet.rel = 'prefetch';
}
}
const enableStylesheet = (stylesheets) => {
for (let i=0; i < stylesheets.length; i++) {
const stylesheet = stylesheets[i];
stylesheet.rel = 'stylesheet';
}
}
const manageTransitions = (selector, allowTransitions) => {
const els = window.document.querySelectorAll(selector);
for (let i=0; i < els.length; i++) {
const el = els[i];
if (allowTransitions) {
el.classList.remove('notransition');
} else {
el.classList.add('notransition');
}
}
}
const toggleGiscusIfUsed = (isAlternate, darkModeDefault) => {
const baseTheme = document.querySelector('#giscus-base-theme')?.value ?? 'light';
const alternateTheme = document.querySelector('#giscus-alt-theme')?.value ?? 'dark';
let newTheme = '';
if(darkModeDefault) {
newTheme = isAlternate ? baseTheme : alternateTheme;
} else {
newTheme = isAlternate ? alternateTheme : baseTheme;
}
const changeGiscusTheme = () => {
// From: https://github.com/giscus/giscus/issues/336
const sendMessage = (message) => {
const iframe = document.querySelector('iframe.giscus-frame');
if (!iframe) return;
iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
}
sendMessage({
setConfig: {
theme: newTheme
}
});
}
const isGiscussLoaded = window.document.querySelector('iframe.giscus-frame') !== null;
if (isGiscussLoaded) {
changeGiscusTheme();
}
}
const toggleColorMode = (alternate) => {
// Switch the stylesheets
const alternateStylesheets = window.document.querySelectorAll('link.quarto-color-scheme.quarto-color-alternate');
manageTransitions('#quarto-margin-sidebar .nav-link', false);
if (alternate) {
enableStylesheet(alternateStylesheets);
for (const sheetNode of alternateStylesheets) {
if (sheetNode.id === "quarto-bootstrap") {
toggleBodyColorMode(sheetNode);
}
}
} else {
disableStylesheet(alternateStylesheets);
toggleBodyColorPrimary();
}
manageTransitions('#quarto-margin-sidebar .nav-link', true);
// Switch the toggles
const toggles = window.document.querySelectorAll('.quarto-color-scheme-toggle');
for (let i=0; i < toggles.length; i++) {
const toggle = toggles[i];
if (toggle) {
if (alternate) {
toggle.classList.add("alternate");
} else {
toggle.classList.remove("alternate");
}
}
}
// Hack to workaround the fact that safari doesn't
// properly recolor the scrollbar when toggling (#1455)
if (navigator.userAgent.indexOf('Safari') > 0 && navigator.userAgent.indexOf('Chrome') == -1) {
manageTransitions("body", false);
window.scrollTo(0, 1);
setTimeout(() => {
window.scrollTo(0, 0);
manageTransitions("body", true);
}, 40);
}
}
const isFileUrl = () => {
return window.location.protocol === 'file:';
}
const hasAlternateSentinel = () => {
let styleSentinel = getColorSchemeSentinel();
if (styleSentinel !== null) {
return styleSentinel === "alternate";
} else {
return false;
}
}
const setStyleSentinel = (alternate) => {
const value = alternate ? "alternate" : "default";
if (!isFileUrl()) {
window.localStorage.setItem("quarto-color-scheme", value);
} else {
localAlternateSentinel = value;
}
}
const getColorSchemeSentinel = () => {
if (!isFileUrl()) {
const storageValue = window.localStorage.getItem("quarto-color-scheme");
return storageValue != null ? storageValue : localAlternateSentinel;
} else {
return localAlternateSentinel;
}
}
const darkModeDefault = false;
let localAlternateSentinel = darkModeDefault ? 'alternate' : 'default';
// Dark / light mode switch
window.quartoToggleColorScheme = () => {
// Read the current dark / light value
let toAlternate = !hasAlternateSentinel();
toggleColorMode(toAlternate);
setStyleSentinel(toAlternate);
toggleGiscusIfUsed(toAlternate, darkModeDefault);
};
// Ensure there is a toggle, if there isn't float one in the top right
if (window.document.querySelector('.quarto-color-scheme-toggle') === null) {
const a = window.document.createElement('a');
a.classList.add('top-right');
a.classList.add('quarto-color-scheme-toggle');
a.href = "";
a.onclick = function() { try { window.quartoToggleColorScheme(); } catch {} return false; };
const i = window.document.createElement("i");
i.classList.add('bi');
a.appendChild(i);
window.document.body.appendChild(a);
}
// Switch to dark mode if need be
if (hasAlternateSentinel()) {
toggleColorMode(true);
} else {
toggleColorMode(false);
}
const icon = "";
const anchorJS = new window.AnchorJS();
anchorJS.options = {
Expand Down Expand Up @@ -743,7 +890,7 @@ <h2 class="anchored" data-anchor-id="results">Results</h2>
</div>
</div>
</footer>
<script>var lightboxQuarto = GLightbox({"openEffect":"zoom","selector":".lightbox","closeEffect":"zoom","loop":true,"descPosition":"right"});
<script>var lightboxQuarto = GLightbox({"openEffect":"zoom","closeEffect":"zoom","selector":".lightbox","descPosition":"right","loop":true});
window.onload = () => {
lightboxQuarto.on('slide_before_load', (data) => {
const { slideIndex, slideNode, slideConfig, player, trigger } = data;
Expand Down
Loading

0 comments on commit c555e3c

Please sign in to comment.