Adding new btns
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user