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

responsive

Browse Source
This commit is contained in:
kevin
2020-07-27 23:03:25 +02:00
parent 34741c345d
commit f7a6562f51
47 changed files with 1056 additions and 946 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/popsu_colloque/css/components/thumbnails/thumbnails.scss
+24 -39
View File
@@ -11,7 +11,10 @@ section{
width: 100%;
height: auto;
background: white;
margin: $gutter1;
margin: calc(#{$gutter}) 0;
@media screen and (min-width: 768px) {
margin: calc(#{$gutter});
}
&:not(.bibliographie):not(.programme){
@include shadow;
}
@@ -21,6 +24,11 @@ section{
}
.__wrap{
padding: 1rem;
time, .type_moment{
font-family: 'truenoregular';
font-size: 0.8rem;
text-transform: uppercase;
}
& > .d-flex{
margin-bottom: 0.5rem;
}
@@ -29,13 +37,13 @@ section{
// thumbnails publications
&.publications{
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter1} * 2);
width: calc(100% / 3 - #{$gutter} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter1} * 2);
width: calc(100% / 4 - #{$gutter} * 2);
}
.__media{
padding: 0.5rem 0 0.5rem 0.5rem;
@@ -52,13 +60,13 @@ section{
@include shadow;
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter1} * 2);
width: calc(100% / 3 - #{$gutter} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter1} * 2);
width: calc(100% / 4 - #{$gutter} * 2);
}
& > div * {
color: $col_black;
@@ -76,40 +84,17 @@ section{
}
}
// thumbnails slides
.__slide{
.thumbnails{
// max-width: 380px;
width: calc(100% - 30px);
a{
width: calc(100%);
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter1} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 4 - #{$gutter1} * 2);
}
}
}
// Page programme
.container{
&.programme{
.thumbnails{
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
width: calc(100% / 2 - #{$gutter} * 2);
margin: 0.5rem;
}
@media screen and (min-width: 992px) {
width: calc(100% / 3 - #{$gutter1} * 2);
width: calc(100% / 3 - #{$gutter} * 2);
}
// @media screen and (min-width: 1200px) {
// width: calc(100% / 4 - #{$gutter1} * 2);
// }
}
}
}
@@ -117,7 +102,7 @@ section{
.__ressources{
.__publications{
.publications{
// margin: $gutter1;
// margin: $gutter;
.__media{
padding: 0.5rem 0 0.5rem 0.5rem;
@@ -126,13 +111,13 @@ section{
padding: 0.5rem;
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 2 - #{$gutter1} * 2);
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 2 - #{$gutter1} * 2);
width: calc(100% / 2 - #{$gutter} * 2);
}
}
}
@@ -148,13 +133,13 @@ section{
}
}
@media screen and (min-width: 768px) {
width: calc(100% / 2 - #{$gutter1} * 2);
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 992px) {
width: calc(100% / 2 - #{$gutter1} * 2);
width: calc(100% / 2 - #{$gutter} * 2);
}
@media screen and (min-width: 1200px) {
width: calc(100% / 2 - #{$gutter1} * 2);
width: calc(100% / 2 - #{$gutter} * 2);
}
}