/*!
|
Theme Name: Jake Van Extension
|
Theme URI: https://jakevan.ca
|
Description: Jvb-theme child theme, for Jake.
|
Author: Jake
|
Author URI: https://jakevan.ca/
|
Template: jvb-theme
|
Version: 0.1.0
|
!*/
|
:root{
|
--filter: grayscale(.3) sepia(.4);
|
|
/** Download your Fonts from: https://gwfh.mranftl.com/ **/
|
--font-base: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
--heading: 'Open Sans', var(--font-base);
|
--body: 'Montserrat', var(--font-base);
|
--fw-h: 900;
|
--fw-h-light: 400;
|
--fw-h-bold: 800;
|
--fw-b: 400;
|
--fw-b-bold: 900;
|
--fw-b-light: 200;
|
|
/* Colours
|
For best results, generate colours from base colours using: https://uicolors.app/generate/
|
or sass darken/lighten by 5%: http://scg.ar-ch.org/
|
*/
|
--light-0: #ededf4;
|
--light-50: #e3e3ee;
|
--light-100: #dadae8;
|
--light-200: #d1d1e3;
|
--light-rgb: 237,237,244;
|
|
--dark-0: #2a2b2a;
|
--dark-50: #2f302f;
|
--dark-100: #393a39;
|
--dark-200: #3e403e;
|
--dark-rgb: 42,43,42;
|
|
--action-0: #ef767a;
|
--action-50: #f28d90;
|
--action-100: #f4a4a6;
|
--action-200: #f7bbbd;
|
--action-rgb: 239,118,122;
|
--action-contrast: var(--light-0);
|
|
--secondary-0: #329dcb;
|
--secondary-50: #5ab1d6;
|
--secondary-100: #83c4e0;
|
--secondary-200: #acd8ea;
|
--secondary-rgb: 50,157,203;
|
--secondary-contrast: var(--light-0);
|
|
--success: #22C55E;
|
--successLight: #d4edda;
|
--successDark: #155724;
|
--successBack: var(--successLight);
|
--successText: var(--successDark);
|
--warning: #E8A737;
|
--warningLight: #F6E5CB;
|
--warningDark: #231806;
|
--warningBack: var(--warningLight);
|
--warningText: var(--warningDark);
|
--error: #EF4444;
|
--errorLight: #f8d7da;
|
--errorDark: #721c24;
|
--errorBack: var(--errorLight);
|
--errorText: var(--errorDark);
|
|
|
--red-0: #ef767a;
|
--red-50: #ec5f64;
|
--red-100: #ea484e;
|
--red-200: #e73238;
|
--red-rgb: 239,118,122;
|
|
--orange-0: #ef9e76;
|
--orange-50: #f2ae8d;
|
--orange-100: #f4bea4;
|
--orange-200: #f7cfbb;
|
--orange-rgb: 239,158,118;
|
|
--yellow-0: #E3BE39;
|
--yellow-50: #e9cd66;
|
--yellow-100: #f0db92;
|
--yellow-200: #f6eabf;
|
--yellow-rgb: 227,190,57;
|
|
--green-0: #32cb82;
|
--green-50: #5ad69b;
|
--green-100: #83e0b4;
|
--green-200: #aceacc;
|
--green-rgb: 50,203,130;
|
|
--blue-0: #329dcb;
|
--blue-50: #5ab1d6;
|
--blue-100: #83c4e0;
|
--blue-200: #acd8ea;
|
--blue-rgb: 50,157,203;
|
|
--purple-0: #ba76ef;
|
--purple-50: #c58df2;
|
--purple-100: #d1a4f4;
|
--purple-200: #dcbbf7;
|
--purple-rgb: 186,118,239;
|
|
--base: var(--light-0);
|
--base-50: var(--light-50);
|
--base-100: var(--light-100);
|
--base-200: var(--light-200);
|
--base-rgb: var(--light-rgb);
|
|
--contrast: var(--dark-0);
|
--contrast-50: var(--dark-50);
|
--contrast-100: var(--dark-100);
|
--contrast-200: var(--dark-200);
|
--contrast-rgb: var(--dark-rgb);
|
}
|
|
body:has(#theme-switcher:checked){
|
--action-50: #ec5f64;
|
--action-100: #ea484e;
|
--action-200: #e73238;
|
|
--secondary-50: #287da2;
|
--secondary-100: #1e5e79;
|
--secondary-200: #143e50;
|
|
--contrast: var(--light-0);
|
--contrast-50: var(--light-50);
|
--contrast-100: var(--light-100);
|
--contrast-200: var(--light-200);
|
--contrast-rgb: var(--light-rgb);
|
|
--base: var(--dark-0);
|
--base-50: var(--dark-50);
|
--base-100: var(--dark-100);
|
--base-200: var(--dark-200);
|
--base-rgb: var(--dark-rgb);
|
|
--successBack: var(--successDark);
|
--successText: var(--successLight);
|
--warningBack: var(--warningDark);
|
--warningText: var(--warningLight);
|
--errorBack: var(--errorDark);
|
--errorText: var(--errorLight);
|
|
--red-50: #ec5f64;
|
--red-100: #ea484e;
|
--red-200: #e73238;
|
|
--orange-50: #ec8e5f;
|
--orange-100: #ea7e48;
|
--orange-200: #e76e32;
|
|
--yellow-50: #cca61d;
|
--yellow-100: #9f8217;
|
--yellow-200: #735d10;
|
|
--green-50: #28a268;
|
--green-100: #1e794e;
|
--green-200: #145033;
|
|
--blue-50: #287da2;
|
--blue-100: #1e5e79;
|
--blue-200: #143e50;
|
|
--purple-50: #a348ea;
|
--purple-100: #8c1be4;
|
--purple-200: #7015b7;
|
}
|
/*** FONTS START **/
|
/** Download your Fonts from: https://gwfh.mranftl.com/
|
use ./assets/fonts/ as a base
|
**/
|
/* open-sans-regular - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: normal;
|
font-weight: 400;
|
src: url('./assets/fonts/open-sans-v44-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: italic;
|
font-weight: 400;
|
src: url('./assets/fonts/open-sans-v44-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-800 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: normal;
|
font-weight: 800;
|
src: url('./assets/fonts/open-sans-v44-latin-800.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-800.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* open-sans-800italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Open Sans';
|
font-style: italic;
|
font-weight: 800;
|
src: url('./assets/fonts/open-sans-v44-latin-800italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/open-sans-v44-latin-800italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
|
/* montserrat-200 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: normal;
|
font-weight: 200;
|
src: url('./assets/fonts/montserrat-v31-latin-200.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-200.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-200italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: italic;
|
font-weight: 200;
|
src: url('./assets/fonts/montserrat-v31-latin-200italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-200italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-regular - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: normal;
|
font-weight: 400;
|
src: url('./assets/fonts/montserrat-v31-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: italic;
|
font-weight: 400;
|
src: url('./assets/fonts/montserrat-v31-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-900 - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: normal;
|
font-weight: 900;
|
src: url('./assets/fonts/montserrat-v31-latin-900.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-900.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/* montserrat-900italic - latin */
|
@font-face {
|
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
|
font-family: 'Montserrat';
|
font-style: italic;
|
font-weight: 900;
|
src: url('./assets/fonts/montserrat-v31-latin-900italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
|
url('./assets/fonts/montserrat-v31-latin-900italic.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
|
}
|
/*** FONTS END ***/
|
