diff --git a/resources/css/pages/single-articles.css b/resources/css/pages/single-articles.css index ec28220..6aed2b9 100644 --- a/resources/css/pages/single-articles.css +++ b/resources/css/pages/single-articles.css @@ -21,4 +21,14 @@ @apply text-base; line-height: 1.2; } + .wp-block-image { + @apply p-3 border border-primary border-solid; + + &.rotate-left { + rotate: -0.6deg; + } + &.rotate-right { + rotate: 0.6deg; + } + } } diff --git a/resources/js/singles/alternate-pictures.ts b/resources/js/singles/alternate-pictures.ts new file mode 100644 index 0000000..7b5409a --- /dev/null +++ b/resources/js/singles/alternate-pictures.ts @@ -0,0 +1,11 @@ +export default function alternatePictures() { + const images = document.querySelectorAll('.page--single-articles .wp-block-image'); + + images.forEach((img, index) => { + if (index % 2 === 0) { + img.classList.add('rotate-right'); + } else { + img.classList.add('rotate-left'); + } + }); +} diff --git a/resources/js/singles/singles.ts b/resources/js/singles/singles.ts index 02043b2..c33f02a 100644 --- a/resources/js/singles/singles.ts +++ b/resources/js/singles/singles.ts @@ -8,6 +8,7 @@ import handleArticleReader from './reader.ts'; import { handleArticleToolbar } from './article-toolbar.ts'; import { handleRevueToolbar } from './revue-toolbar.ts'; import handleSearchRevue from './search-revue.ts'; +import alternatePictures from './alternate-pictures.ts'; export default function singles(): void { const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue'); const isSingleArticle: HTMLElement | null = document.querySelector('.page--single-articles'); @@ -22,4 +23,8 @@ export default function singles(): void { handleShareButton(); handleArticleReader(); handleSearchRevue(); + + if (isSingleArticle) { + alternatePictures(); + } }