"I love Tristan Owen - Web Developer"

2022-05-14 21:11:46

AboutProjectsContactHey! I’m @tristanowen, a web developer currently working from Cape Town, South Africa. I’m building FrontKit, no-code templates and starter kits and DiviWP — Beautifully designed layouts and sections hand-crafted for the Divi WordPress theme.I’m a Makerpad Advisor helping to support the Makerpad community throughout their no-code journey.Read more about me and my projects.© 2022 Follow @tristanowen on Twitter /***Optin Form styles for.diviwp-optin-form-white-inputThe use of !important is used because of inherited styles and specificity issues.***/.et-db #et-boc .et-l .diviwp-optin-form-white-input.et_pb_subscribe .et_pb_newsletter_fields > p { -webkit-box-flex: 1; -ms-flex: auto; flex: auto;-ms-flex-positive: 1; flex-grow: 1 !important;}.et-db #et-boc .et-l .diviwp-optin-form-white-input.et_pb_subscribe .et_pb_newsletter_fields p.et_pb_newsletter_field {margin-right: 0%;}/* for the input and submit button to be side-by-side and always be the same height, we have to set the padding top and bottom to 0px and use flexbox */.et-db #et-boc .et-l .diviwp-optin-form-white-input.et_pb_subscribe .et_pb_newsletter_button.et_pb_button,.et-db #et-boc .et-l .diviwp-optin-form-white-input .et_pb_newsletter_form .input,.et-db #et-boc .et-l .diviwp-optin-form-white-input .et_pb_newsletter_form input[type="text"],.et-db #et-boc .et-l .diviwp-optin-form-white-input .et_pb_newsletter_form p.et_pb_newsletter_field input[type="text"] {padding-top: 0px;padding-bottom: 0px;}/* */.et-db #et-boc .et-l .diviwp-optin-form-white-input.et_pb_subscribe .et_pb_newsletter_button.et_pb_button {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; /* justify along horizontal main axis */-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* justify along vertical cross-axis */-webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: 50px;}/* CONFIRMATION SUCCESS MESSAGE STYLES *//* You can uncomment or delete this if you prefer to retain your own confirmation messages styles */.et_pb_newsletter_success {/* green box with dark green text draws attention and informs the user of success */border-radius: 4px;border: 1px solid #bbdaaf; background-color: #e5fadc; padding: 15px 15px 15px 15px; margin-bottom: 10px; margin-top: 10px;}.et_pb_newsletter_success h2 {color: #4d5f46!important;font-size: 16px;padding-bottom: 0px;}/* END CONFIRMATION MESSAGE *//**** MEDIA QUERIES ****//* Tablets in landscape mode (981-1100px) */@media only screen and ( min-width: 981px ) and ( max-width: 1100px ) {}/* Desktops/tablets in landscape mode (801-979px) */@media only screen and ( min-width: 800px ) and ( max-width: 980px ) {/* this fixes the subscribe button height growing larger than the input.* for specificity reasons we have to target the body page-container and section classes before our optin class */.et-db #et-boc .et-l .diviwp-optin-form-white-input.et_pb_subscribe .et_pb_newsletter_fields a.et_pb_newsletter_button {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; /* justify along horizontal main axis */-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* justify along vertical cross-axis */-webkit-box-align: center; -ms-flex-align: center; align-items: center;padding: 0%!important;min-height:60px;}}/* Tablets in portrait mode (768-980px) */@media only screen and ( min-width: 768px ) and ( max-width: 980px ) { /* kep input field inlin with submit button */ .et-db #et-boc .et-l .diviwp-optin-form-white-input.et_pb_subscribe .et_pb_newsletter_fields { display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; } /* */.et-db #et-boc .et-l .diviwp-optin-form-white-input.et_pb_subscribe .et_pb_newsletter_button.et_pb_button { min-height: 60px;}}/* Smartphones in landscape mode (480-768px) */@media only screen and ( min-width: 480px ) and ( max-width: 767px ) { /* this fixes the subscribe button height growing larger than the input.* for specificity reasons we have to target the body page-container and section classes before our optin class */.et-db #et-boc .et-l .diviwp-optin-form-white-input.et_pb_subscribe .et_pb_newsletter_fields a.et_pb_newsletter_button.et_pb_button {display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex; /* justify along horizontal main axis */-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /* justify along vertical cross-axis */-webkit-box-align: center; -ms-flex-align: center; align-items: center;padding: 0%!important;min-height: 60px;border-radius: 0px 4px 4px 0px!important;}.et-db #et-boc .et-l .diviwp-optin-form-white-input.et_pb_subscribe .et_pb_newsletter_fields input {border-radius: 4px 0px 0px 4px!important;}}/* Smartphones in portrait mode (0-479px) */@media only screen and ( max-width: 479px ) {/* stack input field on top of submit button */.et-db #et-boc .et-l .diviwp-optin-form-white-input.et_pb_subscribe .et_pb_newsletter_fields {display: block;}/* */.et-db #et-boc .et-l .diviwp-optin-form-white-input.et_pb_subscribe .et_pb_newsletter_button.et_pb_button { min-height: 60px;}}/*CSS Styles for diviwp-footer-9Refer to the documentation for full instructions: https://docs.diviwp.com*//***** MENU MODULES ******/.diviwp-footer-9 .diviwp-footer-menu .et_pb_menu__menu > nav > ul {display: block!important;width: 100%;}.diviwp-footer-9 .diviwp-footer-menu .et_pb_menu__menu {display: block!important;width: 100%;}/* make list items fullwidth */.diviwp-footer-9 .diviwp-footer-menu ul.et-menu li {width:100%;} /* hide the mobile hamburger menu */.diviwp-footer-9 .diviwp-footer-menu .et_mobile_nav_menu {display: none !important;}/* hide the mobile hamburger and nowrap the menu items when using horizontal class */.diviwp-footer-9 .diviwp-footer-menu-horizontal .et_mobile_nav_menu {display: none !important;}.diviwp-footer-9 .diviwp-footer-menu-horizontal .et_pb_menu__menu {display: block!important;}.diviwp-footer-9 .diviwp-footer-menu-horizontal .et_pb_menu__menu > nav > ul { -ms-flex-wrap:nowrap; flex-wrap:nowrap;}/***** END MENU MODULES ******//***** PILL STYLES ******/.diviwp-footer-9 .diviwp-menu-pill-right { position: relative; top: 0px; margin-left: 0px; margin-bottom: 13px; background-color: #87DBAE; color: #ffffff; padding: 1px 4px; border-radius: 3px; font-weight: 800; font-size: 10px;}.diviwp-footer-9 .diviwp-menu-pill-top {position: absolute; margin-left: 0p; top: -14px; margin-bottom: 0px; color: #ffffff; font-weight: 800; background-color: #87DBAE; padding: 1px 4px; line-height: 12px; border-radius: 3px; font-size: 9px;}.diviwp-footer-9 .diviwp-menu-pill-bottom { position: relative; margin-left: 0px; top: 0px; margin-bottom: 13px; color: #ffffff; font-weight: 800; background-color: #87DBAE; padding: 1px 4px; border-radius: 3px; font-size: 10px;}/* Updated / orange version */.diviwp-footer-9 .diviwp-menu-pill-right-orange { position: relative; top: 0px; margin-left: 0px; margin-bottom: 13px; background-color: #c2830e; color: #fff; padding: 1px 4px; border-radius: 3px; font-weight: 800; font-size: 10px;}/***** END PILL STYLES ******//***** RESPONSIVE MEDIA QUERIES *****//*** Responsive Styles Large Desktop And Above ***/@media all and (min-width: 1405px) {}/*** Responsive Styles Standard Desktop Only ***/@media all and (min-width: 1100px) and (max-width: 1405px) {}/*** Responsive Styles Tablet And Below ***/@media all and (max-width: 980px) {}/*** Responsive Styles Tablet Only ***/@media all and (min-width: 768px) and (max-width: 980px) {}/*** Responsive Styles Smartphone Only ***/@media all and (max-width: 767px) {/* stop footer menu module from collapsing */.diviwp-footer-9 .diviwp-footer-menu .et_pb_menu__menu > nav > ul {display: block!important;width: 100%;}.diviwp-footer-9 .diviwp-footer-menu .et_pb_menu__menu {display: block!important;width: 100%;}/* make list items fullwidth */.diviwp-footer-9 .diviwp-footer-menu ul.et-menu li {width: 100%;}.diviwp-footer-9 .diviwp-footer-menu .et_pb_menu__wrap {-webkit-box-pack: left; -ms-flex-pack: left; justify-content: left;}}/*** Responsive Styles Smartphone Portrait ***/@media all and (max-width: 479px) {/* stop footer menu module from collapsing */.diviwp-footer-9 .diviwp-footer-menu .et_pb_menu__menu > nav > ul {display: block!important;width: 100%;}.diviwp-footer-9 .diviwp-footer-menu .et_pb_menu__menu {display: block!important;width: 100%;}/* make list items fullwidth */.diviwp-footer-9 .diviwp-footer ul.et-menu li {width: 100%;}.diviwp-footer-9 .diviwp-footer-menu .et_pb_menu__wrap {-webkit-box-pack: left; -ms-flex-pack: left; justify-content: left;}/* don't display the mobile hamburger menu */.diviwp-footer-9 .diviwp-footer-menu .et_mobile_nav_menu {display: none;}/* for horizontal menu, we want it to wrap */.diviwp-footer-9 .diviwp-footer-menu-horizontal .et_pb_menu__menu > nav > ul {-ms-flex-wrap:wrap;flex-wrap:wrap;}} /* end mobile media query *//***** END RESPONSIVE MEDIA QUERIES *****/