tablet reponsive

This commit is contained in:
Yves Gatesoupe 2020-07-17 18:35:06 +02:00
parent 6da83b2d89
commit de70877811
9 changed files with 125 additions and 20 deletions

View File

@ -1,6 +1,6 @@
{% if navigation.items %}
<nav class="nav" aria-label="{{ariaLabel}}">
<ul class="[ nav__list ] [ box-flex align-center md:space-before ]">
<ul class="[ nav__list ]">
{% for item in navigation.items %}
{% set relAttribute = '' %}
{% set currentAttribute = '' %}

View File

@ -42,7 +42,29 @@
}
}
@media (max-width: 575.98px) {
@media (min-width: 768px) and (max-width: 1199.98px) {
.intro {
margin-top: 4rem;
&__heading {
width: 100%;
max-width: none;
+ svg {
order: 1;
margin-right: auto;
}
}
.btn-grp {
margin-top: auto;
margin-right: auto;
margin-bottom: 4rem;
}
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.intro {
margin-top: 3rem;
@ -52,16 +74,48 @@
+ svg {
margin: 2rem auto 0;
max-width: 7rem;
order: 0;
}
}
.btn-grp {
margin-top: 0;
display: flex;
width: 100%;
width: auto;
flex-direction: column;
align-items: center;
margin-top: 2rem;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
.btn + .btn {
margin-left: 0;
margin-top: 1.5rem;
}
}
}
}
@media (max-width: 575.98px) {
.intro {
margin-top: 3rem;
&__heading {
font-size: 1.75rem;
+ svg {
margin: 2rem auto 0;
max-width: 7rem;
order: 0;
}
}
.btn-grp {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 2rem;
margin-bottom: 0;
width: 100%;
.btn + .btn {
margin-left: 0;

View File

@ -52,12 +52,25 @@
}
}
@media (max-width: 575.98px) {
@media (max-width: 1199.98px) {
.member-list {
&__heading {
margin: 4rem 0;
font-size: 1.75rem;
}
}
}
@media (max-width: 991.98px) {
.member-list {
&__items {
grid-template-columns: repeat(2, 1fr);
}
}
}
@media (max-width: 575.98px) {
.member-list {
&__items {
display: block;
}

View File

@ -5,6 +5,9 @@
margin: -.5rem;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
display: flex;
align-items: center;
justify-content: flex-end;
&::-webkit-scrollbar {
display: none;
@ -35,8 +38,12 @@
}
}
@media (max-width: 575.98px) {
@media (max-width: 1199.98px) {
.nav {
margin-top: 1rem;
&__list {
justify-content: flex-start;
}
}
}

View File

@ -330,7 +330,7 @@
}
}
@media (max-width: 575.98px) {
@media (max-width: 1199.98px) {
.post {
&__body {
h1 {
@ -350,8 +350,21 @@
min-width: 48rem;
}
.process-cae{
.process-cae {
&__block {
.small-boat {
margin-left: auto;
}
}
}
}
}
}
@media (max-width: 575.98px) {
.post {
&__body {
.process-cae {
&.split {
display: block;

View File

@ -69,7 +69,7 @@
}
}
.home .news-list {
main.home .news-list {
margin-top: 8rem;
margin-bottom: 24rem;
position: relative;
@ -80,25 +80,43 @@
}
}
@media (max-width: 575.98px) {
@media (min-width: 768px) and (max-width: 1199.98px) {
.news-list {
> svg {
width: 70rem;
overflow: hidden;
&__items {
grid-template-columns: repeat(3, 1fr);
}
}
}
@media (min-width: 576px) and (max-width: 767.98px) {
.news-list {
&__items {
grid-template-columns: repeat(2, 1fr);
}
}
}
@media (max-width: 575.98px) {
main.posts .news-list {
&__items {
display: block;
}
&__item + &__item {
li + li {
margin-top: 1.5rem;
}
}
}
.home .news-list {
@media (max-width: 1199.98px) {
main.home .news-list {
margin: 6rem 0;
> svg {
width: 70rem;
overflow: hidden;
}
.wrapper {
max-width: 100%;
margin: 0;

View File

@ -81,7 +81,7 @@
}
}
@media (max-width: 575.98px) {
@media (max-width: 767.98px) {
.presentation {
article {
display: block;

View File

@ -19,7 +19,7 @@
}
}
@media (max-width: 575.98px) {
@media (max-width: 1199.98px) {
.site-head {
&__inner {
display: block;

View File

@ -36,7 +36,7 @@
}
}
@media (max-width: 575.98px) {
@media (max-width: 767.98px) {
.sponsor {
&__list {
display: flex;