finished thematique layout, added mixin for columns media-query
This commit is contained in:
parent
144ab7db26
commit
8527be2da9
|
@ -1097,10 +1097,7 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs {
|
|||
|
||||
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
|
||||
margin: 0 auto; }
|
||||
@media only screen and (min-width: 219px) and (max-width: 436px) {
|
||||
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
|
||||
width: 218px; } }
|
||||
@media only screen and (min-width: 437px) and (max-width: 654px) {
|
||||
@media only screen and (max-width: 436px) {
|
||||
header[role="banner"] .wrapper, main[role="main"] > .scroller > .wrapper {
|
||||
width: 436px; } }
|
||||
@media only screen and (min-width: 655px) and (max-width: 872px) {
|
||||
|
@ -1402,8 +1399,20 @@ header[role="banner"] {
|
|||
border-radius: 3px;
|
||||
background-color: #444;
|
||||
color: #fff; }
|
||||
header[role="banner"] #header-bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between; }
|
||||
header[role="banner"] #header-bottom:after {
|
||||
content: none; }
|
||||
header[role="banner"] #header-bottom #block-materiosapisearchblock {
|
||||
align-self: flex-end; }
|
||||
@media (max-width: 654px) {
|
||||
header[role="banner"] #header-bottom {
|
||||
flex-direction: column-reverse; }
|
||||
header[role="banner"] #header-bottom #block-pagetitle {
|
||||
width: max-content; } }
|
||||
header[role="banner"] #block-pagetitle {
|
||||
float: left;
|
||||
padding: 1em 0; }
|
||||
header[role="banner"] #block-pagetitle h2 {
|
||||
margin: 0;
|
||||
|
@ -1423,8 +1432,6 @@ header[role="banner"] {
|
|||
color: #fff;
|
||||
background-color: #69cdcf; }
|
||||
header[role="banner"] #block-materiosapisearchblock {
|
||||
float: right;
|
||||
display: inline-block;
|
||||
padding: 0; }
|
||||
header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form .form-item, header[role="banner"] #block-materiosapisearchblock #materio-sapi-search-form input.button {
|
||||
display: inline-block; }
|
||||
|
@ -1800,19 +1807,19 @@ article.card {
|
|||
cursor: pointer; }
|
||||
|
||||
#main-content > article.thematique div.cols {
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-gap: 1em; }
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap; }
|
||||
@media (max-width: 654px) {
|
||||
#main-content > article.thematique div.cols {
|
||||
flex-wrap: wrap; } }
|
||||
#main-content > article.thematique div.cols div.col-left {
|
||||
grid-column: 1; }
|
||||
#main-content > article.thematique div.cols div.col-right {
|
||||
grid-column: 2/12; }
|
||||
padding: 0 13px 13px 0;
|
||||
flex: 0 0 423px; }
|
||||
|
||||
#main-content > article.thematique div.col-left section.body {
|
||||
background-color: #69cdcf;
|
||||
padding: 0.5em 1em 1em;
|
||||
width: 423px; }
|
||||
padding: 0.5em 1em 1em; }
|
||||
|
||||
#main-content > article.thematique aside.linked-materials ul {
|
||||
width: calc(100% + 13px); }
|
||||
|
|
|
@ -23,19 +23,74 @@ body.toolbar-horizontal.toolbar-themes.toolbar-no-tabs{
|
|||
padding-top: 24px!important;
|
||||
}
|
||||
|
||||
|
||||
// define breakpoints media query for each card column number
|
||||
// $i: 1;
|
||||
// $colw: $column_width;
|
||||
// $m: $column_goutiere;
|
||||
// $bp: $colw + $m;
|
||||
// @while $bp < 4096px {
|
||||
// $upbp: $bp + $colw + $m;
|
||||
// // @media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
|
||||
// // width:$bp;
|
||||
// // }
|
||||
// breakpoint-#{$i}: ("bp":$bp, "upbp":$upbp);
|
||||
// // @mixin col_breakpoint_#{$i}() {
|
||||
// // @media (min-width: $bp + 1px) and (max-width: $upbp) {
|
||||
// // @content;
|
||||
// // }
|
||||
// // }
|
||||
// $bp: $upbp;
|
||||
// $i: $i + 1;
|
||||
// }
|
||||
// @mixin col-mediaquery($i) {
|
||||
// @media (min-width: map.get(#{$breakpoint-$i}, "bp") + 1px) and (max-width: map.get(#{$breakpoint-$i}, "upbp")) {
|
||||
// @content;
|
||||
// }
|
||||
// }
|
||||
|
||||
@mixin col-mediaquery-min-max($i) {
|
||||
$bp: ($column_width + $column_goutiere) * $i + 1px;
|
||||
$upbp: ($column_width + $column_goutiere) * ($i + 1);
|
||||
@media (min-width: $bp) and (max-width: $upbp) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin col-mediaquery-min($i) {
|
||||
$bp: ($column_width + $column_goutiere) * $i;
|
||||
@media (min-width: $bp) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@mixin col-mediaquery-max($i) {
|
||||
$bp: ($column_width + $column_goutiere) * $i;
|
||||
@media (max-width: $bp) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// build break points for each multiple of cards row
|
||||
// cards will always be centered, using all available space
|
||||
%grided-width{
|
||||
margin:0 auto;
|
||||
$m: $column_goutiere;
|
||||
$colw: $column_width;
|
||||
$bp: $colw + $m;
|
||||
$bp: ($colw + $m) * 2;
|
||||
$i: 2;
|
||||
@while $bp < 4096px {
|
||||
$upbp: $bp + $colw + $m;
|
||||
@media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
|
||||
width:$bp;
|
||||
@if $i == 2 {
|
||||
@media only screen and (max-width: $bp) {
|
||||
width:$bp;
|
||||
}
|
||||
}@else{
|
||||
@media only screen and (min-width: $bp + 1px) and (max-width: $upbp) {
|
||||
width:$bp;
|
||||
}
|
||||
}
|
||||
|
||||
$bp: $upbp;
|
||||
$i: $i + 1;
|
||||
}
|
||||
// outline:1px blue solid;
|
||||
// &>*{
|
||||
|
|
|
@ -310,8 +310,29 @@ header[role="banner"]{
|
|||
}
|
||||
|
||||
// header bottom
|
||||
#header-bottom{
|
||||
// disable the default wrapper behaviour
|
||||
&:after{content: none;}
|
||||
// apply flex for normal layout
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
#block-pagetitle{}
|
||||
#block-materiosapisearchblock{
|
||||
align-self: flex-end;
|
||||
}
|
||||
@include col-mediaquery-max(3){
|
||||
flex-direction: column-reverse;
|
||||
// justify-content: flex-start;
|
||||
#block-pagetitle{
|
||||
width: max-content;
|
||||
}
|
||||
#block-materiosapisearchblock{}
|
||||
}
|
||||
|
||||
}
|
||||
#block-pagetitle{
|
||||
float: left;
|
||||
// float: left;
|
||||
padding:1em 0;
|
||||
h2{
|
||||
margin:0;
|
||||
|
@ -339,8 +360,8 @@ header[role="banner"]{
|
|||
}
|
||||
|
||||
#block-materiosapisearchblock{
|
||||
float:right;
|
||||
display:inline-block;
|
||||
// float:right;
|
||||
// display:inline-block;
|
||||
// box-shadow: 0 0 5px rgba(0,0,0,0.2);
|
||||
padding:0;
|
||||
|
||||
|
@ -920,21 +941,23 @@ article.card{
|
|||
// |_|
|
||||
#main-content > article.thematique{
|
||||
div.cols{
|
||||
display: grid;
|
||||
grid-template-rows: 1fr;
|
||||
grid-template-columns: repeat(12, 1fr);
|
||||
grid-gap: 1em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
// @media only screen and (max-width: $small-bp) {
|
||||
@include col-mediaquery-max(3){
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
// }
|
||||
div.col-left{
|
||||
grid-column: 1;
|
||||
}
|
||||
div.col-right{
|
||||
grid-column: 2/12;
|
||||
padding: 0 $column_goutiere $column_goutiere 0;
|
||||
flex: 0 0 $column_width * 2 + $column_goutiere;
|
||||
}
|
||||
div.col-right{}
|
||||
}
|
||||
div.col-left section.body{
|
||||
background-color: $color-base;
|
||||
padding: 0.5em 1em 1em;
|
||||
width:$column_width*2 + $column_goutiere;
|
||||
}
|
||||
aside.linked-materials{
|
||||
ul{
|
||||
|
|
Loading…
Reference in New Issue