Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1545

Svelte-QWER blog - debugging unwanted margins

$
0
0

I'm completely new to Svelte; I actually started with some documentation and ChatGPT!
I created a blog using QWER and added a section for my certificates. However, when I navigate from the my-certificates section to other sections (e.g., about), a large gap appears before the content! (Reloading the page fixes the issue; it only happens when navigating from the certificates section to other sections).
The index.md file is converted to .svelte using this code > processFile.js.
How can I fix this bug?
My code (from the my-certificates folder > index.md):

---title: "My Certificates"published: "2024-06-03T19:35:46.000+08:00"---<script>  const images = [    {        src: '/my_certs/cert1.png',       caption: 'cert1-caption',       link: 'https://issuer.com/verify/123'    },    ...  ]function handleImageClick(event) {    event.stopPropagation();  }</script><style>  .gallery {    display: flex;    flex-wrap: wrap;    gap: 10px;  }  .gallery-item {    position: relative;    width: calc(25% - 10px); /* Four columns with 10px gap */    box-sizing: border-box;  }  .image-container {    position: relative;    width: 100%;  }  .gallery-item img {    width: 100%;    height: auto;    display: block;    transition: filter 0.3s ease;  }  .gallery-item:hover img {    filter: blur(5%);  }  .icon-overlay {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);    display: flex;    justify-content: center;    align-items: center;    /* Default opacity of icon */    opacity: 0;    transition: opacity 0.3s ease;    pointer-events: none;  }  .gallery-item:hover .icon-overlay {    opacity: 1;    pointer-events: all;  }  .gallery-item:hover .icon-overlay a {    opacity: 0.70; /* Increase opacity of icon on hover */  }  .icon-overlay a {    font-size: 24px;    color: white;    text-decoration: none;    background-color: rgba(0, 0, 0, 0.5);    padding: 10px;    border-radius: 50%;    /* Default opacity of icon link */    opacity: 0.5;  }  .caption {    text-align: center;    margin-top: 5px;  }  @media (max-width: 768px) {    .gallery-item {      width: calc(50% - 10px);    }  }  @media (max-width: 480px) {    .gallery-item {      width: calc(100% - 10px);    }  }</style><div class="gallery">  {#each images as { src, caption, link }}<div class="gallery-item"><div class="image-container">        {#if link !== ''}<button class="icon-overlay"                   aria-label="Opens the link to certificate"                  on:click|stopPropagation={() => handleImageClick(event)}                  on:keypress={(event) => { if(event.key === 'Enter') handleImageClick(event); }}                  tabindex="0"                  style="all: unset; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"><a href={link} target="_blank" rel="noopener noreferrer">🔗</a></button>        {/if}<ImgZoom src={src} alt={caption} class="h-full object-cover" /></div><div class="caption">{@html caption}</div></div>  {/each}</div>

Viewing all articles
Browse latest Browse all 1545

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>