rayelliott
/
gulp-web
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

This commit is contained in:
rayelliott 2020-06-05 08:42:41 +00:00
parent a75d0c8430
commit d535a21de9
5 changed files with 218 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

204
src/scss/_feature-narrow.scss Normal file
View File

@ -0,0 +1,204 @@
body.rwavw-custom {
.widget.rwavw-feature-narrow {
// bg color of row group accent
$bg-color: $accent-500;
.pure-g > div {
justify-content: flex-start;
}
.row-group {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 44px;
text-align: center;
p {
margin-bottom: 0;
}
&::before {
content: '';
display: block;
position: absolute;
top: -11px;
bottom: -11px;
left: -16px;
right: -16px;
background-color: $bg-color;
background: linear-gradient(
to top right,
rgba($bg-color, 1),
rgba($bg-color, 0.7)
);
opacity: 0.5;
}
}
.row-group + p {
opacity: 0.7;
}
@media (min-width: 64em) {
.row-group::before {
top: -11px;
bottom: -11px;
left: calc((100vw - 1000px) / -2);
right: -22px;
background: linear-gradient(
to right,
rgba($bg-color, 0.8),
rgba($bg-color, 1)
);
opacity: 0.4;
}
.pure-g > div:last-child .row-group::before {
left: -22px;
right: calc((100vw - 1000px) / -2);
background: linear-gradient(
to left,
rgba($bg-color, 0.8),
rgba($bg-color, 1)
);
}
}
p, .heading-section-title {
margin-bottom: 44px;
}
.heading-section-title + p {
margin-top: -22px;
}
p {
font-weight: 600;
font-size: 18px;
line-height: 27px;
margin-top: 0;
opacity: 0.6;
&:not(:last-child) {
padding-right: 18px;
}
a {
z-index: 1;
position: relative;
display: inline-block;
font-size: 18px;
font-weight: 700;
margin-left: -22px;
padding: 0 22px;
line-height: 42px;
height: 44px;
&::before {
content: '';
z-index: -1;
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: $accent-500;
background-color: linear-gradient(
to top right,
rgba($accent-500, 1),
rgba($accent-500, 0.8)
);
box-shadow: 4px 4px 6px rgba(47, 28, 4, 0.25), 2px 2px 4px rgba(#fff, 0.25) inset;
transition: opacity 0.3s, transform 0.3s;
opacity: 1;
}
transition: color .3s;
&:link,
&:visited {
color: $neutral-900;
}
&:hover,
&:active {
color: #000;
&::before {
transform: scale(0.975);
opacity: 0.6;
}
}
svg {
position: relative;
height: 28px;
top: 8px;
margin-left: 4px;
color: inherit;
}
}
&.text-right a {
margin-right: -22px;
}
}
.swiper-container {
border-radius: $border-radius;
box-shadow: 4px 4px 6px 0 rgba(0, 10, 56, 0.2);
}
.swiper-wrapper {
position: relative;
border-radius: $border-radius;
overflow: hidden;
&::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-color: rgba(0, 10, 56, 0.3);
box-shadow: 0 0 66px 0 rgba(0, 10, 56, 0.6) inset;
opacity: 0.6;
}
}
@media (max-width: 64em) {
p {
text-align: center !important;
a {
margin-left: 0;
margin-right: 0;
}
}
.swiper-wrapper {
display: none;
}
}
@media (min-width: 64em) {
p, .heading-section-title {
margin-bottom: 44px;
}
}
}
}

5
src/scss/_feature-sunset.scss
View File

@ -23,6 +23,11 @@ body.rwavw-custom {
justify-content: center;
}
img {
box-shadow: $box-shadow-sk;
border-radius: $border-radius;
}
@media (max-width: 630px) {
.pure-g {
> div {

176
src/scss/_featured.scss
View File

@ -57,180 +57,6 @@ body.rwavw-custom {
}
}
.widget.rwavw-feature-narrow {
// bg color of row group accent
$bg-color: $accent-500;
.pure-g > div {
justify-content: flex-start;
}
.row-group {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 44px;
text-align: center;
p {
margin-bottom: 0;
}
&::before {
content: '';
display: block;
position: absolute;
top: -11px;
bottom: -11px;
left: -16px;
right: -16px;
background-color: $bg-color;
background: linear-gradient(
to top right,
rgba($bg-color, 1),
rgba($bg-color, 0.7)
);
opacity: 0.5;
}
}
.row-group + p {
opacity: 0.7;
}
@media (min-width: 64em) {
.row-group::before {
top: -11px;
bottom: -11px;
left: calc((100vw - 1000px) / -2);
right: -22px;
background: linear-gradient(
to right,
rgba($bg-color, 0.8),
rgba($bg-color, 1)
);
opacity: 0.4;
// border-radius: 25px;
}
.pure-g > div:last-child .row-group::before {
left: -22px;
right: calc((100vw - 1000px) / -2);
background: linear-gradient(
to left,
rgba($bg-color, 0.8),
rgba($bg-color, 1)
);
}
}
p, .heading-section-title {
margin-bottom: 44px;
}
.heading-section-title + p {
margin-top: -22px;
}
p {
font-weight: 600;
font-size: 18px;
line-height: 27px;
margin-top: 0;
opacity: 0.6;
&:not(:last-child) {
padding-right: 18px;
}
a {
display: inline-block;
color: rgb(0, 10, 56);
font-size: 18px;
font-weight: 700;
background-color: rgba(0, 10, 56, 0.05);
margin-left: -22px;
padding: 0 22px;
// border-radius: 22px;
line-height: 42px;
height: 44px;
color: $neutral-900;
background-color: $accent-500;
background-color: linear-gradient(
to top right,
rgba($accent-500, 1),
rgba($accent-500, 0.8)
);
box-shadow: 4px 4px 6px rgba(47, 28, 4, 0.25), 2px 2px 4px rgba(#fff, 0.25) inset;
svg {
position: relative;
height: 28px;
top: 8px;
margin-left: 4px;
color: inherit;
}
}
&.text-right a {
margin-right: -22px;
}
}
.swiper-container {
border-radius: $border-radius;
box-shadow: 4px 4px 6px 0 rgba(0, 10, 56, 0.2);
}
.swiper-wrapper {
position: relative;
border-radius: $border-radius;
overflow: hidden;
&::after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-color: rgba(0, 10, 56, 0.3);
box-shadow: 0 0 66px 0 rgba(0, 10, 56, 0.6) inset;
opacity: 0.6;
}
}
@media (max-width: 64em) {
p {
text-align: center !important;
a {
margin-left: 0;
margin-right: 0;
}
}
.swiper-wrapper {
display: none;
}
}
@media (min-width: 64em) {
p, .heading-section-title {
margin-bottom: 44px;
}
}
}
.widget.rwavw-feature-details {
.pure-g > div {
justify-content: flex-start;
@ -252,7 +78,7 @@ body.rwavw-custom {
}
.widget.rwavw-feature-limits {
h2, h3, h4, h5, h6 {
.heading-section-title {
margin-top: 44px;
@media (min-width: 64em) {

7
src/scss/_hero.scss
View File

@ -80,6 +80,13 @@ body.rwavw-custom {
border: 3px solid $accent-500;
transition: opacity .2s;
opacity: 1;
&:hover {
opacity: 0.8;
}
&:first-child {
$bg-color: $accent-500;

1
src/scss/style.scss
View File

@ -2,6 +2,7 @@
@import "hero";
@import "featured";
@import "feature-sunset";
@import "feature-narrow";
@import "contact";
@import "faq";
@import "social-proof";