Adding new btns

This commit is contained in:
Roman Pyrih
2026-01-28 15:51:35 +01:00
parent 41d43ff55e
commit dc24af37e2
4 changed files with 217 additions and 86 deletions

View File

@@ -116,6 +116,24 @@ body {
background: $cDarkGray;
}
.btn-4 {
color: $cWhite !important;
font-weight: 600;
font-size: 16px;
line-height: 1;
text-decoration: none;
display: inline-block;
padding: 14px 25px;
border: 1px solid #209252;
border-radius: 8px;
background: #209252;
transition: all 250ms ease-in-out;
&:hover {
background: rgb(29, 132, 74);
}
}
@mixin box-title($color) {
color: $color;
font-weight: 500;
@@ -178,7 +196,8 @@ header#masthead {
}
@include respond-below(sm) {
width: 100%;
// width: 100%;
order: 1;
}
img {
@@ -193,6 +212,7 @@ header#masthead {
nav#site-navigation {
width: auto;
flex: 1;
@include respond-below(lg) {
&.toggled {
@@ -203,11 +223,12 @@ header#masthead {
}
@include respond-below(sm) {
order: 3;
order: 4;
}
ul#primary-menu {
column-gap: 40px;
justify-content: center;
li.menu-item {
&.current_page_item {
@@ -280,85 +301,95 @@ header#masthead {
margin: 0;
@include respond-below(sm) {
order: 2;
order: 3;
}
> li {
display: flex;
flex-direction: row;
align-items: center;
padding: 6px 6px 6px 16px;
border: 1px solid $cDarkGray;
border-radius: 100px;
gap: 16px;
@include respond-below(xl) {
gap: 10px;
}
.social-icon {
img {
width: 16px;
min-width: 16px;
height: 16px;
@include respond-below(xl) {
width: 12px;
min-width: 12px;
height: 12px;
}
}
}
ol.other-icons {
padding: 0;
margin: 0;
&:not(.btn-external) {
display: flex;
flex-direction: row;
align-items: center;
padding: 6px 6px 6px 16px;
border: 1px solid $cDarkGray;
border-radius: 100px;
gap: 16px;
li {
width: 36px;
min-width: 36px;
height: 36px;
@include respond-below(xl) {
gap: 10px;
}
a {
display: block;
width: 100%;
height: 100%;
.social-icon {
img {
width: 16px;
min-width: 16px;
height: 16px;
&:hover {
img {
transform: scale(1.2);
transition: all 250ms ease-in-out;
@include respond-below(xl) {
width: 12px;
min-width: 12px;
height: 12px;
}
}
}
ol.other-icons {
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
li {
width: 36px;
min-width: 36px;
height: 36px;
a {
display: block;
width: 100%;
height: 100%;
&:hover {
img {
transform: scale(1.2);
transition: all 250ms ease-in-out;
}
}
}
}
&:not(:first-child) {
margin-left: -10px;
&:not(:first-child) {
margin-left: -10px;
@include respond-below(sm) {
margin-left: 5px;
@include respond-below(sm) {
margin-left: 5px;
}
}
}
@include respond-below(xl) {
width: 30px;
min-width: 30px;
height: 30px;
}
@include respond-below(xl) {
width: 30px;
min-width: 30px;
height: 30px;
}
img {
width: 100%;
border: 1px solid $cWhite;
border-radius: 100%;
img {
width: 100%;
border: 1px solid $cWhite;
border-radius: 100%;
}
}
}
}
}
}
.btn-external {
margin-left: 10px;
@include respond-below(sm) {
order: 2;
margin-left: 0;
}
}
#nav-menu-toggle {
position: relative;
@@ -4417,6 +4448,9 @@ body.page-id-511 {
border-radius: 50px;
}
}
.btn-4 {
margin-top: 50px;
}
}
&-2 {
@@ -4588,6 +4622,9 @@ body.page-id-511 {
line-height: 1.3;
}
}
.btn-4 {
margin-top: 50px;
}
}
&-2 {
@@ -4874,12 +4911,27 @@ body.page-id-511 {
align-items: center;
justify-content: space-between;
@include respond-below(md) {
@include respond-below(lg) {
flex-wrap: wrap;
gap: 20px;
}
@include respond-below(md) {
justify-content: center;
}
.module-tile--nav--btns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
nav {
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: wrap;
}
.module-tile--btn {
display: inline-flex;
flex-direction: row;
@@ -4914,6 +4966,7 @@ body.page-id-511 {
font-family: $fOutfit;
font-weight: 500;
font-size: 20px;
min-width: max-content;
padding: 10px 16px;
background: $cViolet;