188 lines
4.0 KiB
CSS
188 lines
4.0 KiB
CSS
.page--single-revue,
|
|
.page--single-articles {
|
|
.content-wrapper {
|
|
/* @apply bg-yellow-400; */
|
|
@apply container;
|
|
@apply mx-auto grid gap-12 py-12 items-start;
|
|
|
|
grid-template-columns: 1fr 2fr;
|
|
|
|
@media (max-width: 1024px) {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
&[data-active-tab='article'] {
|
|
#article-tags,
|
|
#article-authors,
|
|
#article-references,
|
|
.article-informations,
|
|
.sidebar .search-field,
|
|
.table-matieres {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
&[data-active-tab='authors'] {
|
|
.edito,
|
|
.article-informations,
|
|
#article-references,
|
|
.article-content,
|
|
.sidebar .index-panel,
|
|
.table-matieres {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
&[data-active-tab='references'] {
|
|
#article-authors,
|
|
.article-informations,
|
|
.article-content,
|
|
.sidebar .index-panel,
|
|
.table-matieres {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
&[data-active-tab='table-of-contents'] {
|
|
#revue-authors,
|
|
#article-authors,
|
|
#article-references,
|
|
.article-informations,
|
|
.article-content,
|
|
.sidebar .index-panel {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
&[data-active-tab='informations'] {
|
|
.edito,
|
|
#revue-authors,
|
|
#article-authors,
|
|
#article-references,
|
|
.article-content,
|
|
.table-matieres,
|
|
.sidebar .index-panel {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sidebar {
|
|
@media (max-width: 1024px) {
|
|
#article-tags {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
.search-field {
|
|
input {
|
|
@apply border border-primary w-full;
|
|
@apply w-full p-4;
|
|
}
|
|
}
|
|
.tags {
|
|
@apply hidden lg:block;
|
|
}
|
|
.tags__title {
|
|
@apply text-lg uppercase font-semibold mt-8 my-4 nunito;
|
|
}
|
|
.tags-list {
|
|
@apply flex flex-wrap gap-4;
|
|
}
|
|
.article-tag {
|
|
@apply block;
|
|
}
|
|
}
|
|
|
|
.content-area {
|
|
@apply max-w-screen-2xl mx-auto w-full;
|
|
.edito {
|
|
@apply border border-primary p-6 mb-12;
|
|
summary {
|
|
cursor: pointer;
|
|
@apply relative;
|
|
&::marker {
|
|
content: none;
|
|
}
|
|
&::after {
|
|
@apply absolute top-1/2 right-0 -translate-y-1/2;
|
|
transition: transform 0.3s ease-out;
|
|
background-image: url('../resources/img/elements/select-drop-button.svg');
|
|
/* background-image: url('../resources/img/icons/icon-activites.svg'); */
|
|
|
|
content: ' ';
|
|
@apply bg-contain;
|
|
/* @apply bg-red-500; */
|
|
@apply block w-12 h-12;
|
|
@apply rounded-full;
|
|
@apply mr-2;
|
|
}
|
|
}
|
|
&[open] {
|
|
summary::after {
|
|
transform: rotate(-180deg) translateY(50%);
|
|
}
|
|
}
|
|
&__title {
|
|
@apply text-3xl font-bold;
|
|
}
|
|
&__content {
|
|
@apply text-lg mt-6;
|
|
}
|
|
&__cta {
|
|
@apply my-4;
|
|
}
|
|
}
|
|
.table-matieres {
|
|
&__title {
|
|
@apply text-4xl font-bold mb-12;
|
|
}
|
|
.article-grid__list {
|
|
@apply grid grid-cols-1 gap-4;
|
|
}
|
|
}
|
|
}
|
|
article {
|
|
/* @apply py-12 my-12; */
|
|
@apply text-carhop-gray;
|
|
.article-title {
|
|
@apply mb-8;
|
|
}
|
|
.article-tags {
|
|
@apply mb-12;
|
|
}
|
|
ul,
|
|
ol,
|
|
p {
|
|
@apply mb-6;
|
|
}
|
|
h1 {
|
|
@apply mb-10;
|
|
}
|
|
h2,
|
|
h3 {
|
|
@apply font-bold nunito mb-3 mt-12;
|
|
font-size: 1.7rem;
|
|
}
|
|
}
|
|
|
|
#cite-reference {
|
|
@apply hidden;
|
|
}
|
|
|
|
.content-tab__title {
|
|
@apply text-3xl uppercase font-thin mb-6;
|
|
}
|
|
}
|
|
|
|
/* HANDLING STICKY SIDEBAR ON MOBILE */
|
|
.content-wrapper[data-active-tab='article'] {
|
|
.sidebar {
|
|
@apply sticky top-0;
|
|
|
|
/* ON MOBILE, STICK ON THE BOTTOM OF THE ARTICLE */
|
|
/* We need to reverse the content order */
|
|
@media (max-width: 1024px) {
|
|
@apply sticky bottom-0 z-50;
|
|
order: 2;
|
|
@apply sticky bottom-0;
|
|
align-self: flex-end;
|
|
}
|
|
}
|
|
}
|