diff --git a/resources/css/components/post-header.css b/resources/css/components/post-header.css deleted file mode 100644 index 21c019b..0000000 --- a/resources/css/components/post-header.css +++ /dev/null @@ -1,251 +0,0 @@ -.post-header { - @apply bg-primary text-white py-8 2xl:py-16 px-2 lg:px-4 md:px-8 overflow-x-hidden; - - h1.post-header__title, - h2.post-header__title { - @apply uppercase font-medium text-4xl md:text-5xl lg:text-5xl text-white; - line-height: 1.2; - } - &__inner { - @apply mx-auto grid gap-24; - @screen xl { - @apply container; - } - &--has-thumbnail { - @screen lg { - grid-template-columns: 4fr 1fr; - } - } - &--no-thumbnail { - grid-template-columns: 1fr; - } - } - .content-meta__revue-issue { - @apply bg-white text-primary; - } - .thumbnail-wrapper { - @apply order-2 lg:order-1 relative z-20 h-fit; - width: calc(100% - 40px); - padding: 1.2rem; - /* max-width: calc(70% - 40px); - @apply mx-auto; */ - - @screen lg { - /* transform: translateX(-10px); */ - } - - &:before { - content: ''; - @apply bg-white block absolute top-0 left-0 border border-carhop-green-700 w-full h-full z-10; - } - - img { - aspect-ratio: 4/5; - /* max-height: 200px; */ - @apply max-h-[200px] lg:max-h-full h-full relative z-10; - @apply object-cover; - - /* width: calc(100% - 2rem); - height: calc(100% - 2rem); - margin: 0 auto; */ - } - .thumbnail-overlay { - @apply absolute z-0 rotate-3 top-6 left-6 w-full h-full border border-primary bg-white flex items-center justify-center; - transform: translate(2px, 2px) rotate(2deg); - /* transform: translate(12px, 12px) rotate(3deg); */ - background-image: linear-gradient(#efe8ff, #efe8ff); - background-size: calc(100% - 12px) calc(100% - 12px); - background-repeat: no-repeat; - background-position: center; - background-blend-mode: color-burn; - &:after { - content: ''; - @apply bg-carhop-purple-200; - width: calc(100% - 2rem); - height: calc(100% - 2rem); - } - } - } - - .post-details { - @apply flex flex-col xl:flex-row xl:justify-between gap-x-4 gap-y-8 mt-12; - grid-template-columns: 1fr 1fr; - - &__label { - @apply uppercase font-bold text-lg text-white; - letter-spacing: 0.2em; - } - } - - .socials-buttons { - @apply flex flex-wrap justify-start xl:justify-end gap-4 h-fit shrink-0; - @screen xl { - min-width: 570px; - } - - &__button { - @apply bg-white text-carhop-green-700 px-4 lg:px-6 md:px-8 !py-3 lg:!py-4 font-normal rounded-full w-max flex items-center gap-2; - transition: transform 0.3s ease-in-out; - &:hover { - transform: scale(1.05); - } - - &[disabled] { - @apply opacity-50 cursor-not-allowed; - } - img { - @apply w-7 h-7 filter-primary; - } - - &--like { - transition: all 0.3s ease-in-out; - - .button-action-text { - max-width: 0; - overflow: hidden; - white-space: nowrap; - } - - .likes-count { - max-width: 200px; - overflow: hidden; - /* transition: max-width 0.3s ease-in-out; */ - white-space: nowrap; - } - - &[data-likes-count='0'] { - .button-action-text { - max-width: 200px; - } - .likes-count { - max-width: 0; - } - } - - &:hover { - .button-action-text { - max-width: 200px; - transition: max-width 0.3s ease-in-out; - } - .likes-count { - max-width: 0; - } - } - - &.is-disabled { - @apply opacity-100 cursor-not-allowed hover:opacity-80; - - .likes-count { - @apply block; - } - .button-action-text { - @apply max-w-0; - } - } - - &.is-disabled:hover { - .button-action-text { - @apply max-w-[200px]; - } - .likes-count { - @apply max-w-0; - } - } - } - - &--share { - .socials-buttons__share-links { - @apply max-w-0 opacity-0 overflow-hidden max-h-7; - transition: all 0.3s ease-in-out; - } - &.is-open .socials-buttons__share-links { - @apply max-w-[200px] opacity-100; - } - - .share-icon { - @apply max-w-[200px]; - } - - &.is-open { - .share-icon { - @apply max-w-0 overflow-hidden; - } - .socials-buttons__share-links { - overflow: visible; - } - .share-button { - transform: scale(1) !important; - transition: transform 0.2s ease-in-out !important; - } - .share-button:hover { - transform: scale(1.02) !important; - } - - .copy-link, - .share-link { - @apply block w-7 h-7; - - &:hover { - } - } - } - - .share-link { - display: inline-block; - transition: transform 0.2s ease-in-out !important; - - &:hover { - transform: scale(1.2) !important; - } - } - } - } - - &__share-links { - @apply flex flex-wrap gap-2; - } - - .share-link { - @apply transition-all duration-300; - &:after { - content: none; - } - img { - @apply w-7 h-7 filter-none; - } - - &--copy-link { - @apply relative bg-transparent border-0 p-0 cursor-pointer; - - .copy-feedback { - @apply absolute left-1/2 -translate-x-1/2 -bottom-8 bg-white text-primary px-3 py-1 rounded-md text-sm font-medium whitespace-nowrap z-50; - animation: fadeIn 0.3s ease-in-out; - } - } - } - } -} - -@keyframes fadeIn { - from { - opacity: 0; - transform: translate(-50%, -5px); - } - to { - opacity: 1; - transform: translate(-50%, 0); - } -} -.article-meta__related-revue { - flex-shrink: 1; -} -.article-meta__related-revue a { - @apply hover:underline underline-offset-8 text-white; - text-decoration-color: #fff; - text-decoration-thickness: 1px; -} - -.article-meta__value { - @apply text-white font-light tracking-wide; - letter-spacing: 0.0015em; -}