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

@@ -264,6 +264,23 @@ body.no-scroll {
background: #536783; background: #536783;
} }
.btn-4 {
color: #fff !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;
}
.btn-4:hover {
background: rgb(29, 132, 74);
}
header#masthead { header#masthead {
position: relative; position: relative;
background: #fff; background: #fff;
@@ -296,7 +313,7 @@ header#masthead .row {
} }
@media (max-width: 575px) { @media (max-width: 575px) {
header#masthead .row .site-branding { header#masthead .row .site-branding {
width: 100%; order: 1;
} }
} }
header#masthead .row .site-branding img { header#masthead .row .site-branding img {
@@ -310,15 +327,17 @@ header#masthead .row .site-branding img {
} }
header#masthead .row nav#site-navigation { header#masthead .row nav#site-navigation {
width: auto; width: auto;
flex: 1;
} }
@media (max-width: 575px) { @media (max-width: 575px) {
header#masthead .row nav#site-navigation { header#masthead .row nav#site-navigation {
order: 3; order: 4;
} }
} }
header#masthead .row nav#site-navigation ul#primary-menu { header#masthead .row nav#site-navigation ul#primary-menu {
-moz-column-gap: 40px; -moz-column-gap: 40px;
column-gap: 40px; column-gap: 40px;
justify-content: center;
} }
header#masthead .row nav#site-navigation ul#primary-menu li.menu-item.current_page_item > a { header#masthead .row nav#site-navigation ul#primary-menu li.menu-item.current_page_item > a {
color: #583867; color: #583867;
@@ -369,10 +388,10 @@ header#masthead .row .main-navigation-secondary {
} }
@media (max-width: 575px) { @media (max-width: 575px) {
header#masthead .row .main-navigation-secondary { header#masthead .row .main-navigation-secondary {
order: 2; order: 3;
} }
} }
header#masthead .row .main-navigation-secondary > li { header#masthead .row .main-navigation-secondary > li:not(.btn-external) {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@@ -382,63 +401,72 @@ header#masthead .row .main-navigation-secondary > li {
gap: 16px; gap: 16px;
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
header#masthead .row .main-navigation-secondary > li { header#masthead .row .main-navigation-secondary > li:not(.btn-external) {
gap: 10px; gap: 10px;
} }
} }
header#masthead .row .main-navigation-secondary > li .social-icon img { header#masthead .row .main-navigation-secondary > li:not(.btn-external) .social-icon img {
width: 16px; width: 16px;
min-width: 16px; min-width: 16px;
height: 16px; height: 16px;
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
header#masthead .row .main-navigation-secondary > li .social-icon img { header#masthead .row .main-navigation-secondary > li:not(.btn-external) .social-icon img {
width: 12px; width: 12px;
min-width: 12px; min-width: 12px;
height: 12px; height: 12px;
} }
} }
header#masthead .row .main-navigation-secondary > li ol.other-icons { header#masthead .row .main-navigation-secondary > li:not(.btn-external) ol.other-icons {
padding: 0; padding: 0;
margin: 0; margin: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
header#masthead .row .main-navigation-secondary > li ol.other-icons li { header#masthead .row .main-navigation-secondary > li:not(.btn-external) ol.other-icons li {
width: 36px; width: 36px;
min-width: 36px; min-width: 36px;
height: 36px; height: 36px;
} }
header#masthead .row .main-navigation-secondary > li ol.other-icons li a { header#masthead .row .main-navigation-secondary > li:not(.btn-external) ol.other-icons li a {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
header#masthead .row .main-navigation-secondary > li ol.other-icons li a:hover img { header#masthead .row .main-navigation-secondary > li:not(.btn-external) ol.other-icons li a:hover img {
transform: scale(1.2); transform: scale(1.2);
transition: all 250ms ease-in-out; transition: all 250ms ease-in-out;
} }
header#masthead .row .main-navigation-secondary > li ol.other-icons li:not(:first-child) { header#masthead .row .main-navigation-secondary > li:not(.btn-external) ol.other-icons li:not(:first-child) {
margin-left: -10px; margin-left: -10px;
} }
@media (max-width: 575px) { @media (max-width: 575px) {
header#masthead .row .main-navigation-secondary > li ol.other-icons li:not(:first-child) { header#masthead .row .main-navigation-secondary > li:not(.btn-external) ol.other-icons li:not(:first-child) {
margin-left: 5px; margin-left: 5px;
} }
} }
@media (max-width: 1199px) { @media (max-width: 1199px) {
header#masthead .row .main-navigation-secondary > li ol.other-icons li { header#masthead .row .main-navigation-secondary > li:not(.btn-external) ol.other-icons li {
width: 30px; width: 30px;
min-width: 30px; min-width: 30px;
height: 30px; height: 30px;
} }
} }
header#masthead .row .main-navigation-secondary > li ol.other-icons li img { header#masthead .row .main-navigation-secondary > li:not(.btn-external) ol.other-icons li img {
width: 100%; width: 100%;
border: 1px solid #fff; border: 1px solid #fff;
border-radius: 100%; border-radius: 100%;
} }
header#masthead .row .btn-external {
margin-left: 10px;
}
@media (max-width: 575px) {
header#masthead .row .btn-external {
order: 2;
margin-left: 0;
}
}
header#masthead .row #nav-menu-toggle { header#masthead .row #nav-menu-toggle {
position: relative; position: relative;
display: block; display: block;
@@ -4303,6 +4331,9 @@ body.page-id-511 .box-3 .box-3--wrapper .row-1 .col-1 .box-data p {
background: #583867; background: #583867;
border-radius: 50px; border-radius: 50px;
} }
body.page-id-511 .box-3 .box-3--wrapper .row-1 .col-1 .btn-4 {
margin-top: 50px;
}
body.page-id-511 .box-3 .box-3--wrapper .row-1 .col-2 { body.page-id-511 .box-3 .box-3--wrapper .row-1 .col-2 {
width: 100%; width: 100%;
max-width: 630px; max-width: 630px;
@@ -4447,6 +4478,9 @@ body.page-id-511 .box-4 .box-4--wrapper .row-1 .col-1 .box-alert p {
font-size: 12px; font-size: 12px;
line-height: 1.3; line-height: 1.3;
} }
body.page-id-511 .box-4 .box-4--wrapper .row-1 .col-1 .btn-4 {
margin-top: 50px;
}
body.page-id-511 .box-4 .box-4--wrapper .row-1 .col-2 { body.page-id-511 .box-4 .box-4--wrapper .row-1 .col-2 {
width: 100%; width: 100%;
max-width: 630px; max-width: 630px;
@@ -4703,13 +4737,30 @@ body.page-id-511 .box-6 .box-6-wrapper .row-2 .modules-tiles .module-tile .modul
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
@media (max-width: 767px) { @media (max-width: 991px) {
body.page-id-511 .box-6 .box-6-wrapper .row-2 .modules-tiles .module-tile .module-tile--nav { body.page-id-511 .box-6 .box-6-wrapper .row-2 .modules-tiles .module-tile .module-tile--nav {
flex-wrap: wrap; flex-wrap: wrap;
gap: 20px; gap: 20px;
}
}
@media (max-width: 767px) {
body.page-id-511 .box-6 .box-6-wrapper .row-2 .modules-tiles .module-tile .module-tile--nav {
justify-content: center; justify-content: center;
} }
} }
body.page-id-511 .box-6 .box-6-wrapper .row-2 .modules-tiles .module-tile .module-tile--nav .module-tile--nav--btns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
align-items: center;
}
body.page-id-511 .box-6 .box-6-wrapper .row-2 .modules-tiles .module-tile .module-tile--nav nav {
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: wrap;
}
body.page-id-511 .box-6 .box-6-wrapper .row-2 .modules-tiles .module-tile .module-tile--nav .module-tile--btn { body.page-id-511 .box-6 .box-6-wrapper .row-2 .modules-tiles .module-tile .module-tile--nav .module-tile--btn {
display: inline-flex; display: inline-flex;
flex-direction: row; flex-direction: row;
@@ -4736,6 +4787,8 @@ body.page-id-511 .box-6 .box-6-wrapper .row-2 .modules-tiles .module-tile .modul
font-family: "Outfit", sans-serif; font-family: "Outfit", sans-serif;
font-weight: 500; font-weight: 500;
font-size: 20px; font-size: 20px;
min-width: -moz-max-content;
min-width: max-content;
padding: 10px 16px; padding: 10px 16px;
background: #583867; background: #583867;
border-radius: 50px; border-radius: 50px;

File diff suppressed because one or more lines are too long

View File

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

View File

@@ -107,6 +107,12 @@
<p><?php echo $box_3_top['date']; ?></p> <p><?php echo $box_3_top['date']; ?></p>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if(!empty($box_3_top['btn']['url'])) : ?>
<a href="<?php echo $box_3_top['btn']['url']; ?>" class="btn-4" target="<?php echo $box_3_top['btn']['target']; ?>">
<span><?php echo $box_3_top['btn']['title']; ?></span>
</a>
<?php endif; ?>
</div> </div>
<div class="col col-2"> <div class="col col-2">
<?php if ($box_3_top['text']): ?> <?php if ($box_3_top['text']): ?>
@@ -180,6 +186,11 @@
<p><?php echo $box_4_top['alert']; ?></p> <p><?php echo $box_4_top['alert']; ?></p>
</div> </div>
<?php endif; ?> <?php endif; ?>
<?php if(!empty($box_4_top['btn']['url'])) : ?>
<a href="<?php echo $box_4_top['btn']['url']; ?>" class="btn-4" target="<?php echo $box_4_top['btn']['target']; ?>">
<span><?php echo $box_4_top['btn']['title']; ?></span>
</a>
<?php endif; ?>
</div> </div>
<div class="col col-2"> <div class="col col-2">
<?php if ($box_4_top['text']): ?> <?php if ($box_4_top['text']): ?>
@@ -295,15 +306,29 @@
<?php endif; ?> <?php endif; ?>
<div class="module-tile--nav"> <div class="module-tile--nav">
<?php if($tile['text']): ?> <nav>
<button class="module-tile--btn"> <?php if($tile['text']): ?>
<span class="text-more">Rozwiń program</span> <button class="module-tile--btn">
<span class="text-less" style="display: none;">Zwiń program</span> <span class="text-more">Rozwiń program</span>
<img src="/wp-content/uploads/2025/11/CaretDown.svg" alt=""> <span class="text-less" style="display: none;">Zwiń program</span>
</button> <img src="/wp-content/uploads/2025/11/CaretDown.svg" alt="">
<?php else: ?> </button>
<span></span> <?php else: ?>
<?php endif; ?> <span></span>
<?php endif; ?>
<?php if(!empty($tile['extra_buttons'])) : ?>
<div class="module-tile--nav--btns">
<?php foreach($tile['extra_buttons'] as $btn): ?>
<?php if(!empty($btn['btn']['url'])) : ?>
<a href="<?php echo $btn['btn']['url']; ?>" class="btn-4" target="<?php echo $btn['btn']['target']; ?>">
<span><?php echo $btn['btn']['title']; ?></span>
</a>
<?php endif; ?>
<?php endforeach; ?>
</div>
<?php endif; ?>
</nav>
<?php if($tile['access']): ?> <?php if($tile['access']): ?>
<div class="module-tile--access"> <div class="module-tile--access">