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