Merge remote-tracking branch 'origin/main' into feature/vercel_cashe

src/components/Article/Article.module.scss

@@ -23,22 +23,16 @@ img {
   }
 }
 
-.shoutCover {
-  background-size: cover;
-  height: 0;
-  padding-bottom: 56.2%;
+.articleContent {
+  img {
+    cursor: zoom-in;
+  }
 }
 
 .shoutBody {
   font-size: 1.6rem;
   line-height: 1.6;
 
-  img {
-    display: block;
-    margin-bottom: 0.5em;
-    cursor: zoom-in;
-  }
-
   blockquote,
   blockquote[data-type='punchline'] {
     clear: both;

src/components/Article/FullArticle.tsx

@@ -27,6 +27,7 @@ import { AuthorBadge } from '../Author/AuthorBadge'
 import { getImageUrl } from '../../utils/getImageUrl'
 import { FeedArticlePopup } from '../Feed/FeedArticlePopup'
 import { Lightbox } from '../_shared/Lightbox'
+import { Image } from '../_shared/Image'
 
 type Props = {
   article: Shout
@@ -251,7 +252,10 @@ export const FullArticle = (props: Props) => {
       <Title>{props.article.title}</Title>
       <div class="wide-container">
         <div class="row position-relative">
-          <article class="col-md-16 col-lg-14 col-xl-12 offset-md-5">
+          <article
+            class={clsx('col-md-16 col-lg-14 col-xl-12 offset-md-5', styles.articleContent)}
+            onClick={handleArticleBodyClick}
+          >
             {/*TODO: Check styles.shoutTopic*/}
             <Show when={props.article.layout !== 'music'}>
               <div class={styles.shoutHeader}>
@@ -281,12 +285,7 @@ export const FullArticle = (props: Props) => {
                     props.article.layout !== 'image'
                   }
                 >
-                  <div
-                    class={styles.shoutCover}
-                    style={{
-                      'background-image': `url('${getImageUrl(props.article.cover, { width: 1600 })}')`
-                    }}
-                  />
+                  <Image width={1600} alt={props.article.title} src={props.article.cover} />
                 </Show>
               </div>
             </Show>
@@ -327,9 +326,7 @@ export const FullArticle = (props: Props) => {
             </Show>
 
             <Show when={body()}>
-              <div id="shoutBody" class={styles.shoutBody} onClick={handleArticleBodyClick}>
-                <div innerHTML={body()} />
-              </div>
+              <div id="shoutBody" class={styles.shoutBody} innerHTML={body()} />
             </Show>
           </article>
 

src/components/Feed/ArticleCard/ArticleCard.module.scss

@@ -403,7 +403,6 @@
 }
 
 .shoutCardWithCover {
-  aspect-ratio: 16/9;
   width: 100%;
 
   @include media-breakpoint-down(xl) {
@@ -413,6 +412,7 @@
   }
 
   swiper-slide & {
+    aspect-ratio: 16/9;
     margin-bottom: 0;
 
     @include media-breakpoint-down(lg) {

src/components/_shared/Lightbox/Lightbox.module.scss

@@ -17,7 +17,8 @@
   }
 
   .close {
-    position: absolute;
+    position: fixed;
+    z-index: 1001;
     top: 20px;
     right: 40px;
     font-size: 30px;
@@ -29,12 +30,13 @@
 
   .zoomControls {
     display: flex;
-    position: absolute;
+    position: fixed;
     bottom: 16px;
     left: 50%;
     height: 24px;
     gap: 1rem;
     transform: translateX(-50%);
+    z-index: 1001;
 
     .control {
       border-radius: 50%;

src/components/_shared/Lightbox/Lightbox.tsx

@@ -1,7 +1,8 @@
 import { clsx } from 'clsx'
 import styles from './Lightbox.module.scss'
-import { createSignal } from 'solid-js'
+import { createSignal, onCleanup, onMount } from 'solid-js'
 import { Icon } from '../Icon'
+import { useEscKeyDownHandler } from '../../../utils/useEscKeyDownHandler'
 
 type Props = {
   class?: string
@@ -31,6 +32,8 @@ export const Lightbox = (props: Props) => {
     transition: 'transform 0.3s ease'
   })
 
+  useEscKeyDownHandler(closeLightbox)
+
   return (
     <div class={clsx(styles.Lightbox, props.class)} onClick={closeLightbox}>
       <span class={styles.close} onClick={closeLightbox}>
@@ -40,6 +43,9 @@ export const Lightbox = (props: Props) => {
         <button class={styles.control} onClick={(event) => zoomOut(event)}>
           <b>-</b>
         </button>
+        <button class={styles.control} onClick={() => setZoomLevel(1)}>
+          <b style={{ 'font-size': '10px' }}>1:1</b>
+        </button>
         <button class={styles.control} onClick={(event) => zoomIn(event)}>
           <b>+</b>
         </button>

src/pages/profile/Settings.module.scss

@@ -234,9 +234,12 @@ h5 {
   border: 1px solid var(--black-100);
   cursor: pointer;
 
-  img {
-    width: 100%;
+  .userpicImage {
+    width: 180px;
+    height: 180px;
     border-radius: 50%;
+    background-position: center;
+    background-size: contain;
   }
 
   &.hasControls {
@@ -254,6 +257,7 @@ h5 {
   .control {
     width: 40px;
     height: 40px;
+    padding: 10px;
     border-radius: 50%;
     background: var(--background-color);
     border: 1px solid var(--black-100);

src/pages/profile/profileSettings.page.tsx

@@ -23,6 +23,7 @@ import { Icon } from '../../components/_shared/Icon'
 import { Popover } from '../../components/_shared/Popover'
 import { Image } from '../../components/_shared/Image'
 import { Loading } from '../../components/_shared/Loading'
+import { getImageUrl } from '../../utils/getImageUrl'
 
 export const ProfileSettingsPage = () => {
   const { t } = useLocalize()
@@ -149,7 +150,15 @@ export const ProfileSettingsPage = () => {
                               <Loading />
                             </Match>
                             <Match when={form.userpic}>
-                              <Image width={180} alt={form.name} src={form.userpic} />
+                              <div
+                                class={styles.userpicImage}
+                                style={{
+                                  'background-image': `url(${getImageUrl(form.userpic, {
+                                    width: 180,
+                                    height: 180
+                                  })})`
+                                }}
+                              />
                               <div class={styles.controls}>
                                 <Popover content={t('Delete userpic')}>
                                   {(triggerRef: (el) => void) => (

src/styles/FourOuFour.module.scss

@@ -1,12 +1,11 @@
 .errorPageWrapper {
   height: 100vh;
-  margin: -120px 0 -2em;
-  padding-top: 100px;
+  padding-top: 60px;
 }
 
 .errorPage {
   position: relative;
-  top: 35%;
+  top: 37%;
   transform: translateY(-50%);
 
   .image-link:hover {