From 9ab71cb1919eb8b62cb7f4d2013a71197ad24341 Mon Sep 17 00:00:00 2001 From: lovely Date: Tue, 18 Jun 2019 10:25:38 -0700 Subject: [PATCH 1/4] Change style for header and add charity.scss --- themes/rcforward/header.php | 4 +- themes/rcforward/js/hamburger.js | 16 +- themes/rcforward/sass/_charity.scss | 94 ++++++++++-- themes/rcforward/sass/_content.scss | 2 + themes/rcforward/sass/_elements.scss | 4 + themes/rcforward/sass/_hamburger.scss | 185 +++++++++++++++------- themes/rcforward/style.css | 211 +++++++++++++++++++------- 7 files changed, 384 insertions(+), 132 deletions(-) diff --git a/themes/rcforward/header.php b/themes/rcforward/header.php index 7d2fb4e..d81f2a1 100755 --- a/themes/rcforward/header.php +++ b/themes/rcforward/header.php @@ -12,6 +12,7 @@ + @@ -20,8 +21,6 @@
diff --git a/themes/rcforward/js/hamburger.js b/themes/rcforward/js/hamburger.js index f3b3bc4..ae63d81 100644 --- a/themes/rcforward/js/hamburger.js +++ b/themes/rcforward/js/hamburger.js @@ -2,18 +2,22 @@ $(function() { // check if the toggle nav is visible e.g. mobile only if ($('.hamburger').css('display') !== 'none') { - console.log('is mobile'); // hamburger menu $('#toggle-nav').on('click', function() { - $('#primary-menu').slideToggle('is-active'); + $('#primary-menu').slideToggle(); }); // about us dropdown $('#menu-item-71').on('click', function() { - $('.sub-menu').slideToggle('is-active'); + $('.sub-menu').slideToggle(); }); } // end if - else { - console.log('not mobile'); - } + + + + + + + + }); // end doc ready })(jQuery); diff --git a/themes/rcforward/sass/_charity.scss b/themes/rcforward/sass/_charity.scss index 525add2..8f6ca06 100644 --- a/themes/rcforward/sass/_charity.scss +++ b/themes/rcforward/sass/_charity.scss @@ -11,29 +11,97 @@ img { object-fit: cover; width: 100%; - height: 100vh; + height: 70vh; } } .charity-logo-container { + display: flex; + justify-content: center; + align-items: center; position: absolute; - // background: white; - // display: flex; - // align-items: center; - // justify-content: center; - // width: 25%; - // height: 25%; - border-radius: -3px; - bottom: 0; - text-align: center; - bottom: -10px; + background: $white; + width: 200px; + height: 200px; + border-radius: 50%; + bottom: -61px; + padding-left: 35px; + padding-right: 35px; + left: 50%; + transform: translateX(-50%); .charity-logo { text-align: center; - width: 20%; - border-radius: 50%; + width: 100%; } } } .entry-content { text-align: center; + margin-top: 66px; + h2 { + font-size: 2em; + } + .amount-funded { + p { + font-size: 42px; + margin: 0 20px 0 0; + color: $innovative__purple; + font-family: $gotham__font; + font-weight: bold; + line-height: 60px; + letter-spacing: normal; + } + .chimp-donate-form { + background: $code__blue; + margin-top: 10px; + width: 160px; + height: 60px; + border-radius: 6px; + color: $grounded__green; + font-weight: bold; + } + } + .charity-description{ + height: 137px; + width: 728px; + margin-left: auto; + margin-right: auto; + font-family: $gotham__font; + font-size: 24px; + font-weight: 300; + line-height: 33px; + text-align: center; + margin-bottom: 64px; + } + .charity-video{ + iframe{ + height: 483.34px; + width: 728px; + } + } + .main-content{ + display:flex; + flex-direction: column; + flex-wrap: wrap; + width: 1240px; + margin: auto; + .single-content{ + display: flex; + .content-image{ + width: 50%; + } + } + + } } + .browse-charities-title{ + text-align: center; + color:$credible__blue; + font-family: $gotham__font; + font-size: 28px; + font-weight: bold; + line-height: 31px; + } + } + +/* Main Content Section */ diff --git a/themes/rcforward/sass/_content.scss b/themes/rcforward/sass/_content.scss index 511276e..46c8841 100755 --- a/themes/rcforward/sass/_content.scss +++ b/themes/rcforward/sass/_content.scss @@ -47,3 +47,5 @@ // .bypostauthor { // display: block; // } + + diff --git a/themes/rcforward/sass/_elements.scss b/themes/rcforward/sass/_elements.scss index f211164..744a76e 100755 --- a/themes/rcforward/sass/_elements.scss +++ b/themes/rcforward/sass/_elements.scss @@ -79,4 +79,8 @@ a{ &:active, &:hover{ text-decoration: none; } +} + +.chimp-donate-form{ + background: $code__blue; } \ No newline at end of file diff --git a/themes/rcforward/sass/_hamburger.scss b/themes/rcforward/sass/_hamburger.scss index 80fb521..69c21d6 100644 --- a/themes/rcforward/sass/_hamburger.scss +++ b/themes/rcforward/sass/_hamburger.scss @@ -25,7 +25,7 @@ } .hamburger-box { - width: 40px; + width: 36px; height: 24px; display: inline-block; position: relative; @@ -62,17 +62,15 @@ /* Hamburger Container*/ .hamburger { - position: absolute; right: 0; top: 0; - @include tablet{ + @include tablet { display: none; } .hamburger--boring .menu-toggle { background: #14225f; } button { - background: none; box-shadow: none; } } @@ -80,69 +78,154 @@ /* Header */ .site-header { background: #14225f; - // position: fixed; width: 100%; - .header-container { - margin: auto; - position: relative; - @include tablet{ + justify-content: space-between; + display: flex; + flex-wrap: wrap; + margin: auto; + +.site-logo{ + width: 50%; + @include tablet{ + width: 40%; + } + h1{ + color: $white; + padding-left: 55px; + } +} +.hamburger{ + width: 50%; + padding-right: 55px; display: flex; - justify-content: space-around; - } - a { - text-decoration: none; - h1 { - color: #fff; - text-transform: uppercase; - } + justify-content: flex-end; + @include tablet{ + display: none; } - } } - -/* Navigation */ -.main-navigation { +.main-navigation{ + width: 100%; @include tablet{ - margin-top: auto; - margin-bottom: auto; - + width: 60%; + display: inline-flex; } - .menu, .sub-menu { - padding: 0; + .menu { + list-style: none; margin: 0; + padding: 0; text-align: center; - } - } -.main-navigation -.menu { - @include tablet{ - display: flex; + @include tablet{ + display: flex; } -} - + .menu-item{ + border-top: 1px solid #fff; + padding-top: 15px; + padding-bottom: 15px; + @include tablet{ + border: none; -.menu-item{ - - border-top: 1px solid #fff; - @include tablet{ - border-top: none; - list-style: none; - padding-left: 75px; - } - a { - color: #fff; + } + a{ + font-weight: 300; + color: $white; + font-size:18px; + } } } +} +.menu{ +.menu-item-71{ +padding-top: 15px; +.sub-menu{ + background: $white; + list-style: none; +padding: 0; +@include tablet{} +.menu-item{ + border-bottom:1px solid $credible__blue; + padding: 16px; -.sub-menu { - background: #fff; - display: none; -li { - border-top: 1px solid $credible__blue; - - a { + a{ color: $credible__blue; } } } +} +} +} +// .menu-item-71{ +// .ul{ +// .li{ +// background: #fff; +// border-top:1px solid $credible__blue; +// a{ +// color: credible__blue; +// } +// } +// } +// } + + + +// @include tablet { +// display: flex; +// justify-content: space-around; + + + + + +// a { +// text-decoration: none; +// h1 { +// color: #fff; +// text-transform: uppercase; +// } +// } +// } +// } + +// /* Navigation */ +// .main-navigation { +// @include tablet { +// margin-top: auto; +// margin-bottom: auto; +// } +// .menu, +// .sub-menu { +// padding: 0; +// display: none; +// margin: 0; +// text-align: center; +// } +// } +// .main-navigation .menu { +// @include tablet { +// display: flex; +// } +// } + +// .menu-item { +// +// @include tablet { +// border-top: none; +// list-style: none; +// padding-left: 75px; +// } +// a { +// color: #fff; +// } +// } + +// .sub-menu { +// background: #fff; +// display: none; +// li { +// border-top: 1px solid $credible__blue; +// a { +// color: $credible__blue; +// } +// } +// } diff --git a/themes/rcforward/style.css b/themes/rcforward/style.css index 4f607b9..7bc5e19 100755 --- a/themes/rcforward/style.css +++ b/themes/rcforward/style.css @@ -232,6 +232,9 @@ a { a:active, a:hover { text-decoration: none; } +.chimp-donate-form { + background: #00BEA8; } + @media (min-width: 600px) { .main-navigation .menu-item-has-children { position: relative; } @@ -428,7 +431,7 @@ body { background-color: #fff; } .hamburger-box { - width: 40px; + width: 36px; height: 24px; display: inline-block; position: relative; } @@ -468,7 +471,6 @@ body { /* Hamburger Container*/ .hamburger { - position: absolute; right: 0; top: 0; } @media (min-width: 600px) { @@ -477,65 +479,82 @@ body { .hamburger .hamburger--boring .menu-toggle { background: #14225f; } .hamburger button { - background: none; -webkit-box-shadow: none; box-shadow: none; } /* Header */ .site-header { background: #14225f; - width: 100%; } - .site-header .header-container { - margin: auto; - position: relative; } + width: 100%; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: auto; } + .site-header .site-logo { + width: 50%; } @media (min-width: 600px) { - .site-header .header-container { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -ms-flex-pack: distribute; - justify-content: space-around; } } - .site-header .header-container a { - text-decoration: none; } - .site-header .header-container a h1 { - color: #fff; - text-transform: uppercase; } - -/* Navigation */ -@media (min-width: 600px) { - .main-navigation { - margin-top: auto; - margin-bottom: auto; } } - -.main-navigation .menu, .main-navigation .sub-menu { - padding: 0; - margin: 0; - text-align: center; } - -@media (min-width: 600px) { - .main-navigation -.menu { + .site-header .site-logo { + width: 40%; } } + .site-header .site-logo h1 { + color: #fff; + padding-left: 55px; } + .site-header .hamburger { + width: 50%; + padding-right: 55px; display: -webkit-box; display: -ms-flexbox; - display: flex; } } - -.menu-item { - border-top: 1px solid #fff; } - @media (min-width: 600px) { - .menu-item { - border-top: none; + display: flex; + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; } + @media (min-width: 600px) { + .site-header .hamburger { + display: none; } } + .site-header .main-navigation { + width: 100%; } + @media (min-width: 600px) { + .site-header .main-navigation { + width: 60%; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; } } + .site-header .main-navigation .menu { list-style: none; - padding-left: 75px; } } - .menu-item a { - color: #fff; } - -.sub-menu { - background: #fff; - display: none; } - .sub-menu li { - border-top: 1px solid #14225F; } - .sub-menu li a { - color: #14225F; } + margin: 0; + padding: 0; + text-align: center; } + @media (min-width: 600px) { + .site-header .main-navigation .menu { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } } + .site-header .main-navigation .menu .menu-item { + border-top: 1px solid #fff; + padding-top: 15px; + padding-bottom: 15px; } + @media (min-width: 600px) { + .site-header .main-navigation .menu .menu-item { + border: none; } } + .site-header .main-navigation .menu .menu-item a { + font-weight: 300; + color: #fff; + font-size: 18px; } + .site-header .menu .menu-item-71 { + padding-top: 15px; } + .site-header .menu .menu-item-71 .sub-menu { + background: #fff; + list-style: none; + padding: 0; } + .site-header .menu .menu-item-71 .sub-menu .menu-item { + border-bottom: 1px solid #14225F; + padding: 16px; } + .site-header .menu .menu-item-71 .sub-menu .menu-item a { + color: #14225F; } * { -webkit-box-sizing: border-box; @@ -637,20 +656,94 @@ ol.flickity-page-dots { -o-object-fit: cover; object-fit: cover; width: 100%; - height: 100vh; } + height: 70vh; } .single-charity .charity-header .charity-logo-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; position: absolute; - border-radius: -3px; - bottom: 0; - text-align: center; - bottom: -10px; } + background: #fff; + width: 200px; + height: 200px; + border-radius: 50%; + bottom: -61px; + padding-left: 35px; + padding-right: 35px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); } .single-charity .charity-header .charity-logo-container .charity-logo { text-align: center; - width: 20%; - border-radius: 50%; } + width: 100%; } .single-charity .entry-content { - text-align: center; } + text-align: center; + margin-top: 66px; } + .single-charity .entry-content h2 { + font-size: 2em; } + .single-charity .entry-content .amount-funded p { + font-size: 42px; + margin: 0 20px 0 0; + color: #42299A; + font-family: "Montserrat Light", sans-serif; + font-weight: bold; + line-height: 60px; + letter-spacing: normal; } + .single-charity .entry-content .amount-funded .chimp-donate-form { + background: #00BEA8; + margin-top: 10px; + width: 160px; + height: 60px; + border-radius: 6px; + color: #192726; + font-weight: bold; } + .single-charity .entry-content .charity-description { + height: 137px; + width: 728px; + margin-left: auto; + margin-right: auto; + font-family: "Montserrat Light", sans-serif; + font-size: 24px; + font-weight: 300; + line-height: 33px; + text-align: center; + margin-bottom: 64px; } + .single-charity .entry-content .charity-video iframe { + height: 483.34px; + width: 728px; } + .single-charity .entry-content .main-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + width: 1240px; + margin: auto; } + .single-charity .entry-content .main-content .single-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .single-charity .entry-content .main-content .single-content .content-image { + width: 50%; } + +.single-charity .browse-charities-title { + text-align: center; + color: #14225F; + font-family: "Montserrat Light", sans-serif; + font-size: 28px; + font-weight: bold; + line-height: 31px; } +/* Main Content Section */ .footer-sidebar, .site-footer { background-color: #14225F; } From 13446c5441c5a41af894e506924c9b3ec9456ae3 Mon Sep 17 00:00:00 2001 From: lovely Date: Tue, 18 Jun 2019 13:44:18 -0700 Subject: [PATCH 2/4] Update the header navigation and charity content style --- themes/rcforward/js/counter.js | 2 +- themes/rcforward/js/hamburger.js | 7 -- themes/rcforward/sass/_charity.scss | 40 +++---- themes/rcforward/sass/_content.scss | 15 ++- themes/rcforward/sass/_hamburger.scss | 142 +++++++++++++------------ themes/rcforward/sass/_navigation.scss | 6 +- themes/rcforward/style.css | 103 +++++++++--------- 7 files changed, 156 insertions(+), 159 deletions(-) diff --git a/themes/rcforward/js/counter.js b/themes/rcforward/js/counter.js index f0fccad..e63923c 100644 --- a/themes/rcforward/js/counter.js +++ b/themes/rcforward/js/counter.js @@ -1,7 +1,7 @@ (function($) { $(function() { $('.counter').counterUp({ - delay: 10, + delay: 20, time: 2000 }); }); // end doc ready diff --git a/themes/rcforward/js/hamburger.js b/themes/rcforward/js/hamburger.js index ae63d81..7c78e6e 100644 --- a/themes/rcforward/js/hamburger.js +++ b/themes/rcforward/js/hamburger.js @@ -11,13 +11,6 @@ $('.sub-menu').slideToggle(); }); } // end if - - - - - - - }); // end doc ready })(jQuery); diff --git a/themes/rcforward/sass/_charity.scss b/themes/rcforward/sass/_charity.scss index 8f6ca06..20ab79c 100644 --- a/themes/rcforward/sass/_charity.scss +++ b/themes/rcforward/sass/_charity.scss @@ -35,12 +35,15 @@ } } .entry-content { - text-align: center; margin-top: 66px; h2 { + font-style: normal; + text-align: center; font-size: 2em; } .amount-funded { + background-color: rgba(216,216,216,0.18); + text-align: center; p { font-size: 42px; margin: 0 20px 0 0; @@ -49,19 +52,12 @@ font-weight: bold; line-height: 60px; letter-spacing: normal; - } - .chimp-donate-form { - background: $code__blue; - margin-top: 10px; - width: 160px; - height: 60px; - border-radius: 6px; - color: $grounded__green; - font-weight: bold; + font-style: normal; } } .charity-description{ height: 137px; + font-style: normal; width: 728px; margin-left: auto; margin-right: auto; @@ -73,25 +69,14 @@ margin-bottom: 64px; } .charity-video{ + text-align: center; iframe{ height: 483.34px; width: 728px; } } - .main-content{ - display:flex; - flex-direction: column; - flex-wrap: wrap; - width: 1240px; - margin: auto; - .single-content{ - display: flex; - .content-image{ - width: 50%; - } - } + - } } .browse-charities-title{ text-align: center; @@ -105,3 +90,12 @@ } /* Main Content Section */ + .single-content{ + .chimp-donate-form { + text-align: center; + display: flex; + justify-content: center; + margin: auto; + } + } + \ No newline at end of file diff --git a/themes/rcforward/sass/_content.scss b/themes/rcforward/sass/_content.scss index 339b325..45a4943 100755 --- a/themes/rcforward/sass/_content.scss +++ b/themes/rcforward/sass/_content.scss @@ -47,10 +47,6 @@ // .bypostauthor { // display: block; // } -<<<<<<< HEAD - - -======= body{ background: $credible__blue; } @@ -68,4 +64,13 @@ body{ } } ->>>>>>> 8b069ea0c6e8c872079f21e0dee54eabd44a68b4 +/* Chimp Donate Button */ + .chimp-donate-form { + background: $code__blue; + margin-top: 10px; + width: 160px; + height: 60px; + border-radius: 6px; + color: $grounded__green; + font-weight: bold; + } \ No newline at end of file diff --git a/themes/rcforward/sass/_hamburger.scss b/themes/rcforward/sass/_hamburger.scss index 69c21d6..10c9ba5 100644 --- a/themes/rcforward/sass/_hamburger.scss +++ b/themes/rcforward/sass/_hamburger.scss @@ -1,7 +1,6 @@ -// /*! -// * Hamburgers -// * @description Tasty hamburgers -// */ +/*! +* Hamburger Menu +*/ .hamburger { display: inline-block; @@ -72,110 +71,112 @@ } button { box-shadow: none; + background: none; + border:none; } } /* Header */ .site-header { + + top:0; background: #14225f; width: 100%; justify-content: space-between; display: flex; flex-wrap: wrap; margin: auto; - -.site-logo{ - width: 50%; - @include tablet{ - width: 40%; - } - h1{ - color: $white; - padding-left: 55px; + + .site-logo { + width: 50%; + @include tablet { + width: 40%; + } + h1 { + color: $white; + padding-left: 55px; + } } -} -.hamburger{ - width: 50%; - padding-right: 55px; - display: flex; + .hamburger { + width: 50%; + padding-right: 55px; + display: flex; justify-content: flex-end; - @include tablet{ + @include tablet { display: none; } -} -.main-navigation{ - width: 100%; - @include tablet{ - width: 60%; - display: inline-flex; - } - .menu { - list-style: none; - margin: 0; - padding: 0; - text-align: center; - @include tablet{ - display: flex; } - .menu-item{ - border-top: 1px solid #fff; - padding-top: 15px; + .main-navigation { + width: 100%; + @include tablet { + width: 60%; + + } + .menu { + list-style: none; + + margin: 0; + padding: 0; + text-align: center; + @include tablet { + display: flex; + } + .menu-item { + border-top: 1px solid #fff; + padding-top: 15px; padding-bottom: 15px; - @include tablet{ + @include tablet { border: none; - } - a{ - font-weight: 300; - color: $white; - font-size:18px; + a { + font-weight: 300; + color: $white; + font-size: 18px; + } } } } -} -.menu{ -.menu-item-71{ -padding-top: 15px; -.sub-menu{ - background: $white; - list-style: none; -padding: 0; -@include tablet{} - -.menu-item{ - border-bottom:1px solid $credible__blue; - padding: 16px; - - a{ - color: $credible__blue; + + .menu { + .menu-item-71 { + padding-top: 15px; + .sub-menu { + display: none; + background: $white; + list-style: none; + padding: 0; + @include tablet { + display: none; + } + + .menu-item { + border-bottom: 1px solid $credible__blue; + padding: 16px; + + a { + color: $credible__blue; + } + } + } + } } } -} -} -} -} // .menu-item-71{ // .ul{ // .li{ // background: #fff; // border-top:1px solid $credible__blue; // a{ -// color: credible__blue; +// color: credible__blue; // } // } // } // } - - // @include tablet { // display: flex; // justify-content: space-around; - - - - // a { // text-decoration: none; // h1 { @@ -207,7 +208,7 @@ padding: 0; // } // .menu-item { -// +// // @include tablet { // border-top: none; // list-style: none; @@ -229,3 +230,4 @@ padding: 0; // } // } // } + diff --git a/themes/rcforward/sass/_navigation.scss b/themes/rcforward/sass/_navigation.scss index 206b68f..522b7bd 100755 --- a/themes/rcforward/sass/_navigation.scss +++ b/themes/rcforward/sass/_navigation.scss @@ -5,9 +5,9 @@ .main-navigation { @include tablet { .menu-item-has-children { - position: relative; + position: relative; &:hover { - > ul { + > .sub-menu { position: absolute; right: 0; z-index: 99; @@ -16,4 +16,4 @@ } } } -} +} \ No newline at end of file diff --git a/themes/rcforward/style.css b/themes/rcforward/style.css index 3cd230a..f3d9c6b 100755 --- a/themes/rcforward/style.css +++ b/themes/rcforward/style.css @@ -238,13 +238,11 @@ a { @media (min-width: 600px) { .main-navigation .menu-item-has-children { position: relative; } - .main-navigation .menu-item-has-children:hover > ul { + .main-navigation .menu-item-has-children:hover > .sub-menu { position: absolute; right: 0; z-index: 99; display: block; } } -<<<<<<< HEAD -======= /*-------------------------------------------------------------- # Accessibility @@ -303,7 +301,6 @@ a { clear: both; content: ""; display: table; } ->>>>>>> d0445e16ed318c7fa56a62cc4b345c6e24de909d /*-------------------------------------------------------------- # Widgets @@ -334,6 +331,16 @@ body { .site-content { padding: 5rem; } } +/* Chimp Donate Button */ +.chimp-donate-form { + background: #00BEA8; + margin-top: 10px; + width: 160px; + height: 60px; + border-radius: 6px; + color: #192726; + font-weight: bold; } + /*-------------------------------------------------------------- # Page Templates --------------------------------------------------------------*/ @@ -425,6 +432,9 @@ body { -ms-flex-direction: row; flex-direction: row; } +/*! +* Hamburger Menu +*/ .hamburger { display: inline-block; cursor: pointer; @@ -499,10 +509,13 @@ body { background: #14225f; } .hamburger button { -webkit-box-shadow: none; - box-shadow: none; } + box-shadow: none; + background: none; + border: none; } /* Header */ .site-header { + top: 0; background: #14225f; width: 100%; -webkit-box-pack: justify; @@ -538,10 +551,7 @@ body { width: 100%; } @media (min-width: 600px) { .site-header .main-navigation { - width: 60%; - display: -webkit-inline-box; - display: -ms-inline-flexbox; - display: inline-flex; } } + width: 60%; } } .site-header .main-navigation .menu { list-style: none; margin: 0; @@ -566,9 +576,13 @@ body { .site-header .menu .menu-item-71 { padding-top: 15px; } .site-header .menu .menu-item-71 .sub-menu { + display: none; background: #fff; list-style: none; padding: 0; } + @media (min-width: 600px) { + .site-header .menu .menu-item-71 .sub-menu { + display: none; } } .site-header .menu .menu-item-71 .sub-menu .menu-item { border-bottom: 1px solid #14225F; padding: 16px; } @@ -702,28 +716,26 @@ ol.flickity-page-dots { width: 100%; } .single-charity .entry-content { - text-align: center; margin-top: 66px; } .single-charity .entry-content h2 { + font-style: normal; + text-align: center; font-size: 2em; } - .single-charity .entry-content .amount-funded p { - font-size: 42px; - margin: 0 20px 0 0; - color: #42299A; - font-family: "Montserrat Light", sans-serif; - font-weight: bold; - line-height: 60px; - letter-spacing: normal; } - .single-charity .entry-content .amount-funded .chimp-donate-form { - background: #00BEA8; - margin-top: 10px; - width: 160px; - height: 60px; - border-radius: 6px; - color: #192726; - font-weight: bold; } + .single-charity .entry-content .amount-funded { + background-color: rgba(216, 216, 216, 0.18); + text-align: center; } + .single-charity .entry-content .amount-funded p { + font-size: 42px; + margin: 0 20px 0 0; + color: #42299A; + font-family: "Montserrat Light", sans-serif; + font-weight: bold; + line-height: 60px; + letter-spacing: normal; + font-style: normal; } .single-charity .entry-content .charity-description { height: 137px; + font-style: normal; width: 728px; margin-left: auto; margin-right: auto; @@ -733,27 +745,11 @@ ol.flickity-page-dots { line-height: 33px; text-align: center; margin-bottom: 64px; } - .single-charity .entry-content .charity-video iframe { - height: 483.34px; - width: 728px; } - .single-charity .entry-content .main-content { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - width: 1240px; - margin: auto; } - .single-charity .entry-content .main-content .single-content { - display: -webkit-box; - display: -ms-flexbox; - display: flex; } - .single-charity .entry-content .main-content .single-content .content-image { - width: 50%; } + .single-charity .entry-content .charity-video { + text-align: center; } + .single-charity .entry-content .charity-video iframe { + height: 483.34px; + width: 728px; } .single-charity .browse-charities-title { text-align: center; @@ -764,9 +760,18 @@ ol.flickity-page-dots { line-height: 31px; } /* Main Content Section */ +.single-content .chimp-donate-form { + text-align: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + margin: auto; } + .footer-sidebar, .site-footer { background-color: #14225F; } -<<<<<<< HEAD .why-donate { text-align: center; } @@ -824,5 +829,3 @@ ol.flickity-page-dots { box-shadow: none; } .custom-plan .single-custom-plan button { margin-top: -1rem; } -======= ->>>>>>> d0445e16ed318c7fa56a62cc4b345c6e24de909d From 20d2ea36904a4f60ccf51012d9ba374f286538d4 Mon Sep 17 00:00:00 2001 From: verasunyy Date: Tue, 18 Jun 2019 14:35:43 -0700 Subject: [PATCH 3/4] add style to front page and carousel --- .../lib/functions/rest-api.php | 16 +++- themes/rcforward/inc/template-tags.php | 10 +-- themes/rcforward/js/charity-category.js | 5 +- themes/rcforward/js/flickity.js | 15 +++- themes/rcforward/sass/_content.scss | 2 +- themes/rcforward/sass/_flickity.scss | 12 ++- themes/rcforward/sass/_front-page.scss | 55 +++++++++++-- themes/rcforward/sass/_mixins.scss | 22 +++++ themes/rcforward/sass/_variables.scss | 3 +- themes/rcforward/single-charity.php | 18 ++--- themes/rcforward/single-fund.php | 2 +- themes/rcforward/style.css | 81 ++++++++++++++++--- .../template-parts/content-custom-plan.php | 4 +- 13 files changed, 194 insertions(+), 51 deletions(-) diff --git a/plugins/rethink-functionality/lib/functions/rest-api.php b/plugins/rethink-functionality/lib/functions/rest-api.php index cdcfa3f..e085c14 100644 --- a/plugins/rethink-functionality/lib/functions/rest-api.php +++ b/plugins/rethink-functionality/lib/functions/rest-api.php @@ -21,4 +21,18 @@ function rc_slug_register_charity() { function rc_slug_get_charity_field( $post, $field_name ) { return CFS()->get( $field_name, $post[ 'id' ] ); -} \ No newline at end of file +} + + +// function rc_post_featured_image_json( $data, $post, $context ) { +// $featured_image_id = $data->data['featured_media']; // get featured image id +// $featured_image_url = wp_get_attachment_image_src( $featured_image_id, 'large' ); // get url of the original size + +// if( $featured_image_url ) { +// $data->data['featured_image_url'] = $featured_image_url[0]; +// } + +// return $data; +// } +// add_filter( 'rest_prepare_post', 'rc_post_featured_image_json', 10, 3 ); + diff --git a/themes/rcforward/inc/template-tags.php b/themes/rcforward/inc/template-tags.php index 9b20152..9a8e537 100755 --- a/themes/rcforward/inc/template-tags.php +++ b/themes/rcforward/inc/template-tags.php @@ -2,7 +2,7 @@ /** * Custom template tags for this theme. * - * @package RED_Starter_Theme + * @package RC_Forward */ /** @@ -10,15 +10,11 @@ */ function red_starter_posted_on() { $time_string = ''; - if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) { - $time_string = ''; - } + $time_string = sprintf( $time_string, esc_attr( get_the_date( 'c' ) ), - esc_html( get_the_date() ), - esc_attr( get_the_modified_date( 'c' ) ), - esc_html( get_the_modified_date() ) + esc_html( get_the_date('F j, Y') ) ); $posted_on = sprintf( esc_html( '%s' ), $time_string ); diff --git a/themes/rcforward/js/charity-category.js b/themes/rcforward/js/charity-category.js index 4dcfe1b..7763d81 100644 --- a/themes/rcforward/js/charity-category.js +++ b/themes/rcforward/js/charity-category.js @@ -49,8 +49,9 @@ $.each(value.charity_tax, function(index, id){ console.log(taxId); if(id == taxId){ - console.log(id); - let $thumbnailLink = value._embedded["wp:featuredmedia"][0].source_url; + console.log(value); + // let $thumbnailLink = value.featured_image_url; + let $thumbnailLink = value._embedded["wp:featuredmedia"][0].media_details.sizes.medium.source_url; let $logoLink = value.charity_logo; let $title = value.title.rendered; let $description = value.charity_description.substring(75)+" [...]"; diff --git a/themes/rcforward/js/flickity.js b/themes/rcforward/js/flickity.js index 2d49da2..4ff798a 100644 --- a/themes/rcforward/js/flickity.js +++ b/themes/rcforward/js/flickity.js @@ -1,11 +1,22 @@ (function($) { $(function() { +const $carousel = $('.main-carousel'); + if($carousel.hasClass("related-charities")){ + $carousel.flickity({ + contain: true, + wrapAround: true, + setGallerySize:false, + }); + }else{ + $carousel.flickity({ - $('.main-carousel').flickity({ cellAlign: 'left', contain: true, - wrapAround: true + wrapAround: true, + setGallerySize:false, }); + } + }); // End of Doc ready })(jQuery); diff --git a/themes/rcforward/sass/_content.scss b/themes/rcforward/sass/_content.scss index 8d03fc4..d89f54a 100755 --- a/themes/rcforward/sass/_content.scss +++ b/themes/rcforward/sass/_content.scss @@ -61,6 +61,6 @@ body{ } @include desktop{ padding:5rem; - } } + diff --git a/themes/rcforward/sass/_flickity.scss b/themes/rcforward/sass/_flickity.scss index ec17675..423e2e2 100644 --- a/themes/rcforward/sass/_flickity.scss +++ b/themes/rcforward/sass/_flickity.scss @@ -11,6 +11,7 @@ .flickity-viewport { position: relative; height:270px; + // &::before { // content: ''; // left: 0; @@ -64,16 +65,13 @@ ol.flickity-page-dots{ } } .carousel-cell { - box-shadow: 0px 2px 2px $innovative__purple; + @include box-shadow(); width: 23.5%; /* half-width */ height: 230px; - margin: 0 1%; - border-radius: 10px; + margin: 0 5px; + overflow: hidden; - border:1px solid lighten($innovative__purple,50%); - &:hover{ - box-shadow: 0px 3px 5px $innovative__purple; - } + img{ max-width: 100%; max-height:100%; diff --git a/themes/rcforward/sass/_front-page.scss b/themes/rcforward/sass/_front-page.scss index 50b0e41..fdce246 100644 --- a/themes/rcforward/sass/_front-page.scss +++ b/themes/rcforward/sass/_front-page.scss @@ -3,7 +3,7 @@ text-align: center; .why-donate-content{ @include display-flex(); - padding:2rem 6rem; + padding:2rem 7rem; justify-content: space-between; img{ width:120px; @@ -28,11 +28,7 @@ height:130px; margin:0 auto; } - border:1px solid lighten($innovative__purple,50%); - box-shadow: 0px 2px 2px $innovative__purple; - &:hover{ - box-shadow: 0px 3px 5px $innovative__purple; - } + @include box-shadow(); button, a{ background:$credible__blue; padding:$button__padding; @@ -47,4 +43,49 @@ } } -} \ No newline at end of file +} + +//front page + +.home{ + text-align:center; + .entry-header{ + + } + + .choose-fund{ + padding:$content__padding; + .choose-fund-subtitle{ + font-weight:600; + } + .choose-fund-description{ + margin:0 auto; + } + + .fund{ + @include display-flex(); + margin:3rem auto; + justify-content: space-between; + .fund-entry{ + @include box-shadow(); + padding:1rem; + flex-basis:30%; + display:grid; + grid-template-columns: 1fr; + grid-template-rows:60px auto 130px 55px; + img{ + width:80px; + height:80px; + margin:0 auto; + } + a{ + @include button(); + } + } + } + + + } +} + + diff --git a/themes/rcforward/sass/_mixins.scss b/themes/rcforward/sass/_mixins.scss index f607430..ddf29fa 100755 --- a/themes/rcforward/sass/_mixins.scss +++ b/themes/rcforward/sass/_mixins.scss @@ -32,4 +32,26 @@ flex-direction: $flexDirection; justify-content: $justifyContent; align-items: $alignItems; +} + +@mixin box-shadow(){ + border-radius: 10px; + border:1px solid lighten($innovative__purple,50%); + box-shadow: 0px 2px 2px $innovative__purple; + &:hover{ + box-shadow: 0px 3px 5px $innovative__purple; + } +} + +@mixin button($background-color: $innovative__purple){ + padding:$button__padding; + background-color:$background-color; + border-radius: 7px; + width:10rem; + display: flex; + justify-content: center; + align-items: center; + color:white; + text-align: center; + margin: 0 auto; } \ No newline at end of file diff --git a/themes/rcforward/sass/_variables.scss b/themes/rcforward/sass/_variables.scss index 3ecf708..d38a483 100755 --- a/themes/rcforward/sass/_variables.scss +++ b/themes/rcforward/sass/_variables.scss @@ -39,7 +39,7 @@ $gotham__font: 'Montserrat Light', sans-serif; // RC Mixins $tablet-width: 600px; $desktop-width: 1000px; -$max-screen-size: 1240px; +$max-screen-size: 1440px; // Typography @@ -52,3 +52,4 @@ $font__line-height-pre: 1.6; //padding $button__padding: 1rem 1.5rem; +$content__padding: 2rem 6rem; diff --git a/themes/rcforward/single-charity.php b/themes/rcforward/single-charity.php index dd62c0d..b2b55bc 100644 --- a/themes/rcforward/single-charity.php +++ b/themes/rcforward/single-charity.php @@ -64,7 +64,7 @@ foreach ( $main_contents as $main_content ): $index++; ?> -
+
@@ -73,20 +73,20 @@
-

-

+

+

-

-

+

+

-

-

+

+

-

-

+

+

diff --git a/themes/rcforward/single-fund.php b/themes/rcforward/single-fund.php index 7d0d0b3..8a75064 100644 --- a/themes/rcforward/single-fund.php +++ b/themes/rcforward/single-fund.php @@ -97,7 +97,7 @@ get( 'charity_description', $the_post->ID ,array( 'format' => 'raw' )); ?> -

+

View Charity ›
diff --git a/themes/rcforward/style.css b/themes/rcforward/style.css index 8d3becc..35eb4f3 100755 --- a/themes/rcforward/style.css +++ b/themes/rcforward/style.css @@ -240,8 +240,6 @@ a { right: 0; z-index: 99; display: block; } } -<<<<<<< HEAD -======= /*-------------------------------------------------------------- # Accessibility @@ -300,7 +298,6 @@ a { clear: both; content: ""; display: table; } ->>>>>>> d0445e16ed318c7fa56a62cc4b345c6e24de909d /*-------------------------------------------------------------- # Widgets @@ -319,7 +316,7 @@ body { background: #14225F; } .site { - max-width: 1240px; + max-width: 1440px; background: white; } .site-content { @@ -588,15 +585,15 @@ ol.flickity-page-dots { background: #42299A; } .carousel-cell { + border-radius: 10px; + border: 1px solid #d7d0f2; -webkit-box-shadow: 0px 2px 2px #42299A; box-shadow: 0px 2px 2px #42299A; width: 23.5%; /* half-width */ height: 230px; - margin: 0 1%; - border-radius: 10px; - overflow: hidden; - border: 1px solid #d7d0f2; } + margin: 0 5px; + overflow: hidden; } .carousel-cell:hover { -webkit-box-shadow: 0px 3px 5px #42299A; box-shadow: 0px 3px 5px #42299A; } @@ -673,7 +670,6 @@ ol.flickity-page-dots { .footer-sidebar, .site-footer { background-color: #14225F; } -<<<<<<< HEAD .why-donate { text-align: center; } @@ -691,7 +687,7 @@ ol.flickity-page-dots { -webkit-box-align: center; -ms-flex-align: center; align-items: center; - padding: 2rem 6rem; + padding: 2rem 7rem; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @@ -711,6 +707,7 @@ ol.flickity-page-dots { display: grid; grid-template-columns: 1fr; grid-template-rows: 150px 50px auto 50px; + border-radius: 10px; border: 1px solid #d7d0f2; -webkit-box-shadow: 0px 2px 2px #42299A; box-shadow: 0px 2px 2px #42299A; } @@ -731,5 +728,65 @@ ol.flickity-page-dots { box-shadow: none; } .custom-plan .single-custom-plan button { margin-top: -1rem; } -======= ->>>>>>> d0445e16ed318c7fa56a62cc4b345c6e24de909d + +.home { + text-align: center; } + .home .choose-fund { + padding: 2rem 6rem; } + .home .choose-fund .choose-fund-subtitle { + font-weight: 600; } + .home .choose-fund .choose-fund-description { + margin: 0 auto; } + .home .choose-fund .fund { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 3rem auto; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; } + .home .choose-fund .fund .fund-entry { + border-radius: 10px; + border: 1px solid #d7d0f2; + -webkit-box-shadow: 0px 2px 2px #42299A; + box-shadow: 0px 2px 2px #42299A; + padding: 1rem; + -ms-flex-preferred-size: 30%; + flex-basis: 30%; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 60px auto 130px 55px; } + .home .choose-fund .fund .fund-entry:hover { + -webkit-box-shadow: 0px 3px 5px #42299A; + box-shadow: 0px 3px 5px #42299A; } + .home .choose-fund .fund .fund-entry img { + width: 80px; + height: 80px; + margin: 0 auto; } + .home .choose-fund .fund .fund-entry a { + padding: 1rem 1.5rem; + background-color: #42299A; + border-radius: 7px; + width: 10rem; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + color: white; + text-align: center; + margin: 0 auto; } diff --git a/themes/rcforward/template-parts/content-custom-plan.php b/themes/rcforward/template-parts/content-custom-plan.php index b30ec45..52751bf 100644 --- a/themes/rcforward/template-parts/content-custom-plan.php +++ b/themes/rcforward/template-parts/content-custom-plan.php @@ -26,12 +26,14 @@

-

+

+
Contact Us +
Date: Tue, 18 Jun 2019 14:38:42 -0700 Subject: [PATCH 4/4] Enqueu fontawesome script in the function.php --- themes/rcforward/functions.php | 3 ++- themes/rcforward/js/counter.js | 2 ++ themes/rcforward/sass/_hamburger.scss | 6 ++++++ themes/rcforward/style.css | 5 +++++ 4 files changed, 15 insertions(+), 1 deletion(-) diff --git a/themes/rcforward/functions.php b/themes/rcforward/functions.php index e0ab743..13c2c44 100755 --- a/themes/rcforward/functions.php +++ b/themes/rcforward/functions.php @@ -89,7 +89,8 @@ function red_starter_minified_css($stylesheet_uri, $stylesheet_dir_uri) function red_starter_scripts() { wp_enqueue_style('red-starter-style', get_stylesheet_uri()); - + wp_enqueue_style('rcfontawesome', 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'); + wp_enqueue_script('waypoints', 'https://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js', array('jquery')); wp_enqueue_script('counterup', 'https://cdn.jsdelivr.net/npm/counterup@1.0.2/jquery.counterup.min.js', array('jquery', 'waypoints'), '', true); diff --git a/themes/rcforward/js/counter.js b/themes/rcforward/js/counter.js index e63923c..0673649 100644 --- a/themes/rcforward/js/counter.js +++ b/themes/rcforward/js/counter.js @@ -4,6 +4,8 @@ delay: 20, time: 2000 }); + $() +$('.menu-item-has-children').append(''); }); // end doc ready })(jQuery); diff --git a/themes/rcforward/sass/_hamburger.scss b/themes/rcforward/sass/_hamburger.scss index 10c9ba5..7763d20 100644 --- a/themes/rcforward/sass/_hamburger.scss +++ b/themes/rcforward/sass/_hamburger.scss @@ -231,3 +231,9 @@ // } // } +i{ + color: #fff; + font-size: 2em; + position: absolute; + +} \ No newline at end of file diff --git a/themes/rcforward/style.css b/themes/rcforward/style.css index f3d9c6b..47de2e9 100755 --- a/themes/rcforward/style.css +++ b/themes/rcforward/style.css @@ -589,6 +589,11 @@ body { .site-header .menu .menu-item-71 .sub-menu .menu-item a { color: #14225F; } +i { + color: #fff; + font-size: 2em; + position: absolute; } + * { -webkit-box-sizing: border-box; box-sizing: border-box; }