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

page ressource && participant

Browse Source
This commit is contained in:
kevin
2020-07-19 18:12:39 +02:00
parent d6f8d684e4
commit 40070233b8
32 changed files with 1087 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/themes/custom/popsu_colloque/css/components/forms/filter.scss
+22
View File
@@ -0,0 +1,22 @@
#views-exposed-form-publications-page-1,
#views-exposed-form-bibliographie-page-1{
margin: 2rem 0;
display: flex;
& > div{
margin-right: 2rem;
select{
border: 1px solid $color2;
background: white;
padding: 0.2rem 0.5rem;
outline: none;
&:focus{
border: 2px solid $color2;
outline: none;
}
option{
padding: 0.2rem 0.5rem;
min-height: 2rem;
}
}
}
}
web/themes/custom/popsu_colloque/css/components/header.scss → web/themes/custom/popsu_colloque/css/components/header/header.scss
View File
web/themes/custom/popsu_colloque/css/components/header/sub_menu.scss
+21
View File
@@ -0,0 +1,21 @@
#block-popsu-colloque-submenu{
ul{
display: flex;
li{
margin-right: 1rem;
a{
display: block;
padding: 1rem 1rem;
border: 1px solid $color2;
color: $color2;
background: white;
transition: color 0.3s ease, background 0.3s ease;
&:hover{
color: white;
background: blue;
transition: all 0.3s ease;
}
}
}
}
}
web/themes/custom/popsu_colloque/css/components/hero.scss
+59 -6
View File
@@ -1,14 +1,67 @@
.__img-hero{
height: 400px;
// width: 100vw;
// position: relative;
// left: 50%;
// right: 50%;
// margin-left: -50vw;
// margin-right: -50vw;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
img{
width:100%;
height: 100%;
object-fit: cover;
}
}
.participant_full{
.hero{
figure{
width:100%;
.__img{
&> div{
margin: auto;
width: 300px;
height: 300px;
}
img{
border-radius: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
}
figcaption {
align-self: center;
text-align: center;
margin: 2rem 0;
}
}
}
}
@media screen and (min-width: 768px) {
.participant_full{
.hero{
figure{
width:100%;
.__img{
margin-right: 2rem;
&> div{
width: 300px;
height: 300px;
}
img{
border-radius: 100%;
width: 100%;
height: 100%;
object-fit: cover;
}
}
figcaption {
align-self: center;
}
}
}
}
}
web/themes/custom/popsu_colloque/css/components/layout.scss
+34 -9
View File
@@ -15,15 +15,6 @@ img{
}
}
.programme{
.views{
section{
margin: 0 0 5rem 0;
}
}
}
#block-views-block-slide-programme-block-1,
#block-views-block-dernieres-publications-block-1{
.views{
@@ -37,7 +28,41 @@ article{
.__title{
@include croix_or;
}
.__head{
div{
& > div{
margin: 0rem 0.5rem;
}
}
}
}
h4{
@include croix_or;
}
blockquote{
font-size: 2rem;
line-height: 1;
margin: 2rem;
color: $lightgrey;
@include croix_or_B;
}
.container{
&.programme{
.views{
section{
&:not(:last-child){
@include croix_or;
margin: 0 0 2rem 0;
& > .d-flex{
padding: 0 0 2rem 0;
}
}
&:last-child{
margin-bottom: 5rem ;
}
}
}
}
}
web/themes/custom/popsu_colloque/css/components/sidebar/role_inter.scss
+4
View File
@@ -0,0 +1,4 @@
.___title_inter{
border-bottom: 1px solid black;
margin-bottom: 2rem;
}
web/themes/custom/popsu_colloque/css/components/thumbnails.scss
-123
View File
@@ -1,123 +0,0 @@
/**
* @file
* Presentational styles for Drupal stark theme layout.
*
* It is left empty for testing purposes.
*
* @see https://www.drupal.org/project/drupal/issues/2349711
*/
.thumbnails{
margin: 1rem 0rem;
// max-width: 300px;
min-width: 250px;
height: auto;
width: calc(100% / 4 );
background: white;
transform: scale(1);
@include shadow;
a{
display: block;
height: 100%;
}
& > .__wrap{
padding: 1rem;
}
.__media{
margin-right: 1rem;
figure{
height: 100%;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.d-flex{
padding: 1rem;
}
}
.thumbnails{
figure{
height: 100px;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.programme{
.row{
margin: 0;
}
.thumbnails{
width: 100%;
margin: 0;
figure{
height: 250px;
}
}
}
@media screen and (min-width: 992px) {
.programme{
.row{
margin: $gutter1 calc(-#{$gutter1});
}
.thumbnails{
width: calc( 50% - #{$gutter1} * 2);
margin: 0 $gutter1;
figure{
height: 250px;
}
}
}
}
article{
.__publications{
& > div{
article{
width: 100%;
@include shadow;
figure{
padding: 1rem;
.__media{
margin-right: 1rem;
}
figcaption {
width: 80%;
}
}
}
}
}
}
@media screen and (min-width: 992px) {
article{
.__publications{
& > div{
margin: 0 calc(-#{$gutter1});
article{
width: calc( 50% - #{$gutter1} * 2);
margin: 0 $gutter1;
@include shadow;
figure{
padding: 1rem;
.__media{
margin-right: 1rem;
}
figcaption {
width: 80%;
}
}
}
}
}
}
}
web/themes/custom/popsu_colloque/css/components/thumbnails/thumbnails.scss
+245
View File
@@ -0,0 +1,245 @@
.thumbnails{
margin: 1rem 0rem;
// max-width: 300px;
min-width: 250px;
height: auto;
width: calc(100% / 4 );
background: white;
transform: scale(1);
@include shadow;
a{
display: block;
height: 100%;
}
& > .__wrap{
padding: 1rem;
}
.__media{
margin-right: 1rem;
figure{
height: 100%;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.d-flex{
padding: 1rem;
}
}
.thumbnails{
figure{
height: 100px;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.programme{
.row{
margin: 0;
}
.thumbnails{
width: 100%;
margin: 0;
figure{
height: 250px;
}
}
}
@media screen and (min-width: 992px) {
.programme{
.row{
margin: $gutter1 calc(-#{$gutter1});
}
.thumbnails{
width: calc( 50% - #{$gutter1} * 2);
margin: 0 $gutter1;
figure{
height: 250px;
}
}
}
}
.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;
}
.__qualite{
}
}
}
}
}
article{
.__publications{
& > div{
article{
width: 100%;
@include shadow;
figure{
padding: 1rem;
.__media{
margin-right: 1rem;
}
figcaption {
width: 80%;
}
}
}
}
}
.__bibliographie{
& > div{
article{
width: 100%;
a{
& > div {
p, span, div{
display: inline;
background: white;
}
}
}
}
}
}
}
.container {
&.publications{
section{
article{
width: 100%;
@include shadow;
figure{
padding: 1rem;
.__media{
margin-right: 1rem;
}
figcaption {
width: 80%;
}
}
}
}
}
&.bilbiographie{
article{
width: 100%;
a{
& > div {
p, span, div{
display: inline;
background: white;
}
}
}
}
}
}
@media screen and (min-width: 992px) {
article{
.__publications{
& > div{
margin: 0 calc(-#{$gutter1});
article{
width: calc( 50% - #{$gutter1} * 2);
margin: 0 $gutter1;
@include shadow;
figure{
padding: 1rem;
.__media{
margin-right: 1rem;
}
figcaption {
width: 80%;
}
}
}
}
}
.__bibliographie{
& > div{
margin: 0 calc(-#{$gutter1});
article{
width: calc( 100% / 3 - #{$gutter1} * 3);
margin: 0 $gutter1;
figure{
padding: 1rem;
.__media{
margin-right: 1rem;
}
figcaption {
width: 80%;
}
}
}
}
}
}
.container {
&.publications{
section{
article{
width: calc( 50% - #{$gutter1} * 2);
margin: 0 $gutter1;
@include shadow;
figure{
padding: 1rem;
.__media{
margin-right: 1rem;
}
figcaption {
width: 80%;
}
}
}
}
}
&.bibliographie{
article{
width: calc( 100% / 3 - #{$gutter1} * 3);
margin: 0 $gutter1;
figure{
padding: 1rem;
.__media{
margin-right: 1rem;
}
figcaption {
width: 80%;
}
}
}
}
}
}
web/themes/custom/popsu_colloque/css/index.scss
+6 -2
View File
@@ -31,12 +31,16 @@ h1,h2,h3,h4{
padding: 0;
}
@import "components/header.scss";
@import "components/header/header.scss";
@import "components/header/sub_menu.scss";
@import "components/forms/filter.scss";
@import "components/hero.scss";
@import "components/layout.scss";
@import "components/sidebar/rs.scss";
@import "components/sidebar/role_inter.scss";
@import "components/slides/flickity.scss";
@import "components/slides/slides.scss";
@import "components/thumbnails/thumbnails.scss";
main{
// margin-top: $margin-hero;
@@ -66,4 +70,4 @@ article img,
}
@import "components/thumbnails.scss";
// @import "components/thumbnails.scss";
web/themes/custom/popsu_colloque/css/mixins/mixin.scss
+14 -2
View File
@@ -1,6 +1,5 @@
@mixin croix_or {
&:after{
// width: 100%;
height: 2rem;
margin-top: 0.5rem;
content: " ";
@@ -11,11 +10,24 @@
}
}
@mixin croix_or_B {
&:before{
width: 100px;
height: 1rem;
margin-top: 0.5rem;
content: " ";
display: block;
background: url($croix_or);
background-repeat: repeat-x;
background-size: auto auto;
}
}
@mixin shadow{
box-shadow: none;
transition: 0.3s transform ease, 0.3s box-shadow ease;
&:hover{
&:hover{
transform: scale(1.05);
transition: 0.3s all ease;
box-shadow: 0px 0px 13px 0px $color2;
web/themes/custom/popsu_colloque/css/typography.scss
+11 -5
View File
@@ -1,15 +1,21 @@
main{
h2, a{
color: $color2;
h2{
text-transform: uppercase;
}
h2, a{
// color: $color2;
}
h3{
text-transform: uppercase;
margin: 2rem 0;
}
.blue, #txt_present{
color: $color2;
// color: $color2;
}
#block-views-block-slide-programme-block-1{
.thumbnails a{
color: $col_black;
// color: $col_black;
}
}
}
web/themes/custom/popsu_colloque/css/variables/var.scss
+1
View File
@@ -1,6 +1,7 @@
$color1: red;
$color2: #1d378eff;
$col_black: black;
$lightgrey: grey;
$gutter1 : 1rem;