bachir/gdp_vuewp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsive for landscape #830

Browse Source
This commit is contained in:
bachir
2022-03-17 18:27:28 +01:00
parent 006dd606ea
commit 2b40b9910d
3 changed files with 19 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.scss
+7 -7
View File
@@ -172,7 +172,7 @@ section[role="main-content"]{
@include teasersfilet(8em, 0.5em); @include teasersfilet(8em, 0.5em);
} }
// responsive // responsive
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
header{ header{
h1{ h1{
font-size: 5em; font-size: 5em;
@@ -530,7 +530,7 @@ section[role="main-content"]{
time{ time{
font-weight: 600; font-weight: 600;
} }
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
background-color: #fff; background-color: #fff;
padding: 1em; padding: 1em;
box-shadow: 0 0 10px $gris; box-shadow: 0 0 10px $gris;
@@ -826,7 +826,7 @@ section[role="main-content"]{
} }
} }
// responsive // responsive
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
position: relative; position: relative;
>nav{ >nav{
$top: 45px; $top: 45px;
@@ -976,7 +976,7 @@ footer[role="tools"]{
z-index: 9; z-index: 9;
background-color: $gris; background-color: $gris;
padding:1.2em $side-padding; padding:1.2em $side-padding;
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
padding:1.2em $side-padding/2; padding:1.2em $side-padding/2;
} }
max-height: $list-item-h * 3; max-height: $list-item-h * 3;
@@ -1026,7 +1026,7 @@ footer[role="tools"]{
} }
// responsive // responsive
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
position: relative; position: relative;
>header{ >header{
padding:0 0 1em 0; padding:0 0 1em 0;
@@ -1053,7 +1053,7 @@ footer[role="tools"]{
#footer-bottom{ #footer-bottom{
z-index: 10; z-index: 10;
padding:0 $side-padding; padding:0 $side-padding;
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
padding:0 $side-padding/2; padding:0 $side-padding/2;
} }
background-color: $bleuroi; background-color: $bleuroi;
@@ -1168,7 +1168,7 @@ footer[role="tools"]{
} }
// responsive // responsive
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
form{ form{
fieldset{ fieldset{
&.search{ &.search{
assets/css/base/_grid-flex.scss
+3 -3
View File
@@ -6,7 +6,7 @@
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: stretch; align-items: stretch;
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
flex-wrap:wrap; flex-wrap:wrap;
} }
} }
@@ -20,7 +20,7 @@
// small // small
.small-row { .small-row {
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
@include row; @include row;
} }
} }
@@ -68,7 +68,7 @@
// small // small
.small-col-#{$c} { .small-col-#{$c} {
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
@include col($c); @include col($c);
} }
} }
assets/css/base/_layout.scss
+9 -3
View File
@@ -31,7 +31,7 @@ body{
flex: 0 0 auto; flex: 0 0 auto;
@extend %layout-element; @extend %layout-element;
padding:1em $side-padding 1em $side-padding; padding:1em $side-padding 1em $side-padding;
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
padding:1em $side-padding/2 0 $side-padding/2; padding:1em $side-padding/2 0 $side-padding/2;
} }
} }
@@ -52,7 +52,7 @@ body{
>*{ >*{
@include fade-transition; @include fade-transition;
} }
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
overflow-y: auto; overflow-y: auto;
padding:0 $side-padding/2 0 $side-padding/2; padding:0 $side-padding/2 0 $side-padding/2;
} }
@@ -79,7 +79,13 @@ body{
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
} }
@media only screen and (max-width: $small-bp) { @media only screen and (max-width: $small-bp), (orientation: portrait) {
.main-content-layout{
display: flex;
flex-direction: column;
}
}
@media (orientation: portrait) {
.main-content-layout{ .main-content-layout{
display: flex; display: flex;
flex-direction: column; flex-direction: column;