FEATURE Introducing styling
This commit is contained in:
Antoine M
parent
06473a3f8f
commit
0f2c1b5aa1
50
resources/css/components/listen-article.css
Normal file
50
resources/css/components/listen-article.css
Normal file
|
|
@ -0,0 +1,50 @@
|
||||||
|
#listen-article,
|
||||||
|
#stop-reading {
|
||||||
|
@apply rounded-full w-12 h-12 flex items-center justify-center m-0 p-0 transition-all duration-300;
|
||||||
|
}
|
||||||
|
#listen-article {
|
||||||
|
@apply bg-primary text-white;
|
||||||
|
&:hover {
|
||||||
|
@apply scale-110;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
@apply w-6 h-6;
|
||||||
|
}
|
||||||
|
&[data-reading-status='playing'] {
|
||||||
|
/* @apply bg-blue-500; */
|
||||||
|
@apply bg-white border border-primary;
|
||||||
|
/* &:hover {
|
||||||
|
@apply bg-red-500;
|
||||||
|
} */
|
||||||
|
#play-reading {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
#pause-reading {
|
||||||
|
@apply block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[data-reading-status='stopped'] {
|
||||||
|
#play-reading {
|
||||||
|
@apply block;
|
||||||
|
}
|
||||||
|
#pause-reading {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&[data-reading-status='paused'] {
|
||||||
|
@apply bg-yellow-500;
|
||||||
|
#play-reading {
|
||||||
|
@apply block;
|
||||||
|
}
|
||||||
|
#pause-reading {
|
||||||
|
@apply hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#stop-reading {
|
||||||
|
@apply bg-primary hidden;
|
||||||
|
img {
|
||||||
|
@apply w-4 h-4;
|
||||||
|
}
|
||||||
|
}
|
||||||
268
resources/css/components/post-header.css
Normal file
268
resources/css/components/post-header.css
Normal file
|
|
@ -0,0 +1,268 @@
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
&__main-author {
|
||||||
|
@apply text-white font-light tracking-wide flex items-center gap-3 mt-4;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
@apply w-6 h-6 block bg-no-repeat bg-center bg-contain;
|
||||||
|
content: '';
|
||||||
|
background-image: url('../resources/img/icons/carhop-plume2.svg');
|
||||||
|
filter: invert(1) brightness(0) saturate(100%) invert(100%);
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
@apply underline underline-offset-8;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&__inner {
|
||||||
|
@apply mx-auto grid gap-24;
|
||||||
|
@screen xl {
|
||||||
|
@apply container;
|
||||||
|
}
|
||||||
|
@apply max-w-screen-2xl mx-auto;
|
||||||
|
&--has-thumbnail {
|
||||||
|
@screen lg {
|
||||||
|
grid-template-columns: 4fr 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&--no-thumbnail {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-meta__revue-issue {
|
||||||
|
@apply bg-white !text-primary;
|
||||||
|
}
|
||||||
|
.content-meta__type {
|
||||||
|
@apply text-white;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
19
resources/css/components/post-tag.css
Normal file
19
resources/css/components/post-tag.css
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
.post-tag {
|
||||||
|
@apply w-fit bg-transparent px-3 py-2 relative text-primary border border-primary !list-none;
|
||||||
|
a {
|
||||||
|
text-decoration: none !important;
|
||||||
|
@apply block;
|
||||||
|
&:hover {
|
||||||
|
@apply !filter-none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
a {
|
||||||
|
@apply text-white;
|
||||||
|
}
|
||||||
|
@apply bg-primary text-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.post-tags-list {
|
||||||
|
@apply flex flex-wrap gap-2;
|
||||||
|
}
|
||||||
11
resources/css/components/post-toolbar.css
Normal file
11
resources/css/components/post-toolbar.css
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
#post-toolbar {
|
||||||
|
@apply max-w-screen-2xl mx-auto;
|
||||||
|
}
|
||||||
|
.toolbar-actions {
|
||||||
|
@apply flex items-center gap-3 ml-auto;
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
@apply absolute left-0 translate-y-full;
|
||||||
|
bottom: -20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user