kevin/Popsu-coloque
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

created colloque 2024 theme

Browse Source
This commit is contained in:
bachir
2024-03-07 13:13:44 +01:00
parent 96da96e96d
commit ff8712ff3c
303 changed files with 45057 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/colloque2024/css/components/thumbnails/thumbnails.scss
+269
View File
@@ -0,0 +1,269 @@
// thumbnails global
section {
article.thumbnails.programme {
.__content {
span {
color: $color2;
font-size: 0.8rem;
font-family: "truenoregular_italic";
text-transform: none !important;
strong {
font-family: "truenobold_italic";
}
}
}
}
& > div:not(.__slide) {
article.thumbnails.programme {
a {
display: block;
width: 100%;
height: 100%;
background: white;
@include shadow;
}
}
}
}
.thumbnails {
width: 100%;
height: auto;
background: white;
margin: calc(#{$gutter}) 0;
@media screen and (min-width: 768px) {
margin: calc(#{$gutter});
}
&:not(.bibliographie):not(.programme) {
@include shadow;
}
figure {
height: 150px;
margin: 0;
}
.__wrap {
padding: 1rem;
time,
.type_moment {
font-family: "truenoregular";
font-size: 0.8rem;
text-transform: uppercase;
}
& > .d-flex {
margin-bottom: 0.5rem;
}
}
// thumbnails publications
&.publications {
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter} * 2);
}
.__media {
padding: 0.5rem 0 0.5rem 0.5rem;
.__img {
width: 100px;
}
}
.__wrap {
padding: 0.5rem;
}
& > div {
height: 100%;
}
div > * {
color: $color2;
}
a {
display: block;
height: 100%;
}
}
&.bibliographie {
background: white !important;
padding: 0.5rem;
&.link_ext {
@include shadow;
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter} * 2);
}
& > div * {
color: $color2;
&.__auteur * {
font-size: 1.4rem;
}
&.__body {
margin: 1rem 0;
}
}
a {
text-decoration: underline;
color: $color1;
}
}
&.interviews {
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter} * 2);
}
.__media {
padding: 0.5rem 0 0.5rem 0.5rem;
max-width: 50%;
.__img {
width: 100px;
}
}
.__wrap {
padding: 0.5rem;
}
& > div {
height: 100%;
}
div > * {
color: $color2;
}
a {
display: block;
height: 100%;
}
}
}
// Page programme
.container {
&.programme {
.thumbnails {
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter} * 2);
margin: 0.5rem;
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter} * 2);
}
.inter {
margin-top: 0.5rem;
span {
color: $color2;
font-size: 0.8rem;
font-family: "truenoregular_italic";
text-transform: none !important;
strong {
font-family: "truenobold_italic";
}
}
}
}
}
}
// page moment
.__ressources {
.__publications {
.publications {
// margin: $gutter;
.__media {
padding: 0.5rem 0 0.5rem 0.5rem;
}
.__wrap {
padding: 0.5rem;
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
}
}
.__bibliographie {
.thumbnails {
background: transparent;
a {
& > div {
div,
span,
p {
display: inline;
background: white;
}
}
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
}
}
.__interviews {
.interviews {
// margin: $gutter;
.__media {
padding: 0.5rem 0 0.5rem 0.5rem;
}
.__wrap {
padding: 0.5rem;
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 2 - #{$gutter} * 2);
}
}
}
}
// thumbnails participant
.thumbnails_participants {
figure {
& > div {
width: 100px;
height: 100px;
margin-left: 0.5rem;
img {
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
}
figcaption {
&.__info {
padding: 4rem 0.5rem 0.5rem 0.5rem;
margin-top: -3rem;
background: white;
.__name {
text-transform: uppercase;
}
}
}
}
}