/*!
|
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: 'Josefin Sans', var(--font-base);
|
--body: 'Open Sans', var(--font-base);
|
--fw-h: 300;
|
--fw-h-light: 300;
|
--fw-h-bold: 700;
|
--fw-b: 500;
|
--fw-b-bold: 800;
|
--fw-b-light: 300;
|
|
/* 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: #efefef;
|
--light-50: #e2e2e2;
|
--light-100: #d5d5d5;
|
--light-200: #c9c9c9;
|
--light-rgb: 239,239,239;
|
|
--dark-0: #151515;
|
--dark-50: #222222;
|
--dark-100: #2e2e2e;
|
--dark-200: #3b3b3b;
|
--dark-rgb: 21,21,21;
|
|
--action-0: #ff0080;
|
--action-50: #ff2492;
|
--action-100: #ff47a4;
|
--action-200: #ff6bb5;
|
--action-rgb: 255,0,128;
|
--action-contrast: var(--light-0);
|
|
--secondary-0: #D69121;
|
--secondary-50: #ffc421;
|
--secondary-100: #ffcd44;
|
--secondary-200: #ffd768;
|
--secondary-rgb: 252,185,0;
|
--secondary-contrast: var(--light-0);
|
|
--success: #20D64E;
|
--successLight: #DBFAE3;
|
--successDark: #05230D;
|
--successBack: var(--successLight);
|
--successText: var(--successDark);
|
--warning: #D69121;
|
--warningLight: #F6E5CB;
|
--warningDark: #231806;
|
--warningBack: var(--warningLight);
|
--warningText: var(--warningDark);
|
--error: #CF1616;
|
--errorLight: #F9C8C8;
|
--errorDark: #4A0808;
|
--errorBack: var(--errorLight);
|
--errorText: var(--errorDark);
|
|
--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: #db006e;
|
--action-100: #b8005c;
|
--action-200: #94004a;
|
--secondary-50: #d89f00;
|
--secondary-100: #b58500;
|
--secondary-200: #916a00;
|
|
--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);
|
}
|
/*** FONTS START **/
|
/** Download your Fonts from: https://gwfh.mranftl.com/
|
use ./assets/fonts/ as a base
|
**/
|
/*** FONTS END ***/
|
