tablet reponsive
This commit is contained in:
parent
6da83b2d89
commit
de70877811
src
_includes/partials/components
scss/components
@ -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 = '' %}
|
||||
|
@ -42,6 +42,59 @@
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
|
||||
&__heading {
|
||||
font-size: 1.75rem;
|
||||
|
||||
+ svg {
|
||||
margin: 2rem auto 0;
|
||||
max-width: 7rem;
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-grp {
|
||||
display: flex;
|
||||
width: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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;
|
||||
@ -52,16 +105,17 @@
|
||||
+ svg {
|
||||
margin: 2rem auto 0;
|
||||
max-width: 7rem;
|
||||
order: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-grp {
|
||||
margin-top: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
|
||||
.btn + .btn {
|
||||
margin-left: 0;
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
||||
|
@ -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;
|
||||
|
@ -81,7 +81,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
@media (max-width: 767.98px) {
|
||||
.presentation {
|
||||
article {
|
||||
display: block;
|
||||
|
@ -19,7 +19,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
@media (max-width: 1199.98px) {
|
||||
.site-head {
|
||||
&__inner {
|
||||
display: block;
|
||||
|
@ -36,7 +36,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 575.98px) {
|
||||
@media (max-width: 767.98px) {
|
||||
.sponsor {
|
||||
&__list {
|
||||
display: flex;
|
||||
|
Loading…
Reference in New Issue
Block a user