jQuery(document).ready(function($) {
var rightClickCount = 0;
var timeout;
$(document).on('contextmenu', function(e) {
e.preventDefault(); // prevent context menu
rightClickCount++;
if (rightClickCount === 2) {
// Hard refresh by adding cache-busting query string
var currentUrl = window.location.href.split('?')[0];
var newUrl = currentUrl + '?cachebust=' + new Date().getTime();
window.location.href = newUrl;
rightClickCount = 0; // reset counter
}
// Reset counter if second click doesn't happen within 1 second
clearTimeout(timeout);
timeout = setTimeout(function() {
rightClickCount = 0;
}, 1000); // 1000ms = 1 second
});
});Category: blog
Categories
dharan.city – Day 3
set a new target for my free time!
Boom—
X, Y, Z—ugh.
Someone call the idiots
#genz #haiku
#product-listing-container,#tab-related {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
align-items: stretch;
justify-content: flex-start;
width: 100%;
}
ul.productGrid, ul.product-list {
width: 100%;
display: flex;
flex-wrap: wrap;
li {
flex: 0 0 50%;
display: flex;
padding: 0px !important;
@include breakpoint("medium") {
flex: 0 0 25%;
}
.card {
display: flex;
flex-direction: column;
flex: 1;
box-sizing: border-box;
height: 100%;
margin-bottom: 1rem;
.call-button {
margin-top: auto;
.button {
background: stencilColor('button--primary-backgroundColor');
color: stencilColor('button--primary-color');
&:hover {
background: stencilColor('button--primary-backgroundColorHover');
color: stencilColor('button--primary-colorHover');
span {
&::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: 0;
left: 0;
background-color: stencilColor('button--primary-colorHover');
transform-origin: bottom right;
transition: transform 0.25s ease-out;
transform: scaleX(1);
transform-origin: bottom left;
}
}
}
}
}
}
}
}
It all began with a simple need: to download AliExpress images for sample products for BigCommerce demo store for themes.
Trying to download high-quality images from a product page? Good luck.
That perfect shot is always locked in a lightbox slider. Right-click is disabled.
I tried existing image downloaders and grabbers, but they all fell short. So I built GrabFox – a simple tool that actually works for grabbing product images quickly and reliably.
#Deepseek
setopt nullglob
mkdir -p jpg_output; for ext in png jpg jpeg heic tiff webp gif avif; do
for img in *."$ext"; do
[ -f "$img" ] && magick "$img" "jpg_output/${img%.*}.png"
done
done
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
function setupCodeBlock(block, lang = '') {
block.style.position = 'relative';
// Collect all child lines
let codeEls = Array.from(block.querySelectorAll('div, p, span'));
if (codeEls.length === 0) codeEls = [block];
// Generate raw code text with indentation
let rawCode = '';
let indentLevel = 0;
codeEls.forEach(el => {
let text = el.textContent.trim();
if (text.includes('}')) indentLevel = Math.max(indentLevel - 1, 0);
rawCode += ' '.repeat(indentLevel) + text + '\n'; // 4 spaces per indent
if (text.includes('{')) indentLevel++;
});
// Create <pre><code> for Highlight.js
const pre = document.createElement('pre');
const code = document.createElement('code');
code.className = lang + ' hljs';
code.textContent = rawCode.replace(/[“”]/g,'"').replace(/[‘’]/g,"'");
pre.appendChild(code);
// Clear old content and append new
while (block.firstChild) block.removeChild(block.firstChild);
block.appendChild(pre);
// Highlight.js
hljs.highlightElement(code);
// Create copy button
const copyBtn = document.createElement('button');
copyBtn.className = 'copy-btn';
copyBtn.innerText = 'Copy';
block.appendChild(copyBtn);
// Copy button event
copyBtn.addEventListener('click', () => {
navigator.clipboard.writeText(code.textContent).then(() => {
copyBtn.innerText = 'Copied!';
setTimeout(() => copyBtn.innerText = 'Copy', 1500);
});
});
}
// Apply to all spoiler-body
document.querySelectorAll('.spoiler-body').forEach(block => {
const langSpan = block.closest('.spoiler').querySelector('.spoiler-head span');
const lang = langSpan ? langSpan.textContent.toLowerCase() : '';
setupCodeBlock(block, lang);
});
});
</script>
<style>
.hljs {
background: transparent;
}
.post-message blockquote,
.spoiler-body {
background: #0d1117;
color: #c9d1d9;
padding: 14px;
border-radius: 6px;
line-height: 18px;
overflow-x: auto;
tab-size: 4;
font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
font-size: 14px;
white-space: pre; /* preserve tabs and spaces */
margin: 1em 0;
position: relative;
}
.post-message blockquote div,
.post-message blockquote p,
.post-message blockquote span,
.spoiler-body div,
.spoiler-body p,
.spoiler-body span {
margin: 0;
}
#af-wrapper .spoiler .spoiler-body {
margin: 0px;
}
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: #161b22;
border: 1px solid #30363d;
color: #c9d1d9;
padding: 4px 10px;
font-size: 12px;
border-radius: 6px;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease-in-out, background 0.2s;
}
.post-message blockquote:hover .copy-btn,
.spoiler-body:hover .copy-btn,
.copy-btn:hover {
opacity: 1;
}
.copy-btn:hover {
background: #21262d;
}
.copy-btn {
position: absolute;
top: 8px;
right: 8px;
background: #161b22;
border: 1px solid #30363d;
color: #c9d1d9;
padding: 4px 10px;
font-size: 12px;
border-radius: 6px;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease-in-out, background 0.2s;
}
.spoiler-body:hover .copy-btn,
.copy-btn:hover {
opacity: 1;
}
.copy-btn:hover {
background: #21262d;
}
</style>
locomotiveScroll.lenisInstance.options.content.addEventListener('wheel', (event) => {
const paths = event.composedPath();
const stopPropagationIfMatch = (selector) =>
paths.some(el => el instanceof HTMLElement && el.matches(selector) && event.stopPropagation());
stopPropagationIfMatch('.productView-images');
stopPropagationIfMatch('.navPage-subMenu');
stopPropagationIfMatch('.gallery-grid');
stopPropagationIfMatch('.halfGrid');
stopPropagationIfMatch('.productOptions-list');
stopPropagationIfMatch('.quickSearchResults');
});
font-family: fontFamily("headingSans");
font-weight: fontWeight("bold");
font-size: fontSize("largest");
container("border");
filter: blur(20px);
-webkit-transition: all 2s ease;
transition: all 2s ease;
backdrop-filter: blur(10px);
background: rgba( $header-bg,0.8);
@include breakpoint("medium")
$screen-small: 801px;
$screen-medium: 1261px;
$screen-large: 1600px;
stencilColor('button--primary-backgroundColor');
stencilColor('button--primary-color');
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
white-space: nowrap;
&::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: 0;
left: 0;
background-color: stencilColor("navUser-color-hover");
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
&:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
&::-webkit-scrollbar {
display: none;
}
#product-listing-container,#tab-related {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
align-items: stretch;
justify-content: flex-start;
width: 100%;
}
ul.productGrid, ul.product-list {
width: 100%;
display: flex;
flex-wrap: wrap;
li {
flex: 0 0 50%;
display: flex;
padding: 0px !important;
@include breakpoint("medium") {
flex: 0 0 25%;
}
.card {
display: flex;
flex-direction: column;
flex: 1;
box-sizing: border-box;
height: 100%;
margin-bottom: 1rem;
.call-button {
margin-top: auto;
.button {
background: stencilColor('button--primary-backgroundColor');
color: stencilColor('button--primary-color');
}
}
}
}
}
Categories
.card–alternate color reset.
.card--alternate color does not remain consistent and keeps changing. This behavior negatively affects the overall design and user experience, as the inconsistent styling looks unpolished and distracting each time it occurs. It would be much better if the color could remain stable or be easily overridden through custom CSS.
.card--alternate {
border: 3px solid inherit;
.card-body {
background-color: transparent;
}
&:hover {
border-color: inherit;
.card-body {
background-color: inherit;
.card-text {
color: inherit;
}
}
.card-title > a {
color: inherit;
}
}
}
#cornerstone #bigcommerce
