1 files modified
2 files added
| New file |
| | |
|---|
| | | /*! |
|---|
| | | 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 ***/ |
|---|
| | |
|---|
| | | /* |
|---|
| | | Theme Name: Lynsey Theme |
|---|
| | | Theme URI: https://lynseyot.ca |
|---|
| | | Description: Jvb-theme child theme, for Lynsey. |
|---|
| | | /*! |
|---|
| | | 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{ |
|---|
| | | /* Layout */ |
|---|
| | | --narrow: min(500px, 50vw); |
|---|
| | | --maxWidth: min(768px, 65vw); |
|---|
| | | --alignWide: min(1024px, 90vw); |
|---|
| | | --alignMed: min(962px, 82.5vw); |
|---|
| | | --full: 100vw; |
|---|
| | | /* Margin */ |
|---|
| | | --mr: auto; |
|---|
| | | --ml: auto; |
|---|
| | | --mt: 1rem; |
|---|
| | | --mb: 1rem; |
|---|
| | | --setMargin: var(--mt) var(--mr) var(--mb) var(--ml); |
|---|
| | | --insetMargin: var(--mt) calc((var(--maxWidth) - var(--narrow)) / 2 + var(--mr)) var(--mb) var(--ml); |
|---|
| | | --height: 4rem; |
|---|
| | | --doubleHeight: 8rem; |
|---|
| | | --offHeight: 5rem; |
|---|
| | | --maxHeight: calc(100vh - var(--height) - var(--height)); |
|---|
| | | |
|---|
| | | --gap: .5rem; |
|---|
| | | --wrap: wrap; |
|---|
| | | --justify: center; |
|---|
| | | --align: center; |
|---|
| | | --dir: row; |
|---|
| | | /* Typography */ |
|---|
| | | --w: 1.2em; /** Icon **/ |
|---|
| | | |
|---|
| | | --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); |
|---|
| | | --hWeight: 300; |
|---|
| | | --hlight: 300; |
|---|
| | | --hBold: 700; |
|---|
| | | --bWeight: 500; |
|---|
| | | --bBold: 800; |
|---|
| | | --bLight: 300; |
|---|
| | | |
|---|
| | | /* Font sizes */ |
|---|
| | | --enormous: calc(26vh - 4rem); |
|---|
| | | --xxxlarge: clamp(2.5rem, 1.429rem + 2.857vw, 4rem); |
|---|
| | | --xxlarge: clamp(2rem, 1.286rem + 1.905vw, 3rem); |
|---|
| | | --xlarge: clamp(1.6rem, .957rem + 1.714vw, 2.5rem); |
|---|
| | | --large: clamp(1.3rem, .6rem + 1.867vw, 2rem); |
|---|
| | | --xmedium: clamp(1.4rem, .971rem + 1.143vw, 2rem); |
|---|
| | | --medium: clamp(1.1rem, .993rem + .286vw, 1.25rem); |
|---|
| | | --small: clamp(.95rem, .879rem + .19vw, 1.05rem); |
|---|
| | | --extra-small: clamp(.75rem, 1.1337rem + -1.2278vw, .059375rem); |
|---|
| | | /* 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; |
|---|
| | | --dark-0: #151515; |
|---|
| | | --dark-50: #222222; |
|---|
| | | --dark-100: #2e2e2e; |
|---|
| | | --dark-200: #3b3b3b; |
|---|
| | | --action-0: #ff0080; |
|---|
| | | --action-50: #ff2492; |
|---|
| | | --action-100: #ff47a4; |
|---|
| | | --action-200: #ff6bb5; |
|---|
| | | --secondary-0: #D69121; |
|---|
| | | --secondary-50: #ffc421; |
|---|
| | | --secondary-100: #ffcd44; |
|---|
| | | --secondary-200: #ffd768; |
|---|
| | | |
|---|
| | | --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); |
|---|
| | | --action-contrast: var(--light-0); |
|---|
| | | --secondary-contrast: var(--light-0); |
|---|
| | | --light-rgb: 239,239,239; |
|---|
| | | --dark-rgb: 21,21,21; |
|---|
| | | --action-rgb: 255,0,128; |
|---|
| | | --secondary-rgb: 252,185,0; |
|---|
| | | |
|---|
| | | --rgba-subtle: rgba(var(--c),.5); |
|---|
| | | --rgba-subtle-hover: rgba(var(--c),.1); |
|---|
| | | |
|---|
| | | --base: var(--light-0); |
|---|
| | | --base-50: var(--light-50); |
|---|
| | | --base-100: var(--light-100); |
|---|
| | | --base-200: var(--light-200); |
|---|
| | | --contrast: var(--dark-0); |
|---|
| | | --contrast-50: var(--dark-50); |
|---|
| | | --contrast-100: var(--dark-100); |
|---|
| | | --contrast-200: var(--dark-200); |
|---|
| | | --c: var(--light-rgb); |
|---|
| | | --base-rgb: var(--light-rgb); |
|---|
| | | --contrast-rgb: var(--dark-rgb); |
|---|
| | | |
|---|
| | | /* Stacking */ |
|---|
| | | --z-1: 5; |
|---|
| | | --z-2: 10; |
|---|
| | | --z-3: 15; |
|---|
| | | --z-4: 20; |
|---|
| | | --z-5: 50; |
|---|
| | | --z-6: 100; |
|---|
| | | --z-top: 999; |
|---|
| | | --zz-top: 999999; |
|---|
| | | /* Overlays */ |
|---|
| | | --rgb-light: .25; |
|---|
| | | --rgb-medium: .66; |
|---|
| | | --rgb-heavy: .85; |
|---|
| | | --overlay-light: rgba(var(--c), .25); |
|---|
| | | --overlay-medium: rgba(var(--c), .66); |
|---|
| | | --overlay-heavy: rgba(var(--c), .85); |
|---|
| | | --shimmer: rgba(var(--dark-rgb),0) 0%, |
|---|
| | | rgba(var(--dark-rgb),.05) 50%, |
|---|
| | | rgba(var(--dark-rgb),0) 100%; |
|---|
| | | /* Shadows */ |
|---|
| | | --shadow: rgba(var(--dark-rgb),.45) 0px 0px 4px; |
|---|
| | | --shadow-down: rgba(var(--dark-rgb),.45) 0 6px 5px -5px; /* Bottom */ |
|---|
| | | --shadow-right: rgba(var(--dark-rgb),.45) 6px 0 5px -5px; /* Right */ |
|---|
| | | --shadow-left: rgba(var(--dark-rgb), .45) -6px 0 5px -5px; /* Left */ |
|---|
| | | --shadow-up: rgba(var(--dark-rgb), .45) 0 -6px 5px -5px; /* Up */ |
|---|
| | | --subtle: rgba(var(--dark-rgb), .45) 0px 25px 20px -20px; |
|---|
| | | --subtleRight: rgba(var(--dark-rgb), .45) 10px 0 20px -20px; |
|---|
| | | --shadow-none: transparent 0px 0px 0px; |
|---|
| | | /* Rounding */ |
|---|
| | | --innerRadius: 4px; |
|---|
| | | --outerPadding: 1rem; |
|---|
| | | --outerRadius: calc(var(--innerRadius) + var(--outerPadding)); |
|---|
| | | /* Transitions */ |
|---|
| | | --function:cubic-bezier(.47,.24,.07,.47); |
|---|
| | | --timing: .25s; |
|---|
| | | --transition-base: var(--timing) var(--function); |
|---|
| | | --transition-color: background-color var(--transition-base), |
|---|
| | | color var(--transition-base), border var(--transition-base); |
|---|
| | | --transition-transform: transform var(--transition-base); |
|---|
| | | --transition-size: width var(--transition-base), |
|---|
| | | height var(--transition-base),max-width var(--transition-base), max-height var(--transition-base); |
|---|
| | | |
|---|
| | | --offScreen: -200vw; |
|---|
| | | |
|---|
| | | /** Icons **/ |
|---|
| | | --minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>'); |
|---|
| | | --plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>'); |
|---|
| | | --close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>'); |
|---|
| | | --chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23151515" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>'); |
|---|
| | | --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>'); |
|---|
| | | --shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>'); |
|---|
| | | --style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>'); |
|---|
| | | --map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>'); |
|---|
| | | --theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>'); |
|---|
| | | --arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>'); |
|---|
| | | --colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>'); |
|---|
| | | --linkIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23151515" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>'); |
|---|
| | | --swipeRight: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgZmlsbD0iIzAwMDAwMCIgdmlld0JveD0iMCAwIDI1NiAyNTYiPjxwYXRoIGQ9Ik0yMTIsMTQwdjM2YzAsMjQuNjYtOC4wOCw0MS4xLTguNDIsNDEuNzlhNCw0LDAsMSwxLTcuMTYtMy41OGMuMDctLjE1LDcuNTgtMTUuNTUsNy41OC0zOC4yMVYxNDBhMTYsMTYsMCwwLDAtMzIsMHY0YTQsNCwwLDAsMS04LDBWMTI0YTE2LDE2LDAsMCwwLTMyLDB2MTJhNCw0LDAsMCwxLTgsMFY2OGExNiwxNiwwLDAsMC0zMiwwVjE3NmE0LDQsMCwwLDEtNy4zOSwyLjExbC0xOC42OC0zMGEuNzUuNzUsMCwwLDEtLjA3LS4xMiwxNiwxNiwwLDAsMC0yNy43MiwxNmwyOS4zMSw1MGE0LDQsMCwwLDEtNi45LDRMMzEuMjIsMTY4YTI0LDI0LDAsMCwxLDQxLjUyLTI0LjA5TDg0LDE2MlY2OGEyNCwyNCwwLDAsMSw0OCwwdjM4LjEzYTI0LDI0LDAsMCwxLDM5Ljk0LDE2LjA2QTI0LDI0LDAsMCwxLDIxMiwxNDBabTM4LjgzLTg2LjgzLTMyLTMyYTQsNCwwLDAsMC01LjY2LDUuNjZMMjM4LjM0LDUySDE3NmE0LDQsMCwwLDAsMCw4aDYyLjM0TDIxMy4xNyw4NS4xN2E0LDQsMCwwLDAsNS42Niw1LjY2bDMyLTMyQTQsNCwwLDAsMCwyNTAuODMsNTMuMTdaIj48L3BhdGg+PC9zdmc+'); |
|---|
| | | |
|---|
| | | |
|---|
| | | --scrollbar-width: 8px; |
|---|
| | | --scrollbar-track-color: var(--base-100); |
|---|
| | | --scrollbar-thumb-color: var(--action-0); |
|---|
| | | --scrollbar-thumb-hover-color: var(--action-50); |
|---|
| | | --scrollbar-thumb-border: 2px solid var(--base-50); |
|---|
| | | --scrollbar-border-radius: 4px; |
|---|
| | | |
|---|
| | | --can-scroll: 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | 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); |
|---|
| | | --base: var(--dark-0); |
|---|
| | | --base-50: var(--dark-50); |
|---|
| | | --base-100: var(--dark-100); |
|---|
| | | --base-200: var(--dark-200); |
|---|
| | | --c: var(--dark-rgb); |
|---|
| | | --base-rgb: var(--dark-rgb); |
|---|
| | | --contrast-rgb: var(--light-rgb); |
|---|
| | | --overlay-light: rgba(var(--c), .25); |
|---|
| | | --overlay-medium: rgba(var(--c), .5); |
|---|
| | | --overlay-heavy: rgba(var(--c), .85); |
|---|
| | | --shimmer: rgba(var(--c),0) 0%, |
|---|
| | | rgba(var(--c),.05) 50%, |
|---|
| | | rgba(var(--c),0) 100%; |
|---|
| | | --shadow: rgba(var(--light-rgb),.45) 0px 0px 4px; |
|---|
| | | --shadow-down: rgba(var(--light-rgb),.45) 0 6px 5px -5px; /* Bottom */ |
|---|
| | | --shadow-right: rgba(var(--light-rgb),.45) 6px 0 5px -5px; /* Right */ |
|---|
| | | --shadow-left: rgba(var(--light-rgb), .45) -6px 0 5px -5px; /* Left */ |
|---|
| | | --shadow-up: rgba(var(--light-rgb), .45) 0 -6px 5px -5px; /* Up */ |
|---|
| | | --subtle: rgba(var(--light-rgb), .45) 0px 25px 20px -20px; |
|---|
| | | --subtleRight: rgba(var(--light-rgb), .45) 10px 0 20px -20px; |
|---|
| | | |
|---|
| | | --successBack: var(--successDark); |
|---|
| | | --successText: var(--successLight); |
|---|
| | | --warningBack: var(--warningDark); |
|---|
| | | --warningText: var(--warningLight); |
|---|
| | | --errorBack: var(--errorDark); |
|---|
| | | --errorText: var(--errorLight); |
|---|
| | | |
|---|
| | | --minus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H88a4,4,0,0,1,0-8h80A4,4,0,0,1,172,128Z"></path></svg>'); |
|---|
| | | --plus: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4Zm-40-80a4,4,0,0,1-4,4H132v36a4,4,0,0,1-8,0V132H88a4,4,0,0,1,0-8h36V88a4,4,0,0,1,8,0v36h36A4,4,0,0,1,172,128Z"></path></svg>'); |
|---|
| | | --close: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M208,36H48A12,12,0,0,0,36,48V208a12,12,0,0,0,12,12H208a12,12,0,0,0,12-12V48A12,12,0,0,0,208,36Zm4,172a4,4,0,0,1-4,4H48a4,4,0,0,1-4-4V48a4,4,0,0,1,4-4H208a4,4,0,0,1,4,4ZM162.83,98.83,133.66,128l29.17,29.17a4,4,0,0,1-5.66,5.66L128,133.66,98.83,162.83a4,4,0,0,1-5.66-5.66L122.34,128,93.17,98.83a4,4,0,0,1,5.66-5.66L128,122.34l29.17-29.17a4,4,0,1,1,5.66,5.66Z"></path></svg>'); |
|---|
| | | --chevron: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,28A100,100,0,1,0,228,128,100.11,100.11,0,0,0,128,28Zm0,192a92,92,0,1,1,92-92A92.1,92.1,0,0,1,128,220Zm42.83-110.83a4,4,0,0,1,0,5.66l-40,40a4,4,0,0,1-5.66,0l-40-40a4,4,0,0,1,5.66-5.66L128,146.34l37.17-37.17A4,4,0,0,1,170.83,109.17Z"></path></svg>'); |
|---|
| | | --details: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M210.83,98.83l-80,80a4,4,0,0,1-5.66,0l-80-80a4,4,0,0,1,5.66-5.66L128,170.34l77.17-77.17a4,4,0,1,1,5.66,5.66Z"></path></svg>'); |
|---|
| | | --shop: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M28.15,95A3.81,3.81,0,0,0,28,96v16a36,36,0,0,0,16,29.92V216a4,4,0,0,0,4,4H208a4,4,0,0,0,4-4V141.92A36,36,0,0,0,228,112V96a3.81,3.81,0,0,0-.17-1.08L213.5,44.7A12,12,0,0,0,202,36H54A12,12,0,0,0,42.5,44.7Zm22-48.08A4,4,0,0,1,54,44H202a4,4,0,0,1,3.84,2.9L218.7,92H37.3ZM100,100h56v12a28,28,0,0,1-56,0ZM36,112V100H92v12a28,28,0,0,1-41.37,24.59,4,4,0,0,0-1.31-.76A28,28,0,0,1,36,112ZM204,212H52V145.94a36,36,0,0,0,44-17.48,36,36,0,0,0,64,0,36,36,0,0,0,44,17.48Zm2.68-76.17a3.94,3.94,0,0,0-1.3.76A28,28,0,0,1,164,112V100h56v12A28,28,0,0,1,206.68,135.83Z"></path></svg>'); |
|---|
| | | --style: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M224,92H170.61l9.33-51.28a4,4,0,1,0-7.88-1.44L162.48,92H106.61l9.33-51.28a4,4,0,1,0-7.88-1.44L98.48,92H48a4,4,0,0,0,0,8H97L86.84,156H32a4,4,0,0,0,0,8H85.39l-9.33,51.28a4,4,0,0,0,3.22,4.65A3.65,3.65,0,0,0,80,220a4,4,0,0,0,3.94-3.29L93.52,164h55.87l-9.33,51.28a4,4,0,0,0,3.22,4.65,3.65,3.65,0,0,0,.72.07,4,4,0,0,0,3.94-3.29L157.52,164H208a4,4,0,0,0,0-8H159l10.19-56H224a4,4,0,0,0,0-8Zm-73.16,64H95l10.19-56H161Z"></path></svg>'); |
|---|
| | | --map: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M128,68a36,36,0,1,0,36,36A36,36,0,0,0,128,68Zm0,64a28,28,0,1,1,28-28A28,28,0,0,1,128,132Zm0-112a84.09,84.09,0,0,0-84,84c0,30.42,14.17,62.79,41,93.62a250,250,0,0,0,40.73,37.66,4,4,0,0,0,4.58,0A250,250,0,0,0,171,197.62c26.81-30.83,41-63.2,41-93.62A84.09,84.09,0,0,0,128,20Zm37.1,172.23A254.62,254.62,0,0,1,128,227a254.62,254.62,0,0,1-37.1-34.81C73.15,171.8,52,139.9,52,104a76,76,0,0,1,152,0C204,139.9,182.85,171.8,165.1,192.23Z"></path></svg>'); |
|---|
| | | --theme: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M241.72,113a11.88,11.88,0,0,0-9.73-5H212V88a12,12,0,0,0-12-12H129.33l-28.8-21.6a12.05,12.05,0,0,0-7.2-2.4H40A12,12,0,0,0,28,64V208a4,4,0,0,0,4,4H211.09a4,4,0,0,0,3.79-2.74l28.49-85.47A11.86,11.86,0,0,0,241.72,113ZM40,60H93.33a4,4,0,0,1,2.4.8L125.6,83.2a4,4,0,0,0,2.4.8h72a4,4,0,0,1,4,4v20H69.76a12,12,0,0,0-11.38,8.21L36,183.35V64A4,4,0,0,1,40,60Zm195.78,61.26L208.2,204H37.55L66,118.74A4,4,0,0,1,69.76,116H232a4,4,0,0,1,3.79,5.26Z"></path></svg>'); |
|---|
| | | --arrow-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,192a4,4,0,0,1-4,4H88a4,4,0,0,1-4-4V57.66L42.83,98.83a4,4,0,0,1-5.66-5.66l48-48a4,4,0,0,1,5.66,0l48,48a4,4,0,0,1-5.66,5.66L92,57.66V188H232A4,4,0,0,1,236,192Z"></path></svg>'); |
|---|
| | | --colour: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M174,47.75a254.19,254.19,0,0,0-41.45-38.3,8,8,0,0,0-9.18,0A254.19,254.19,0,0,0,82,47.75C54.51,79.32,40,112.6,40,144a88,88,0,0,0,176,0C216,112.6,201.49,79.32,174,47.75Zm9.85,105.59a57.6,57.6,0,0,1-46.56,46.55A8.75,8.75,0,0,1,136,200a8,8,0,0,1-1.32-15.89c16.57-2.79,30.63-16.85,33.44-33.45a8,8,0,0,1,15.78,2.68Z"></path></svg>'); |
|---|
| | | --linkIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="%23F9F9F9" viewBox="0 0 256 256"><path d="M236,88.12a50.44,50.44,0,0,1-14.81,34.31l-34.75,34.74A50.33,50.33,0,0,1,150.62,172h-.05A50.63,50.63,0,0,1,100,120a4,4,0,0,1,4-3.89h.11a4,4,0,0,1,3.89,4.11A42.64,42.64,0,0,0,150.58,164h0a42.32,42.32,0,0,0,30.14-12.49l34.75-34.74a42.63,42.63,0,1,0-60.29-60.28l-11,11a4,4,0,0,1-5.66-5.65l11-11A50.64,50.64,0,0,1,236,88.12ZM111.78,188.49l-11,11A42.33,42.33,0,0,1,70.6,212h0a42.63,42.63,0,0,1-30.11-72.77l34.75-34.74A42.63,42.63,0,0,1,148,135.82a4,4,0,0,0,8,.23A50.64,50.64,0,0,0,69.55,98.83L34.8,133.57A50.63,50.63,0,0,0,70.56,220h0a50.33,50.33,0,0,0,35.81-14.83l11-11a4,4,0,1,0-5.65-5.66Z"></path></svg>'); |
|---|
| | | } |
|---|
| | | /*** FONTS START **/ |
|---|
| | | /** Download your Fonts from: https://gwfh.mranftl.com/ |
|---|
| | | use ./assets/fonts/ as a base |
|---|
| | | **/ |
|---|
| | | /*** FONTS END ***/ |
|---|
| | | !*/:root{--filter:grayscale(.3) sepia(.4);--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;--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)} |
|---|
| New file |
| | |
|---|
| | | { |
|---|
| | | "$schema": "https://schemas.wp.org/trunk/theme.json", |
|---|
| | | "version":3, |
|---|
| | | "settings": { |
|---|
| | | "appearanceTools": true, |
|---|
| | | "layout": { |
|---|
| | | "contentSize": "768px", |
|---|
| | | "wideSize": "1100px" |
|---|
| | | }, |
|---|
| | | "color": { |
|---|
| | | "defaultGradients": false, |
|---|
| | | "palette": [ |
|---|
| | | { |
|---|
| | | "slug": "contrast", |
|---|
| | | "color": "#151515", |
|---|
| | | "name": "Darkest" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "contrast-50", |
|---|
| | | "color": "#222222", |
|---|
| | | "name": "Darker" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "contrast-100", |
|---|
| | | "color": "#2e2e2e", |
|---|
| | | "name": "Dark" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "contrast-200", |
|---|
| | | "color": "#3b3b3b", |
|---|
| | | "name": "Dark" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "base", |
|---|
| | | "color": "#efefef", |
|---|
| | | "name": "Lightest" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "base-50", |
|---|
| | | "color": "#e2e2e2", |
|---|
| | | "name": "Lighterer" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "base-100", |
|---|
| | | "color": "#d5d5d5", |
|---|
| | | "name": "Lighter" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "base-200", |
|---|
| | | "color": "#c9c9c9", |
|---|
| | | "name": "Light" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "action-0", |
|---|
| | | "color": "#ff0080", |
|---|
| | | "name": "Action" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "action-50", |
|---|
| | | "color": "#ff2492", |
|---|
| | | "name": "Action Light" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "action-100", |
|---|
| | | "color": "#ff47a4", |
|---|
| | | "name": "Action Lighter" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "action-200", |
|---|
| | | "color": "#ff6bb5", |
|---|
| | | "name": "Action Lightest" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "secondary-0", |
|---|
| | | "color": "#D69121", |
|---|
| | | "name": "Secondary" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "secondary-50", |
|---|
| | | "color": "#ffc421", |
|---|
| | | "name": "Secondary Light" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "secondary-100", |
|---|
| | | "color": "#ffcd44", |
|---|
| | | "name": "Secondary Lighter" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | "slug": "secondary-200", |
|---|
| | | "color": "#ffd768", |
|---|
| | | "name": "Secondary Lightest" |
|---|
| | | } |
|---|
| | | |
|---|
| | | ] |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
