diff --git a/sass/pages/new-support.scss b/sass/pages/new-support.scss index 73669601..69f3c754 100644 --- a/sass/pages/new-support.scss +++ b/sass/pages/new-support.scss @@ -244,11 +244,87 @@ margin-bottom: 20rem; } } + &__tab-header { + display: flex; + justify-content: space-between; + align-items: center; + + } + &__tab-close { + cursor: pointer; + } + &__tab-row { + + @media (max-width: $media-sm) { + overflow-x: scroll; + + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + } + } + &__tab { + padding: 0 30rem 0; + margin-top: 30rem; + border-top: 1rem solid transparent; + overflow: hidden; + max-height: 0; + transition: max-height 0.4s; + &--active { + border-top: 1rem solid var(--bg-green); + max-height: 3000rem; + padding: 0 30rem 30rem; + } + } + + &__tab-text { + display: grid; + grid-template-columns: 250rem 1fr; + gap: 10rem; + @media (max-width: $media-sm) { + grid-template-columns: 220rem 1fr; + } + } + + &__tab-title { + padding: 20rem 0; + } + + &__tab-item { + display: flex; + overflow: scroll; + scrollbar-width: none; + + &::-webkit-scrollbar { + display: none; + } + + &:first-child { + text-align: right; + justify-content: end; + } + + &--double { + display: grid; + grid-template-columns: 130rem 70rem; + gap: 10rem; + + .p-sm-bold, .p-sm { + text-align: left; + } + } + + @media (max-width: $media-sm) { + overflow: visible; + } + } &__icons { display: flex; gap: 5rem; - max-width: 750rem ; + max-width: 750rem; margin: 0 auto; flex-wrap: wrap; justify-content: center; @@ -264,11 +340,13 @@ width: 72rem; height: 72rem; flex-shrink: 0; + img { width: 100%; width: 72rem; height: 72rem; } + &:hover { transform: scale(1.05); } diff --git a/sass/variables/fonts.scss b/sass/variables/fonts.scss index ffc4447f..0f6caac6 100644 --- a/sass/variables/fonts.scss +++ b/sass/variables/fonts.scss @@ -13,6 +13,7 @@ --h3-boold: 700 24rem/32rem var(--main-font); --h3-normal: 600 24rem/32rem var(--main-font); --h4: 500 18rem/28rem var(--main-font); + --h4-bold: 700 18rem/28rem var(--main-font); --h5: 300 20rem/28rem var(--main-font); --h5-bold: 500 20rem/28rem var(--main-font); --h6: 500 30rem/36rem var(--main-font); @@ -26,6 +27,7 @@ --p-md: 400 16rem/28rem var(--main-font); --p-md-bold: 600 16rem/28rem var(--main-font); --p-sm: 500 14rem/21rem var(--main-font); + --p-sm-bold: 700 14rem/21rem var(--main-font); --p-sub: 300 12rem/15rem var(--main-font); --p-card: 300 17rem/24rem var(--main-font); --nav-link: 500 16rem/28rem var(--main-font); @@ -91,11 +93,14 @@ .h4 { font: var(--h4); } - +.h4-bold { + font: var(--h4-bold); +} .h5 { font: var(--h5); color: var(--black-white); } + .h5-bold { font: var(--h5-bold); } @@ -127,6 +132,9 @@ .p-sm { font: var(--p-sm); } +.p-sm-bold{ + font: var(--p-sm-bold); +} .p-sm-light { font: var(--p-sm-light); } diff --git a/templates/base.html b/templates/base.html index 5c3de6fa..bb3b8132 100644 --- a/templates/base.html +++ b/templates/base.html @@ -36,6 +36,7 @@ + {% block rss %} @@ -215,6 +1179,23 @@