bachir/materio-d9
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

finished thematique layout, added mixin for columns media-query

Browse Source
This commit is contained in:
Bachir Soussi Chiadmi
2020-12-26 12:42:37 +01:00
parent 144ab7db26
commit 8527be2da9
3 changed files with 116 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
web/themes/custom/materiotheme/assets/dist/main.css vendored
View File

@@ -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); }